HTML 5 Tutorial » Tutorials 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 html5 monitoring http://html5tutorial.net/tutorials/html5-monitoring.html http://html5tutorial.net/tutorials/html5-monitoring.html#comments Wed, 02 Sep 2009 17:44:04 +0000 editor http://html5tutorial.net/?p=81 Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

 

Please click “Read More” to see the full HTML5 code.

To render what you see above you will need the following code:
[stextbox id="alert" caption="Status monitoring" color="ffffff" ccolor="ffffff"]Network monitoring:

<code<<!DOCTYPE html></code>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>HTML5 Demo: online connectivity monitoring</title>
<style>
body {
font: normal 16px/20px Helvetica, sans-serif;
background: #F4F4F4;
margin: 0;
margin-top: 40px;
padding: 0;
}

section, header, footer {
display: block;
}

#wrapper {
width: 550px;
margin: 0 auto;
background: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top: 1px solid #fff;
padding-bottom: 76px;
}

h1 {
padding-top: 10px;
}

h2 {
font-size: 100%;
font-style: italic;
}

header,
article > p,
article > h3,
article > code,
footer a,
footer p {
margin: 20px;
}

footer > * {
margin: 20px;
color: #999;
}

#status {
padding: 5px;
color: #fff;
background: #ccc;
}

#status.offline {
background: #c00;
}

#status.online {
background: #0c0;
}

</style>
<script>
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while (i–){document.createElement(e[i])}})()
</script>
<script>
function online() {
var status = document.querySelector(‘#status’);
if (status) {
status.className = navigator.onLine ? ‘online’ : ‘offline’;
status.innerHTML = navigator.onLine ? ‘online’ : ‘offline’;
}
}

document.addEventListener(‘DOMContentLoaded’, online, true);
window.addEventListener(‘online’, online, true);
window.addEventListener(‘offline’, online, true);

</script>
</head>
<body>
<section id=”wrapper”>
<header>

<h1>Status Monitoring</h1>
</header>
<article>
<p>Current network status: <span id=”status”>checking…</span></p>
</article>
<footer><a href=”http:html5tutorials.net/”>HTML5 Tutorial</a></footer>
</section>

<script>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script>
try {
var pageTracker = _gat._getTracker(“UA-1656750-18″);
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>[/stextbox]

Share/Bookmark

]]> http://html5tutorial.net/tutorials/html5-monitoring.html/feed 0 Drag and drop http://html5tutorial.net/tutorials/drag-and-drop.html http://html5tutorial.net/tutorials/drag-and-drop.html#comments Wed, 02 Sep 2009 17:03:35 +0000 editor http://html5tutorial.net/?p=58 As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working in the latest Firefox browser only at the moment..


Basic HTML 5 layout code:

<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”/>
<center><title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB, #boxC {
float:left; width:165px; height:165px; padding:10px; margin:10px;
}

#boxA { background-color: #474747; }
#boxB { background-color: #474747; }
#boxC { background-color: #474747; }

#drag, #drag2, #drag3 {
width:30px; height:30px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: #e8e8e8;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}

</style>
<script type=”text/javascript”>
function dragStart(ev) {
ev.dataTransfer.effectAllowed=’move’;
//ev.dataTransfer.dropEffect=’move’;
ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}

function dragEnter(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
return true;
}

function dragOver(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
var id = ev.target.getAttribute(‘id’);
if( (id ==’boxB’ || id ==’boxA’) && (idelt == ‘drag’ || idelt==’drag2′))
return false;
else if( id ==’boxC’ && idelt == ‘drag3′)
return false;
else
return true;
}

function dragEnd(ev) {
ev.dataTransfer.clearData(“Text”);
return true
}

function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}

</script>
</head>
<body>
<h1>Drag and drop HTML5 demo</h1>
<div>there are many other variables that can be used also, we will coer this another day.
</div>

<div id=”boxA”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag2″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

<div id=”drag3″ draggable=”true”
ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me</div>

</div>

<div id=”boxB”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>

<div id=”boxC”
ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>
<div style=”clear:both”>Example created by <a href=”http://html5tutorial.net/”>HTML Tutorials</a>.</div>
</body></center>
</html>

We will cover JavaScript in depth at a later date, for now copy and paste the code above and have a play around with it and see what you can come up with, this was more or less an example to demonstrate HTML5′s tremendous power.

Share/Bookmark

]]> http://html5tutorial.net/tutorials/drag-and-drop.html/feed 4 Basic HTML 5 layout http://html5tutorial.net/tutorials/basic-html-5-layout.html http://html5tutorial.net/tutorials/basic-html-5-layout.html#comments Wed, 02 Sep 2009 07:27:25 +0000 editor http://html5tutorial.net/?p=11 Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.

(Example currently undergoing an update, sign up to our rss feed to be notified of it’s completion, it will be fantastic!)

As you can see it is a very basic page, however you will need to start from the bottom with HTML 5 as it varies quite a lot from the old HTML 4 code reference.

Currently the only browser to fully support HTML 5 reference code is Safari you can download it HERE.

Make sure you bookmark our website, we are in the process of putting together more HTML 5 tutorials.

Share/Bookmark

]]> http://html5tutorial.net/tutorials/basic-html-5-layout.html/feed 3