Before we get started, lets take a minute & will tell you about HTML5.
HTML5 helps us to build sites that are Easier to Develop, Simple to Maintain & More User Friendly. They has new elements for defining site structure & embedding content, which means we dont have to include any extra markup or other plug-ins.
It also offers Offline Support, that help us to start building working applications that don’t need an internet connection.
Its improved accessibility support will improve Ajax applications for people with disabilities. Also it is very easy to build rich web applications & incredible things with the help of Web SQL databases, Geo Location & Web Sockets.
Contents
Features
- Rich Multimedia – You don’t need flash or silverlight for video, audio & graphics
- Better Applications
- Cross Document Messaging – Talking Across Domains
- Web Sockets – Sending messages & data across domains
- Client Side Storage – Store persist data entirely on client machine
- Better User Friendly Forms – Email, URL, Telephone, Slider, Number, Date, Color, Placeholder, Autofocus & In-place Editing Support etc
- Improved Accessbility – Attributes like Role, aria-live & aria-atomic etc
Getting Started with HTML5
If you know HTML or XML, then you have come across the doctype declaration. It is used to help browser to determine how web browser will render the page & how the document should be formed.
Place the below HTML5 doctype code in the top of the document. That’s it you are using HTML5
<!DOCTYPE html>
1. Working with Client-Side Data
HTML5 introduced new options for storing data on the client machine.
- Web Storage ( localStorage or sessionStorage )
- Web SQL Databases.
The above two options are easy to use, powerful & reasonably secure than cookies.
Now a days many sites sending requests to server to save user data, but with these new storage options, user data could be stored locally & backed up when necessary
localStorage
Stores data in key/value pairs, tied to the domain & persists across browser sessions
To work with this method, you need little javascript code to access the window.localStorage() object
Below code is used to set a name & value pair using localStorage mechanisam
localStorage.setItem("name", "Karthikeyan");
localStorage.setItem("website", "http://w3lessons.info");
Getting a value back is very easy. below code is used to achieve that.
var client_name = localStorage.getItem("name");
var website_name = localStorage.getItem("website");
Detecting HTML5 localStorage support in your web browser is very simple.
if(window.localStorage) {
//html5 Storage
} else {
//cookie storage
}
2. Offline Data Access
Using HTML5 offline support, we can use HTML & other related technologies to build applications that can still function while disconnected from the internet connection.
These kind of features are really useful for developing mobile applications that may drop internet connections.
This feature works on latest web browsers as well as on iOS & Android devices
Caching with Manifest
The manifest file, it contains a list of all the web application’s client side files that need to exist in the client browser’s cache in order to work offline
Create a file called notes.manifest. Place the file paths that you want to access it via offline
CACHE MANIFEST
/css/style.css
/js/jQuery.js
/js/validation.js
Next, we need to link the created manifest file to our HTML document. We can do this by changing the HTML element like this
<html manifest="notes.manifest">
Then, we should tell our web server to serve this manifest file using the text/cache-manifest MIME type.
If your web server is apache, then place this code in your .htaccess file to serve the manifest file
AddType text/cache-manifest .manifest
After requested 1st time, the files listed in the manifest file get downloaded & cached. We can start disconnect the internet & use our application offline as many times as we want.
3. GeoLocation
Geolocation is a technique for discovering where people are, based on their computer’s location.
It uses computer’s IP address, MAC address or wi-fi hotspot location if available.
Visitor should allow browser to grab visitor’s latitude & longitude.
We need to detect support for Geolocation before we try to get visitor’s location like this
if(navigator.geolocation)
{
//html5 geolocation code
} else {
// ordinary google map code using their API
}
How to get visitor’s current location
Below code is used to get visitor’s latitude & longitute co-ordinates
navigator.geolocation.getCurrentPosition(function(position) {
showLocationMap(position.coords.latitude, position.coords.longitude);
});
Then showLocationMap() function take the latitude & longitute values as parameters & constructs the image.
function showLocationMap(lat, long)
{
var parameters = "&markers=color:red|label:You|"+lat+","+long;
var image_div = $("#map");
var source = image_div.attr('src')+parameters;
source = source.replace("sensor=false", "sensor=true");
image_div.attr("src", source);
}
When we execute this code in the browser, we will see our location, marked with a “You” label.
4. Preventing Autocompletion
HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field or entire form
Example 1
This code will turn off auto-completion in entire form fields
<form method="post" action="" AUTOCOMPLETE="off">
Example 2
This will turn autocomplete feature in the desired field
<form method="post" action="">
<input type="text" name="email" AUTOCOMPLETE="off" value="">
<input type="text" name="name" value="">
</form>
5. Cross Domain Messaging
Client-side web applications always been restricted from sending/getting data from other servers/domains.
But In HTML5, there’s a better way 🙂 They introduced Cross-document Messaging, an API that makes it possible for scripts will communicate with other scripts hosted on different domains/servers.
For example, If you want to submit the data from w3lessons.info to wall.w3lessons.info & retrieve the content from vice versa. you need this approach to make this fast.
Posting the Message
When a user submits the form, we will grab the datas & post a message back to the parent window. The postMessage() function takes two parameters: the data & the target window’s origin.
$("form.submit").click(function(event) {
var name = $("#input_name").val();
var origin = "http://w3lessons.info/post.php";
window.parent.postMessage(name, origin);
});
Now we need a page that will hold this frame and receive its response.
Receiving the Messages
The onmessage event fires whenever current window receives a new message. The message comes back as a property of the event. We have to register this event using jQuery’s bind() method so it works the same in all browsers
$(window).bind("message", function(event) {
$("#target_div").val(event.OriginalEvent.data);
});
Bind method wraps the event and doesn’t expose every property.
In my next post, Will tell you more features on HTML5.
Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!
Hello Karthikeyan K
how can i upload multiple images offline and then retrieve images and upload into folder when i come online status
What is image_div exactly? A div or an img tag? And where does the image come from? This is a very uncomplete example and for a potential newcomer not really helpful… if you could improve the quality of your article/tutorial here, the web would have a better resource available.
hi,
this is one of the great blog .You are giving very tutorials about the HTML5.
Hi Karthikeyan, I was looking for the offline data handling using HTML5. I hope i can ask ur help!
Hi Karthikeyan, I want to learn a lot from you.
Sure Thirumani.. how may I help you?
Great stuff!