January 14, 2013
New Webmaker Prototypes

For our first week back to work, a small group of MoFos met for a few days of offsite. Knowing that 2013 is going to be a year of enabling creativity, we thought it would be suitable to meet at the Art Bar of the Gladstone hotel. Our goal was to create several prototypes of new functionality in Webmaker that would help users create new types of content. Here are the demos. note: hit the full screen button if you need to look at text.

WebmakerX (Bobby, Atul)

Live branch: http://webmakerx.toolness.org/#/bpzokgjb

what is it?

  • Combines Thimble and Popcorn Maker interfaces

what it means for us technically:

  • Implements Popcorn.js as Data attributes within HTML elements
  • exposing popcorn functionality through markup (instappopin) and providing a GUI layer
  • Markup API is declarative so its very “human readable”
  • X- tags (mark up api) are a vision for allowing javascript hackers to create widgets or functionality that people who are not experts can leverage.
  • Popcorn projects are published in thimble, its an elegant combination of our code bases

what it means for the user:

  • You can see popcorn code while you author
  • We can merge the experience of creating the layout and HTML with authoring the timeline
  • You can control your entire media production process from start to finish, using either code or a GUI
  • If you’re a JavaScript developer and want to write your own Markup API (like Twitter Bootstrap), we can import this as a “widget” - its a new vector for community contribution, eg you can drop the timeline or the color picker into other tools
  • You can learn to code while making cool, time based media
For some background reading on this prototype, check out Atul’s post "Building Bridges between GUIs and code with Markup Apis", as well as Lyre Calliope’s "Web Components and Mozilla Webmaker"

Chapter Markers for Slide Shows (Pomax)

live branch: http://jbuckley.ca:8886/templates/basic
Slideshow that was produced: http://jbuckley.ca:8886/v/2.html (note: navigate using the arrows on the side of the embed)

what is it?:

  • Popcorn plugins that let users set time markers (think “chapters”) and then navigate to the previous/next mark or an arbitrary mark based on its name

what it means for the user:

  • ability to create cool slide shows
  • website- type “pages” or sections
  • educational/instructional videos with “skip to …” functionality
  • scrubbing “markers”
  • create media that isn’t just “play through”, but rather interactive narratives, ie choose your own adventure, hackable comics, visual novel„ non-linear story telling etc.
  • in the future you might be able to do key framing, and create tweens between marks

what it means for us technically:

  • it points the way to Popcorn Maker being a method of accepting code snippets of functionality as “triggers”, rather than just “time events”
  • In the “WebmakerX” universe, we could imagine many of these types of functionality extensions that we create, and that are also created by a community
  • Even the timeline is now a maleable asset, rather than a fixed constant, allowing for customised (non-sequential) playback timelines by triggering a currentTime change

Popcorn Maker video editing (Scott Downe)

live branch http://jbuckley.ca:8887/templates/basic/

what is it?:

  • Ability to slice together youtube, html5 and soundcloud media into one seamless playback (audio, video, visuals, text and code snippets)
  • Ability to set the time of a sequence, rather than have a “media conductor”

what it means for the user:

  • you can edit together bits of video from around the web, and combine them with all of the other popcorn goodies
  • You can make awesome videos on the web without having to download/compress/re-upload etc - we MASSIVELY speed up the web video production process
  • greater level of remixability
  • ability to create “mash ups”
  • videos as samples (Kutiman http://www.youtube.com/user/kutiman )
  • ability to create simple “narrated” experiences - ie take a video and put a voiceover on top
  • editing becomes as easy as cut and paste
  • potential for a user to pull in all of the attribution data with the content
what it means for us technically:
  • when we land this, we move away from Popcorn Maker being controlled by a central video, and instead have a user-defined timeline

In-tool youtube upload (Jbuck)


live branch http://jbuckley.ca:8888/templates/basic

what is it?:

  • Directly upload video from your camera to youtube

what it means for the user:

  • user can make video record from their webcam to use as content for Webmaking
  • frictionless - rather than recording locally and uploading, or recording at youtube and copy/pasting URL, you can do it all from within Popcorn Maker

what it means for us technically:

  • We’ll want to start thinking of the “media” tab on Popcorn Maker as a place for multipe sources of media - this is where our “save for later” media should begin to appear
  • capability to add content directly to the “media tab” / “gallery” / “save for later”

Save for Later (Jess, Blake, Ian)

what is it?:

  • A clipping add-on that allows you to take image, text, video or html content from around the web, pull that into a gallery and then use it as remixable content for your Webmaker projects

what it means for the user:

  • as you browse the web, you can bookmark/pin/clip media and images that you like in order to remix them later
  • you can essentially use their “bookmarks” from within the browser as remixing content
  • you can pull in content from other services like “gimme bar” or potentially pinterest or git gists directly into your webmaker “gallery” or asset library
  • think about if built into Firefox, this could be a seemless experience directly associated with your Persona identity

what it means for us technically:

  • It shows how we could incorporate Firefox and Webmaker

5:24pm  |   URL: http://tmblr.co/ZZWBQybmrDht
(View comments  
Filed under: drumbeat 
  1. dileodile reblogged this from brettgaylor
  2. brettgaylor posted this
Blog comments powered by Disqus