I spent the second-last week of October at SpringOne 2GX 2010 in Chicago and I thought some of you might get something useful out of my notes. These aren’t my complete reinterpretations of every slide, but just things I jotted down that I thought were interesting enough to remember or look into further. Harnessing the Power of HTML5presented by
Scott Andrews (
@scothis)and
Jeremy Grelle (
@jeremyg484)
First up, the guys cleared up some confusion by explaining that the term HTML5 is currently being used to encompass much more than just the latest W3C HTML spec, but also all of the related sets of technologies that are now being standardised in an attempt to ease the creation of
dynamic webapps. It really means
HTML 5 +
CSS 3 + new JavaScript APIs like
WebSockets and
WebWorkers.
They demonstrated a lot of the upcoming technologies through the rest of the talk by showing a presentation from
html5rocks.com, a site Google has put together to promote the stuff.
Web storage (which, ironically, means storing data on the client) is coming. Local storage – a basic key/value store – is pretty much standardised. Another idea for a
client-side database is still being discussed, but has been
implemented in WebKit and hence is available on many mobile devices. Note that the data in this database would, like cookies, not be accessible by scripts from other sites, but would be unsecured on the local machine. Likely uses are things like data storage for offline access of cloud data. (That's cloud
computing data, not meterological readings.)
There is now an
application cache manifest that allows the server to instruct the browser about cacheable resources and allows the browser to skip checking the last modified date/time of these resources as long as the date/time of the manifest hasn’t changed.
Web Workers allow JavaScript code to execute something in a separate process. They mentioned that this is specifically a
process and not a
thread, the implication being that the spawned process doesn’t have access to the memory of the parent.
Web Sockets are being billed as the new
XHR and the new
Comet.
Javascript Notifications will allow the application to request the browser to show a
Growl-style status popup, but only if the user has already given permission for the site to show these.
Drag and drop is being supported at the browser level.
There is a proposal to provide access to a user’s current latitude and longitude.
Scott and Jeremy recommended that people not try to use these new features directly, but continue to use the various existing JavaScript libraries that already do the same thing, with the hope being that these libraries will, over time, be upgraded to use (and abstract) the native support where it is available (assuming the native support will be better than the current methods).
There are
new semantic tags in HTML 5 for <header>, <nav>, <section>, <article>, <aside>
HTML 5 includes new link/rel types include ‘pingback’ which will allow a page to provide a URL for the browser to call if the user leaves the site, and ‘prefetch’ to specify other pages for the browser to load into the cache in anticipation of where the user might go next.
There are
new HTML form input types that restrict the type of data that can be entered as well as providing some visual, optimisation and input hints, which is especially useful on mobile devices. New input types include date, email, range, search, tel, color and number.
There is also the ability to provide basic client-side authentication (without JavaScript) by specifying constraints such as
required
or a
regular expression pattern. A new CSS
:invalid
pseudo-class can be styled to change the appearance of invalid fields declaratively.
There are new tags for defining ‘
meter’ and ‘
progress’ elements (the latter for both indeterminate and % complete).
There are plans to support
embedded audio and video in HTML 5 without the need for any plugins, although there are currently
arguments going on about what codec should be the standard.
There’s a
Canvas element for just
drawing pretty much anything using Java2D-like shape, line and fill constructs. There is a
pretty impressive example in the Google slides where photos can be dragged, rotated and scaled. JavaScript is required to change the contents of the canvas, but the API as a concept looks pretty neat.
There is support for JavaScript events coming out of SVG objects using native HTML tags.
CSS 2 selectors like ‘first-child’ are being more widely supported and new ones like ‘not’ are coming in as well.
CSS is introducing font downloading, allowing
everyone visiting you site to see the same font without having to use
image replacement. (As someone who's had to do a bit of this in the past, I have to say 'yay!')
There are STILL experiments with having
CSS manage column-based layouts (link from 2005!), although this is only implemented in WebKit at the moment.
CSS3 will support HSL (Hue/Saturation/Luminance) colour definitions.
border-radius for rounded corners is becoming standard, except in IE 9!!! Says the speaker: “So IE will be square.” (I've since tracked down an
announcement on msdn.com that seems to suggest that border-radius will be in IE9.)
Gradients,
shadows and
animations are all getting some standardised support in CSS3.
It will be possible to
intercept changes to the history (e.g. capture the back button) within an Ajax app and load data rather than allowing a whole-page refresh.
There is a library called
Atmosphere that provides a server-side abstraction over Comet and WebSockets to allow these protocols to be handled on any
Java web server (many of which currently support this stuff but through proprietary APIs).
They showed a pretty cool example where they were using Canvas and WebSockets on the client side with
Spring Batch and
Spring Integration on the server side to parse a large file, stream interesting data to the client through an Integration channel and visualise that data in the browser.
I've found this funky little website callled
caniuse.com that allows you to specify browser names and versions along with HTML 5 features that you would like to use and it will show you the level of support in each browser & version for that technology.
Want to learn more?From Amazon...
| From Book Depository...
|