Disruptive code

4.447 Aufrufe

Veröffentlicht am

Bruce Lawson "Zen of HTML5" presenttaion at Disruptive Code, Stockholm, 21 September 2010

1 Kommentar
1 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
4.447
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
184
Aktionen
Geteilt
0
Downloads
0
Kommentare
1
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Disruptive code

  1. 1. The Zen of HTML5 Bruce Lawson, Opera Software Disruptive Code / Stockholm / 21 September 2010
  2. 2. การรแจงของ HTML5
  3. 3. XHTML 2 <img />
  4. 4. © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document.
  5. 5. HTML5 <!DOCTYPE html>
  6. 6. Geo SVG
  7. 7. SVG
  8. 8. CSS
  9. 9. New Exciting Web Technology
  10. 10. HTML5 does not replace HTML 4.01
  11. 11. HTML5 has more bling!
  12. 12. HTML5 is umbrella term: markup elements and JavaScript APIs
  13. 13. 28 new elements (or maybe 29)
  14. 14. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  15. 15. Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  16. 16. Styling HTML5 elements article, nav, header, footer {display:block;} document.createElement ('article'); http://html5shim.googlecode.com/svn/trunk/html5.js
  17. 17. <content> ?
  18. 18. Document Outlines
  19. 19. In HTML5, these are all equivalent <h1>Today's top stories</h1> <article> <h3>Dog bites man</h3> ... <article>
  20. 20. <h3>Today's top stories</h3> <article> <h6>Dog bites man</h6> ... <article>
  21. 21. <h6>Today's top stories</h6> <article> <h2>Dog bites man</h2> ... <article>
  22. 22. “Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.” http://www.w3.org/TR/html5/sections.html#headings-and-sections <h1>Today's top stories</h1> <article> <h1>Dog bites man</h1> ... <article>
  23. 23. Webforms – more powerful form elements
  24. 24. standardise commonly-used rich form elements – without JavaScript
  25. 25. built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31> <input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  26. 26. <video>
  27. 27. “...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  28. 28. <object width="425" height="344"> <param name="movie" value="http://www.example.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.example.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
  29. 29. <video src=video.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a> </video>
  30. 30. video format debates – Free formats vs MP4 <video controls autoplay poster=… width=… height=…> <source src=movie.webm type=video/webm> <source src=movie.mp4 type=video/mp4> <source src=movie.ogv type=video/ogg> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  31. 31. video as native object...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls
  32. 32. controlling video with JavaScript <script> /* grab the first video element */ var video = document.getElementsByTagName('video')[0]; /* remove the browser-supplied controls, cos we're scripting our own */ video.removeAttribute('controls'); </script> <video controls> <source src=movie.webm type=video/webm> </video> <input type=button value="play / pause" onclick="if (video.paused) video.play(); else video.pause()">
  33. 33. video accessibility <video controls autoplay poster=… width=… height=…> <source src=movie.webm type=video/webm> <source src=movie.mp4 type=video/mp4> <source src=movie.ogv type=video/ogg> <track src=subtitles.srt kind=subtitles srclang=en> <!-- fallback content --> </video> http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element http://www.delphiki.com/html5/playr/
  34. 34. video media queries <video controls> <source src=hi-res.ogv media=”(min-device-width:800px)”> <source src=lo-res.ogv> </video> http://dev.w3.org/html5/spec/video.html#the-source-element
  35. 35. <canvas>
  36. 36. canvas = “scriptable images”
  37. 37. canvas has standard API methods for drawing ctx = canvas.getContext("2d"); ctx.fillStyle = 'blue'; ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
  38. 38. canvas text ctxt.fillStyle = '#00f'; ctx.font = 'italic 30px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Hello world!', 0, 0); ctx.font = 'bold 30px sans-serif'; ctx.strokeText('Hello world!', 0, 50)
  39. 39. <svg> or <canvas>?
  40. 40. Scalable Vector Graphics: ● Supported in 4 modern browsers, and IE9 ● Vector graphics, therefore infinitely scalable ● XML so text-based - can be made accessible ● Keeps a DOM ● Can author with Adobe Illustrator or Inkscape
  41. 41. All things are connected
  42. 42. canvas > “scriptable images”
  43. 43. canvas can mix with external graphics / video var ctx = document.querySelector('canvas').getContext('2d'), img = document.createElement('img'); img.onload = function () { ctx.drawImage(img, 0, 0); var pixels = ctx.getImageData(0, 0, img.width, img.height); ... }; img.src = 'authors.jpg';
  44. 44. canvas can access every pixel img.onload = function () { ... var pixels = ctx.getImageData(0, 0, img.width, img.height); for (var i = 0, n = pixels.data.length; i < n; i += 4) { pixels.data[i+0] = 255 - pixels.data[i+0]; // red pixels.data[i+1] = 255 - pixels.data[i+2]; // green pixels.data[i+2] = 255 - pixels.data[i+1]; // blue // i + 3 is the alpha channel which we don’t need } ctx.putImageData(pixels, 0, 0); }; img.src = 'authors.jpg';
  45. 45. canvas and video, sitting in a tree! var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); addEvent(video, 'timeupdate', function () { // ctx.restore(); ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height); }); http://html5demos.com/video-canvas
  46. 46. http://www.craftymind.com/factory/html5video/CanvasVideo.html
  47. 47. Photo credits Swinging London http://www.flickr.com/photos/nationalarchives/3008584298/ Cute NEWT by Rob Winters @Robwinters Sharks with lasers: http://www.flickr.com/photos/starstreak007/3416655056/ HTML5 rocks by Alex Sexton Used with permission All others, me
  48. 48. www.opera.com/developer bruce.lawson@opera.com www.brucelawson.co.uk twitter.com/brucel

×