Html5 Introduction
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
249
On Slideshare
249
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Why you should upgrade to… HTML5Praveen Nair Microsoft MVP, PMP http://www.ninethsense.com/
  • 2. Buzz Words Responsive Web Design RWD
  • 3. What is HTML5 HTML + JavaScript + CSS3
  • 4. What is HTML5 Exam – 070-480 HTML + JavaScript + CSS3 + jQuery
  • 5. Easy to start • Just <!DOCTYPE html> • No more - <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • 6. Self-validation of form elements <input type="email" placeholder="email address" required />
  • 7. Make elements editable <div contenteditable> Test </div>
  • 8. Easier code maintenance • <section> • <header> • <footer> • <article> • <aside> • <nav>
  • 9. Media <audio controls> <source src=“test.mp3" type="audio/mpeg"> </audio> <video width="320" height="240" > <source src="movie.mp4" type="video/mp4"> </video>
  • 10. Web Storage • localStorage["bar"] = foo; • var foo = localStorage["bar"];  a lot of storage space  on the client  that persists beyond a page refresh  and isn’t transmitted to the server
  • 11. Geolocation • navigator.geolocation.getCurrentPosition(sho wPosition); • function showPosition(position) { // position.coords.latitude // position.coords.longitude; }
  • 12. HTML4 • Your old markup works still…
  • 13. <CANVAS> API • “a resolution-dependent bitmap canvas that can be used for rendering graphs, games graphics, or other visual images on the fly.”
  • 14. WEB WORKER • No more long-running scripts which will freeze your browser. Run your scripts in background. w=new Worker(“workerfile.js"); w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; function stopWorker() { w.terminate(); }
  • 15. Offline web applications • connect to the Internet • load a web page • disconnect from the Internet • work!
  • 16. More input types <input type="search"> <input type="number"> <input type="range"> <input type="color"> <input type="tel"> <input type="url"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local"> <input type="email">
  • 17. Server-Sent Events var source=new EventSource(“test.aspx"); source.onmessage=function(event) { alert(event.data); };
  • 18. Drag-Drop • <img draggable="true">
  • 19. SVG • <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke- width:5;fill-rule:evenodd;"> < /svg>
  • 20. Go Mobile Technology targeting not just PC, mobile devices too…
  • 21. Windows 8 Store Apps • Windows Application Development can be done in HTML5… so HTML is no more just for web…
  • 22. More… • WebSQL • MathML enhancements • WebSocket • MicroData
  • 23. Browser compatibility Most browsers supports HTML5. If not, they will support soon because they know they will die if not
  • 24. Don’t Be Left Behind! • Start learning, if you have not started yet