My Mission in Haiti

With Haiti's great need of relief and reform, many are seeking food, shelter, and medical care. The world has responded with the largest contingent of volunteers in the world, outside of India (NYT Sept 6). Of the million homeless counted after the earthquake in 2010, hundreds of thousands have left tent cities. Between June and July of this year, 6% of tent dwellers moved into new shelters. What's next?



Both local and global organizations now look to long-term programs. Specifically, what does it mean to be educated in Haiti? In primary school, which is a crucial time for literacy, schools and curricula are fairly independent, something similar to private preschools in the US. Parents take it upon themselves to find a school near home which meets expectations for their children. The general consensus is that organizing and monitoring these schools would improve literacy and increase the number of students who continue their education.

A few years ago, Haiti received laptops from One Laptop per Child to modernize their schools and attempt equal access to education throughout the country. Since then, volunteers from Waveplace and the Illinois Institute of Technology have expanded these projects with new schools and activities. See olpcMAP of Haiti.


CC-BY One Laptop per Child

My goal for OLPC Haiti is trifold: to continue schools' interest in their computers, to develop and share new resources for literacy and creativity, and to show how technology can be part of a national education strategy for Haiti. For example, I will be taking @aiclass to test using online classes to train and assist teachers.



Last weekend, I met several OpenStreetMap volunteers who have made a remarkably innovative and to-the-minute map of Haiti. In only two days, they made the changes shown above. The UN and a handful of others have tapped into OpenStreetMap, but others remain unaware of the data or what can be built on top of it. The lines and shades of an online map are an echo of the real-life situation. I want to develop maps with a new level of detail and perspective, so we can begin to address and change what we see. Some maps you'll see will be made for and by kids, and others will only make sense to engineers.




I believe in a third component, not yet realized in Haiti, that is sometimes called the Maker Movement. In an appearance on Adafruit's Show-and-Tell (video will appear here) and our upcoming booth at Maker Faire NYC, I make the case for do-it-yourself electronics, both as a tactile introduction to technology and as a realistic future for developing nations. I am bringing new sensors and new materials beyond what was seen in Uganda and Uruguay. This one initiative can cross over into many others. A Wiimote can take the place of a keyboard and mouse for novice mapmakers. Sewable electronics hold potential for Haiti's artists and crafts markets. And it will become clear that technology lives to be adapted, not consumed. Just as Mozilla has moved away from reading webpages to teaching the world to code (both why and how), Haitian schools can make a difference by moving from prescribed to open education.

Final Project Report

Introducing FollowFrost

      The FollowFrost platform focuses innovative techniques in the open web, realtime media, and interactive video on the presentation of online interviews. This report includes a workflow video, innovation overview, and a working web app.

      Instead of a traditional one-on-one interview or a chaotic social media chat, FollowFrost uses a short traditional interview to introduce a person and a story to your audience. Interactive elements in sync with the video can show photos, social media, or other context (e.g. a sidebar explaining 'carbon sequestration'). When you publish, the interview continues through crowdsourced questions to and video replies from your interview subject. This Q&A is seamlessly attached to the video, and follow-up questions come attached to the same profiles that you created in the original video.

      In a preview of this platform, members of the Knight-Mozilla Learning Lab emphasized ease of content-creation for journalists. Connecting profiles to specific times within videos is greatly simplified. There is no delay between inviting a person to answer questions on the site and seeing their profile and interactive video responses. Not one line of code is seen while creating these interactive pages.

Screencast and Workflow

youtube.com/watch?v=wF7ljsh1Sfk

Try the Web App

Viewer – Make: Live at Maker Faire Detroit 2011

      Maker Faire is an event for hackers, builders, and artists which has taken root in San Francisco, New York, Kenya, and now Detroit. Participants include hobbyists making robots, small businesses selling electronics, and welders converting old cars into dragons.

Recommend you view in Chrome or Firefox 4+. Double-click on timeline or use social navigation below video: http://is.gd/frostview

Editor A simple tool to add profiles by Twitter usernames. Drag and drop tags to indicate when people enter and leave your video: http://is.gd/frostwrite

If the app fails to open, click images for larger screenshots.

Open Innovation Overview

      The Knight-Mozilla News Partnership strives to create new experiences that apply and integrate open web technology. Many tools used to build FollowFrost are just now becoming widespread to users and publishers, and fall in the categories of “HTML5” or “the semantic web”.

      Mozilla's Popcorn.js project uses HTML5 video to connect interactive content to events in a single video. From my experience building, extending, and teaching Popcorn.js on P2PU.org, creating professional mash-ups involves time-consuming annotation and programming. FollowFrost takes on the role of websites' content-management systems (CMS) by writing the code, synchronized add-ons, and semantic context automatically. FollowFrost also addresses limits in the Popcorn.js platform with a server-side network, allowing you to string multiple videos into one stream, re-use profiles, and automatically tag incoming video responses from interviewers and interview subjects.

      The user interface includes HTML5 tools for viewers and journalists. As the viewer watches a video, they see a colorful ribbon instead of a drab timeline. The ribbon extracts colors from the video, making it possible to visually distinguish points on the timeline. This saves time and avoids an unnatural organization by chapters. Clicking the pause button uses the History API to add time directly to your URL. When editing, instead of declaring each entrance and exit of a person along with their details, you add people by Twitter names, and use HTML5 drag-and-drop to move their tags in and out of the video deck. This handles all Popcorn.js annotation and profile presentation code for publishing your mash-up.

