Html5
Upcoming SlideShare
Loading in...5
×
 

Html5

on

  • 1,467 views

 

Statistics

Views

Total Views
1,467
Views on SlideShare
1,467
Embed Views
0

Actions

Likes
0
Downloads
34
Comments
0

0 Embeds 0

No embeds

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

Html5 Html5 Presentation Transcript

  • NovikovEugeny
    29.10.10
    HTML5 review
  • Rough Timeline of Web Technologies
    1991 HTML
    1994 HTML 2
    1996 CSS1 + JavaScript
    1997 HTML 4
    1998 CSS 2
    2000 XHTML 1
    2002 Tableless Web Design
    2005 AJAX
    2009 HTML 5
  • What is HTML5 ?
    HTML5 ~=HTML + CSS + JS APIs
  • New simple doctype
    <!DOCTYPE html>
  • New semantic tags
    <body>
    <header>
    <hgroup>
    <h1>Page title</h1>
    <h2>Page subtitle</h2>
    </hgroup>
    </header>
    <nav>
    <ul> Navigation... </ul>
    </nav>
    <section>
    <article>
    <header>
    <h1>Title</h1>
    </header>
    <section>
    Content...
    </section>
    </article>
    <article>
    <header>
    <h1>Title</h1>
    </header>
    <section>
    Content...
    </section>
    </article>
    <article>
    <header>
    <h1>Title</h1>
    </header>
    <section>
    Content...
    </section>
    </article>
    </section>
    <aside>
    Top links...
    </aside>
    <footer>
    Copyright © 2010.
    </footer>
    </body>
  • Div vs New tags
  • New link relations
    <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="pingback" href="http://myblog.com/xmlrpc.php">
    <link rel="prefetch"href="http://myblog.com/main.php">
    ...
    <a rel="archives" href="http://myblog.com/archives">old posts</a>
    <a rel="external" href="http://notmysite.com">tutorial</a>
    <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
    <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
    <a rel="tag" href="http://myblog.com/category/games">games posts</a>
    http://www.blog.whatwg.org/the-road-to-html-5-link-relations#what
  • ARIA attributes
    <ul id="tree1"
    role="tree"
    tabindex="0«
    aria-labelledby="label_1">
    <lirole="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
    <lirole="group">
    <ul>
    <lirole="treeitem" tabindex="-1">Oranges</li>
    <lirole="treeitem" tabindex="-1">Pineapples</li>
    ...
    </ul>
    </li>
    </ul>
  • New form field types
  • Audio + Video
    <audio id="audio" src="djtapolskii.mp3" controls></audio>;
    <video id="video" src="10 минут для пресса.avi" autoplay controls></video>
  • Canvas
    <canvas id="canvas" width="838" height="220"></canvas>
    <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>
  • New in HTML
    • Semantics (New tags, Link Relations)
    • Accessibility (ARIA roles)
    • Web Forms 2.0 (Input Fields)
    • Multimedia (Audio Tag, Video Tag)
    • 2D drawing (Canvas)
  • JS APIs
  • New Selectors
    Finding elements by class (DOM API)
    var el = document.getElementById('section1');
    el.focus();
    varels = document.getElementsByTagName('div');
    els[0].focus();
    varels = document.getElementsByClassName('section');
    els[0].focus();
    Finding elements by CSS syntax (Selectors API)
    varels = document.querySelectorAll("ulli:nth-child(odd)");
    varels = document.querySelectorAll("table.test > tr > td");
  • Web Storage
    // use localStorage for persistent storage
    // use sessionStorage for per tab storage
    textarea.addEventListener('keyup', function () {
    window.localStorage['value'] = area.value;
    window.localStorage['timestamp'] = (new Date()).getTime();
    }, false);
    textarea.value = window.localStorage['value'];
    Save text value on the client side
  • Web SQL Database
    Var db = window.openDatabase(“Database Name”, “Database Version”);
    db.transaction(function(tx)
    {
    tx.executeSql(“SELECT * FROM test”, [], successCallback, errorCallback);
    });
    If you try to open a database that doesn’t exist, the API will create it on the fly for you. You also don’t have to worry about closing databases.
    http://html5doctor.com/introducing-web-sql-databases/
  • Application Cache
    <html manifest = “cache.manifest”>
    Window.applicationCache.addEventListener( ‘checking’ ,
    updateCacheStatus, false);
    CACHE MANIFEST
    # version 1
    CACHE:
    /html5/src/refresh.png
    /html5/src/logic.js
    /html5/src/style.css
    /html5/src/background.png
  • Web Workers
    main.js:
    var worker = new Worker('extra_work.js');
    worker.onmessage = function(event) { alert(event.data); };
    extra_work.js:
    self.onmessage= function(event) {
    // Do some work.
    self.postMessage(some_data);
    }
  • Web Sockets
    var socket = new WebSocket(location);
    socket.onopen = function(event) {
    socket.postMessage(“Hello, WebSocket”);
    }
    socket.onmessage = function(event) { alert(event.data); }
    socket.onclose = function(event) { alert(“closed”); }
    Bi-directional, full-duplex communications channels, over a single Transmission
    Control Protocol (TCP) socket, designed to be implemented in webbrowsers
    and web servers.
  • Notifications
    if (window.webkitNotifications.checkPermission() == 0) {
    // you can pass any url as a parameter
    window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();
    } else {
    window.webkitNotifications.requestPermission();
    }
    http://playground.html5rocks.com/#simple_notifications
  • Drag and drop
    document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed= 'copy';
    }, false);
    http://playground.html5rocks.com/#drag_from_desktop
  • Geolocation
    if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    varlng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
    });
    }
  • New in JS APIs
    • Client Side Storage (Web SQL Database, App Cache, Web Strorage)
    • Communication (Web Sockets)
    • Desktop experience (Notifications, Drag and Drop API)
    • Geolocation
  • Ukrainian users
  • <html>5doctor
    <!--[if lte IE 8]>
    <script src="html5.js" type="text/javascript"></script>
    <![endif]-->
    <style>
    time { font-style: italic; };
    figure { border: 4px inset #AAA; padding: 4px }
    hgroup { color: red;}

    <time datetime="2009-09-13">my birthday</time>
    <br>
    <figure>
    <imgsrc="myPhoto.jpg“ />
    </figure>
    <br>
    <hgroup>
    Hello World!
    </hgroup>
    http://remysharp.com/downloads/html5.js
  • Europe Headquarters
    52 V. Velykoho Str.
    Lviv 79053, Ukraine
    Tel: +380-32-240-9090Fax: +380-32-240-9080
    E-mail: info@softserveinc.com
    Website: www.softserveinc.com
    US Headquarters
    12800 University Drive, Suite 250Fort Myers, FL 33907, USA
    Tel: 239-690-3111 Fax: 239-690-3116
    Thank You!
    Copyright ©2010 SoftServe, Inc.
    Contacts