Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Rich Standard: Getting Familiar with HTML5

9,169 views

Published on

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

Published in: Technology
  • Be the first to comment

The Rich Standard: Getting Familiar with HTML5

  1. 1. the RICH STANDARD: GETTING familiar with HTML5 by Todd Anglin @telerik facebook.com/telerik
  2. 2. Introductions Todd Anglin Chief Evangelist, Telerik Microsoft MVP President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
  3. 3. Telerik Complete provider of development planning, construction & testing tools UI DATA PRODUCTIVITY TESTING TFS CMS
  4. 4. the “plan” the options the browsers HTML5 use it today A&Q
  5. 5. “Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” -Steve Jobs April, 2010
  6. 6. <HTML5 ?>
  7. 7. what do these *platforms* have in common?
  8. 8. the rich web
  9. 9. Video Great Great Good Audio Great Great Good Animation Great Great Fair Proprietary Yes Yes No Availability Good Fair Great Evolution Good Good Poor* Tools Fair Great Eh… HTML5
  10. 10. famously dead* proprietary platforms PowerBuilder OS/2 ColdFusion WinForms VB6 FoxPro OS 9 BeOS
  11. 11. when will HTML5 be “official?”
  12. 12. 2022 October 2007 First W3C Working Draft October 2009 Last Call Working Draft 2011 Call for test suite contributions 2012 Candidate Recommendation 2012 First draft of test suite 2015 Second draft of test suite 2019 Final version of test suite. 2020 Reissued Last Call Working Draft 2022 Proposed Recommendation
  13. 13. <HTML5>
  14. 14. the basics • <!DOCTYPE html> • 9 new “structure” tags • 16 new HTML elements • 13 new <input> types
  15. 15. compatible
  16. 16. HTML CSS+ +JavaScript
  17. 17. video audio history semantic tags canvas offline local storage drag & drop geolocation sockets editing web workers
  18. 18. which browsers matter? of internet browses with IE, FF, Safari, Chrome, or Opera 99%
  19. 19. Because some browsers run on many different operating systems, there can be a tendency to use a 'least common denominator' approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5. “ ” -Dean Hachamovitch General Manager, IE Team
  20. 20. html5test.com
  21. 21. DEMO HTML5 Test + IE9
  22. 22. semantic tags tag: <header> <footer> <nav> <article> <hgroup> <header> <hgroup> <h1>My Site</h1> <h2>My site tag line</h2> </hgroup> </header> <article> <header> <h1>An article title</h1> <header> </article> <footer> <p>Copyright 1987</p> </footer> support: IE9, FF3.5, Safari, Chrome, Opera
  23. 23. fixing IE <head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>
  24. 24. input types tag: time, date, search, email, etc. <form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /> </form> support: Safari, Chrome, Opera
  25. 25. canvas tag: <canvas /> <canvas id=“b" width="300" height="225"></canvas> function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } support: IE*, FF3, Safari, Chrome, Opera
  26. 26. fixing IE <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> Explorercanvas
  27. 27. local storage api: sessionStorage & localStoarge <script> sessionStorage.setItem('value', this.value); localStorage.setItem('value', this.value); sessionStorage.getItem(‘value’); sessionStorage.clear(); localStorage.clear(); </script> support: IE9, FF3.5, Safari, Chrome, Opera 5 MB limit
  28. 28. web sockets api: WebSocket ws = new WebSocket("ws://localhost:8282/test”); ws.onopen = WSonOpen; ws.onmessage = WSonMessage; ws.onclose = WSonClose; ws.onerror = WSonError; function WSonMessage(event) { $(“#myDiv”).html(event.data); }; support: Safari, Chrome, Firefox, (Opera 10.7)
  29. 29. web sql api: openDatabase db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000); if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); }); } db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);}); support: Safari, Chrome, Opera “This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.” –W3C
  30. 30. offline tag: <html manifest="html5demo.manifest"> type: text/cache-manifest CACHE MANIFEST # Files you want cached for your app to work offline myLogo.jpg //Interacting with cache window.applicationCache.update(); alert(window.applicationCache.status); support: FF3.5, Safari, Chrome
  31. 31. video tag: <video /> <!-- Single video --> <video src="mymovie.mp4" width="320" height="240"></video> <!-- Multiple encoded versions --> <video width="320" height="240" controls> <source src="mymovie.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="mymovie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> support: IE9, FF3.6, Safari, Chrome, Opera
  32. 32. video for all browsers 1. Multiple encodings 2. Graceful degradation CODECS/ CONTAINER FIREFOX OPERA CHROME IE9 SAFARI IPHONE ANDROID Theora+ Vorbis+ Ogg ✓ ✓ ✓ · · · · H.264+ AAC+MP4 · · ✓ ✓ ✓ ✓ ✓ <video width="320" height="240" controls> <source src="mymovie.ogv"> <source src="mymovie.mp4"> <object data="videoplayer.swf"> <param name="flashvars" value="mymovie.mp4"> HTML5 and Flash video not supported </object> </video>
  33. 33. WebM Royalty Free VP8/Vorbis support: IE9, FF3.5, Safari*, Chrome, Opera
  34. 34. CSS3 & JavaScript
  35. 35. DEMO CSS3 Demos
  36. 36. how do you use HTML5 today?
  37. 37. modernizer
  38. 38. progressive enhancement graceful degradation
  39. 39. DEMO PE & GD Examples
  40. 40. should I use HTML5 today?
  41. 41. The consumer should be able to decide which technologies they want to use, but a multi- platform world is definitely where the world is headed. -Shantanu Narayen April, 2010
  42. 42. The future of the web is HTML5. -Dean Hachamovitch April, 2010
  43. 43. thanks! @toddanglin telerikwatch.com anglin@telerik.com
  44. 44. Resources • Quotes – http://www.apple.com/hotnews/thoughts-on-flash/ – http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article182 67.htm – http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx • HTML5 Resources – http://www.w3.org/TR/html5-diff/#backwards-compatible – http://html5demos.com/ – http://ishtml5ready.com – http://caniuse.com – http://html5readiness.com – http://html5test.com – http://www.browserscope.org/ – http://www.html5rocks.com/ • HTML5 Demos – http://9elements.com/io/projects/html5/canvas/ – http://html5demos.com/ – http://www.chromeexperiments.com/ • CSS3 Demos – http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html – http://anthonycalzadilla.com/css3-ATAT/index.html • IE9 Download – http://ie.microsoft.com/testdrive/

×