{"id":1958,"date":"2012-09-05T16:11:03","date_gmt":"2012-09-05T06:11:03","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1958"},"modified":"2012-09-04T16:34:08","modified_gmt":"2012-09-04T06:34:08","slug":"my-favourite-html5-features","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/","title":{"rendered":"My favourite HTML5 Features"},"content":{"rendered":"

1. Geolocation
\n2. onLine
\n3. Audio and Video
\n4. Local Storage
\n5. History<\/p>\n

Geolocation<\/h3>\n

Geolocation API is usually used together with Google Maps to show the current location of the device. <\/p>\n

Where would you use it?<\/strong>
\nGeolocation 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. <\/p>\n

Example<\/strong><\/p>\n

\r\nif (navigator.geolocation) {\r\n  navigator.geolocation.getCurrentPosition(successcalllback, errorcallback);\r\n} else {\r\n  errorcallback('This feature is not supported on your device.');\r\n}\r\n\r\nfunction successcalllback(position) {\r\n   console.log(position);\r\n}\r\n\r\nfunction errorcallback(message) {\r\n  console.warn(message);\r\n}\r\n<\/pre>\n
onLine<\/h3>\n
This HTML5 feature checks the status of Internet connection for the current device.  <\/p>\n
Where would you use it?<\/strong>
\nIt is a good practice to check if a device has an Internet connection before making an AJAX request to a web service. <\/p>\n
Example<\/strong><\/p>\n
var isonline = (navigator.onLine) ? true : false;<\/pre>\n
Audio and Video<\/h3>\n
<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.  <\/p>\n
Where would you use it?<\/strong>
\nWhen 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.  <\/p>\n
Example<\/strong><\/p>\n
\r\n<audio controls="controls" autoplay="autoplay">\r\n  <source src="audio.ogg" type="audio\/ogg" \/>\r\n  <source src="audio.mp3" type="audio\/mp3" \/>\r\n  This feature is not supported on your device.\r\n<\/audio>\r\n\r\n<video width="300" height="200" controls="controls">\r\n  <source src="video.mp4" type="video\/mp4" \/>\r\n  <source src="video.ogg" type="video\/ogg" \/>\r\n  This feature is not supported on your device.\r\n<\/video>\r\n<\/pre>\n
Local Storage<\/h3>\n
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. <\/p>\n
Where would you use it?<\/strong>
\nAs 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.  <\/p>\n
Example<\/strong><\/p>\n
\r\nif(typeof(Storage)!== "undefined")  {\r\n     localStorage.setItem("name", "John Smith");   \/\/save\r\n     console.log(localStorage.getItem("name"));  \/\/retrieve\r\n     localStorage.removeItem("name"); \/\/delete\r\n} else {\r\n     console.warn('This feature is not supported on your device.');\r\n}\r\n<\/pre>\n
History<\/h3>\n
History API enables deep linking of ajax-powered pages without having to manipulate the current page's URL.  <\/p>\n
Where would you use it?<\/strong>
\nIf 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. <\/p>\n
Example<\/strong><\/p>\n
\r\nvar pages = [\r\n        {\r\n            \"content\": \"Contentforpageone\",\r\n            \"photo\": \"image1.jpg\"\r\n        },\r\n        {\r\n            \"content\": \"Contentforpagetwo\",\r\n            \"photo\": \"image2.jpg\"\r\n        },\r\n        {\r\n            \"content\": \"Contentforpagethree\",\r\n            \"photo\": \"image3.jpg\"\r\n        }\r\n];\r\n\r\nfunction update(data) {\r\n        $('#content').html(data.content);\r\n        $('#image').attr('src', data.photo);\r\n}\r\n\r\n$(function() {\r\n    $('.next, .prev').live('click', function(e) {\r\n        \r\n        var pageno = e.target.getAttribute('href').split('\/').pop(),\r\n        data = pages[pageno] || null; \r\n        \r\n        update(data);\r\n        \r\n        \/\/ add to history\r\n        history.pushState(data, e.target.textContent, e.target.href);\r\n        \r\n        e.preventDefault();\r\n\r\n    });\r\n\r\n    window.addEventListener('popstate', function(e) {\r\n      update(e.state);\r\n    });\r\n\r\n\thistory.replaceState({\r\n\t  content: pages[0].content,\r\n\t  photo:  pages[0].photo\r\n\t}, document.title, document.location.href);\r\n\r\n});\r\n<\/pre>\n
\r\n\r\n<ul>\r\n    <li><a href="\/0" class="prev">Previous<\/a><\/li>\r\n    <li class="current">1<\/li>\r\n    <li><a href="\/2" class="next">Next<\/a><\/li>\r\n<\/ul>\r\n<div id="content"><\/div>\r\n<img src="noimage.jpg" alt="" id="image" \/>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
1. Geolocation 2. onLine 3. Audio and Video 4. Local Storage 5. History Geolocation Geolocation<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,3],"tags":[],"class_list":["post-1958","post","type-post","status-publish","format-standard","hentry","category-snippets","category-xhtml"],"yoast_head":"\nMy favourite HTML5 Features  | Tech Leadership Advice & Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"My favourite HTML5 Features  | Tech Leadership Advice & Resources\" \/>\n<meta property=\"og:description\" content=\"1. Geolocation 2. onLine 3. Audio and Video 4. Local Storage 5. History Geolocation Geolocation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice & Resources\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-05T06:11:03+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"My favourite HTML5 Features\",\"datePublished\":\"2012-09-05T06:11:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\"},\"wordCount\":324,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"Snippets\",\"xHTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\",\"name\":\"My favourite HTML5 Features | Tech Leadership Advice & Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2012-09-05T06:11:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"My favourite HTML5 Features\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"My favourite HTML5 Features  | Tech Leadership Advice & Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/","og_locale":"en_US","og_type":"article","og_title":"My favourite HTML5 Features  | Tech Leadership Advice & Resources","og_description":"1. Geolocation 2. onLine 3. Audio and Video 4. Local Storage 5. History Geolocation Geolocation","og_url":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/","og_site_name":"Tech Leadership Advice & Resources","article_published_time":"2012-09-05T06:11:03+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"My favourite HTML5 Features","datePublished":"2012-09-05T06:11:03+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/"},"wordCount":324,"commentCount":1,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["Snippets","xHTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/","url":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/","name":"My favourite HTML5 Features | Tech Leadership Advice & Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2012-09-05T06:11:03+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2012\/09\/05\/my-favourite-html5-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"My favourite HTML5 Features"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering & Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1958"}],"version-history":[{"count":5,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1958\/revisions"}],"predecessor-version":[{"id":1963,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1958\/revisions\/1963"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1958"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1958"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}