Including Open Technology in your Business

      The internet as we know it would be impossible without open technologies. Developing a website with open platforms means that your project continues to evolve with the rest of the web, that your content will work on social networks now and in the future, and that innovative experiences built anywhere can be adopted by your organization. Time and time again, even in businesses where openness seems counter-intuitive, companies which embrace open technology develop richer connections with loyal customers, innovators in the technology community, and collaborators across networks. For this reason, I gladly opened this project as I have opened previous projects. I believe that I can benefit from the continuing evolution of Popcorn.js, while offering a substantially more complete alternative that can respond to brand new technologies such as Mozilla and Google's Web Intents.

      Although FollowFrost can make any interview more engaging, it is particularly useful for including experts in realtime news updates and follow-ups. The TED conference often stores speakers' talks for months or years before release at opportune times. Several pandemic-themed talks were released during the swine flu panic, with e-mail interviews printed to update their information. In FollowFrost, video follow-ups can be added to present an archived interview, or to add updates to a developing story in realtime, with the same profiles present on every video from your expert.

Sunday edit: now works in Firefox, added web intents, enabled social navigation.

Collaboration in a News Network

This week's first two lectures in the MozNewsLab came from two experts whose talks we've been anticipating since they were announced: Shazna Nessa, Director of Interactive at the AP, and Mohamed Nanabhay, Head of Online at Al-Jazeera English. These are some influential roles in news technology, yet they are quite straightforward and open when talking about their experiences.


Al-Jazeera English newsroom

Neither organization fits the model of the typical American newsroom, where wire reports and the local beat are compiled for the local audience. The AP collects stories and sends out wires globally (though it's much more popular in the US and Europe than worldwide) and Al-Jazeera English has a deliberate non-Western perspective when covering topics such as voters who believe Obama is Muslim, revitalized Berber tribal culture in Libya, and America's continuing alliance with Bahrain's government.

For both speakers, their true strength was not in technical resources or abilities but in a strong network with skills in absorbing and explaining information. To produce quality graphics, such as the 3D Space Shuttle mentioned in the talk, I learned that the AP sends a graphics reporter to ask questions and make observations which print reporters would not detail.


Check out the interactive space shuttle!

Is this specialization due to the artistic needs of the interactive content, or the technical needs? I wouldn't want my #MozNewsLab project to require supplementary journalists. Considering the replies I am getting on my Popcorn.js course, video platforms are considered difficult and any code is out of the question. If the platform lets you create profiles and videos, and then automagically makes a Popcorn.js mash-up from that, it's much more accessible than showing someone how to fire the plugin events themselves. As a programmer, I think there's value to studying how something works before relying on it, but I can see why someone wants to swim on the surface before diving in over their head. Just be aware:



As for other collaboration tips that I picked up in the talk, I noticed that their relationship with social networks is different from what we pick up as viewers. Although they appreciate the rare gems and tips from social media, and broadcast them unedited to give an accurate and raw view beyond where their cameras can reach, the vast majority of information is to give them an idea of the audience's engagement and demand for new information. Compared to their own CMS, a social network can easily ban a user, such as Al-Jazeera English's experimental Google+ account.

There has been a recent trend toward openness - the AP has begun allowing hyperlinks in wire stories, and Al-Jazeera has gone as far as to share much of their video under a Creative Commons license, allowing major news networks and independent writers alike to use their footage. I fully support this and hope to use some of this video in my projects.

I think I will use Adafruit's Ask an Engineer Show & Tell to model the interview in FollowFrost. Also, I've started Tweeting on @mapmeld.

Of reporters, readers, and browsers

The MozNewsLab got technical this week, with speakers including Chris Heilmann of Mozilla, John Resig from jQuery and Khan Academy, and Jesse James Garrett, who works on user experience design and other projects at Adaptive Path. All were recorded and are available on the course website

I see responses in the class gravitating towards closing the experience gap between "hacks and hackers" by sharing code and markup with journalists. Learning the basics, like what HTML5 is and how it can help visualize news and engage audiences, is feasible. But not everyone wants to be a programmer. Hackers should be finding the way to create services which appeal to journalists, in the same way Twitter appealed to celebrities, so it became a tool for them and their fans. Recent news stories drove journalists to try Google+. So a new service set up by hacker types could pop up and gain ground fairly quickly.


I think this week helped introduce two of hackers' best-kept secrets, the openness of HTML and the ease of jQuery. I use Dojo, a jQuery competitor, at work (go ahead, point and stare) and like jQuery it speeds up development of both the interface and the more icky parts of coding JavaScript. On mobile, it allowed me to create this map



which looks just like the iPhone/iPad interface, and switches to an Android look on Droids, by placing a few choice snippets of code. I was surprised at first to see how John Resig considered help, support, and the learning curve early in development of jQuery, but the result has been fantastic community and documentation which other frameworks (Dojo included) lack. It also makes me glad to know he's working with Khan Academy. I feel like if I search for "___ in jQuery" I will get a step-by-step blog post with someone explaining exactly how to do that. Sometimes even just when I search "how to __"

The openness of HTML, demonstrated by examples from Chris's presentation and taught in MDC, isn't just a tool of web developers but a step toward webpages that just work, on everyone's browser, with accessibility for people with disabilies. The WHATWG (though not mentioned in the chat) deserves a lot of credit for completing HTML5. I'm working on projects with canvas, geolocation, history, and open video. These technologies are everywhere and people don't pick up on them because they're often transparent in their ease of use. The draggable, animated circles in Google+, every web video on the iPad, the locator on Google Maps... all use HTML5. Yet there's no one system that supports it all. So we use back-ups. It's simple.

How does this tie into my project? I'll post a project idea later this weekend. But essentially, I see no need to go beyond HTML and JavaScript in the user experience. The media features are supported on most browsers, and I need the direct interaction with the video and video frames in order to grant users and journalists alike equal power over their video experience.

Project idea posted
http://mapadelsur.blogspot.com/2011/07/mozilla-design-stream-of-consciousness.html