Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

The Rich Standard: Getting Familiar with HTML5

on

  • 7,718 views

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 ...

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.

Statistics

Views

Total Views
7,718
Views on SlideShare
6,035
Embed Views
1,683

Actions

Likes
1
Downloads
40
Comments
0

11 Embeds 1,683

http://www.telerikwatch.com 1543
http://feeds.feedburner.com 87
url_unknown 34
http://www.linkedin.com 5
http://www.newsblur.com 3
http://www.webheadneeded.com 3
http://webcache.googleusercontent.com 2
https://www.linkedin.com 2
http://www.techgig.com 2
http://feedly.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 HTML5Fun 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.htmlhttp://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdfhttp://gsnedders.html5.org/outlinerhttp://diveintohtml5.org/examples/blog-original.htmlhttp://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-attributehttp://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-storageReplacement Tech is IndexedDB:http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html
  • http://html5demos.com/offlineapphttp://diveintohtml5.org/offline.html
  • http://diveintohtml5.org/video.html
  • http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.htmlhttp://paulbakaus.com/lab/js/coverflow/http://www.cssplay.co.uk/menu/css3-animation.htmlhttp://anthonycalzadilla.com/css3-ATAT/index.html
  • http://www.modernizr.com/
  • http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.htmlhttp://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

The Rich Standard: Getting Familiar with HTML5 Presentation Transcript

  • 1. the RICHSTANDARD:GETTING familiar with HTML5
    facebook.com/telerik
    by Todd Anglin
    @telerik
  • 2. Introductions
    Todd Anglin
    Chief Evangelist, Telerik
    Microsoft MVP
    President NHDNUG & O’Reilly Author
    TelerikWatch.com
    @toddanglin
  • 3. Telerik HQ
    Sofia, Bulgaria
    Founded 2002
    Sofia, BG
    Munich, DE
    Boston, MA
    Houston, TX
    Austin, TX
    Winnipeg, CA
    Toronto, CA
    Hong Kong, CN
  • 4. Telerik
    One-stop provider for .NET tools & UI components
    UI DATA PRODUCTIVITY TESTING TFS CMS
    .NET Developer Productivity
    UI: ASP.NET AJAX, MVC, WinForms, Silverlight, WPF
    DATA: Telerik Reporting, OpenAccess ORM
    TFS: Work Item Manager, Project Dashboard
    CMS: Sitefinity CMS
    PRODUCTIVITY: JustCode, JustMock
    TESTING: WebUI Test Studio
  • 5. Telerik
    Complete provider of development planning, construction & testing tools
    UI DATA PRODUCTIVITY TESTING TFS CMS
  • 6. the “plan”
  • 7. “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
  • 8. <HTML5 ?>
  • 9. what do these *platforms* have in common?
  • 10. the rich web
    New!Web 3D
  • 11. HTML5
  • 12. famously dead* proprietary platforms
    ColdFusion
    PowerBuilder
    WinForms
    FoxPro
    OS/2
    VB6
    OS 9
    BeOS
  • 13. when will HTML5 be “official?”
  • 14. 2022
  • 15. <HTML5>
  • 16. the basics
    <!DOCTYPE html>
    9 new “structure” tags
    16 new HTML elements
    13 new <input> types
  • 17. compatible
  • 18. HTML
    CSS+
    +JavaScript
  • 19.
  • 20.
  • 21. which browsers matter?
    99%
    of internet browses with
    IE, FF, Safari, Chrome, or Opera
  • 22.
  • 23. 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
  • 24. html5test.com
    ?
  • 25. HTML5 Test + IE9
  • 26. 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
  • 27. 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>
  • 28. input types
    tag: time, date, search, email, etc.
    <form>
    <input type="email" autofocus="autofocus" placeholder="Enter your email" />
    </form>
    support: Safari, Chrome, Opera
  • 29. canvas
    tag: <canvas />
    <canvas id=“b" width="300" height="225"></canvas>
    function draw_b() {
    varb_canvas = document.getElementById("b");
    varb_context = b_canvas.getContext("2d");
    b_context.fillRect(50, 25, 150, 100);
    }
    support: IE*, FF3, Safari, Chrome, Opera
  • 30. fixing IE
    <head>
    <!--[if IE]>
    <script src="excanvas.js"></script>
    <![endif]-->
    </head>
    Explorercanvas
  • 31. local storage
    api: sessionStorage & localStoarge
    <script>
    sessionStorage.setItem('value', this.value);
    localStorage.setItem('value', this.value);
    sessionStorage.getItem(‘value’);
    sessionStorage.clear();
    localStorage.clear();
    </script>
    5 MB limit
    support: IE9, FF3.5, Safari, Chrome, Opera
  • 32. 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)
  • 33. 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_atTEXT, 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);});
    “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
    support: Safari, Chrome, Opera
  • 34. 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
  • 35. 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
  • 36. video for all browsers
    Multiple encodings
    Graceful degradation
    <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>
  • 37. WebM
    Royalty Free
    VP8/Vorbis
    support: IE9, FF3.5, Safari*, Chrome, Opera
  • 38. CSS3 &JavaScript
    jQuery
  • 39. CSS3 Demos
  • 40. how do you use HTML5 today?
  • 41. modernizer
  • 42. progressiveenhancementgracefuldegradation
  • 43.
  • 44.
  • 45. PE & GD Examples
  • 46. should I use HTML5 today?
  • 47. 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.
    -ShantanuNarayen
    April, 2010
  • 48. The future of the web is HTML5.
    -Dean Hachamovitch
    April, 2010
  • 49. thanks!
    telerikwatch.com
    @toddanglin
    anglin@telerik.com
  • 50. Resources
    Quotes
    http://www.apple.com/hotnews/thoughts-on-flash/
    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
    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/