Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML 5

on

  • 1,505 views

HTML 5

HTML 5

Statistics

Views

Total Views
1,505
Views on SlideShare
1,366
Embed Views
139

Actions

Likes
0
Downloads
57
Comments
0

4 Embeds 139

http://localhost 84
http://hungrycoder.xenexbd.com 38
http://speakerrate.com 10
http://thehungrycoder.com 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • a

HTML 5 HTML 5 Presentation Transcript

  • HTML5 … web is getting sexy
  • What is HTML5? - It is still HTML, successor of HTML4x - It isENRICHED 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 &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <meta http-equiv=&quot;Content-Type&quot; content=&quot;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 FORM No matter where field exists <form> <input /> </form> <form id=“frm1”> 1 st <input /> </form> <p>Some texts</p> 2 nd <input form=“frm1” /> HTML4x HTML5
  • HTML5 FORM New Input Types
    • URL &Email
    • 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
    • <canvas>
    • Not supported! Show alternate content!
    • </canvas>
    1.0 1.5 9.0 1.3 ExploreCanvas http://code.google.com/p/explorercanvas). 9.0 Browser Support
  •  
  • AUDIO/VIDEO API
  • AUDIO/VIDEO API
    • isAudioSupported= !!(document.createElement(‘audio’).canPlayType);
    1.0 3.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 API Codec 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 API How location is determined? Image Source: Pro HTML5 Programming book
  • Geo Location API 2.0 3.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 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 3.0 3.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 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 http://html5readyness.com 26% 77% 86% 72% 79%
  • Reference http://diveintohtml5.org/
  • Who the hell are you? Mohammad ZakirHossain (Raju) a.k.a The HungryCoder Founder and Administrator Projanmo Forum (http://forum.projanmo.com) Email: thehungrycoder@gmail.com Yahoo/Skype: thehungrycoder Blog: http://hungrycoder.xenexbd.com Question?