Storing Data on the Client

February 5, 2012 By Leave a Comment

HTML5 offers two new objects for storing data on the client:

  • localStorage – stores data with no time limit
  • sessionStorage – stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.

The data is stored in different areas for different websites, and a website can only access data stored by itself.

HTML5 uses JavaScript to store and access the data.

The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.

How to create and access a localStorage:

Example

<script type=”text/javascript”>
localStorage.lastname=”Smith”;
document.write(localStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page:

Example

<script type=”text/javascript”>
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write(“Visits “+ localStorage.pagecount + ” time(s).”);
</script>

Try it yourself »

 

The sessionStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

How to create and access a sessionStorage:

Example

<script type=”text/javascript”>
sessionStorage.lastname=”Smith”;
document.write(sessionStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page, in the current session:

Example

<script type=”text/javascript”>
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write(“Visits “+sessionStorage.pagecount+” time(s) this session.”);
</script>

Try it yourself »

Source from http://www.w3schools.com

Filed Under: Basic HTML5 Tagged With: , , ,

HTML5 Canvas

January 16, 2012 By Leave a Comment

The canvas element is used to draw graphics on a web page.

Your browser does not support the canvas element.

What is Canvas?

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

 

Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>

Try it yourself »

JavaScript uses the id to find the canvas element:

var c=document.getElementById(“myCanvas”);

Then, create a context object:

var ctx=c.getContext(“2d”);

The getContext(“2d”) object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);

The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.

Understanding Coordinates

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas’ X and Y coordinates are used to position drawings on the canvas.

Mouse over the rectangle below to see the coordinates:

X
Y

More Canvas Examples

Below are more examples of drawing on the canvas element:

Example – Line

Draw a line by specifying where to start, and where to stop:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Circle

Draw a circle by specifying the size, color, and position:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Gradient

Draw a gradient background with the colors you specify:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Image

Put an image on the canvas:

Try it yourself »

 

HTML5 <canvas> Tag

Tag Description
<canvas> Defines graphics

 

Complete Canvas 2d Reference

For a complete reference of all the attributes and methods that can be used with the canvas object, go to our complete canvas 2d reference.

Source from http://www.w3schools.com

Filed Under: Basic HTML5 Tagged With: , ,

HTML5 Drag and Drop

January 16, 2012 By Leave a Comment

Drag and drop is a part of the HTML5 standard.

Drag and Drop

Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location.

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Chrome, and Safari 5 support drag and drop.

Note: Drag and drop does not work in Safari 5.1.2.

Drag and Drop Example

The example below is a simple drag and drop example:

Example

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
function allowDrop(ev)
{
ev.preventDefault();
}function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>

<div id=”div1″ ondrop=”drop(event)”
ondragover=”allowDrop(event)”></div>
<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″ />

</body>
</html>

Try it yourself »

It might seem complicated, but lets go through all the different parts of a drag and drop event.

Make an Element Draggable

First of all: To make an element draggable, set the draggable attribute to true:

<img draggable=”true” />

 

What to Drag – ondragstart and setData()

Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

In this case, the data type is “Text” and the value is the id of the draggable element (“drag1″).

Where to Drop – ondragover

The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault()

 

Do the Drop – ondrop

When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev)
{
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

Code explained:

  • Get the dragged data with the dataTransfer.getData(“Text”) method. This method will return any data that was set to the same type in the setData() method
  • The dragged data is the id of the dragged element (“drag1″)
  • Append the dragged element into the drop element
  • Call preventDefault() to prevent the browser default handling of the data
    (default is open as link on drop)

Source from http://www.w3schools.com

Filed Under: Basic HTML5 Tagged With: , ,

HTML5 Audio

January 16, 2012 By Leave a Comment

HTML5 provides a standard for playing audio files.

Audio on the Web

Until now, there has not been a standard for playing audio files on a web page.

Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.

How It Works

To play an audio file in HTML5, this is all you need:

Example

<audio controls=”controls”>
<source src=”song.ogg” type=”audio/ogg” />
<source src=”song.mp3″ type=”audio/mpeg” />
Your browser does not support the audio element.
</audio>

Try it yourself »

The control attribute adds audio controls, like play, pause, and volume.

You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Audio Formats and Browser Support

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

 

HTML5 audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and <audio>

Source from http://www.w3schools.com

Filed Under: Basic HTML5 Tagged With: , ,

HTML5 Video

January 16, 2012 By 1 Comment

Many modern websites show videos. HTML5 provides a standard for showing them.

Check if your browser supports HTML5 video

Yeah! Full support!

Videos on the Web

Until now, there has not been a standard for showing a video/movie on a web page.

Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

How It Works

Example

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
Your browser does not support the video tag.
</video>

Try it yourself »

The control attribute adds video controls, like play, pause, and volume.

It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).

You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.

The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Video Formats and Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

HTML5 video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio>
<track> Defines text tracks in mediaplayers

Source from http://www.w3schools.com

Filed Under: Basic HTML5 Tagged With: , ,
« Older Posts
Ping your blog, website, or RSS feed for Free Sitetag