This post by POV Hackathon 5 participant Olivia Koski originally appeared at Creativist.

The Vision

A few years ago, Christopher Allen, director of a collaborative arts space in Williamsburg called UnionDocs, saw a movie made in 1984 called Los Sures. Directed by Diego Echeverria, it told the stories of several residents of the neighbhorhood during a time when the area looked a lot different.

Taking a 30 year-old movie as its foundation, Allen launched the “Living Los Sures” project, an exploration of the southside of Williamsburg today. UnionDocs has been home to dozens of storytellers who have contributed to the story of the changing southside. How do you tell the story of a neighborhood, then and now, when it contains infinite numbers of stories?

That was the question that Christopher Allen and Alison Kobayashi of UnionDocs brought to the POV Hackathon.

They wanted to make an app.

In one weekend.

That’s where Creatavist came in. Even though I’d never built an app before, I knew it was possible with Creatavist. But I needed some help. So I recruited one of our developers, Oliver Budiardjo, to participate. There was just one problem. He was an Android developer, and we wanted to make an iOS app.

The Challenge

You Are Here

We had good reason for wanting to make an iOS app. Jefferson Rabb, CTO and creative director for Atavist, had just implemented a new test feature in Creatavist – the ability to track a user’s location within the iOS app.

It’s a feature that our Android developer Oliver could build for Android – but not in a weekend, when we also had other features we wanted to build for the prototype app. So we decided to take the new “whereami” feature Jeff made for iOS and build a new template around it.

With Creatavist you don’t have to be an iOS developer to customize interaction for mobile apps. It’s possible to customize mobile apps with Creatavist using only HTML, CSS and Javascript. Those are programming languages developers use to make interactive websites. But we wanted to see if we could build a mobile app without knowledge of objective-C, the primary programming language for iOS. With Creatavist, you can turn a Web developer into an App developer with no need to ever touch objective-C.

At the beginning of the weekend, our app looked like this:

LatitudeLongitude-300x533

It showed your latitude and longitude as you walked. This was cool, but not anything Google Maps couldn’t do. The difference was this location information was now connected to the Creatavist storytelling platform.

Preparation

Getting an iOS app up and running for testing for the very first time can feel a little intimidating. Fortunately, we’ve thoroughly documented the process in our support portal.

The steps to getting set up with Apple are here. An important thing to note is that you have to sign-up for an iOS Developer account, which costs $99/year. Each device that you want to test your app on must be “provisioned,” which means given permission to run your test app. After you’ve taken the necessary steps through the developer portal, you should have two files:

  1. Ad Hoc Provisioning Profile
  2. Distribution Certificate

Once you have them, you’re ready to dive into the “Apps” area of Creatavist.

My projectsapps-282x357

Step 1. Name Your App

You can name it whatever you want, and change it later. We called our app “Living Los Sures.” Give it the App ID you chose in the Apple Developer portal.

MakeBuildLivingLosSures-1023x446

Step 2. Upload Your Ad Hoc Provisioning Profile and Distribution Certificate

Scroll down to the “Certificates and Provisioning Profiles” area. Upload the files you made in the Apple developer portal. Remember to hit “Save.” For now, we only need the Ad Hoc provisioning profile and Distribution certificate. When you submit your app to the App store, you will need the App Store provisioning profile. If you want to send push notifications (APNS), you will also need a production certificate for those.

certificatesandprovisioningprofiles-500x289

Step 3. Schedule A Build

When you click “Schedule iOS” build, a computer at Atavist Headquarters automatically compiles all of the files needed to run your app. Once the build is complete, you will get an email with a link to the prototype app. When you click on this link from your iOS device, it will launch the installation of your app. You can login to creatavist.com from your iOS device using Safari, and Click “Install” from your Apps menu at any time to re-insall your app. If you are having trouble, it’s probably because your device is not properly provisioned.

makebuild-398x260

wireless-152x142

