Embed Size (px)
DESCRIPTION
Citation preview
HTML5 and related technologies
Oleksandr Khomenko
twitter.com/[email protected]
I am from Ukraineand 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"><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><html><head><meta charset=“utf-8”/>
New semantic elements:• section• nav• article• aside• hgroup• header• footer• time• mark
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
document.createElement(“header”);document.createElement(“nav”);document.createElement(“aside”);…
OR
article, aside, figure, footer, header, hgroup, nav, section { display: block;}
CSS
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
<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>
Earlier and now:
<video src=web.ogv></video>
HTML5 way:
<video src=format.ogv> Download the <a href=format.ogv>How to format c:</a> </video>
HTML5 way (+legacy browsers):
Attributes:• autoplay• controls• preload (auto, none, meta)• poster• loop
Codecs
<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:
<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>
Common way (+legacy):
Steroids:<video> <source src=“format-low.ogv” media="(min-device-width: 800px)“></video>
Support:
Geolocation API
var gl = 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
var gl = 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
var gl = 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.");}
Fallback:
History API
Offline Applications (Cache)
Web Storage, Web SQL Databases
Drag n Drop
Web Sockets
In Chrome Frame we trust!
html5doctor.com
html5rocks.com
diveintohtml5.org
brucelawson.co.uk
remysharp.com
Resources
twitter.com/[email protected]
![HTML5 Pocket Referencecanvas.projekti.info/ebooks/Oreilly.HTML5.Pocket.Reference.5th.Edition[A4].pdf · Recommends which HTML5 and CSS3 features are ready to use and which fallback](https://img.pdfslide.net/doc/110x75/5e509771a8a50d3b080451b0/html5-pocket-a4pdf-recommends-which-html5-and-css3-features-are-ready-to-use.jpg)
