HTML5! HUH! What is it good FOR! Absolutely...

HTML5 - What is it good for

Depending on your point of view that ends with either "nothing" or "everything" and there seems not to be much in between with regard to opinions on HTML5.  The camps seem to be forming.  While some believe HTML5 is the coming of the source-code messiah, others believe it's a lot of drummed up hype from industry insiders who own API services, or platforms, seeking to brake development shackles of proprietary technologies.  

My perspective is, it depends on what you're developing (cop out?) but watch out, it is coming up and it is maturing quickly and it is a disrupting technology.  Just as the iPhone changed our view of computing devices, so is HTML5 changing our view of how you develop applications. The days of native development may be look at a shift, and HTML5 may just be good enough for many apps, and there may be methods in using HTML5 that allow you to get to the experience you're trying to deliver. 

First off, I'm no expert, but I'm full of opinions (the mantra of any blogger), so take the following for what its worth and I welcome experts to chime in, correct me or add to this discussion


Javascript vs ActionScript

What you can do in HTML5 

There are number of new tags in the markup language that mostly focus on drawing, animation/multimedia to make HTML5 coding a bit more Flash like.  As most people know, Flash is amazing.  It's has just about the best combination of WSYWYG tools and scripting tools for creating art, and turning that art into something interactive.  That is the idea of HTML5 (but without the cool WYSIWYG tool).  

Like Flash ActionScript you can script your way to a drawing and moving all shorts of colorful pixels on the screen.  Here's a great post by William Malone that compares illustrating two images (see right) in ActionScript vs the Canvas Element for HTML5.  


Some of what you can do in HTML5 : (Note launch these using a modern browser like Chrome or Firefox)

The Canvas Element
This  provides you a new set of commands to draw and fill shapes on the screen. Think of Canvas like a Flash embed area of your HTML page, but all the code for the work is in your HTML files.  It can be a piece of your app or it can be the entire app.  Within Canvas you can illustrate complex shapes and fill those shapes with colors and gradients or you can place images around the canvas.  You can also apply amazing effects allow you morph and adjust the properties of photos and images.  Check out these Canvas examples

Cool Canvas base game - your typing will improve :-)

Blow up video using Canvas

Nice photo color processing app


CSS animation.  CSS which has always allowed you position, stroke and fill items on the page can be used to animate.  We mostly know CSS this from how we style a website, but there are properties in CSS now that allow you tranform (move) styles on the screen with animation between the two style states. This can be done as simple as changing the style of something on the screen for a mouse hover state or on click.  Adding images to the styles and creating dependencies can create interesting animations, not unlike how 3D tools animate objects by animating primatives.  See the examples below

Walking animation using CSS3 animation

CSS Animation Tutorial


For doing more complex game and graphic animations in 3D. WebGL is a software library that extends the use of Javascript to allow it to create 3G graphics and environments.  WebGL is based on OpenGL ES, which is a common graphic software API for creating games for mobile devices.

Water Simulation

Now there is more to HTML5 than graphics. There are other items such as the Video Element <video> which allows you to embed video without haveing to use a Flash embedded player.  This is a big deal, as most all video on the web has required a Flash plug-in. Well, recently YouTube switched to an iframe tag for embedding their video in blogs and webpages.  This change to an iframe tag allows them to serve either Flash or HTML5 video depending on your browser capabilities.  Its hard to know what YouTube is doing behind the scenes with the iFrame, but it is possible you've been watching HTML5 video from YouTube already.

HTML5 also allows for offline data storage, allowing you to save and retrieve data locally.  As more sites move to apps, this makes a lot of sense . Apps unlike websites generally run locally on the device. And in the end this might actually be the big shift in thinking of HTML.  Previously HTML apps loaded in your browser and connected to other stuff on the web.  Now HTML5 apps can run outside the browser and connect and talk to stuff on your device.  

As part of the AppUp developer program we provide a packaging tool called Encapsulator that allows this very thing to happen.  With that tool you can make your HTML5 app a local executable app.  With this packaging service for HTML5 you can do local storage and leverage the AppUp digital rights management service.  All of this is possible withone set of code that you could also run on a variety of other devices and other platforms.

A need for tools and adherence to standards

Give all of this goodness to a master developer and they can create magic, and virtually any kind of application you can imagine. But that is like saying, give a master artist a piece of tree bark, he too will create something amazing.  For most developers these capabilities are a great step forward, however, a cool Flash like tool is missing.  And for HTML5 to be more accessable to a growing world of app developers, the industry needs to develop the tools to make building great apps with HTML5 possible.

Don't get me wrong.  HTML5 is easy to learn. Heck I can do it. But my own personal experience is HTML5 requires its a lot of manual and arguous stringing together of bits of code.  Its like having to personally forge every screw and bolt in order to build a car.  So better tools are needed.

At the same time you have to believe this is the way forward.  Even Adobe is now seeing HTML5 as a part of their roadmap by release Adobe Edge, a new tool to help developers build HTML5 based animations.  However it will only take a major platform player to handicap HTML5 in order to force us back to a more proprietary standard.  Anyone who's tried to get thier USB enabled digital video camera to plug directly into you iPad knows what I'm talking about.  And while Apple did invent WebKit (the open source contribution that HTML5 is built on), you'll note Safari isn't the most HTML5 capable browser.  And Apple is not alone here, every browser out there has their own degree of compatability with HTML5 based on their own flavor of WebKit. So there is fragmentation within the standard already.

In the end there is a great upside potential. HTML5 is possibly more powerful and more of a game changer than many might think, but we need better tools and standardization. If one tech giant after the other agrees standards are great, as long as we use theirs, then to quote Edwin Starr's "War" lyrics one more time "it ain't nothin but a hearbreaker" HUH!!

For more complete information about compiler optimizations, see our Optimization Notice.