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

  • 4,044 views

 

Statistics

Views

Total Views
4,044
Views on SlideShare
3,872
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 View slide
    • HTML5 vs. Silverlight & Flash View slide
    • 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