HTML5 and The Museum of Mario

Nintendo fans around the world were thrilled this month as IGN in a collaboration with Intel’s HTML5 Hub unveiled “The Museum of Mario”, an interactive anthology experience exploring the different iterations of Mario:

Starting in the Arcade era with Donkey Kong and Mario Bros., the museum covers the 8-bit Mario, 16-bit Mario, the exciting advent of 3D Mario, all the way to the current Mario with New Super Mario Bros. Wii and the Wii U.

Austin-based HTML5 developer Kyle Simpson was the creative mastermind behind this amazingly fun site; he has been involved in open web development for a while now and speaks at between 30-50 conferences a year to developers. When he set out to create this interactive Mario history, he wanted to highlight iconic experiences. To do this, he used new responsive patterns that allow the website to adapt to whatever device it’s being viewed on:

“I spent quite a bit of time working on the architecture of the site. We wanted to do something unique with the way the user navigates the site. Rather than having a standard vertically scrolling experience, we’ve incorporated what I call “paged scrolling”. Once you scroll past a certain threshold it switches to the next page. I also brought in several libraries that I’ve worked on in the open source community, including a templating engine called grips and a dynamic script loader called lab.js. Other technologies we used include WebGL, three.js,, a custom audio/video manager using soundjs, and even Adobe Edge.

Additionally, we really wanted to focus on a user experience that fully embraced the reality of today’s very mobile and device disparate web. There was a heavy push to bring much of the desktop experience to touch devices. I encourage you to visit the site on a number of different devices to see how we’ve stretched the HTML5 technology to reach multiple platforms.”

Intel's HTML5 Development Environment, an HTML5-based development platform that enables developers to create one code base and port it to multiple platforms, can help developers create this kind of interactive experience. This cloud-based, cross-platform HTML5 application development interface makes it as easy as possible to build an app and get it out quickly to a wide variety of software platforms. It’s easy to use, free to get started, and everything is based right within the Web browser. Developers can create their apps, test functions, and debug their projects easily, putting apps through their virtual paces in the XDK which mimics real world functionality from within the Web browser.

This environment makes it as simple as possible to develop with HTML5, but by far the biggest advantage of using this service is the ability to build one app on whatever platform that developers are comfortable with and then deploy that app across multiple platforms to all major app stores.  The same code foundation can be built for iOS, Web apps, Android, etc. using just one tool to create, debug, and deploy.

One of the HTML5 Development Environment’s most appealing features is the XDK (cross-platform development kit). This powerful interface supports robust HTML5 mobile development, which includes hybrid native apps, enhanced Web apps, mobile Web apps, and classic Web apps to give developers the full range of options.

At IDF 2013, the Intel® XDK New, a tool to help promote and enable cross-platform HTML5 app development, was demoed. This is the newest version of the Intel® XDK with many new features added, including:

  • Eliminated the dependence on Java* and Chrome* and replaced it with node-webkit.  
  • A new UI builder – App Designer – and integrated it with Intel XDK NEW.  It supports more frameworks (jQuery Mobile*, Twitter* Bootstrap, and App Framework) for more UI design choices, as well as allowing “round-trip” design, edit, re-design within the tool. 
  • A new editor – Brackets* - you can go back and forth on files created in the UI builder or just use this great editor.
  • A new emulator based on Ripple*.
  •  A new User Interface
  • More host platforms
  • Cordova 2.9 support

The XDK makes testing HTML5 apps as easy as possible. Various form factors - phones, tablets, laptops, etc. – can be framed around an app to simulate how it would function on a variety of devices.

More information about the HTML5 XDK and porter can be found at the Zone. For more information on the Intel XDK New, check out the following links:




For more complete information about compiler optimizations, see our Optimization Notice.