Options

Auto-rotate delay (secs):

Tip: Resize map by dragging bottom and right edges.

What's Playing?

Very soon now ...

What's Here?

We'll show you nearby photos when you hook up Instagram. But you don't have to. But it's nice.

About this App

Fork me on GitHub

This is an open-source Single Page App, demonstrating HTML5 Responsive Web Design...making the web app stretch to the dimensions of the screen. And doing so in the context of HTML5 canvas graphics, which are used here to power the map. CSS3 is also demonstrated in the lookup.

The demo was prepared for the Intel AppUp's presence at Mobile World Congress, which supports the HTML5 platform. It was primarily developed for in-person walkthroughs, so it may not work perfectly for the home surfer, but we invite adventurous types to give it a whirl.

Developers can learn more about Intel AppUp at the AppUp Developer homepage.

The demo was created by Michael Mahemoff in February 2012.

HTML5 Demonstrated

  • The openness and popularity of HTML5 lends itself to a broad ecosystem of reusable frameworks, libraries, and easily-consumed APIs; see Credits section.
  • The portability of modern HTML5 means this app works across a variety of form factors
  • The practice of Responsive Web Design lets us build user-interfaces for a wide range of devices; try resizing this window.
  • The capability of Full-Screen Mode takes Responsive Web Design to the max.
  • The design patterns of JavaScript architecture allow us to build scaleable systems, using techniques like Publish-Subscribe and Model-View-Controller.
  • The presentation features of modern HTML5 and CSS allow us to deliver rich apps rivalling native capabilities.
  • The language features of JavaScript allow us to deliver pure client-side apps; here, the server is responsible only for emitting static files, which then connect to third-party services.

Credits

  • Twitter Bootstrap provides the overall page structure and look-and-feel, including the responsive layout.
  • CoffeeScript and SASS to enhance syntax.
  • Backbone provides the JavaScript architecture structure.
  • Bourbon provides a convenient way to build "DRY" (Don't Repeat Yourself) CSS3 which is compatible across HTML5 browsers and platforms.
  • jQuery and jQuery UI for user-interface manipulation.
  • Leaflet provides the map user-interface, with the content powered by CloudMade.
  • Music via SoundCloud API.
  • Photos via Instagram API.
  • Further credits for Icons and backgrounds in the README.