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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Be HTML5-ready today

707

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
707
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
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
  • Семантический 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

    ×