Popathon 

Hack Jam

11 May 2013
Mozilla Office London

Philo van Kemenade @phivk
Gilles Pradeau @Learningtocount


Welcome



Today

Check In
Speed Date
Introducing ... Popcorn Maker
Popcorn Maker Challenge
Demo Time
Introducing... Popcorn.js
Break out Session
Form Groups
Lunch
Start Hacking
Ideas Pitch
Screening
Awards

Online Video as we know it


'Black Box' Video

Like a photo of some awesome text

Hyper Video


Interactive:

' viewers ' influence their experience

Dynamic:

video pulls in elements from the web

Introducing... Popcorn Maker

 
time line, media clipsevents & event attributes 

Let's make some Popcorn!

Form pairs


Go to popcorn.webmaker.org

'Start a project'


Craft your story

  • Who you are 
  • Where you're from
  • What you like


Save with popathon2013@gmail.com / "remixtheweb"
Share using #popathon

Demo Time

Diving into... Popcorn.js


Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web.

Popcorn.js Examples




Highrise - One Millionth Tower by Katerina Cizek, 
Mike Robbins & friends

Popping HTML 5 Video

A walkthrough


jsbin.com/popathon0/latest 

jsbin.com/popathon1/latest  

jsbin.com/popathon2/latest  

jsbin.com/popathon3/latest  

jsbin.com/popathon4/latest  

jsbin.com/popathon5/latest

Popcorn API


http://popcornjs.org/popcorn-docs/

Hosting Video Online

Popcorn handles:
  • YouTube
  • Vimeo
  • HTML5 source links:

(your own) web server

Hack Jam!


Prototype Challenge
Create a story experience that turns a viewer into a user

Ideas Pitch & Feedback
15.30

Hand In & 5 min Presentation
17.30

Awards & Drinks
18.30

Feedback


How did you experience this first Popathon?



For the next Popathon I would like...



keep links coming at #popathon!

Prototype Screenings

1 Time Pop
2 Kenneth
3 Journalist Innovators
4 Fighters
a: Daily Mashup
b: Hub Doc
5 Ghost Busters
6 Popcorn Pirates

Drinks


Now at Salisbury Pub

out of the office, 
left, 
after 100m left hand side on the corner

Popathon Hack Jam

By Philo van Kemenade

Popathon Hack Jam

  • 1,779
Loading comments...

More from Philo van Kemenade