That’s it! Because you haven’t added any content or customized your storefront yet, your app will probably look something like this:

yourappnamehere-200x377

The Team

Now that we had an iOS test app that could talk to the device’s location services, we were ready to meet the rest of the team. The Hackathon was held at the Center for Social Innovation in Manhattan. The team members were: Christopher Allen, Alison Kobayashi, Oliver Budiardjo, Olivia Koski, Patricia Zablah, Ilana Strauss.

The 'Both Here and There' team at work at POV Hackathon 5

From left: Alison Kobayashi, Patricia Zablah and Oliver Budiardjo working away at the Center for Social Innovation

After a brief pep talk from Adnaan Wasey, director of POV digital, and an esteemed group of mentors, we got to work. Christopher articulated the “dream app” he and Alison had envisioned over the previous week. They wanted an app that detects your location as you walk down the street. Accessing your camera, you would see a live view of the the sidewalk or the buildings around you, with other content streaming by as you walk. Quotes from people from the neighborhood, or pictures from the past appear as you navigate the neighborhood. They had the idea of being able to overlay archival images with a live view of the street, allowing the viewer to take a picture and then share it with others who have the app. Patricia expressed concern about safety, and whether we want to encourage people to be looking down at their phones. We spent a lot of time going back-and-forth about whether the app should only work in South Williamsburg, or if the location services could be meaningful in other places. We settled on the idea of a finite journey of a few blocks, 10 minutes, that you could experience anywhere in the world. Your location would still matter, but it would be your relative location rather than your absolute location. That morning we discussed many features that simply didn’t exist yet:

  • Access to the iOS camera
  • Access to the GPS data of the user
  • Ability to overlay live camera view with archival photo
  • User’s location correlated to a database of geo-tagged photographs
  • Ability to scroll text as location changes
  • Ability to overlay live camera view with scrolling text
  • Ability to take a picture within the app
  • Ability to access email function to email photo

We had our work cut out for us, and time was running out.

The Process

We had to set up a workflow quickly since time was limited. Patricia had the key HTML/CSS/Javascript skills that we needed to build a new custom template in Creatavist. But she’d never used Creatavist before. Oliver knew the ins and outs of Creatavist, but had less experience with HTML, CSS and Javascript. While Oliver got Patricia up to speed on Creatavist, I worked with Christopher, Alison and Ilana on media and the script. We knew we would not be able to access the iOS camera within our app. Because that couldn’t be our background, we needed an alternative. Ilana suggested Google Maps.

streetview-1023x665

Street View had almost the right perspective – except we were designing a tour for someone walking down a sidewalk, not driving down the street. Also, the image is visually cluttered. We wanted something simple, and something representative of the neighborhood. We settled on the sidewalk.

Christopher took lead on the script, which he was building from transcripts of audio recordings of people who lived in South Williamsburg during the filming of “Los Sures.” Alison worked on the visuals for found objects the user might come across while walking down the block.

Found objects in 'Both Here and There'

Making The Chapter Template

Our technical challenge was to navigate through the story as a person walks down the street. We had the user’s location information, but we needed to build a feature that did something meaningful with that information. We needed to build a chapter template in Creatavist.

The Chapter is one of the key building blocks of a Creatavist story. Chapter are simply containers for content. A chapter can contain scrollable text, an image, multiple images, audio clips, music, a map, or a template of your choosing.

Templates allow you to customize a chapter to make it behave how ever you want. Templates are built out of a combination of HTML, CSS, Javascript and custom fields that define the content type and what the content does. The benefit of using a template is that once the code is complete, someone without any knowledge of HTML, CSS or Javascript can use it with a totally new set of media.

A standard Creatavist chapter allows you to add a wide variety of media to your story. View an image of the standard Creatavist chapter »

A Template chapter allows you to fully customize the user experience. View an image of the template chapter»

Click on “Templates” to access the template builder. This is the place where a developer enters the CSS, Javascript, HTML and custom fields that define the template.

