Be HTML5-ready today
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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
974
On Slideshare
962
From Embeds
12
Number of Embeds
3

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 12

http://www.linkedin.com 6
https://www.linkedin.com 5
http://twitter.com 1

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
  • Семантический HTML.Центральная задача HTML5 это предоставить набор семантических элементов разработчику. Большый выбор тегов, атрибутов.
  • App Cache, Local Storage, Indexed DB, File API
  • GeoLocation and now being developing access to microphones, camera.
  • WebSockets, Server-Sent Events
  • Audio, video
  • SVG, Canvas, WebGL, and CSS3 3D features
  • Xhr2, webworkers
  • Tons of candies

Transcript

  • 1. HTML5 and related technologies
  • 2. Oleksandr Khomenko
    twitter.com/okhomenko
    okhomenko@gmail.com
    I am from Ukraine
    and work in Petrosoft
    I’m from here
  • 3. HTML5 and friends
    /by @rem (Remy Sharp)
  • 4. Past. How did we get here?
  • 5. Be HTML5-ready today!
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. Tons of candies!
  • 14. HTML5 in 5 seconds
  • 15. <!DOCTYPE html>
  • 16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
  • 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
  • 18. <!DOCTYPE html>
    <html>
    <head>
    <meta charset=“utf-8”/>
  • 19. New semantic elements:
  • 28. document.createElement(“header”);
    document.createElement(“nav”);
    document.createElement(“aside”);

    OR
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  • 29. CSS
    article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
    }
  • 30. data-* attributes
  • 31. What is that?
    <nav>
    <header>
    <h1>What do you plan to do on Friday’s evening?</h1>
    </header>
    <ul>
    <li><a href=“/menu/aval” data-title=“Raiffeisen Bank Aval”>Get money</a></li>
    <li><a href=“/menu/beerloga” data-title=“Drink till dawn”>Drink Beeeer!</a></li>
    </ul>
    </nav>
    <script>
    $(“nav a”).click(function(){
    var cost = $(this).attr(“data-fullinfo”);
    alert(“You are going to ” + $(this).attr(“data-title”));
    });
    </script>
  • 32. Web Forms 2.0
    • Placeholders:
    <form>
    <input name="q" placeholder="Search Bookmarks and History">
    <input type="submit" value="Search">
    </form>
  • 33. Autofocus:
    <form>
    <input name="q" autofocus>
    <input type="submit" value="Search">
    </form>
  • 34. Input types:
    Date pickers
    • color
  • Validation:
    <input id="q" required>
    <form novalidate>
  • 44. Video and audio
  • 45. Earlier and now:
    <object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/9sEI1AUFJKw" />
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <embed src="http://www.youtube.com/ 9sEI1AUFJKw"
    type="application/x-shockwave-flash width="425" height="344">
    </embed>
    </object>
    HTML5 way:
    <video src=web.ogv></video>
    HTML5 way (+legacy browsers):
    <video src=format.ogv>
    Download the <a href=format.ogv>How to format c:</a>
    </video>
  • 46. Attributes:
  • Codecs
  • 51. Common way:
    <video controls>
    <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'>
    <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40">
    <p>Your browser doesn’t support video.
    Please download the video in <a href=format.ogv>Ogg</a></p>
    </video>
  • 52. Common way (+legacy):
    <video controls>
    <source src=format.ogv type=’video/ogg; codecs="theora, vorbis"'>
    <source src=formt.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40">
    <embed src="http://www.youtube.com/v/cmtcc94Tv3A" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
    </video>
  • 53. Steroids:
    <video>
    <source src=“format-low.ogv” media="(min-device-width: 800px)“>
    </video>
  • 54. Support:
  • 55. Geolocation API
  • 56. Get current location
    vargl = navigator.geolocation;
    gl.getCurrentPosition(displayPosition, displayError);
    function displayPosition(position) {
    alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);
    }
    function displayError(positionError) {
    alert("error");
    }
    gl.watchPosition(successCallback, errorCallback, options);
  • 57. Get current location
    vargl = navigator.geolocation;
    gl.getCurrentPosition(displayPosition, displayError);
    function displayPosition(position) {
    alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);
    }
    function displayError(positionError) {
    alert("error");
    }
    gl.watchPosition(successCallback, errorCallback, options);
  • 58. Fallback:
    vargl = null;
    function displayPosition(position) {
    alert(“Latitude: “ + position.coords.latitude + “, Longitude: “ + position.coords.longitude);
    }
    function displayError(positionError) {
    alert("error");
    }
    try {
    if (typeof(navigator.geolocation) == 'undefined'){
    gl = google.gears.factory.create('beta.geolocation');
    } else {
    gl = navigator.geolocation;
    }
    } catch(e) {}
    if (gl) {
    gl.getCurrentPosition(displayPosition, displayError);
    } else {
    alert("Geolocation services are not supported by your web browser.");
    }
  • 59. History API
  • 60. Offline Applications (Cache)
  • 61. Web Storage, Web SQL Databases
  • 62. Drag n Drop
  • 63. Web Sockets
  • 64. In Chrome Frame we trust!
  • 65. Resources
    html5doctor.com
    html5rocks.com
    diveintohtml5.org
    brucelawson.co.uk
    remysharp.com
  • 66.
  • 67. twitter.com/okhomenko
    okhomenko@gmail.com