• Like
Html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Published

 

  • 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
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
34
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. NovikovEugeny
    29.10.10
    HTML5 review
  • 2. 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
  • 3. What is HTML5 ?
    HTML5 ~=HTML + CSS + JS APIs
  • 4. New simple doctype
    <!DOCTYPE html>
  • 5. 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>
  • 6. Div vs New tags
  • 7. 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
  • 8. 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>
  • 9. New form field types
  • 10. Audio + Video
    <audio id="audio" src="djtapolskii.mp3" controls></audio>;
    <video id="video" src="10 минут для пресса.avi" autoplay controls></video>
  • 11. 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>
  • 12. New in HTML
    • Semantics (New tags, Link Relations)
    • 13. Accessibility (ARIA roles)
    • 14. Web Forms 2.0 (Input Fields)
    • 15. Multimedia (Audio Tag, Video Tag)
    • 16. 2D drawing (Canvas)
  • JS APIs
  • 17. 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");
  • 18. 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
  • 19. 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/
  • 20. 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
  • 21. 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);
    }
  • 22. 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.
  • 23. 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
  • 24. 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
  • 25. 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);
    });
    }
  • 26. New in JS APIs
    • Client Side Storage (Web SQL Database, App Cache, Web Strorage)
    • 27. Communication (Web Sockets)
    • 28. Desktop experience (Notifications, Drag and Drop API)
    • 29. Geolocation
  • Ukrainian users
  • 30. <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
  • 31. 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