The template area shows you all of the templates that you have created. The templates that you build are yours. They don’t belong to anyone else, or to Creatavist. No one has access to them but you.

The image shows several test templates Oliver and Patricia created during the POV Hackathon.

Templates allow you to enter your own HTML, Javascript, and CSS. View an image of the template menu »

Code editors allow you to add code or make changes to your template:

  • HTML: This HTML defines the layout of the media elements as they slide.
  • Javascript: The Javascript controls the transitions of the media elements, and handles communication with “ATCommander,” which is how the Creatavist system communicates with native iOS features.
  • CSS: CSS controls the look of the media elements. Custom code can be added to optimize display for various devices.
  • Fields: Fields is custom code unique to Creatavist. Fields allow media makers to add media to a template. A complete guide to them can be found here. Fields mediate communication between media maker and technologist. This is the code that generates the spaces for media makers to upload media that will be used in a template.

Using The Chapter Template

Once the software developer(s) has saved a new template, it is immediately available to the media maker to use in their Creatavist project. Simply select the “template” chapter in your story navigator.

You can then select the template from a pull down menu.

The title for the template Oliver and Patricia made is called “Oliver Test.” It has a field to upload a sound file, which serves as an audio trigger to notify the reader that content has changed (so the user doesn’t have to be looking down constantly). The “button” field initiates what we call the “move and scroll” (M&S) or “stroll to scroll” feature. In this case the button is an animated .gif that Alison designed. The image field – im1 – is where you upload an image. There are 14 image fields. As the user walks the images change in sequence.

Custom fields defined by the developers allow the user to add audio, animated .gifs, and images. View the “Move and Scroll” Chapter Template »

Each image has a short snipped of text on it, adapted from interviews with long-time Williamsburg residents. The images change with relative location, unlocking a story you can only access by moving forward (by walking or on wheels). The video below shows the app in action, with the stroll-to-scroll demo beginning about 30 seconds in.

The Store Template

While the dev team worked on building a new chapter template, I designed the storefront using an existing store template. From the “Apps” menu, select “Store.”

There are two types of storefronts: a project collection and a single project. Project collections can contain several or dozens of separate projects, for example a magazine with many issues or a book publisher with many books. A single project app is one project, such as a multimedia novel or game.

We decided to make the “Living Los Sures” app a project collection, so it could handle the dozens of stories UnionDocs collaborative residents have already produced. “Both Here and There,” with the “stroll to scroll” feature is just one project in a collection of many. The app can support any type of multimedia project, such as a short film, audiotour, photo essay, or written narrative with multimedia woven throughout.

I chose a map that Christopher had on hand as the store background image.

The template we used has fields to add icons that the user can tap to enter a particular story. Alison made one for “Both Here and There,” as well as one for a related project called “89 Steps.” I added a third sample story using an image from the Living Los Sures project, and entered coordinates for the positions of each story icon.

The resulting storefront looks like this:

bothhereandtherephone-640x1288

The Presentations

On Sunday evening, May 11th, we were ready to present. Six teams showed off their work.

Image of POV Hackathon 5 before the presentations

We were lucky to have three incredible judges who gave valuable critical feedback: Brent Hoff of the NY Media Center, Ingrid Kopp of Tribeca, and Edwin Torres from the Rockefeller Foundation.

It was an exhausting and very satisfying weekend. Thanks to POV, the Center for Social Innovation, the sponsors, mentors, judges, and the other participants for an incredible experience!

POV Hackathon 5 participants

Published by

POV Staff
POV (a cinema term for "point of view") is television's longest-running showcase for independent non-fiction films. POV premieres 14-16 of the best, boldest and most innovative programs every year on PBS. Since 1988, POV has presented over 400 films to public television audiences across the country. POV films are known for their intimacy, their unforgettable storytelling and their timeliness, putting a human face on contemporary social issues.