HTML5

The language of the cloud?

Craig Nicol

BCS Aberdeen : @craignicol #html5

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