HTML5 does way more than video: Vimeo's Flash-free player showing a clip by Maxime Bruneel.
But HTML5 is much more than a hopeful successor to Flash’s web-video crown. In fact, watching a video without a plug-in only scratches the surface of what HTML5 offers.
HTML5 is the next generation of HTML, the language of the web. More than just a markup syntax like its predecessors, HTML5 provides a new set of features designed to make modern web applications work more like desktop applications.
The key features in the HTML5 stack: native video and audio playback, animated graphics, geolocation, hardware acceleration for in-browser events, the ability to keep using a browser-based app even if your internet connection drops, the ability to store application data on your local machine, dragging and dropping of files from the desktop to the browser, and the addition of semantic markup on pages, making them easier for both machines and humans to understand.
Each of the major browsers supports different pieces of HTML5 right now, and we expect to see all browsers on the same page in a year or two. You might think, given variances in browser support, that no one is using the future of the web. But you’d be wrong. HTML5 is everywhere you turn. In fact, some of our favorite web apps are making heavy use of HTML5 — to paraphrase William Gibson, the future of the web is already here, it just isn’t evenly distributed yet.
Did you know that Google’s homepage, one of the most trafficked pages on the web, uses HTML5? Technically, the Google homepage just uses the HTML5 doctype — the rest of the page is actually quite archaic (and invalid) code — but other Google apps take advantage of HTML5 much more.
Gmail, one of the bigger webmail apps on the web, uses HTML5’s offline storage mechanism to allow you to work with your e-mail even when you don’t have an internet connection. Google Docs also uses the HTML5 offline tools, as do the online office suite Zoho and the WordPress blogging system. Check out Mark
Pilgrim’s excellent rundown on how to add offline support to your apps if you want to start using this feature).
Scribd's new document reader: all web standards, no Flash.
The combination of tools allows Scribd to convert PDF files into pure HTML documents while maintaining the structural layout, fonts, embedded images and layered elements of the original.
Most impressive about Scribd’s new HTML5 features? They even work in IE6. Check out this example, which manages to render even complex mathematical equations in pure HTML.
They came from space, and the W3C spec: Canvas Invaders
Probably the best-known examples of HTML5 on the web are the current video experiments by YouTube and Vimeo. In both cases, the HTML5 versions of the sites are still opt-in, and there’s no code to embed the HTML5 version of a video on your own site, but it’s a start.
Another aspect of HTML5 that browsers are beginning to support is a set of geolocation tools. Technically, the geolocation API is not part of the HTML5 spec, but it is governed by the W3C and will arrive alongside HTML5 the markup spec. Using the geolocation API, a web app running in the browser can obtain your whereabouts, making location-based web searches more relevant.
Click on the little circle above the yellow guy to tell Google Maps where you are.
At the moment, the geolocation API isn’t widely supported by desktop browsers (only Chrome and Firefox 3.6+), but Google makes a plug-in called Gears which offers a fallback solution for older browsers.
That’s the tactic Twitter uses for its geo-aware tweets, tapping into the geolocation API when it’s available and falling back to Gears when it’s not.
In the end, one of the most powerful changes in HTML5 may not be as flashy as any of the examples listed above. HTML5’s biggest contribution to the web may well end up being its new structural tags, like
<header>, <footer>, <section> and <article>.These new tags allow web authors to better define their content, which means search engines will need to do a lot less guessing when they index the web. That will mean better, more relevant results and faster links to the information you want.
There are countless sites already using HTML5’s new tags, though you’d never know it without viewing the source of the pages. If you’d like to see some examples, head over to HTML5Gallery, which features hundreds of sites using varying degrees of HTML5.
To use the new structural tags on your own site, check out our tutorial on Building Web Pages With HTML 5. And there’s no need to worry; with a little JavaScript helper, these tags will work in any browser.
HTML5 can also be extended to offer even more semantic structure through Microdata. Using standardized data formats (similar in many ways to microformats) websites can offer not only data, but definitions of what that data is.
Ultimately, microdata exists for the benefit of web browsers and search engines. Eventually, search engines could use microdata to find your friends on the web and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using. To experiment with these extensions, head over to Google’s Rich Snippets Testing Tool.
While there’s no question that HTML5 is still in the experimental stage, it’s already gaining traction, and it’s doing a whole lot more than just playing video on your mobile phone.
By Scott Gilbertson
Newscribe : get free news in real time
See Also:
No comments:
Post a Comment