The most complex of the samples is Textor, a text editor with syntax highlighting. Instead of editing the text using the HTML DOM, Textor renders text directly into a HTML5 canvas element while handling key and mouse events using JavaScript code.

On top of that it provides syntax highlighting for HTML, JavaScript and CSS and also supports mixed language HTML/JavaScript text. Textor works in IE9, Chrome, Safari and Firefox on both Windows and Mac.

The code includes an undo stack implementation, an incremental tokenizer for syntax highlighting, text input for different browsers and incremental screen invalidation. Textor is lightweight with only 47kB of compressed JavaScript in the main texteditor.js module.

Digger, another sample, is a Boulderdash-style game, again entirely written in JavaScript and using the HTML5 canvas and audio elements. The game fits entirely into one 50kB module with less than 1200 lines of code, including the graphics and sounds encoded as base64 streams. The game is 100% ported from a Silverlight version with exactly the same graphics and functionality.

The last sample is Netron, a library for editing graph elements and connections using HTML5 canvas. It allows the definition of specific graph elements and custom code can be added to change the appearance of these elements.

Each node has a custom set of connection points that can be connected by dragging the mouse. Double-click will activate an element so it’s content can be edited using an overlay input element. Netron includes and undo stack implementation that records all edits and allows reverting them.

See these in action and learn more about Lutz Roeder’s HTML5 work here…

Before I bore you with a long explanation about enterprise modeling, let’s take a look at an example and see our HTML5-based model viewer at work:

……………..

An organizational chart is normally used to document the formal structure of your company. In the example above, I created a family tree of the British Royals. After visualizing them, I analyzed the model and marked those spots where we can still become part of it I created the model using our free modeling tool ARIS Express and uploaded it to the belonging community page. Of course, you can do more serious stuff with the tool like documenting the Scrum process.

At the heart of model viewer, we use HTML5′s canvas to do all the drawing directly in the browser. Besides panning and zooming, you can also enlarge the model to your browser window or embed it in your blog. Our lead developer posted a complete feature overview of model viewer.

While developing the viewer, we faced many challenges like those models should look the same as in the ARIS Express tool. Also, we have to support Microsoft Internet Explorer as it is still the default browser in many corporations. To solve this, we added a browser switch so that Flash gets used in case of Internet Explorer. This Flash version renders much slower, which seems to be a clear indication that with the advent of HTML5, Flash is a technology of the past. If you wish to do some benchmarking between the HTML5 canvas and Flash, take a look at this remake of the complete first level of Super Mario. We also experimented with SVG, but it seems it has the same future as Flash does.

I think our model viewer proves that HTML5 is not just ready to create visually appealing websites, but also the web apps of tomorrow.

I want to focus on localStorage() this time. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

Browser support is always a huge topic when discussing new html5 or even css3 aspects. This is due to such a wide spread of support from the big browsers right now. In the case of localStorage, it is supported by Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+. This only leaves out Opera who currently does not support this storage. Depending on your target audience browser support may be an issue for you.

HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking web app using localStorage as the sole database. The series will walk you through the basics of localStorage to advanced techniques to leverage the power of this new html5 database. We won’t stop at just the functionality of the app but in part four we will cover styling the app with html5 and css3 to create an iPhone(ish) web app.

Here is a quick example of what the javascript looks like to access localStorage();

In the code snippet above we are doing several things including checking if your browser supports localStorage, saving a new item to the database, retrieving that item and displaying it and then removing the item. The above is your typical Hello World example but shows you just how easy it is to use. The time tracking app we will create will be storing a unique id as the key and joining multiple values into one string, as localStorage only supports storing of strings. I will be making the source code available at the end of each article along with the full source and the working app at the end of the series, which you can follow here.

” Written for HTML5Tutorial.net by James Fleeting, a web designer and developer obsessed with the future of the web working at Crane | West Advertising Agency in Wichita Falls, Texas. “

We will keep this example very basic and over time we will delve in a little deeper, our example below should give you a rough idea of what is possible with this new inclusion. See the example here: HTML5 Canvas Test

As you can see the “Draw” function in this script tells the browser what to render, as our example shows above we have told the browser to “Draw” once the page has finished loading this is controlled by the “onLoad” function, there are many variables you can use for this.

Here is another quick example that tells the browser to draw 2 rectangles which overlay each other, HTML5 Canvas Test #2

While it may seem very simple the new JavaScript & <canvas> element are going to play a huge part in the way we develop websites and applications in the future, the options are endless. As mentioned on our site several other times, over the coming weeks and months we will take a look into much more advanced HTML5 tutorials. Please feel free to copy the above code and have a play around with it on your own computer.

Simply download the following Dreamweaver template file (this is a blank template), then load this into your Dreamweaver templates, or your can create your own DWT(Dream-Weaver-Template) with the following code:

As HTML5 is still a work in progress we can not 100% guarantee the above coding, you will hear about this debate again in the future but as for the now, please use the templates above until further notice.

XHTML is fast becoming the popular choice and we are sure Whatwg will clarify this shortly, most users are leaning towards XHTML over HTML, so you might be better of starting with the previously stated XHTML.

<!DOCTYPE html>



<html>



<head>



    <title>New HTML5 page</title>



</head>



<body>



<!-- Add your content here-->



</body>



</html>

As you can see there is not much to this, this is however a very basic page layout, if you wish to get more creative with this then please refer to our HTML 5 reference page for further information or download our free HTML5 valid template. We are currently working on more tutorials which should be ready in the coming weeks, keep an eye on our site or subscribe to our Rss feeds to keep up to date.

This should keep you busy for now, yes the above is very simple, but it is also a great starting point to learn from.

Basic HTML 5 layout code:

<!DOCTYPE HTML>

<html>

<body>

<form action="/examples/powerful-forms-with-html5.html">

First Name: <input type="text" name="fname" value="" /><br />

Last Name: <input type="text" name="lname" value="" /><br />

<input type="submit" value="Submit" />

</form>

<p>Click the submit button and you will return to our site.</p>

</body>

</html>

Please copy and paste the HTML5 form code above and have a play around with it so you get used to some of the new attributes (HTML5 Attributes), next week we will be adding a step by step HTML 5 form guide.