Web Development Blog

by Ei Sabai Nyo

05 Sep, 2012

My favourite HTML5 Features    

1. Geolocation
2. onLine
3. Audio and Video
4. Local Storage
5. History

Geolocation

Geolocation API is usually used together with Google Maps to show the current location of the device.

Where would you use it?
Geolocation is an essential feature for applications that needs to know information about the device’s current location such as Store Locator, Cinema Finder and Get Directions.

Example

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successcalllback, errorcallback);
} else {
  errorcallback('This feature is not supported on your device.');
}

function successcalllback(position) {
   console.log(position);
}

function errorcallback(message) {
  console.warn(message);
}

onLine

This HTML5 feature checks the status of Internet connection for the current device.

Where would you use it?
It is a good practice to check if a device has an Internet connection before making an AJAX request to a web service.

Example

var isonline = (navigator.onLine) ? true : false;

Audio and Video

<audio> and <video> are HTML5 elements that enable audios and videos to be displayed on web pages without using a third-party plugin like flash.

Where would you use it?
When you are developing a website or a web app for smartphones, you will want to use audio and video elements to embed media as it will enable those media to be played using the device’s default players, resulting in a better performance and user-experience.

Example

<audio controls="controls" autoplay="autoplay">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mp3" />
  This feature is not supported on your device.
</audio>

<video width="300" height="200" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  This feature is not supported on your device.
</video>

Local Storage

Local Storage acts like a client-side database which your application can use to store information. Unlike cookies, there is a lot of storage space available (5MB) and it is relatively easy to store information into and retrieve information from Local Storage.

Where would you use it?
As the name suggests, Local Storage resides on the user’s local browser and is useful if you wish to remember user’s perferences and usage history.

Example

if(typeof(Storage)!== "undefined")  {
     localStorage.setItem("name", "John Smith");   //save
     console.log(localStorage.getItem("name"));  //retrieve
     localStorage.removeItem("name"); //delete
} else {
     console.warn('This feature is not supported on your device.');
}

History

History API enables deep linking of ajax-powered pages without having to manipulate the current page’s URL.

Where would you use it?
If you have a page where content changes on user’s action without a page refresh, then History API can be used to manipulate browser history so user can move backward and forward between actions.

Example

var pages = [
        {
            "content": "Contentforpageone",
            "photo": "image1.jpg"
        },
        {
            "content": "Contentforpagetwo",
            "photo": "image2.jpg"
        },
        {
            "content": "Contentforpagethree",
            "photo": "image3.jpg"
        }
];

function update(data) {
        $('#content').html(data.content);
        $('#image').attr('src', data.photo);
}

$(function() {
    $('.next, .prev').live('click', function(e) {
        
        var pageno = e.target.getAttribute('href').split('/').pop(),
        data = pages[pageno] || null; 
        
        update(data);
        
        // add to history
        history.pushState(data, e.target.textContent, e.target.href);
        
        e.preventDefault();

    });

    window.addEventListener('popstate', function(e) {
      update(e.state);
    });

	history.replaceState({
	  content: pages[0].content,
	  photo:  pages[0].photo
	}, document.title, document.location.href);

});

<ul>
    <li><a href="/0" class="prev">Previous</a></li>
    <li class="current">1</li>
    <li><a href="/2" class="next">Next</a></li>
</ul>
<div id="content"></div>
<img src="noimage.jpg" alt="" id="image" />
Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

One Response to “My favourite HTML5 Features”

  1. Gulliver says:

    Awesome information. I am really surprised with this topic. Keep up the good work and post more here to read.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories