html5 …web is getting sexy. what is html5? - it is still html, successor of html4x - it is...
Post on 25-Dec-2015
216 Views
Preview:
TRANSCRIPT
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><meta http-equiv="Content-Type" content="text/html; charset=utf-8”>
<!DOCTYPE html><meta charset=utf-8>
In HTML5
What real web made of?Class: 2.1+ million urls ID: 1.8+ million urls
Sectioning Elements<header><nav><section><aside><article><footer>
HTML5 FORM
HTML5 FORMNo matter where field exists
<form><input /></form>
<form id=“frm1”>1st <input /></form><p>Some texts</p>2nd <input form=“frm1” />
HTML4x HTML5
HTML5 FORMNew Input Types
•URL &Email•Date & Time•Number, Range•Search, Tel, Color
HTML5 FORMNew 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<canvas>Not supported! Show alternate content!
</canvas>1.01.5
9.0 1.3
ExploreCanvashttp://code.google.com/p/
explorercanvas).
9.0
Browser Support
Canvas APISomething like this?
Source: http://www.youtube.com/watch?v=00bTqPr2CFM
AUDIO/VIDEO API
AUDIO/VIDEO API
isAudioSupported= !!(document.createElement(‘audio’).canPlayType);
1.03.5
9.0 1.3
9.0
Compatibility Check Browser Support
AUDIO/VIDEO API
<audio src=“file1.ogg”>Audio element is not supported. </audio> Alternate media
Fallback
<video src=“file1.ogv”>Embed the typical flash media</video>
AUDIO/VIDEO APICodec problem…
<audio controls> <source src=“file1.ogg”> <source src=“file1.mp3”> The audio track!</audio>First supported codec will be played and rest will be ignored
Geo Location APITell us where you are now!
Geo Location APIHow location is determined?
Image Source: Pro HTML5 Programming book
Geo Location API
2.03.5
10.0 4 (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
Web Storage APIWhat is it?• Store data directly on client• Less http requests• Not old friend Cookie• Cross-browser exchange is not possible.
Web Storage APILocal 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 API3.03.0
10.5 4.0
8.0
Compatibility Check
if(window.sessionStorage) {//Session storage is supported
}if(window.localStorage) {
//Localstorage is supported}
Browser Support
Web Storage APISet/Get Session Storage
//set valueswindow.sessionStorage.setItem(key,value); window.sessionStorage.key = value;
//get valueswindow.sessionStorage.getItem(key);window.sessionStorage.key;
HTML5 Readynesshttp://html5readyness.com
26%77%86%
72%79%
Reference
http://diveintohtml5.org/
Who the hell are you?Mohammad Zakir Hossain (Raju) a.k.a The HungryCoderFounder and AdministratorProjanmo Forum (http://forum.projanmo.com)Email: thehungrycoder@gmail.comYahoo/Skype: thehungrycoderBlog: http://hungrycoder.xenexbd.com
Question?
top related