Your SlideShare is downloading. ×
The Rich Standard: Getting Familiar with HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Rich Standard: Getting Familiar with HTML5

7,683
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 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,683
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • Company History
  • http://www.apple.com/hotnews/thoughts-on-flash/
  • Talk about the major “platforms” for the web. Introduce the players.
  • Looking for people to identify that Flash, Silverlight, and HTML5 are all competing to deliver the rich web
  • Ian Hickson of Google, Inc. is the editor of HTML5

    Fun facts:
    - It takes about 10 years to build a nuclear power plant (http://wiki.answers.com/Q/How_long_does_it_take_to_build_a_Nuclear_Power_Station)
    - Deposit $10/day for 12 years @ 8% = $73,000 (http://calcnexus.com/savings-calculator.php)
  • he HTML5 specification will not be considered finished before there are at least two complete implementations of the specification.

    http://www.w3.org/TR/html5-diff/#backwards-compatible
  • http://html5demos.com/
  • http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1
  • http://caniuse.com/

    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

    http://html5test.com/

  • http://www.w3.org/TR/html5/text-level-semantics.html

    http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf

    http://gsnedders.html5.org/outliner

    http://diveintohtml5.org/examples/blog-original.html

    http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d
  • http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute

    http://www.html5laboratory.com/s/simple-html5-contact-form.html
  • http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
  • http://code.google.com/p/explorercanvas/
  • http://html5demos.com/storage
  • Example code for .NET WebSockets:
    http://www.undisciplinedbytes.com/2010/06/html-5-c-web-sockets-server-and-asp-net-client-implementation/

    Opera on Sockets:
    http://my.opera.com/core/blog/websockets

  • WebSql is not proceeding: http://dev.w3.org/html5/webdatabase/

    State of web local storage: http://rethink.unspace.ca/2010/5/10/the-state-of-html5-local-data-storage

    Replacement Tech is IndexedDB:
    http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html
  • http://html5demos.com/offlineapp

    http://diveintohtml5.org/offline.html
  • http://diveintohtml5.org/video.html
  • http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

    http://paulbakaus.com/lab/js/coverflow/

    http://www.cssplay.co.uk/menu/css3-animation.html

    http://anthonycalzadilla.com/css3-ATAT/index.html
  • http://www.modernizr.com/
  • http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

    http://www.filamentgroup.com/examples/slider/index2UI.php

  • http://www.dailytech.com/Adobes+CEO+Responds+to+Steve+Jobs+Rant+about+Flash/article18267.htm
  • http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx
  • Transcript

    • 1. the RICH STANDARD: GETTING familiar with HTML5 by Todd Anglin @telerik facebook.com/telerik
    • 2. Introductions Todd Anglin Chief Evangelist, Telerik Microsoft MVP President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
    • 3. Telerik Complete provider of development planning, construction & testing tools UI DATA PRODUCTIVITY TESTING TFS CMS
    • 4. the “plan” the options the browsers HTML5 use it today A&Q
    • 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. <HTML5 ?>
    • 7. what do these *platforms* have in common?
    • 8. the rich web
    • 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. famously dead* proprietary platforms PowerBuilder OS/2 ColdFusion WinForms VB6 FoxPro OS 9 BeOS
    • 11. when will HTML5 be “official?”
    • 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. <HTML5>
    • 14. the basics • <!DOCTYPE html> • 9 new “structure” tags • 16 new HTML elements • 13 new <input> types
    • 15. compatible
    • 16. HTML CSS+ +JavaScript
    • 17. video audio history semantic tags canvas offline local storage drag & drop geolocation sockets editing web workers
    • 18. which browsers matter? of internet browses with IE, FF, Safari, Chrome, or Opera 99%
    • 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. html5test.com
    • 21. DEMO HTML5 Test + IE9
    • 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. 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. input types tag: time, date, search, email, etc. <form> <input type="email" autofocus="autofocus" placeholder="Enter your email" /> </form> support: Safari, Chrome, Opera
    • 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. fixing IE <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> Explorercanvas
    • 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. 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. 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. 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. 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. 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. WebM Royalty Free VP8/Vorbis support: IE9, FF3.5, Safari*, Chrome, Opera
    • 34. CSS3 & JavaScript
    • 35. DEMO CSS3 Demos
    • 36. how do you use HTML5 today?
    • 37. modernizer
    • 38. progressive enhancement graceful degradation
    • 39. DEMO PE & GD Examples
    • 40. should I use HTML5 today?
    • 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. The future of the web is HTML5. -Dean Hachamovitch April, 2010
    • 43. thanks! @toddanglin telerikwatch.com anglin@telerik.com
    • 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/