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

Be HTML5-ready today

on

  • 910 views

 

Statistics

Views

Total Views
910
Views on SlideShare
900
Embed Views
10

Actions

Likes
0
Downloads
14
Comments
0

3 Embeds 10

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

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
  • Семантический 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

Be HTML5-ready today Be HTML5-ready today Presentation Transcript

  • HTML5 and related technologies
  • Oleksandr Khomenko
    twitter.com/okhomenko
    okhomenko@gmail.com
    I am from Ukraine
    and work in Petrosoft
    I’m from here
  • HTML5 and friends
    /by @rem (Remy Sharp)
  • Past. How did we get here?
  • Be HTML5-ready today!
  • Tons of candies!
  • HTML5 in 5 seconds
  • <!DOCTYPE html>
  • <!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"/>
  • <!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"/>
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset=“utf-8”/>
  • New semantic elements:
    • section
    • nav
    • article
    • aside
    • hgroup
    • header
    • footer
    • time
    • mark
  • 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]-->
  • CSS
    article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
    }
  • data-* attributes
  • 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>
  • Web Forms 2.0
    • Placeholders:
    <form>
    <input name="q" placeholder="Search Bookmarks and History">
    <input type="submit" value="Search">
    </form>
  • Autofocus:
    <form>
    <input name="q" autofocus>
    <input type="submit" value="Search">
    </form>
  • Input types:
    • email
    • url
    • phone
    • number
    • range
    Date pickers
    • date
    • datetime
    • month
    • Week
    • time
    • search
    • color
  • Validation:
    <input id="q" required>
    <form novalidate>
  • Video and audio
  • 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>
  • Attributes:
    • autoplay
    • controls
    • preload (auto, none, meta)
    • poster
    • loop
  • Codecs
  • 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>
  • 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>
  • Steroids:
    <video>
    <source src=“format-low.ogv” media="(min-device-width: 800px)“>
    </video>
  • Support:
  • Geolocation API
  • 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);
  • 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);
  • 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.");
    }
  • History API
  • Offline Applications (Cache)
  • Web Storage, Web SQL Databases
  • Drag n Drop
  • Web Sockets
  • In Chrome Frame we trust!
  • Resources
    html5doctor.com
    html5rocks.com
    diveintohtml5.org
    brucelawson.co.uk
    remysharp.com
  • twitter.com/okhomenko
    okhomenko@gmail.com