HTML 5 Tutorial » Examples http://html5tutorial.net Tutorials, Tips & News for the Designer Sat, 24 Jul 2010 09:48:41 +0000 en hourly 1 http://wordpress.org/?v=3.0 Working with HTML5 localStorage() http://html5tutorial.net/tutorials/working-with-html5-localstorage.html http://html5tutorial.net/tutorials/working-with-html5-localstorage.html#comments Tue, 11 May 2010 09:41:40 +0000 editor http://html5tutorial.net/?p=397 HTML5 is fast approaching and getting wide spread usage. Most are familiar with the new tags like header, section and footer and everybody is aware of the new video tags thanks to Apple vs Adobe. However, there is a lot more to HTML5 those just those two aspects.

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();


if (typeof(localStorage) == ‘undefined’ ) {
alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
} else {
try {
localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value”
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(‘Quota exceeded!’); //data wasn’t successfully saved due to quota exceed so throw an error
}
}

document.write(localStorage.getItem(“name”)); //Hello World!
localStorage.removeItem(“name”); //deletes the matching item from the database
}

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. “

Share/Bookmark

]]> http://html5tutorial.net/tutorials/working-with-html5-localstorage.html/feed 4 Canvas examples http://html5tutorial.net/examples/canvas-examples.html http://html5tutorial.net/examples/canvas-examples.html#comments Fri, 11 Sep 2009 13:17:11 +0000 editor http://html5tutorial.net/?p=179 One of the most talked about features of the upcoming HTML5 code is the <canvas> element / tag, some of you may be aware that the <canvas> was first developed by Apple for use in their Mac OS X Dashboard and also implemented at a later date by the Safari browser, Most Gecko based browsers such as FireFox have current support for the <canvas> tag.

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

HTML5 Canvas Test Code:

<html>
<head>
<title>Canvas tutorial</title>
<script type=”text/javascript”>
function draw(){
var canvas = document.getElementById(‘tutorial’);
if (canvas.getContext){
var ctx = canvas.getContext(’2d’);
}
}
</script>
<style type=”text/css”>
canvas { border: 2px solid red; }
</style>
</head>
<body onLoad=”draw();”>
<canvas id=”tutorial” width=”175″ height=”175″></canvas>
</body>
</html>

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

HTML5 Canvas Test #2 Code:

<html>
<head>
<script type=”application/x-javascript”>
function draw() {
var canvas = document.getElementById(“canvas”);
if (canvas.getContext) {
var ctx = canvas.getContext(“2d”);

ctx.fillStyle = “rgb(40,0,0)”;
ctx.fillRect (20, 20, 65, 60);

ctx.fillStyle = “rgba(0, 0, 160, 0.5)”;
ctx.fillRect (40, 40, 65, 60);
}
}
</script>
</head>
<body onLoad=”draw();”>
<canvas id=”canvas” width=”150″ height=”150″></canvas>
</body>
</html>

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.

Share/Bookmark

]]> http://html5tutorial.net/examples/canvas-examples.html/feed 1 Dreamweaver compatibility http://html5tutorial.net/examples/dreamweaver-compatibility.html http://html5tutorial.net/examples/dreamweaver-compatibility.html#comments Fri, 11 Sep 2009 09:41:44 +0000 editor http://html5tutorial.net/?p=174 Today we would like to discuss the Dreamweaver compatibility worries. Myself and many others have been querying whether or not Adobe Dreamweaver would need a core update to be able to process and or read & write in HTML5 standards, some very helpful users of Adobe forums were kind enough to answer our questions, Dreamweaver will not need a core update (this could be a possibility down the track and could be released as a simple update rather than a code update) if you are wondering how to implement HTML5 into your Dreamweaver or other HTML editing application we have a simple solution.

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:

HTML5 template:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HTML5 Template</TITLE>
</HEAD>
<BODY>

<!– Add your content here–>

</BODY>
</HTML>

XHTML5 template:

<!DOCTYPE XHTML>
<XHTML>
<HEAD>
<TITLE>XHTML5 Template</TITLE>
</HEAD>
<BODY>

<!– Add your content here–>

</BODY>
</XHTML>

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.

Share/Bookmark

]]> http://html5tutorial.net/examples/dreamweaver-compatibility.html/feed 1 Basic template http://html5tutorial.net/examples/basic-template.html http://html5tutorial.net/examples/basic-template.html#comments Fri, 11 Sep 2009 08:13:36 +0000 editor http://html5tutorial.net/?p=168 So you want to create your first HTML 5 valid website, as we are getting many requests as to how to achieve this below is the correct format for creating a HTML5 template / HTML5 page:

Basic template:





<!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.

Share/Bookmark

]]> http://html5tutorial.net/examples/basic-template.html/feed 3 HTML 5 Canvas cheat sheet http://html5tutorial.net/examples/html-5-canvas-cheat-sheet.html http://html5tutorial.net/examples/html-5-canvas-cheat-sheet.html#comments Wed, 09 Sep 2009 07:53:05 +0000 editor http://html5tutorial.net/?p=164 Today we have a HTML5 Canvas cheat sheet for you to download or use as a reference, pictured below is a resized version, if you wish to download or view the full sized version please CLICK HERE.

HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet

Share/Bookmark

]]> http://html5tutorial.net/examples/html-5-canvas-cheat-sheet.html/feed 0 Powerful forms with HTML5 http://html5tutorial.net/examples/powerful-forms-with-html5.html http://html5tutorial.net/examples/powerful-forms-with-html5.html#comments Wed, 02 Sep 2009 18:52:39 +0000 editor http://html5tutorial.net/?p=105 Creating forms with HTML5 is a simple process, anyone who has designed a website before would know how easy forms are, with HTML5 forms will be more powerful than ever before yet still simple to put together. Also note: you will need the Opera browser (version 9+) to view this example correctly.

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.

Share/Bookmark

]]> http://html5tutorial.net/examples/powerful-forms-with-html5.html/feed 0