HTML5 - What's it all about?
•
5 gostaram•3,023 visualizações
HTML5 is the newest version of HTML and lots of people are talking about it. What is it? Where did it come from? This talk gives an overview of HTML5 and discusses a few of the new features. May 2011. For more about Elisabeth Robson visit http://elisabethroson.com and http://wickedlysmart.com
Recomendados
Mais conteúdo relacionado
Destaque
Último
Último (20)
HTML5 - What's it all about?
- 1. Wednesday, May 25, 2011
- 2. I have a vision... every Web page will be valid XML and full of semantic meaning. Wednesday, May 25, 2011
- 3. 2004 WHAT WG ? Wednesday, May 25, 2011
- 4. Pave the cowpaths Wednesday, May 25, 2011
- 5. W3C W HAT WG Wednesday, May 25, 2011
- 6. HTML 4.01 XHTML 1.0 XHTML 1.1 XHTML 2.0 HTML 5 ? HTML: The Living Standard ? Wednesday, May 25, 2011
- 7. Browser Wars Standards Wars All I know is I want my Web apps to work in everyone’s browser! Wednesday, May 25, 2011
- 8. <script src="../global/modernizr-1.6.js"></script> <script> window.onload = loadMovie; function loadMovie() { var video = document.getElementById("video"); if (Modernizr.video) { console.log("supports video!"); if (Modernizr.video.h264) { console.log("supports mp4!"); video.src = "myMovie.mp4"; } else if (Modernizr.video.ogg) { console.log("supports ogg!"); video.src = "myMovie.ogv"; } } } <script> Wednesday, May 25, 2011
- 9. $(document).ready(function(){ // Your code here }); Wednesday, May 25, 2011
- 10. Wednesday, May 25, 2011
- 11. Wednesday, May 25, 2011
- 12. Desktop November ‘10 February ‘11 IE 9.0 beta IE 8.0 IE 7.0 IE 6.0 Firefox 4.0 beta Firefox 3.5 Firefox 3.1 Chrome Safari Opera Others IE (all) Firefox (all) Mobile 0 10 20 30 40 50 Data from StatsCounter via Wikipedia Wednesday, May 25, 2011
- 13. Wednesday, May 25, 2011
- 14. Mobile November ‘10 February ‘11 Opera Mini iPhone Nokia Black Berry Android Other 0 10 20 30 40 50 Data from StatsCounter via Wikipedia Wednesday, May 25, 2011
- 15. What is HTML5? Wednesday, May 25, 2011
- 16. t a gs • New doctype • Semantic HTML tags • Data attributes • Media tags • Form input types and validation • Canvas • Local Storage A P Is • Geolocation r ip t • Web-workers a S c v • Web sockets Ja Wednesday, May 25, 2011
- 17. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html> Wednesday, May 25, 2011
- 18. Structure and Semantics Wednesday, May 25, 2011
- 19. <div id=”header”> <div id=”nav”> o u p iv s <div id=”section”> <div id=”aside”> d <div id=”footer”> Wednesday, May 25, 2011
- 20. <header> <nav> <section> <aside> <footer> Wednesday, May 25, 2011
- 22. <p> <h1>, <h2> redefined <small>? “small print”, e.g. for comments <time> Represents a date or time new Wednesday, May 25, 2011
- 23. What’s cool about HTML5? Wednesday, May 25, 2011
- 24. <video> Wednesday, May 25, 2011
- 25. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/ The old way oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/ oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object> The new way <video src=”myawesomevideo.mp4”> Your browser doesn’t support video </video> http://www.mediafront.org/ Wednesday, May 25, 2011
- 26. <canvas> Wednesday, May 25, 2011
- 27. function drawSmileyFace() { var canvas = document.getElementById("smiley"); var context = canvas.getContext("2d"); // face context.beginPath() context.arc(300, 300, 200, 0, 2*Math.PI, true); context.fillStyle = "#ffffcc"; context.fill(); context.stroke(); // left eye context.beginPath(); context.arc(200, 250, 25, 0, 2*Math.PI, true); context.stroke(); // right eye context.beginPath(); context.arc(400, 250, 25, 0, 2*Math.PI, true); context.stroke(); // nose context.beginPath(); context.moveTo(300, 300); context.lineTo(300, 350); context.stroke(); // mouth context.beginPath(); var angle = degreesToRadians(20); context.arc(300, 350, 75, angle, Math.PI-angle, false); context.stroke(); } Wednesday, May 25, 2011
- 29. Wednesday, May 25, 2011
- 30. <video> + <canvas> Wednesday, May 25, 2011
- 32. Wednesday, May 25, 2011
- 33. <canvas> + libraries Wednesday, May 25, 2011
- 34. Processing.js http://fizz.bloom.io/ Wednesday, May 25, 2011
- 35. Wednesday, May 25, 2011
- 36. Three.js http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html Wednesday, May 25, 2011
- 37. localStorage Wednesday, May 25, 2011
- 38. localStorage Like cookies, but better Wednesday, May 25, 2011
- 39. 5MB localStorage.setItem(“note1”, “wash cat”); note1 = localStorage.getItem(“note1”); Wednesday, May 25, 2011
- 40. CSS3 Wednesday, May 25, 2011
- 41. Wednesday, May 25, 2011
- 42. Browser Tools Wednesday, May 25, 2011
- 43. Wednesday, May 25, 2011
- 44. Mobile Wednesday, May 25, 2011
- 45. Mobile Web app libraries XUI jQtouch Sencha Touch jQuery Mobile Wednesday, May 25, 2011
- 46. Mobile libraries for HTML/CSS -> native PhoneGap Titanium Rhodes (HTML+Ruby) Wednesday, May 25, 2011
- 47. PhoneGap supported features by platform Wednesday, May 25, 2011
- 48. Wednesday, May 25, 2011
- 49. Elisabeth Robson beth@wickedlysmart.com @elisabethrobson Wednesday, May 25, 2011