Your SlideShare is downloading. ×
Html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5

1,184
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,184
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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