HTML5!
So we got things broken down into the following, self explanatory, sections:
- New Tags and What They Do
- New Concepts Defined
- Not HTML5 Technically, but related..
And some final observations on the acceptance, etc.
New Tags and What They Do
Granted we are going to skip over some of the less remarkable ones, but what follows is a brief summary of most of the new tags found in HTML5
<article>
The article element represents an autonomous composition (thought they can be nested) generally part of some form of syndication. It’s very similar to the role that rss or atom serve in the dissemination of content.
<article> <header> <h1>Rocking the Article element</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>Just rocking the new article element</p> <footer> <a href="?comments=1">Show comments...</a> </footer> </article>
That’s generally the gist of it – not entirely sure we need, yet another syndication format.. Briefly, even the RSS camps are struggling with each other not to mention the proliferation of Atom – Ideally we could all agree on some syndication format (realistically something open world such as RDF which would allow for any extensions to easily be added as needed).
<audio>
Doesn’t really need much of an introduction, but the audio element represents an audio file and more specifically a player to play it.
<audio src="http://www.dailywav.com/1001/disturbg.wav">
Your browser does not support the audio element
</audio>
This is one of those elements that should have been included 8 years ago but nevertheless, it’s great to see its arrival. My first thought was, what kind of audio files can it play? Granted most of the world has embraced mp3 but there’s still a few lingering codecs out there that surface now and again – fortunately this has been well thought out and implemented using a source tag but way beyond the scope of this introduction.
<canvas>
The canvas element has had plenty of airplay lately but to summarize, it’s literally a canvas for drawing vector graphics / images / etc with JavaScript. Note that it’s both resolution dependent and graphically intense (only use when appropriate) – that said though, the sky’s the limit in terms what you want to render from 3D graphics, images, games to pattern recognitions, etc. The only thing that seems to missing is a good reference document though I did manage to find a cheat sheet and if you’re brave enough, you can sort through the WHATWG’s official document
<canvas id="canvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
</script>
Produces the following:
And if you’re looking for something less boring than a couple of colored boxes, check out my current, favorite canvas example (be sure to move it with your mouse).
<section>
The section element isn’t too remarkable, it essentially defines a section with or without a header and footer, etc. But what is interesting is the attribute contenteditable which allows the section to be edited like a form – of course what you do with it from there is up to you – but we might finally have a alternative to having to type into these tiny text area boxes (as I’m struggling with right now writing this!). Imagine a full page document that editable just like a text editor:
Go ahead and edit this text, really it won’t bite!
And here is how it’s done:
<section contenteditable="true" style="font-size: larger">
Go ahead and edit this text, really it won't bite!
</section>
<video>
Nothing terribly surprising here, but again a long awaited addition to HTML that allows you to embed a video directly into your web page without relying on a variety of proprietary solutions such as flash, real player, windows media, etc. A side effect of it’s proliferation may in fact be the notion that we can finally agree on at least one (or two) codecs for video now 15 years after the video codec wars began.. And without further delay:
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the video element.
</video>
<div>
Wait div? Sure technically it’s been around for some time but what’s new is the long awaited rounded corners for them:
Rounded corners!
And here is how it’s done:
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 5px;" > Rounded corners! </div>
New concepts defined
Perhaps new isn’t isn’t as accurate as new to HTML since most of what follows has been implemented one way or another for some time.
Inline data
Inline data is just what it says, a way to embed the data of, say, an image inline and avoid creating a second request to get the data as part of a src tag, etc. The advantages are primarily performance—imagine a scenario where you page loads 100s of tiny images, in a traditional web page, you’d have the initial download of the page and then 100s of subsequent downloads for each image. Inline data makes this a single request, e.g. look closely for a small red dot:
And here’s what that amazing little red dot looks like as Inline Data:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Read more
3D Transforms
3D Transformations is really just an exciting way to say ability to skew and rotate a div which may or may not end up with some kind of 3D effect. The functionality is provided by, currently, firefox only
-moz-transform (and it’s webkit equivalent -webkit-transition) and consists of rotate, skew, translate, etc methods for display things in a variety of angles and, in the case of -webkit-transition, provides an animation framework as well.Here’s a screenshot of my attempts to produce a 3D box (based heavily on the demo link below):
No working example is provided due to the lack of cross browser agreement at the moment, but if you’re on Firefox, check out the 3D demo or in Safari/Chrome (webkit) then checkout the live exxamples and if you’re on IE, too bad.. (though there is a 3rd party attempt to recreate the functionality in IE called Sandpaper)
Drag and Drop
Nothing remarkable here unfortunately; essentially some new drag-specific event handlers and some handy attributes to call draggable stuff – the only thing interesting about this part of the specification is that it’s already implemented in IE6! Yea you read right, apparently Microsoft started the ball rolling and then dropped it shortly after IE6. You can read all about the history include current criticism in this article: The HTML5 drag and drop disaster
Read the specification
Web storage
Web storage is similar in concept to cookies but with a few key advantages. Firstly, the values aren’t passed back and forth with every request (as cookies are). Secondly, there is no limit to the size of data you can store (recall cookies have a max of 4K). As a result you can store whatever you like in web storage without worrying about its size. Lastly, the feature is specific to an entire website (unlike cookies which are specific to one browser window, making it impossible to use cookies if you happen to have two windows open).
Usage is very simple and you have two options. localStorage has no timeout, and can last across multiple sessions and sessionStorage is specific to a single session:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
Read the Draft
Inline SVG
SVG (scalable vector graphics) has been around for ages and is essentially a 2D vector based library (which means you can use a vector to define some color fill instead of specifying each pixel resulting in a much smaller sized graphic). Though nice to have in HTML5, it’s arguably a duplicated effort in light of the
<canvas> element. Here’s a sample:
<circle cx="50" cy="50" r="30"
style="stroke:none; fill:#ff0000;"/>
<g transform="translate(100, 20) scale(1.65)">
<polygon points="36 25, 25 36, 11 36, 0 25,0 11, 11 0, 25 0, 36 11"
style="stroke:none; fill:#0000ff;" />
</g>
<rect x="60" y="20" height="60" width="60"
style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" />
Results in the following image:
SVG Filters
We covered, briefly, what SVG is, but SVG filters are what you can imagine they are a way to apply a range of effect / clipping / etc filters to a SVG rendering. The entire subject is beyond the scope of this summary, but here’s a quick example that shows a sample of the filter effects (there are lots more):
All that said though, it really gets interesting when you mix it with video
Web forms
Web forms are also a subject that really needs to have it’s own entire article devoted to the numerous changes, but I will summarize briefly:
Auto Focus allows you to set a specific input field as focus without the use of Javascript:
<input name="q" autofocus>
Place Holder is another feature with its roots in javascript; it allows you to set some placeholder text that is magically cleared out once the user clicks into the field:
<input name="q" placeholder="Click here to see it disappear">
There are a range of new input types, more than worth listing but generally cater to smart phones such as an
email type for marking up email addresses, a range type for creating sliders, date / color pickers, and an actual search type input that has some subtle differences such as the ability to reset the field.And lastly, arguably the best feature, is automatic input validation. This brings validation to the browser, saving truckloads of traffic back and forth validating things. Unfortunately it’s only available in Opera at the moment but the gist is, say you have the email input type mentioned previously and you input something other than an email address it will complain:
Read the Draft
Not HTML5 technically, but related
The advent of HTML5 introduces related technologies; in fact, most of what follows is closely related to features present in HTML5 and in some cases were originally part of it but broken out into separate working groups for clarity / completeness.
Geolocation
Definitely one of the nicer new features of HTML5, Geolocation provides a consistent Javascript API for determining a person’s location (with your consent of course) in latitude and longitude. Obvious uses are discovering goods and services near your current location, etc., but the possibilities are endless.
Most smart phone users have had this concept for sometime but implementing it was specific to the device and or operating system version. The underlying implementation (how you location is determined) is agnostic, e.g. if you’re on a smart phone with GPS, coordinateds are determined via GPS or triangulation if no GPS is present. Browsers use a variety of methods but primarily via your IP address and Google Latitude
Read the Draft
Cross Origin Resource Sharing
One of the current restrictions (or feature in terms of security) of AJAX is that it can only process requests from the current domain (the so-called same-origin policy). For years this has been the case to inhibit cross site scripting attacks, forgeries, inadvertent exposure of sensitive data, etc.
Of course, people have had to hack around this using a variety of techniques, but typically exposing data as JSON, passing through a proxy, etc.
Cross Origin Resource Sharing (or Cross Site Messaging) allows the developer of a web application to authorize the cross scripting of a known, trusted source. This allows you to get data from a different domain first and foremost, but on a grander scale improves the ability to reuse and share resources across the web.
Read the Draft
Web sockets
Web sockets are, in my opinion, the greatest feature of HTML5. They provide a bi-directional, full-duplex communications channel between server and client. What does that mean? It means no more hacking around HTTP with AJAX or DHTML or whatever acronym we can think up to emulate what we’ve wanted all along: Web sockets.
Why all the complaining about AJAX, et al.? It’s all because of polling (a good analogy of polling is the kid in the back seat that keeps asking, are we there yet?). Up until now the web has been one directional (by design); you had to constantly poll a server (or keep the data connection open) to get updated information—the fundamental shift in web sockets is that now the server can notify a client browser of a changing, eliminating truck loads of pointless traffic asking the the server is anything has changed.
A real simple example:
//set up the socket
var stockTickerWebSocket = new WebSocket("ws://finance.example.com");
//install a callback so the server can notify you of a change
stockTickerWebSocket.onmessage = function(evt) {
alert("Received Ticker Update: " + evt.data);
};
//send a message
stockTickerWebSocket.postMessage("BUY: GOOG,100@200.25");
Brief, but you get the idea – times are changing for the better.
Read the Draft
Web SQL Database
It’s difficult to get far as a developer these days without raising your fist to SQL databases in general due to a host of problems that make us feel like we’re stuck back in a 1970s (when SQL databases were invented / matured) B movie querying non-intuitive tables of data, dealing with an inability to related large amounts of data without your server grinding to a halt, and lots of other stuff wrapped up it so called NoSQL movement.
But it doesn’t end there. Even browsers now have a SQL database at your disposal for storing up to the (recommended) 5 megs of data per origin which allows you to store, query, etc. SQL syntax, e.g.:
db.readTransaction(function (t) {
t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) {
report(data.rows[0].title, data.rows[0].author);
});
});
On one level I applaud the idea of being able to store structured data (esp in light of dealing with cookies since dawn of the web) but using an outdated, unintuitive approach (SQL) is misguided.
Read the Draft (currently at an impasse)
Web workers
Web workers are a way to hook into the underlying event machine on a browser and execute long javascript processes without affecting the user experience. An interesting use of Web workers might be, as part of a performance enhancement, to offload the crunching of number, say financial fundamentals of a public company. Since price data is changing by the second a site that serves 100s of thousands of users can off load a host of computations (P/E ratio, NAV, etc) off to individual by passing a reduced set of fundamentals (via a web socket) that the browser can then process.
Nothing too remarkable to look at but here goes:
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
Read the Draft
Adoption Observations
Effectively all of the new innovation in HTML5 is to address existing work-a-rounds that are presently used, i.e. it’s really the uses of HTML that are driving these innovations and proves that our standards process is functioning well. When the Godfather (Berners-Lee) was hacking away at CERN, he couldn’t have foreseen things that we all take for granted now such as vector animations (flash), synchronous-like behavior (technically the protocol is and will remain asynchronous) known colloquially as AJAX, etc. Point being, adoption will be fairly swift (in fact most browsers already support it) because, one hopes, that given the option to implement the same things in a standardized way, most developers will..
1 comment