Presentation: The Future of HTML5 and Web Technologies

The Future of HTML5 and Web Technologies

Christian Heilmann, MozillaVision 2012, Tokyo, Japan, January 2012

Today I want to talk about a web of the now and the near future and show you some things that are in the works but you might not be aware of.

The web is an amazing thing

World Connection Density
World Connection Density map by Chris Harrison

The web is an incredible thing. It connects people world-wide and it is incredibly easy to be a part of. Instead of having to buy, download and install a lot of applications to do one thing at a time we can just use a browser, go to a URL and get what we need, when we need it and on our own terms.

Limited technologies

.

The problem with web technologies was that they were very limited. Traditionally the web was documents with a few hyperlinks and forms to get data from the user. This is not enough any more these days.

Hooray HTML5

HTML5

This is why HTML5 was defined and agreed upon. Instead of offering techniques to create interlinked documents our new goal is to build applications in the browser that make it as easy for end users to reach their goals.

Built on great principles

  • Open for all
  • Backwards compatible
  • Works well with other standards

The great thing about HTML5 is that it is based on the same principles that made the open web the success it is now. It is open for all, backwards compatible with older technology and it complements other technologies we already use.

A sensible core

  • Richer HTML semantics
  • New form functionality (dates, slider, number, validation)
  • Canvas for painting/animating
  • Browser history access
  • Video and Audio
  • Drag and Drop
  • Browser menus

At its core HTML5 gives us a few new things to play with: richer semantics, more form widgets, canvas for animating and painting in the browser, a richer browser history support, video and audio, drag and drop and native menus.

CSS as the sidekick

  • Rounded corners
  • Drop shadows
  • Gradients
  • Transformations
  • Animation
  • Transition
  • 3D

CSS3 complements all this nicely by allowing us to create complex images in the browser using gradients, rounded corners and drop shadows, allow for positioning in the browser with transformations, create smooth experiences with transitions and animations and add depth to our products with 3D transformations.

Demo: morphing cube

Using CSS3 transformations and transitions it is very simple to create complex looking effects.

Demo: HTML5 rotating logo

Demo: box rollovers

Demo: the 3D tester

If you want to play with 3D transformations and try to understand them better, there is the 3D tester, which generates code for you.

HTML5 is a friend of JavaScript

JavaScript

One of the main powers of HTML5 is that JavaScript is seen as a vital part of it and that it gives us a lot of powerful, yet simple APIs. You can use these to create some pretty amazing things in not many lines of code.

A few examples

Let's take a look at a few examples.

Demo: The beanie maker

The beanie maker allows us to drag an image into the browser and manipulate it before saving.

Beanie maker code (excerpts)

c.addEventListener( 'drop', function ( evt ) { var files = evt.dataTransfer.files; if ( files.length > 0 ) { var file = files[0]; if ( typeof FileReader !== 'undefined' && file.type.indexOf( 'image' ) != -1 ) { var reader = new FileReader(); reader.onload = function ( evt ) { img.src = evt.target.result; }; reader.readAsDataURL( file ); } } evt.preventDefault(); }, false );

Using the drop event and the Filereader we can get images into the page.

Adding your own menus

HTML5

Simple HTML, big result

<section class="slidecontent" contextmenu="imagemenu"> </section> <menu type="context" id="imagemenu"> <menuitem label="rotate" onclick="rotate()" icon="../img/arrow_rotate_clockwise.png"> </menuitem> <menuitem label="resize" onclick="resize()" icon="../img/image-resize.png"> </menuitem> </menu>

All you need to do to add new menus is use the correct HTML. In this case the rotation and the resizing is done with CCS3 transforms.

JavaScript + CSS

var menu = document.querySelector( '#menudemo' ); function rotate() { menu.classList.toggle( 'rotate' ); } function resize() { menu.classList.toggle( 'resize' ); } #menudemo { -moz-transition: 0.2s; } #menudemo.rotate { -moz-transform: rotate(90deg); } #menudemo.resize { -moz-transform: scale(0.7); } #menudemo.resize.rotate { -moz-transform: scale(0.7) rotate(90deg); }

The JavaScript simply toggles CSS classes with transitions.

Contextual browsing

Firefox with native toolbars
Firefox with native toolbars

This is a screenshot of how the browser shows different menus when you are on different web sites. Google maps would get a maps toolbar and Docs a real Word-like menu.

Cropping images in the browser

It is very simple to modify images using the canvas element. This was in the past always a server-side thing. Now we can do it in plain JavaScript so we can even have it as a bookmarklet.

Building a game from HTML

By using data- attributes, it is very simple to allow maintainers to customise your scripts. In this case, the game sprites and the logic are all defined in the HTML.

Allowing for easy customisation

<li><img src="img/video.png" class="sprite" alt="Video" data-collision="energy:20" data-type="good"></li> <li><img src="img/flash.png" class="sprite" alt="Flash" data-collision="energy:-20" data-type="bad"></li>

