HTML5 …web is getting sexy
What is HTML5? - It is still HTML, successor of HTML4x - It is ENRICHED HTML - It is still UNDER DEVELOPMENT - Backward Compatible
Why HTML5? - Built amazing web apps at ease - Address issues of current standard (html 4.01) - Made for web designers/developers!
What’s new? New APIs New Elements – more than hundred. e.g. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, New Attributes - ping, async, custom attr. etc. New Events – ondrag, ondragstart, ondragend, ondrop etc. - We will discuss some
Simplicity from beginning In HTML5
What real web made of? Class: 2.1+ million urls ID: 1.8+ million urls
Sectioning Elements
HTML5 FORM
No matter where field exists 1 st Some texts 2 nd HTML4x HTML5
HTML5 FORM New Input Types URL & Date & Time Number, Range Search, Tel, Color
HTML5 FORM New Attributes Required, Pattern Min, Max, Step Placeholder, data-* Autocomplete, Autofocus Multiple Form
Not impressed? Lets go wild!
What are they? Canvas Geolocation WebSocket Web SQL Database Web Workers XMLHttpRequest 2 MathML Web Storage Media SVG Cross Document Messaging
CANVAS API
Canvas API Not supported! Show alternate content! ExploreCanvas orercanvas). 9.0 Browser Support
Canvas API Something like this? Source:
AUDIO/VIDEO API
isAudioSupported= !!(document.createE lement(‘audio’).canP layType); Compatibility Check Browser Support
AUDIO/VIDEO API Audio element is not supported. Alternate media Fallback Embed the typical flash media
AUDIO/VIDEO API Codec problem… The audio track! First supported codec will be played and rest will be ignored
Geo Location API Tell us where you are now!
Geo Location API How location is determined? Image Source: Pro HTML5 Programming book
Geo Location API (iPhone) With Gear Plugin Compatibility Check if(navigator.geolocation) { //Geo location is supported } else { //Geo Location is not supported } Browser Support
Geo Location API navigator.geolocation.getCurrentPosition (success_callback, failure_callback, options); function success_callback(obj_pos){ var latitude = obj_pos.coords.latitude; var longitude = obj_pos.coords.longitude; var accuracy = obj_pos.coords.accuracy; } Requesting Location
Geo Location API navigator.geolocation.watchLocation(); navigator.geolocation.clearWatch(gId); Requesting Location Continuously
Web Storage API
What is it? Store data directly on client Less http requests Not old friend Cookie Cross-browser exchange is not possible.
Web Storage API Local Storage Persists beyond current or created window/tab Persists even creator window/tab is closed Session Storage Persists on only created window/tab Destroyed as soon as creator window/tab is closed
Web Storage API Compatibility Check if(window.sessionStorage) { //Session storage is supported } if(window.localStorage) { //Localstorage is supported } Browser Support
Web Storage API Set/Get Session Storage //set values window.sessionStorage.setItem(key,value); window.sessionStorage.key = value; //get values window.sessionStorage.getItem(key); window.sessionStorage.key;
HTML5 Readyness 26% 77% 86% 72% 79%
Reference
Who the hell are you? Mohammad Zakir Hossain (Raju) a.k.a The HungryCoder Founder and Administrator Projanmo Forum ( Yahoo/Skype: thehungrycoder Blog: Question?