• 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!

HTML 5

on

  • 1,421 views

 

Statistics

Views

Total Views
1,421
Views on SlideShare
1,418
Embed Views
3

Actions

Likes
2
Downloads
44
Comments
0

1 Embed 3

http://www.linkedin.com 3

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
  • Web is evolvingSamefidelity als nativeapps, converge
  • Storage and speed => advantage
  • Userswillusing open sourcebrowsers
  • http://en.wikipedia.org/wiki/Outlook_Web_Access
  • Basicintroductiondemos
  • BasicintroductiondemosW3C
  • Class => css
  • Class => cssPlace in normal page
  • Class => cssPlace in normal page1.5KB forveryadvancedanimations
  • GetContext(‘3D’) => not html5
  • Bespin:use case
  • 20% fasteraccessible: svg is more Supportedon all modernbrowsers
  • Basicintroductiondemos
  • HeaderNavArticleVideoTimeMeterDialogfooter
  • Basics
  • Van waar komt het
  • Close safari…OfflineWebappUser interfaceUser dataBrowser cache, whynot?Thingscould time outAppcache, simple file
  • Canbebinairy data
  • Startingsize 200KB hereTransactionWeb = unforgivingenvirementWhyusing ?InjectionattacksConvinienceSecurity?No nowinsecuritys

