Wednesday, January 27, 2010

HTML5: Bridging the Gap Between the Desktop and the Web

HTML in laymans terms.
I'm running a day behind in writing this week's articles, but I'm still very excited about several topics to put on display before you every week (on Tip Tuesday). This week I intended on writing about something other than HTML5. However, Google made a move that more or less forced my hand on the topic; so to speak.

Let's start with what HTML5 is.
Lifehacker answers the question with:
HTML5 is a specification for how the web's core language, HTML, should be formatted and utilized to deliver text, images, multimedia, web apps, search forms, and anything else you see in your browser. In some ways, it's mostly a core set of standards that only web developers really need to know. In other ways, it's a major revision to how the web is put together. Not every web site will use it, but those that do will have better support across modern desktop and mobile browsers (that is, everything except Internet Explorer).
While answers it with:
HTML was developed by the W3C until 2004, when members of the HTML working group grew disturbed with the direction the W3C was going with HTML. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called WHATWG (Web Hypertext Application Technology Working Group) devoted to evolving the Web. They started by working on a new specification of HTML - HTML 5.

HTML 5 is a new version of HTML 4.01 and XHTML 1.0 focusing on the needs of Web application developers as well as evolving HTML and addressing issues found in the current specifications.

So what's so fancy about HTML5?
Going into details of the changes would probably exceed both the time and the patience of the average curious user. Instead, I will focus on some of the major changes, and how that will make our online experience better. Ben Galbraith, co-director of developer tools at Mozilla, is in agreement and stated:
HTML 5 features like Canvas, local storage, and Web Workers let us do more in the browser than ever before.

Here are some of changes that are taking place in a more relevant form:
  • Offline Storage: The easiest way to think of offline storage as something a lot like Google Gears -—you just won't need to install a plug-in to use it. Modern browsers are starting to implement the offline storage feature of HTML5. Not surprisingly, the current model of text-based key & value storage is expected to grow into a universal structured data storage as the standard matures. This would greatly expand the usefulness of web applications, and could render many desktop applications (with time) obsolete.
  • Drag & Drop: Simply put, this could put an end to the "browse" button to upload a file (like one does when submitting their resume online or uploading a profile picture of themselves). This HTML5 feature will allow the dragging files (mp3 files, documents, etc.) from the browser to one's own local storage (USB drive, Dropbox folder, etc.). Knowing that the Google Chrome OS (not the browser) is already in the works, the drag and drop feature of HTML5 simply bring a browser-based OS much closer to reality. The definitions around drag & drop are unclear, and will likely require JavaScript to work. Nonetheless, its uses are abundant and evident.
  • Canvas: Simply put, you can programatically (is that a word?) render pictures, charts, graphs, games and whatever else your imagination allows that previously were practical only with third party add ons such as Flash and Silverlight. Having <canvas> as an encapsulated part of HTML gives Web Designers/Artists a freedom, no longer confined to images and boxes, allowing them to use the entire page as an expression of content and design rich interfaces to their hearts' content.
  • Audtio & Video: The audio & video APIs are massive upgrades in media embedding. Although support is limited right now, something like video embedding has never been easier. Imagine YouTube no longer needing Flash to play videos. Instead, it's inherent within the page. Well, that's exactly what was announced, albeit in beta, a week or so ago.

There's much more to HTML 5 like Geolocation, Web Workers, Smarter Forms, and many others. HTML 5's web application focus is evident in such game-changing tools (although not yet) like Google's Wave. Whether it's structural in with HTML 5's API, reading further on the many beneficial changes is sure to help those technical and not.

Here are a few reading resources:If you're running an up-to-date version of Firefox, Safari, Chrome, or Opera—or, basically, any regularly updated browser besides Internet Explorer—give these links a shot:
  • HTML5 Demos: Huge list of capability demonstrations, gracefully compiled by Remy Sharp.
  • Welcome to Safari: Written entirely with HTML5 and CSS 3.
  • YouTube in HTML5: No Flash required at all (for Chrome and Safari only, at this point).
  • Canvas drawing and audioNeat interactive site that shows tweets from folks who are digging on HTML5, with streaming background audio and interactive data pieces.
And here are a couple of videos illustrating HTML 5 and what it can do:



You Can Use HTML 5 Right Now.
I say that because HTML 5 has been a working draft for a couple of years and has undergone many revisions --The first draft of HTML 5 appeared on January 22, 2008, and it has been under revision ever since. HTML 5 is mapping our way into the future, but its final draft is not complete yet. One school of thought puts it W3C Candidate Recommendation stage around 2012, some even later. But the important thing to note is that the standard will be, and is being, implemented in stages. Safari, Internet Explorer 8, and Firefox 3.5 have some of the standard already implemented, with more being planned in future releases. Not surprisingly, Microsoft is resisting some of HTML 5's APIs (like <canvas> ... imagine what it would do to Silverlight).

HTML 5 on the iPhone

To effectively use HTML5 right now, we need to be able to control the environment in which it is used. Since support is not as widespread as we’d like it doesn’t make real sense for it to be heavily used unless, of course, we can lock down the usage to certain platforms which have HTML5 support. With Webkit leading the way for HTML5, we can safely focus on devices powered by Webkit.

The 3 hottest mobile devices right now: The Palm Pre, iPhone 3Gs and the new Google Android phone all have browsers that are based off the Webkit rendering engine.
Safari is even leading the way on the mobile HTML5 front; The iPhone (with the latest software upgrade) is the only device I could get to properly render the

Right now, you can confidently use many of the HTML5 features in iPhone Web app development and mostly likely expect Pre and Android to follow in suit.

This all now brings us to why Google forced my hand in writing about HTML 5. As I'm sure you know, Google Voice was rejected on the iPhone and created a major ripple this last summer (2009) to the point where the FCC was forced to interve. Well, given how Apple's Safari browser on the iPhone in particular is excelling in using HTML5 Google Voice Does An End Run Around Apple And Shows Up In The iPhone’s Browser. Genius! In the words of Borat "high five."  ▣

Click here to see Tuesday-only posts.

No comments: