• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

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!

Demystifying HTML5

on

  • 3,823 views

 

Statistics

Views

Total Views
3,823
Views on SlideShare
3,651
Embed Views
172

Actions

Likes
0
Downloads
109
Comments
0

4 Embeds 172

http://sergejus.blogas.lt 85
http://localhost 81
http://coderwall.com 5
http://static.slidesharecdn.com 1

Accessibility

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

    Demystifying HTML5 Demystifying HTML5 Presentation Transcript

    • demystifyingHtml5
      SergejusBarinovas
      Architect, Adform
    • Agenda
      • The history of HTML5
      • What’s new in HTML5
      • HTML5 vs. Silverlight & Flash
      • Next steps
    • MY HTML5 Background
      • Interest in HTML5 for ~1 year
      • HTML5 workshop in Las Vegas
      • Advertising is dependent on Flash (doesn’t work with iOS devices)
    • Disclaimer
      This is not about
    • The History of HTML5
    • HtML Quiz
      What language HTML is based on?
    • HtML Quiz Answer
      SGML
    • HtML5 Quiz
      What is HTML5?
    • HtML5 Quiz Answer
      • HTML (HTML5, SVG1.1)
      • CSS (CSS3)
      • JavaScript API
    • A Bit of History
    • HTML XHTML
      • 1998 XML 1.0
      • 1999 HTML 4.01
      • 2000 XHTML 1.0
      Reformulate HTML in XML without adding any new elements or attributes
      First draft of XForms 1.0
    • XHTML – The Truth
      Who is developing XHTML web sites?
    • XHTML – The Truth
      You are (probably) lying!
    • XHTML – The Truth
      Everything you know about XHTML is wrong
    • 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)
    • XHTML – The Truth
      XHTML – forget about existing (99%) web sites!
    • XHTML – The Truth
      Thousands of web developers upgraded to XHTMLsyntax and DOCTYPE but kept serving it with a text/html MIME type
    • XHTML – The Truth
      This is not an XHTML!
    • A-HA Moment
      We need to move on supporting interop!
    • 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
    • The FUTURE of HTML 7 Principles
      • Backwards compatibility, clear migration path
      • Well-defined error handling
      • Users should not be exposed to authoring errors
      • Practical use
      • Scripting is here to stay
      • Device-specific profiling should be avoided
      • 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
    • 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>
    • The FUTURE of HTMLThe Reunion
      October 2006, Tim Berners-Leeannounced that the W3C would work together with the WHAT Working Group to evolve HTML
    • The FUTURE of HTMLFirst Draft
      January2008, HTML5 DraftThe first time ever all 5 major browser vendors collaborate together
    • The Future Of HTMLCurrent Situation
      Last call
      Call to implement
      HTML5
    • What’s new in HTML5
      JavaScript API
    • What’s new – JavaScript API
      • New Selectors
      • Web Workers*
      • Web Sockets*
      • Web Storage
      • Offline Apps*
      • Geolocation
    • What’s new – JS APINew Selectors
      • DOM API
      varels =document.getElementsByClassName('section');
      els[0].focus();
      • Selector API
      varels = document.querySelectorAll('ulli:nth-child(odd)');
    • 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);
      }
    • 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'); }
    • 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');
    • 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')});
    • 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);
      });
      }
    • What’s new in HTML5
      CSS3
    • What’s new – CSS3
      • Selectors
      • Border Radius
      • Backgrounds
      • Color & Opacity
      • Shadows
      • 2D Transforms
      • WOFF Fonts
    • 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; }
    • 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;
    • 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") }
    • 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; }
    • What’s new – CSS3Shadows
      • Box Shadow
      div { box-shadow: 5px 5px 7px #888; }
      • Text Shadow
      span { text-shadow: 2px 2px 7px #111; }
    • What’s new – CSS32D Transforms
      div {
      transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
      transform-origin: 0% 0%;
      }
    • What’s new – CSS3WOFF Fonts
      • Font Linking
      @font-face{
      font-family:Whimsy;
      src: url('fonts/Whimsy.woff');
      }
    • What’s new in HTML5
      Html5
    • What’s new – HTML5Simpler Markup
      HTML5 is simpler
    • 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" />
    • 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" />
    • 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" />
    • 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" />
    • 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" />
    • 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" />
    • What’s new – HTML5Elements
      HTML5 is more semantic
    • What’s new – HTML5Elements
      • <section>
      • <nav>
      • <article>
      • <header>
      • <footer>
      • <aside>
      • <figure>
      • and more…
    • What’s new – HTML5Elements
    • What’s new – HTML5Elements
    • What’s new – HTML5Web forms 2.0
      HTML5 is for Web Apps
    • What’s new – HTML5Web forms 2.0
      • <input type="text"required autofocus />
      • <input type="email" value="some@email.com" />
      • <input type="date" min="2009-11-22" max="2011-11-22" value="2010-11-22"/>
      • <input type="range" min="0" max="50" value="10" />
      • <input type="search" results="10" placeholder="Search..." />
      • <input type="tel" placeholder="(370) 678-00000" pattern="^(?d{3})?[-s]d{3}[-s]d{5}.*?$" />
      • <input type="color" placeholder="e.g. #bbbbbb" />
      • <input type="number" step="1" min="-5" max="10" value="0" />
    • What’s new – HTML5Audio/Video
      HTML5 is richer
    • 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();
    • What’s new – HTML5Audio/Video
      • Container / Video + Audio Codecs
      MP4 / H.264 + AAC
      Ogg / Theora + Vorbis
      WebM
      No Single Combination YET
    • What’s new – HTML5Canvas
      • Simple Shapes
      • Paths
      • Text
      • Gradients
      • Images
    • 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>
    • 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>
    • HTML5 vs. Flash & Silverlight
    • Html5 vs. flash & Silverlight
      HTML5 is the future of Open Web
    • Html5 vs. flash & Silverlight
      HTML5 is not ready
      for main stream yet
    • Html5 Drawbacks
      • Draft version of specification
      • No standardized audio / video containers and codecs
      • Poor video / graphics performance
      • Lack of professional HTML5 tools
    • Html5 vs. Flash & Silverlight
      • Flash & Silverlight will stay for
      Enhanced video streaming
      Digital rights management (DRM)
      Complex RIAs
    • 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
    • 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
    • Next steps
    • Next steps
      HTML5 is notall or nothing
    • Next steps
      HTML5 is foward compatible!
    • Next steps
      You can start using it right now!
    • Next Steps
      • Read http://diveintohtml5.org
      • Modernizr.js – detects HTML5 support
      • ASP.NET MVC HTML5 helpers
      • Leverage <video> with fallback to Silverlight or Flash
      • Leverage <canvas> and <svg> with fallback to image
    • Next steps
      Have fun and be creative!
    • Q & A
      Thanks!
      sergejus.blogas.lt, @sergejusb