HTML 5 HTML 5 Presentation Transcript

  • 22 April, 2010
    HTML5
  • Goodbye IE6
  • 3
    A Browser Decomposed
  • 22 April, 2010
    Title
    4
  • 22 April, 2010
    Title
    5
  • 22 April, 2010
    Title
    6
  • 22 April, 2010
    Title
    7
  • 22 April, 2010
    Title
    8
  • GPU on Every Machine
  • Flying Images
  • Flying Images – One Animation GPU
    IE8
    IE8
    IE9
    IE9
    11
  • 22 April, 2010
    Title
    12
  • 22 April, 2010
    Title
    13
  • 22 April, 2010
    Title
    14
    Coudn’t draw on the web easly
    Use
    Flash,
    Javascript,
    Silverlight
    Trapped in a box
  • 22 April, 2010
    Title
    15
  • 22 April, 2010
    Title
    16
    Scalable Vector Graphics (SVG)
    <!DOCTYPE html>
    <html>
    <body>
    <svg width="200" height="200">
    <rect
    x="0" y="0"
    width="100" height="100"
    fill="blue" stroke="red"
    stroke-width="5px"
    rx="8" ry="8"
    id="myRect" class="chart" />
    </svg>
    </body>
    </html>
  • 22 April, 2010
    Title
    17
    Scalable Vector Graphics (SVG)
    var rect = document.getElementById('myRect');
    rect.style.fill = 'green';
    rect.onclick = function() { alert('hello'); }
  • 22 April, 2010
    Title
    18
    Scalable Vector Graphics (SVG)
  • 22 April, 2010
    Title
    19
    Canvas API
    JavaScript API ("Scriptable Image Tag")
    <canvas id="myCanvas" width="150" height="150">
    </canvas>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  • 22 April, 2010
    Title
    20
    Demos
    Mozilla Download Center (FF)
    First PersonGifter(FF)
    SVG WOW (FF) - SMILE
    PopulationDemo (FF)
    Bespin(Safari)
    GermanElection Atlas (Safari)
  • 22 April, 2010
    Title
    21
    When Canvas or SVG?
    SVG -> High level
    Import/Export
    Easy UIs
    Interactive
    Medium Animation
    Tree of objects
    Canvas -> Low level
    No mouseinteraction
    High Animation
    JS Centric
    More Bookkeeping
    Pixels
    Wednesday, October
  • 22 April, 2010
    Title
    22
    http://www.youtube.com/watch?v=XCk22AaRxiE
    Google
    svg
    Google docs
    Canvas
    Performance graphics
  • 22 April, 2010
    Title
    23
  • 22 April, 2010
    Title
    24
    Video is Complicated, and Outside Your Control
    HTML 5 makes n<video> as easy as <img>
    <video src="http://example.com/myMovie.ogg" controls>
    Your browser does not support the video element.
    </video>
  • 22 April, 2010
    Title
    25
    Video is Complicated, and Outside Your Control
    <video controls>
    <sourcesrc="foo.ogg" type="video/ogg">
    <sourcesrc="foo.mp4">
    Your browser does not support the video element.
    </video>
    • Scripting
    var v = document.getElementsByTagName("video")[0];
    v.play();
  • 22 April, 2010
    Title
    26
    Demos
    BasicPlayer(FF 3.5)
    YouTube (Safari 4) - View Source
  • 22 April, 2010
    Title
    27
  • 22 April, 2010
    Title
    28
  • 22 April, 2010
    Title
    29
    Life’sBetterwithLocation
    For
    CRM
    SocialNetork
    Ads
    Photos
    Games
    Places
    ...And Browsers Are Now Location-Enabled
    The geolocationapibringsbrowserbasedlocation to yourapps
  • 22 April, 2010
    Title
    30
    Geolocation Sample
    navigator.geolocation.getCurrentPosition(
    function(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    showLocation(lat, lon);
    }
    );
  • 22 April, 2010
    Title
    31
    Demo
    Google Maps(FF 3.5)
  • 22 April, 2010
    Title
    32
  • 22 April, 2010
    Title
    33
    Web Apps Need to Work Everywhere
    database and appcache store user data and app resources locally
    StickyNotes Demo (Safari 4)
  • 22 April, 2010
    Title
    34
    App Cache
    • List resources that you want to take offline
    CACHE MANIFEST
    /static/stickies.html
    /media/deleteButton.png
    /media/deleteButtonPressed.png
    /css/stickies.css
    /js/stickies.js
    <body manifest="./cache.manifest">
    </body>
  • 22 April, 2010
    Title
    35
    Database
    var db = window.openDatabase("NoteTest", "1.0",
    "Example DB",
    200000);
    function saveMe(id, text, timestamp, left, top, zIndex) {
    db.transaction(
    function (tx) {
    tx.executeSql(
    "INSERT INTO WebKitStickyNotes "
    + "(id, note, timestamp, left, top, zindex) "
    + "VALUES (?, ?, ?, ?, ?, ?)",
    [id, text, timestamp, left, top, zIndex]);
    }
    );
    }
  • 22 April, 2010
    Title
    36
  • 22 April, 2010
    Title
    37
  • 22 April, 2010
    Title
    38
    Web workers
    web workersdefinesanAPI for running background scripts
    Bad Primes (FF 3.5)
    GoodPrimes (FF 3.5)
    Motion Tracker(FF)
  • 22 April, 2010
    Title
    39
    Web Worker
    <script>
    var worker = new Worker('worker.js');
    worker.onmessage = function (event) {
    console.log('Results: ' + event.data);
    };
    </script>
  • 22 April, 2010
    Title
    40
    worker.js
    functionfindPrimes() {
    // ... prime algorithmhere
    postMessage(nextPrime);
    }
    findPrimes();
  • 22 April, 2010
    Title
    41
    HTML5 Support
  • CSS Infrastructure
    CSS3 Selectors
    Help you do more on your site with less script, simpler markup
    CSS3 Namespaces
    Style elements with namespaces in XHTML documents
  • Graphically-rich Styling with CSS3
    CSS3 Color
    Alpha color with rgba() and hsla() color functions
    Transparency control with the opacity property
    CSS3 Backgrounds and Borders
    Round corners with the border-radius property
    Multiple background images per element
    box-shadow property on block elements
  • CSS 3
  • http://9elements.com/io/projects/html5/canvas/
    http://onecm.com/projects/canopy/
    http://ishtml5readyyet.com/
    http://craftymind.com/factory/html5video/CanvasVideo.html
    More Demos