HTML5

The language of the cloud?

Craig Nicol

DDD Scotland 2010 : @craignicol #dddscot #html5

Quick clarification

Remember, all of the standards are in flux, so support is currently not guaranteed. Content: A short look at where we are now, then: A quick tour of the major new features in HTML5, with a focus on building web apps for the cloud. Please feel free to interupt me as we go along as there's a few different topics.

A story of 2 clouds

[any material that should appear in print but not on the slide]

Short history of HTML5

Teaser for next slide : How many people remember the DOCTYPE for Html4?

Structure of HTML

View source here ?

Some major changes from HTML4

Will need to go to about:config here to turn this on, but remember svg doesn't work here.

XForms aka Forms 2.0

Switch to Opera to demo this bit

Drawing

Canvas is a free-form drawing element that accepts Javascript commands to write to it. 3d is beta due to conflicting views on implementing direct access to 3d hardware. CSS Transforms Can be applied anywhere.

<canvas>

  • Important Note : transforms can push elements out of their containers.
  • CSS file
Rotate
Scale
Skew
Now's the chance to hit F12 and bring up Firebug for CSS editing. Also bring up magnifier to make CSS changes easier to see - in docked mode.

Multimedia support

Quick discussion that codec support is an open issue.

<video>

Hey, look, CSS works on video too.

Content handlers

Dialogs should appear but won't do anything on file://

Geolocation

Let us hope this shows the conference center. May not work if network connection down.

Microformats

No in-built browser support. Firefox has an API that extensions can use. Using geolocation and Tails Export addons here.

Javascript improvements

These will be slow, so run in a separate process.

Javascript drag and drop

Drag the list items over the dustbin, and drop them to have the bin eat the item

Drag and drop, 5 versions in, that's slower than the iPhone.

Offline storage

Opera/Safari : Web SQL Firefox : Web storage Both in spec. (This demo works if no connection. If there is a connection, go to offline mode first)

Application Cache

(This demo works if no connection. If there is a connection, go to offline mode first)

Web sockets

Chrome supports this, but Mozilla are unhappy with the current spec.

Summary

Remember, this is a web page so you can download and play with the demos.

Will HTML5 kill Flash & Silverlight?

Let's hope this works...

Acknowledgements

More links will be added at my blog.

Any questions?

Any questions