• Like

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.

Demystifying HTML5

  • 3,604 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,604
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
109
Comments
0
Likes
0

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

Transcript

  • 1. demystifyingHtml5
    SergejusBarinovas
    Architect, Adform
  • 2. Agenda
    • The history of HTML5
    • 3. What’s new in HTML5
    • 4. HTML5 vs. Silverlight & Flash
    • 5. Next steps
  • MY HTML5 Background
    • Interest in HTML5 for ~1 year
    • 6. HTML5 workshop in Las Vegas
    • 7. Advertising is dependent on Flash (doesn’t work with iOS devices)
  • Disclaimer
    This is not about
  • 8. The History of HTML5
  • 9. HtML Quiz
    What language HTML is based on?
  • 10. HtML Quiz Answer
    SGML
  • 11. HtML5 Quiz
    What is HTML5?
  • 12. HtML5 Quiz Answer
    • HTML (HTML5, SVG1.1)
    • 13. CSS (CSS3)
    • 14. JavaScript API
  • A Bit of History
  • 15. HTML XHTML
    • 1998 XML 1.0
    • 16. 1999 HTML 4.01
    • 17. 2000 XHTML 1.0
    Reformulate HTML in XML without adding any new elements or attributes
    First draft of XForms 1.0
  • 18. XHTML – The Truth
    Who is developing XHTML web sites?
  • 19. XHTML – The Truth
    You are (probably) lying!
  • 20. XHTML – The Truth
    Everything you know about XHTML is wrong
  • 21. XHTML – The Truth
    • HTML 4.01
    HTML 4.01 DOCTYPE
    MIME type – text/html
    Browsers forgive malformed HTML
    • XHTML 1.0
    XHTML 1.0 DOCTYPE
    MIME type – application/xhtml+xml
    Browsers fail on the first error (draconian error handling)
  • 22. XHTML – The Truth
    XHTML – forget about existing (99%) web sites!
  • 23. XHTML – The Truth
    Thousands of web developers upgraded to XHTMLsyntax and DOCTYPE but kept serving it with a text/html MIME type
  • 24. XHTML – The Truth
    This is not an XHTML!
  • 25. A-HA Moment
    We need to move on supporting interop!
  • 26. The FUTURE of HTML
    June 2004, W3C Workshop An evolution of the existing HTML 4 standard to include new features for modern web application developer
  • 27. The FUTURE of HTML 7 Principles
    • Backwards compatibility, clear migration path
    • 28. Well-defined error handling
    • 29. Users should not be exposed to authoring errors
    • 30. Practical use
    • 31. Scripting is here to stay
    • 32. Device-specific profiling should be avoided
    • 33. Open process
  • The FUTURE of HTML The Poll
    Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM?
    11 to 8 against
  • 34. The FUTURE of HTML The Split
    • W3C
    XHTML 2.0
    • WHAT Working Group
    Documenting the forgiving error-handling algorithms that browsers actually used
    XForms 2.0
    <canvas>
    <audio> and <video>
  • 35. The FUTURE of HTMLThe Reunion
    October 2006, Tim Berners-Leeannounced that the W3C would work together with the WHAT Working Group to evolve HTML
  • 36. The FUTURE of HTMLFirst Draft
    January2008, HTML5 DraftThe first time ever all 5 major browser vendors collaborate together
  • 37. The Future Of HTMLCurrent Situation
    Last call
    Call to implement
    HTML5
  • 38. What’s new in HTML5
    JavaScript API
  • 39. What’s new – JavaScript API
  • What’s new – JS APINew Selectors
    • DOM API
    varels =document.getElementsByClassName('section');
    els[0].focus();
    • Selector API
    varels = document.querySelectorAll('ulli:nth-child(odd)');
  • 45. What’s New – JS APIWeb Workers
    • Independent JavaScript threading
    main.js:
    varworker = newWorker('increment.js');
    worker.postMessage(2);
    worker.onmessage = function(event) { alert(event.data); };
    increment.js:
    self.onmessage = function(event) {
    var result = event.data + 1;
    self.postMessage(result);
    }
  • 46. What’s New – JS APIWeb Sockets
    • Bi-directional full-duplex communication
    varsocket = newWebSocket(location);
    socket.onopen = function(event) {
    socket.postMessage('Hello, WebSocket');
    }
    socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert('closed'); }
  • 47. What’s new – JS APIWeb Storage
    • Local Storage
    varitem=document.localStorage.setItem('key','value');
    • Session Storage
    varitem= document.sessionStorage.getItem('value');
    • IndexedDB
    vardb = indexedDB.open('books', 'Books');
    db.createIndex('BookTitle', 'books', 'title');
    varindex = db.index('BookTitle');
    varresult= index.get('HTML5');
  • 48. What’s new – JS APIOffline Apps
    • Application Cache
    <html manifest="offline.manifest">
    CACHE MANIFEST
    styles.css
    jquery-1.4.min.js
    index.html
    • Offline / Online Events
    window.addEventListener("online",function(){alert('on')});
    window.addEventListener("offline",function(){alert('off')});
  • 49. What’s New – JS APIGeolocation
    • Geolocation API
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
    varlat = position.coords.latitude;
    varlng = position.coords.longitude;
    alert(lat + ':' + lng);
    });
    }
  • 50. What’s new in HTML5
    CSS3
  • 51. What’s new – CSS3
  • What’s new – CSS3Selectors
    • Selectors
    .row:nth-child(even){ background: #dde; }
    • Specific attributes
    input[type="text"] {background: #eee; }
    • Negation
    :not(span) {display: block;}
    • Selection
    ::selection{ background: #c00; }
  • 58. What’s new – CSS3Border Radius
    border-radius: 20px 10px;
    border-top-left-radius: 20px 10px;
    border-top-right-radius: 10px 25px;
    border-bottom-right-radius: 5px 10px;
    border-bottom-left-radius: 15px 25px;
  • 59. What’s new – CSS3Backgrounds
    • Multiple backgrounds
    div {
    background-image:url(bg1.png), url(bg2.png);
    background-position: center center, 20% 80%, top left;
    }
    • SVG in CSS backgrounds
    body { background-image: url("marble.svg") }
  • 60. What’s new – CSS3Color & Opacity
    • RGB / RGBA
    div.demo1 {background: rgba(60, 80, 100, 0.25); }
    • HSL / HSLA
    div.demo2{background: hsla(320, 100%, 25%, 0.4); }
    • Opacity
    div.demo3 { background:#036; opacity:0.2; }
  • 61. What’s new – CSS3Shadows
    • Box Shadow
    div { box-shadow: 5px 5px 7px #888; }
    • Text Shadow
    span { text-shadow: 2px 2px 7px #111; }
  • 62. What’s new – CSS32D Transforms
    div {
    transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
    transform-origin: 0% 0%;
    }
  • 63. What’s new – CSS3WOFF Fonts
    • Font Linking
    @font-face{
    font-family:Whimsy;
    src: url('fonts/Whimsy.woff');
    }
  • 64. What’s new in HTML5
    Html5
  • 65. What’s new – HTML5Simpler Markup
    HTML5 is simpler
  • 66. What’s new – HTML5Simpler Markup
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 67. What’s new – HTML5Simpler Markup
    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 68. What’s new – HTML5Simpler Markup
    <!doctypehtml>
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 69. What’s new – HTML5Simpler Markup
    <!doctypehtml>
    <html>
    <head>
    <meta http-equiv="Content-Type"content="text/html;charset=utf-8" />
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 70. What’s new – HTML5Simpler Markup
    <!doctypehtml>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 71. What’s new – HTML5Simpler Markup
    <!doctypehtml>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Sergejus apie .NET</title>
    <link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" />
    <link rel="alternate"type="application/rss+xml"title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 72. What’s new – HTML5Elements
    HTML5 is more semantic
  • 73. What’s new – HTML5Elements
  • What’s new – HTML5Elements
  • 81. What’s new – HTML5Elements
  • 82. What’s new – HTML5Web forms 2.0
    HTML5 is for Web Apps
  • 83. What’s new – HTML5Web forms 2.0
    • <input type="text"required autofocus />
    • 84. <input type="email" value="some@email.com" />
    • 85. <input type="date" min="2009-11-22" max="2011-11-22" value="2010-11-22"/>
    • 86. <input type="range" min="0" max="50" value="10" />
    • 87. <input type="search" results="10" placeholder="Search..." />
    • 88. <input type="tel" placeholder="(370) 678-00000" pattern="^(?d{3})?[-s]d{3}[-s]d{5}.*?$" />
    • 89. <input type="color" placeholder="e.g. #bbbbbb" />
    • 90. <input type="number" step="1" min="-5" max="10" value="0" />
  • What’s new – HTML5Audio/Video
    HTML5 is richer
  • 91. What’s new – HTML5Audio/Video
    • Audio
    <audioid="audio" src="sound.mp3" controls />
    document.getElementById("audio").muted = false;
    • Video
    <video id="video" src="movie.webm" autoplaycontrols />
    document.getElementById("video").play();
  • 92. What’s new – HTML5Audio/Video
    • Container / Video + Audio Codecs
    MP4 / H.264 + AAC
    Ogg / Theora + Vorbis
    WebM
    No Single Combination YET
  • 93. What’s new – HTML5Canvas
  • What’s new – HTML5Canvas
    <canvasid="canvas" width="838" height="220" />
    <script>
    varcanvasContext = document.getElementById("canvas")
    .getContext("2d");
    canvasContext.fillRect(250, 25, 150, 100);
    canvasContext.beginPath();
    canvasContext.arc(450, 110, 100, Math.PI*1/2, Math.PI*3/2);
    canvasContext.lineWidth = 15;
    canvasContext.lineCap = 'round';
    canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
    canvasContext.stroke();
    </script>
  • 98. What’s new – HTML5SVG
    <svgxmlns="http://www.w3.org/2000/svg">
    <styletype="text/css">
    circle:hover {fill-opacity:0.9;}
    </style>
    <g style="fill-opacity:0.7;">
    <circle cx="6cm" cy="2cm" r="100" style="fill:red; stroke:black;
    stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6cm" cy="2cm" r="100" style="fill:blue;stroke:black;
    stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6cm" cy="2cm" r="100" style="fill:green; stroke:black;
    stroke-width:0.1cm"transform="translate(-70,150)"/>
    </g>
    </svg>
  • 99. HTML5 vs. Flash & Silverlight
  • 100. Html5 vs. flash & Silverlight
    HTML5 is the future of Open Web
  • 101. Html5 vs. flash & Silverlight
    HTML5 is not ready
    for main stream yet
  • 102. Html5 Drawbacks
    • Draft version of specification
    • 103. No standardized audio / video containers and codecs
    • 104. Poor video / graphics performance
    • 105. Lack of professional HTML5 tools
  • Html5 vs. Flash & Silverlight
    • Flash & Silverlight will stay for
    Enhanced video streaming
    Digital rights management (DRM)
    Complex RIAs
  • 106. Adobe and Html5
    • Working hard on HTML5 support
    HTML5 video player with fallback to Flash
    Export images as SVG and Canvas from Illustrator and Photoshop
    Convert Flash to HTML5
  • 107. Microsoft and HTML5
    • Big focus on HTML5 and standards
    HTML5 is the only true cross platform solution for everything, including (Apple’s) iOSplatform.Bob Muglia, PDC2010
    • Silverlight remains top platform for
    Mobile
    Desktop applications
    Video / audio streaming
  • 108. Next steps
  • 109. Next steps
    HTML5 is notall or nothing
  • 110. Next steps
    HTML5 is foward compatible!
  • 111. Next steps
    You can start using it right now!
  • 112. Next Steps
    • Read http://diveintohtml5.org
    • 113. Modernizr.js – detects HTML5 support
    • 114. ASP.NET MVC HTML5 helpers
    • 115. Leverage <video> with fallback to Silverlight or Flash
    • 116. Leverage <canvas> and <svg> with fallback to image
  • Next steps
    Have fun and be creative!
  • 117. Q & A
    Thanks!
    sergejus.blogas.lt, @sergejusb