The web is an amazing thing

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

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.

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

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.

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.

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.

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.