HTML5
The language of the cloud?
Craig Nicol
DDD Scotland 2010 : @craignicol #dddscot #html5
Quick clarification
- This presentation is the web app
- If you've downloaded this, view source and you're away
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
- Infrastructure as a service
- Not HTML
- Amazon EC2
- Windows Azure
- Web Applications
- Running apps in the cloud
- Outsource admin
- Share data within cloud : cross site scripting
- Rich Internet Applications : iPhone apps without the app store
[any material that should appear in print but not on the slide]
Short history of HTML5
- Web forms (Opera) aka Forms 2
- WHATWG vs W3C : Now a common standard
- Concurrent 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>
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 :
DDD Scotland
on 2010-05-08
at Glasgow Caledonian University in Glasgow, 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 : GCU: 55.866336; -4.2501
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?
Let's hope this works...
Acknowledgements
More links will be added at my blog.
Any questions?
Any questions