Web Directions @media 2010
•
4 recomendaciones•919 vistas
HTML5 is a new version of HTML that provides new semantic elements and APIs for multimedia content like video and canvas scriptable graphics without plugins. It standardizes current browser behaviors and introduces new form and media elements that work across browsers. While support is not perfect yet, progressive enhancement approaches ensure graceful degradation. HTML5 provides alternatives to plugins like Flash, giving developers more choice in how to build rich web applications.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (10)
Similar a Web Directions @media 2010
Similar a Web Directions @media 2010 (20)
Más de Patrick Lauke
Más de Patrick Lauke (20)
Último
Último (20)
Web Directions @media 2010
- 1. Brave new world of HTML5 THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA) Patrick H. Lauke / Webdirections @media / London / 11 June 2010
- 2. Web Evangelist at Opera
- 3. new technologies you can start using today
- 6. HTML5 definition without the bullsh*t
- 7. history of HTML5 ● started at Opera – Web Applications 1.0 ● reaction to XHTML 2.0 ● Google, Mozilla and Apple joined ● W3C HTML5 ● Microsoft involvement
- 8. “...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
- 9. HTML5 does not replace HTML 4.01
- 10. HTML5 has more bling!
- 11. HTML5 standardises current browser and authoring behaviour (e.g. relaxed coding rules)
- 12. HTML5 is stricter? (defines exactly how browsers handle markup/code)
- 13. HTML5 brings new markup elements and JavaScript APIs
- 14. new elements for more accurate semantics
- 15. HTML5 elements for a typical blog
- 18. unambiguous and machine readable
- 19. current and old browsers “support” these (although some need a little extra help) header, footer, … { display: block; }
- 20. Internet Explorer needs extra training wheels document.createElement('header'); document.createElement('footer'); … http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
- 21. webforms – more powerful form elements
- 22. rich form elements – without JavaScript <input type=”date”> <input type=”time”> <input type=”month”> <input type=”week”> <input type=”datetime” … > <input type=”range”> <input type=”number”> <input type=”file” multiple> <input … autofocus> <input … autocomplete>
- 23. type and attributes for built-in validation (of course you should still validate on the server) <input type=”tel”> <input type=”email”> <input type=”url”> <input … pattern="[a-z]{3}[0-9]{3}"> <input … required> Demonstration of webforms
- 24. <video>
- 25. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
- 26. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
- 27. video as native object...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls Demonstration of video
- 28. video format debate H.264 vs Ogg Theora
- 29. video format debate H.264 vs Ogg Theora vs WebM
- 30. video formats – H.264 + OGG Theora + WebM <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
- 31. <audio>
- 32. audio exactly the same <audio src=”music.mp3” controls autoplay></audio> [...] <audio controls autoplay> <source src="music.mp3" type="audio/mpeg" /> <source src="music.oga" type="audio/ogg" /> <!-- fallback content --> </audio> MP3, Ogg Vorbis, WAV Demonstration: audio
- 33. <canvas>
- 34. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
- 35. canvas has standard API methods for drawing ctx = canvas.getContext("2d"); ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2); ctx = canvas.drawImage(…);
- 37. canvas appropriate use for enhanced visuals, special effects – not pure content
- 38. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 44. But is it safe to use, right now?
- 45. feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
- 47. not a question of HTML5 replacing Flash...
- 48. Giving developers a choice!
- 49. www.opera.com/developer people.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf patrick.lauke@opera.com