Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction to HTML5

2 747 vues

Publié le

Introduction to HTML5

Publié dans : Technologie
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Introduction to HTML5

  1. 1. Introduction to HTML5 adrian.olaru@1and1.roFriday, December 10, 2010
  2. 2. What is HTML5? New Wave of Exciting Technologies for Making Web Apps.Friday, December 10, 2010
  3. 3. New doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html>Friday, December 10, 2010
  4. 4. New Elements header hgroup nav details section summary article output aside progress footer menuFriday, December 10, 2010
  5. 5. Form enhancements new input types color number time month date datetime url range email search tel week datetime-local <input type="color" required="required" />Friday, December 10, 2010
  6. 6. Form enhancements new attributes required autocomplete autofocus pattern ... <input type="color" required="required" />Friday, December 10, 2010
  7. 7. Video & Audio <video> <source src="movie.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="movie.mp4" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2" /> <source src="movie.ogv" type=video/ogg; codecs="theora, vorbis" /> fallback content here <video> <audio src="audio.mp3">fallback content here</audio> Video Formats: .mp4 = H.264 + AAC .ogg/.ogv = Theora + Vorbis .webm = VP8 + VorbisFriday, December 10, 2010
  8. 8. Canvas <canvas id="mycanvas" width="150" height="150"> fallback content here </canvas> var canvas = document.getElementById(mycanvas); var context = canvas.getContext(2d); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);Friday, December 10, 2010
  9. 9. History manipulate the contents of the history stack history.pushState({page: 1}, "page 1", "page1.html"); history.replaceState() window.onpopstate = function(e) { e.state; };Friday, December 10, 2010
  10. 10. Web Storage localStorage data persists after the window is closed data is shared across all browser windows. sessionStorage data doesnt persist after the window is closed data is not shared with other windows localStorage.setItem("size", "2"); //or localStorage.size = "2"; localStorage.getItem("size"); //or localStorage.size localStorage.removeItem("size"); localStorage.clear();Friday, December 10, 2010
  11. 11. Web Workers var worker = new Worker(task.js); worker.addEventListener(message, function(e) { e.data; }, false); worker.postMessage(Hello World); // Send data to our worker. worker.terminate(); //to terminate the running worker task.js: onmessage = function (event) { postMessage(e.data); }; importScripts(foo.js, bar.js); /* imports two scripts */ There are some HUGE stipulations, though: Workers dont have access to the DOM Workers dont have direct access to the parent page.Friday, December 10, 2010
  12. 12. But wait, there’s more selectors inline editing drag & drop offline apps web SQL database geolocation messaging server events web sockets ...Friday, December 10, 2010
  13. 13. Resources HTML5 Spec @ WHATWG Using HTML5 Today http://www.whatwg.org/specs/web-apps/current-work/multipage/ http://www.facebook.com/note.php?note_id=43853209391 W3C Spec HTML5 Demos and Examples http://www.w3.org/TR/html5/ http://html5demos.com/ Dive Into HTML5 by Mark Pilgrim Introducing HTML5 http://diveintohtml5.org http://introducinghtml5.com/ HTML5 Rocks Using HTML5s new Semantic Tags Today http://www.html5rocks.com/ http://msdn.microsoft.com/en-us/scriptjunkie/gg454786.aspx HTML5 Doctor Wrapping Things Nicely with HTML5 Local Storage http://html5doctor.com/ http://24ways.org/2010/html5-local-storage HTML5 Unleashed: Tips, Tricks and Techniques MDN HTML5 http://www.w3avenue.com/2010/05/07/html5-unleashed-tips- https://developer.mozilla.org/en/HTML/HTML5 tricks-and-techniquesFriday, December 10, 2010
  14. 14. Thank YouFriday, December 10, 2010

×