HTML5 Startup Guide

As programmers we have to be keen to new technologies but there are just too many. As a web developer you have your back-end scripts, your server and your front-end code. Now the front-end has become much more complex with the introduction of HTML5. Here I'll describe some of the more important features of HTML5 that are already usable in most browsers.

Offline

With the upgrades to the local storage capabilities in HTML5 offline web applications are feasible. There are two variables one to access local storage capabilities which are usually limited to a max per webpage. Then there is a "sessionStorage" variable that holds data that expires when a tab is closed. Here is the code to check online connectivity so you can switch to the local storage capability of your application.

if (navigator.onLine) { alert('online') } else { alert('offline'); }

Connectivity

Open sockets are a young technology on the web but a powerful one. This is not standardized across the web yet but there are many options that encompass this feature with browser specific fall backs. You have Socket.IO and WebSocket-Node for the Node.js server group. Then for java you have Jetty, Python has pywebsocket,etc. I suggest get to know one well as the techniques needed to write a open socket services are of a different nature and should be understood.

Semantic

This is probably the easiest thing to learn about HTML5 but it is really important. The new semantics of HTML5 allow you to me much more descriptive and unique in your markup making your code more maintainable and your CSS cleaner. There are also new inputs for forms. Here are some of the tags and attributes that are highly compatible and should make your life a little easier.

• FORMS: -slider,color,email input types
  -button tag
• BASIC: -section,article,header,footer tags
• CSS3: -round corners
  -animations
  -transformations
  -media queries (responsive design)

Media and Graphics

Audio video tag are up and running on the latest browsers and as time goes on the ability of the api and the amount of browsers that accept the api will get better. There are libraries out there that handle audio and video fall backs. I suggest getting to know SoundManager2 and http://videojs.com/ libraries. If your job is in audio and video getting to know the native javascript api will allow you to know their limitations.

Like wise there are apis for using the 2d raster tag "canvas" and the webGL interfaces. Canvas has been around for a while and its worth getting to know because data visualization is very useful and its highly supported. SVG is also a good way to keep server hits down and delegate some work to the client. Below is a SVG picture rendered by your browser.

If you are creating games I suggest you get to know the canvas api for yourself. It has many interesting tools for manipulating the raster box that makes certain animations easy.

HTML5 is something that will be old news in the next 2 years. Get to know these basics and you will at least stay current. These set of features already make HTML a very efficient expressive tool,and when they become fully accepted and combined web applications will get highly complex. It is important to get an early start.