Tag Archives: html5

Join a fireside chat with Audrey Watters and Mozilla: April 26

Tools for teaching the web to the world

What’s the best way to teach web building to anyone? Should Mozilla develop a tool to help the world learn HTML5? Join an online interactive “fireside chat” with Audrey Watters and Mozilla to discuss these and other questions.

Audrey Watters is a prolific education technology writer, researcher and “recovering academic.” She recently undertook a research project for Mozilla, aimed at answering:

What’s the best way to teach web-building to anyone? For example, should Mozilla develop a tool to help the world learn HTML5?

Buffy slays Twilight: how to make pop-up video mayhem

Remember those awesome pop-up videos on VH1? Thanks to Mozilla Popcorn, the new HTML5 tool for supercharging web video, the pop-up format is about to get a whole new lease on life.

Exhibit A: this wicked “Buffy the Vampire Slayer vs. Edward from Twilight” remix, created by the mash-up maestro from Rebellious Pixels. Check it out here. Then get started making your own pop-up video here.

“Hacking pop culture”

First posted in its original form in 2009, the “Buffy vs. Edward” remix video has garnered over 4 million views, been subtitled into 30 languages, and received media attention from NPR radio to Vanity Fair (“Buffy Could Kick Edward Cullen’s Precious Sparkly Emo Ass“).

The new Mozilla Popcorn-powered “pop-up” version adds a new interactive layer over top, with added annotations, commentary, and tips on protecting yourself from real-life stalkers.

The video’s creator, “pop culture hacker” Jonathan McIntosh, says the remix is all about hacking gender roles and Hollywood cultural coding — a theme he’s explored in other projects like the hilarious “Gendered Advertising Remixer,” now also available in HTML5 format.

Create your own pop-up video with Mozilla Popcorn

Want to add annotations and pop-ups to your own videos? Popcorn Maker is designed to make the power of Mozilla Popcorn more accessible to non-developers and mere mortals. Popcorn Maker’s “pop-up video” template makes it (fairly) easy for you to add annotations and context to just about any video on the web.

The software is still in early alpha version, so there’s still lots of rough edges. But you can check it out and get started now. Just pick “Pop Video” from the “Choose a Template” menu.  Or have a look at the Popcorn Maker user manual here.

10 inspiring examples of where the web is headed

HTML5 Star Wars

Mozilla’s “International Developer Evangelist” evangelist Christian Heilmann blew some minds in Monday’s MozNewsLab, outlining the potential of HTML5 with fantastic demos and examples that seemed too good not to share more widely.

HTML5 and where the web is headed

You need the audio and Chris’s context to really do this justice — but even just clicking through his links and examples provide a mini tour of where the web is headed.

  • Video archive of Chris’s presentation. (With introduction from Phillip Smith and the Mozilla Foundation’s Mark Surman. Skip to 31:36 for Chris.)
  • Etherpad with links, resources and lecture questions and answers.
  • HTML version of Chris’s slides

HTML5's potential

WebGL

http://bodybrowser.googlelabs.com
WebGL enables 3D interfaces right in the browser. Google’s “body browser” demo allows you to zoom into and explore the human body.
WebGL

Wheels of Steel

http://wheelsofsteel.net
Mix and scratch DJ decks in the browser. Uses CSS3 and HTML5 (with Flash for some audio).
Wheels of Steel

20 Things I Learned About the Web

http://20thingsilearned.com
Interactive book from Google explaining web basics, including the benefits of HTML5.
20 Things I Learned

Animatable

http://animatable.com
Interface for creating CSS3 animations that work across all HTML5 browsers.
Animatable

Mediaqueries and “responsive design”

http://jasonweaver.name
Mediaqueries allow developers to test how big the user’s screen is, or what kind of device they’re using. And then change the design and layout accordingly — “responsive design.”
Mediaqueries

HTML5 video + canvas

http://thisshell.com
This demo uses HTML5 Video and Canvas to turn a music video into movable puzzle pieces. Solve the puzzle and download the song for free.
HTML5 video + canvas

SVG

http://mbostock.github.com/d3/
The d3 Javascript library turns HTML data tables into beautiful visualizations and graphs. Uses SVG and Canvas, making it easy to dynamically adjust color and style.
SVG

High charts

http://highcharts.com
HighCharts.js takes it further, creating beautiful animated charts and graphs, all using open technology — formerly the terrain of closed tech like Flash and Silverlight.
High charts

Drag and manipulate files in the browser

http://c64.superdefault.com/
Drag files from your desktop right into the browser and manipulate them in real time. This demo allows you to drag an image of yourself into the browser and convert it into Commodore 64 format.
C-64

Popcorn.js

http://popcornjs.org/
A Javascript library that allows you to synch video content with dynamic web content. “Hyper-video.”
Popcorn.js