Stuff

From Devipedia

Jump to: navigation, search

(This is a brainstorming page for a future article.)

HTML5: Beyond the buzz


There has been a lot of talk about HTML5, maybe too much talk... So what's it all about, you might ask?

On one hand HTML5 has become a shorthand of sorts to describe the latest trends in web technology, generally referring to modern whiz bang web multimedia features plus animation. This reminds me of a time a few years ago when the term Web 2.0 was used to describe everything new on the web, from AJAX (asynchronous javascript) to tagging.

On the other hand, unlike the marketing term Web 2.0, 3.0 or 10.7, HTML5 does refer to a real-world set of enhancements to the W3C HTML specification. It's not a secret spec---anyone can follow this link to read all about it. Go ahead and give it a quick look-see: http://www.w3.org/TR/html5/.

The thing you should immediately note is that HTML5 is still a working draft. That means you cannot be certain that things won't change, and you can't depend on your favorite new feature being available in all of the major browsers---at least not yet. Fortunately, many of the features have been implemented already in the major browsers from IE to Chrome to Safari. So thought the spec could theoretically change, it probably won't, at least not substantially. I give you my personal blessing to develop using any of the new features that are supported today.

If you take the time to dig through the specification, you'll find that there really isn't anything new relating to animation in HTML5. Javascript developers have been able to animate elements for nearly a decade (remember when we called it DHTML?), though only after the introduction of higher level libraries like Mootools and JQuery did it become easy enough for mere mortals to pull off.

HTML5 is a grab bag of new markup elements and attributes. There are features that provide a standards-based alternatives to proprietary plugins, most notably the video element designed to obviate the need for Flash video. There are features designed to reduce the amount of javascript developer's write, such as to provide popular functionality like auto-focus or placeholders.

Here are a few of the other highlights.

CANVAS: The standard vector graphics API

Developers have been able to draw on the surface of a web page for years using either SVG (scalable vector graphics) or VML (vector markup language). While some degree of SVG has been supported for by all of the modern for years, there was a notable exception: Microsoft's IE. Until IE9, SVG support was nill. On the other hand, while Microsoft championed VML for years, they were the only one to do so. Thus the need for standardization.

Note: SVG is still supported, and in fact, more supported in HTML5

Enter the canvas element, a bitmap surface that can be used like, well, a canvas. It's a fairly low-level API, meaning that your only primitive shape is a rectangle, an for complex shapes one must use drawing paths. You don't do much with canvas in the HTML markup; the real power comes in when you manipulate the surface in javascript.

Here is an example of how one might use the canvas element for eye-catching animation:

http://www.devinvenable.com/static/canvas2/spin.html

So, sure, watching that is that's a nifty way to waste a few minutes on a slow work day, but in practical terms, how can one use canvas to really enhance a real world web project? That's a topic I'm exploring and will write more about in the near future.


SVG to Canvas

Embedding custom non-visible data

In the not-so-sexy-but-useful-for-developers arena we have custom attributes. These are attributes for your use and should be completely ignored by the browser and search engines. Any attribute leading with "data-" should be considered for developer use only.

Video and Audio

Much has already been written about these elements, so instead of repeating here I'll provide a link where you can get the skinny and read about some of the other new web behaviors.

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/


In my next post, I'll drill deeper into the feature set and come up with some real-world examples on how to leverage HTML5 to enhance your productivity.

Personal tools