HTML5
The language of the cloud?
Craig Nicol
BCS Aberdeen : @craignicol #html5
Short history of HTML5
Web forms (Opera) aka Forms 2
WHATWG vs W3C : Now a common standardConcurrent Technologies : Mashup between HTML5 and other APIs
XHTML is dead. Long live XHTML
Still in flux, so check browser support for all features. Progressive enhancement is your friend.
Teaser for next slide : How many people remember the DOCTYPE for Html4?
Structure of HTML
Simplified DOCTYPE : <!DOCTYPE html>
Simplified header : <html>
New structural elements
Add semantic data to help search engines and accessibility.
<section> Used for oulining, supports header styles.<aside>, <figure> Text and pictures to pull out important information.<header>, <footer> Per section or per page.<nav> For Navigation
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
Validation (Opera only at the moment)
New Input Types
Mainly work like text, but some browsers do special handling
Firefox Contacts will change autocomplete to match 'email' or 'tel' types
Chrome will render 'range' as a slider
Android/iPhone will display different soft keyboards for 'email' or 'url'
Opera displays a date picker for 'date' or 'datetime'
An overview : A Form of Madness - Dive into HTML5
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.
Multimedia support
Quick discussion that codec support is an open issue.
<video>
If you are reading this, it is because your browser does not support the video element.
Hey, look, CSS works on video too.
Content handlers
Dialogs should appear but won't do anything on file://
Geolocation
Where am I?
Privacy...
Not in HTML5 spec, but widely supported (iPhone, Android, OSX, Win 7)
Finding your location: click to find
Stand-alone version
Let us hope this shows the conference center. May not work if network connection down.
Microformats
Add semantic data to your page
Firefox implementation exposes an API for add-ons to handle
Examples:
hCalendar :
BCS Aberdeen
on 2010-11-18
in Aberdeen, UK .
hCard :
Joe Doe aka
Jo of
The Example Company , who can be called on
604-555-1234 and whose site is at
http://example.com/
e.g. geoTagging : RGU: 57.148598 ; -2.101544
No in-built browser support. Firefox has an API that extensions can use.
Using geolocation and Tails Export addons here.
Javascript improvements
DOM 3
Worker processes : background processing
Cross-site scripting : authentication via whitelisting, aka "cross document messaging"
Undo manager
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
Offline Mode : (e.g. Task List)
Specify a group of resources to save to the cache (html, png, ...)
Specify a whitelist of online resources that are not cached (e.g. XHR endpoint)
User has to grant permission
(This demo works if no connection. If there is a connection, go to offline mode first)
Web sockets
"a low-complexity, low-latency, bi-directional communication system that has a pretty simple API for web developers."
Next generation COMET : IM is a good example of apps this can support
HTTP-secured open channel via javascript
XMLHttpRequest is complex if you want to leave a return channel for multiple messages.No need to send headers on each request
Flash support for older browsers
Chrome supports this, but Mozilla are unhappy with the current spec.
Summary
New format
Related technologies
Not fully supported, yet...
Have a look at HTML5 Test but take the results with a pinch of salt.
Remember, this is a web page so you can download and play with the demos.
Will HTML5 kill Flash & Silverlight?
VIDEO
Let's hope this works...
Acknowledgements
More links will be added at my blog.
Any questions?
Any questions