10 inspiring examples of where the web is headed

July 20, 2011 § 2 Comments

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 enables 3D interfaces right in the browser. Google’s “body browser” demo allows you to zoom into and explore the human body.

Wheels of Steel

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

Interactive book from Google explaining web basics, including the benefits of HTML5.
20 Things I Learned


Interface for creating CSS3 animations that work across all HTML5 browsers.

Mediaqueries and “responsive design”

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

HTML5 video + canvas

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


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.

High charts

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

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.


A Javascript library that allows you to synch video content with dynamic web content. “Hyper-video.”


Tagged: , , ,

§ 2 Responses to 10 inspiring examples of where the web is headed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading 10 inspiring examples of where the web is headed at o p e n m a t t.


%d bloggers like this: