Friday, August 5, 2011

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

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:

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

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


  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 converter


Note: Only a member of this blog may post a comment.