Downloaded 44 times
![“...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](https://image.slidesharecdn.com/atmedia11-06-2010-100611072543-phpapp02/85/Web-Directions-media-2010-8-320.jpg)
![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](https://image.slidesharecdn.com/atmedia11-06-2010-100611072543-phpapp02/85/Web-Directions-media-2010-23-320.jpg)
![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](https://image.slidesharecdn.com/atmedia11-06-2010-100611072543-phpapp02/85/Web-Directions-media-2010-32-320.jpg)
Uploaded byPatrick Lauke
Web Directions @media 2010
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.
More Related Content
![[DN Scrum Breakfast] Protractor: E2E Testing for AngularJS (by Thuy Nguyen)](https://cdn.slidesharecdn.com/ss_thumbnails/protractorthuynguyen-170930044242-thumbnail.jpg?width=640&height=640&fit=bounds)
Web Directions @media 2010
- 1. Brave new worldof HTML5 THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA) Patrick H. Lauke / Webdirections @media / London / 11 June 2010
- 2. Web Evangelist atOpera
- 3. new technologies youcan start using today
- 4.
- 5.
- 6. HTML5 definition withoutthe 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 languageto 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 notreplace HTML 4.01
- 10. HTML5 has morebling!
- 11. HTML5 standardises currentbrowser and authoring behaviour (e.g. relaxed coding rules)
- 12. HTML5 is stricter? (definesexactly how browsers handle markup/code)
- 13. HTML5 brings new markupelements and JavaScript APIs
- 14. new elements formore accurate semantics
- 15. HTML5 elements fora typical blog
- 18. unambiguous and machinereadable
- 19. current and oldbrowsers “support” these (although some need a little extra help) header, footer, … { display: block; }
- 20. Internet Explorer needsextra training wheels document.createElement('header'); document.createElement('footer'); … http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
- 21. webforms – morepowerful 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 attributesfor 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.
- 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 nativeobject...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.264vs Ogg Theora
- 29. video format debate H.264vs 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.
- 32. audio exactly thesame <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.
- 34. canvas = “scriptableimages” <canvas width="…" height="…"></canvas>
- 35. canvas has standardAPI 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(…);
- 36.
- 37. canvas appropriate usefor enhanced visuals, special effects – not pure content
- 38. video, audio andcanvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 44. But is itsafe to use, right now?
- 45. feature-detection progressive enhancement, gracefuldegradation http://diveintohtml5.org/everything.html
- 46.
- 47. not a questionof HTML5 replacing Flash...
- 48. Giving developers achoice!
- 49.