In the data attributes of the images we define which of those should make the player lose energy and which should be good things to catch.

Mouse, keyboard, touch and orientation access

container.addEventListener( 'keydown', onkeydown, false ); container.addEventListener( 'keyup', onkeyup, false ); container.addEventListener( 'touchstart', ontouchstart, false ); container.addEventListener( 'touchend', ontouchend, false ); container.addEventListener( 'click', onclick, false ); container.addEventListener( 'mousemove', onmousemove, false ); window.addEventListener( 'deviceorientation', tilt, false );

As HTML5 games should work across multiple devices it makes sense to make them work with different input types. Luckily all of them are available to us these days.

Going Fullscreen

  • DemoFirefox Beta / Latest Webkit
  • Ongoing security discussion
  • Amazing opportunities

One of the big requests in the past was a fullscreen API for browsers. This is now available. You can make any element take over the whole screen, which is important for games especially.

Mouselock API

Another big issue with web technology for writing games is how browsers deal with mouse movements. There is no way to detect when the mouse is outside the screen and how far it should go. For 3D environments this is not good, which is why we have the Mouselock API which locks the mouse in the middle of the screen and lets you detect the movements to rotate a scene.

Gamepad API

The Gamepad API allows you to read joysticks and console gamepads in JavaScript.

Developing with the web

Now it is fun to build for the web, but isn't it time we used the web and browsers as a development platform? Seems simply logical, you build in the thing to build for.

Scratchpad

Scratchpad is a simple editor in the browser that allows users to write JavaScript to test on the current page to run against it. Instead of writing a JS and setting breakpoints you can highlight parts of the script and run only those. Once done, you can save the file to your hard drive.

As a developer, this saves me a lot of time trying out new things. I don't need to use a development server or local machine and insert a JS I need to remove later on and I don't need to build a project to try out some new functionality. Think of it as Greasemonkey on steroids.

Tilt: Making HTML cruft visible

It is time to give people different ways to realise what they are doing wrong when it comes to making the web fast. Almost every browser allows you to inspect the DOM and find issues with the structure of your document but it might not be obvious just how much your templating skills create in terms of HTML cruft.

Tilt is a unique new way to make this more obvious to people. It displays the page as a 3D model and you can easily see where your nesting went overboard even when the HTML is minified.

Apps for the web

Lots of App icons
Photo by Doug Belshaw

Apps are the big thing, there is no doubt about that. The issue with them is that if you go native you'll have to write an app for each platform which is not efficient.

A hybrid approach

  • Apps using HTML5/CSS/JS
  • The web is the distribution model
  • Web intents tie into existing data stores

A successful model for apps should use the best of both worlds and keep synced up over the web rather than through updates.

Apps / Web intents + activities

Open web apps is the next level of where apps on the web can go.

Identity with BrowserID

  • A very simple way to identify yourself on the web
  • Store your email(s) as your identity(ies)
  • The validation happens in the browser and with a trusted provider or on your own server
  • BrowserID is a protocol, not a service and is fully decentralised
  • It is driven by Mozilla, but independent of it

BrowserID

This is how simple it is to write a login system with browser ID

Invoking a BrowserID verification

<script src="https://browserid.org/include.js"></script> <script> navigator.id.getVerifiedEmail(function(assertion) { if (assertion) { // now go and verify - simple XHR will do } else { alert('Whooooo are you? who? who? who? who?...'); } }); </script>

Asking the browser to verify with browserID is dead simple. All you need to do is ask it for getVerifiedEmail().

Verifying the email (via web service)

<?php $url = 'https://browserid.org/verify'; $assert = $_POST['assert']; $params = 'assertion='.$assert.'&audience=' . urlencode('http://thewebrocks.com'); $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,CURLOPT_POST,2); curl_setopt($ch,CURLOPT_POSTFIELDS, $params); $result = curl_exec($ch); curl_close($ch); echo $result; ?>

To verify the email you can host the code yourself or do a simple call to a web service right now provided by browserid.org.

Going mobile

Little fox grabbing the tail of its mother

The main target to get the web onto is mobile devices. It is simply not scalable to build natively for all the different hardware out there.

Are we mobile yet?

Instagram unshredder
Are we mobile yet?

Are we mobile yet is a site that shows you the different parts of a mobile device and how many of those are available using open technologies. Quite a grim picture, but we're getting there.

APIs available for testing

  • Battery status
  • Camera access
  • IndexDB
  • Vibrator
  • Sending SMS

Mozilla is working to make a lot of this history. We have a few APIs in place that allows you to access the hardware of tablets and mobile phones.

Boot to Gecko

Boot to Gecko is Mozilla's project to create a native interface for mobiles. The screens you see here are html5 and based on the web API specifications defined by Mozilla and others. The texting facility already works and we have mobile devices running this interface.

Time to play!

Dog wants to play
Photo by Mike McCune