Html5 Introduction

387 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
387
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 Introduction

  1. 1. Why you should upgrade to… HTML5Praveen Nair Microsoft MVP, PMP http://www.ninethsense.com/
  2. 2. Buzz Words Responsive Web Design RWD
  3. 3. What is HTML5 HTML + JavaScript + CSS3
  4. 4. What is HTML5 Exam – 070-480 HTML + JavaScript + CSS3 + jQuery
  5. 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. 6. Self-validation of form elements <input type="email" placeholder="email address" required />
  7. 7. Make elements editable <div contenteditable> Test </div>
  8. 8. Easier code maintenance • <section> • <header> • <footer> • <article> • <aside> • <nav>
  9. 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. 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. 11. Geolocation • navigator.geolocation.getCurrentPosition(sho wPosition); • function showPosition(position) { // position.coords.latitude // position.coords.longitude; }
  12. 12. HTML4 • Your old markup works still…
  13. 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. 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. 15. Offline web applications • connect to the Internet • load a web page • disconnect from the Internet • work!
  16. 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. 17. Server-Sent Events var source=new EventSource(“test.aspx"); source.onmessage=function(event) { alert(event.data); };
  18. 18. Drag-Drop • <img draggable="true">
  19. 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. 20. Go Mobile Technology targeting not just PC, mobile devices too…
  21. 21. Windows 8 Store Apps • Windows Application Development can be done in HTML5… so HTML is no more just for web…
  22. 22. More… • WebSQL • MathML enhancements • WebSocket • MicroData
  23. 23. Browser compatibility Most browsers supports HTML5. If not, they will support soon because they know they will die if not
  24. 24. Don’t Be Left Behind! • Start learning, if you have not started yet

×