Html5
-
Upload
dotnetusergroupdnipro -
Category
Documents
-
view
1.199 -
download
0
Transcript of Html5
Novikov Eugeny29.10.10
HTML5 review
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
What is HTML5 ?
HTML5 ~= HTML + CSS + JS APIs
New simple doctype
<!DOCTYPE html>
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>
Div vs New tags
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
ARIA attributes
<ul id="tree1" role="tree" tabindex="0«aria-labelledby="label_1">
<li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul>
<li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li>
... </ul> </li>
</ul>
New form field types
Audio + Video
<audio id="audio" src="djtapolskii.mp3" controls></audio>;
<video id="video" src="10 минут для пресса.avi" autoplay controls></video>
Canvas
<canvas id="canvas" width="838" height="220"></canvas> <script>
var canvasContext = 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>
New in HTML
Semantics (New tags, Link Relations)Accessibility (ARIA roles)Web Forms 2.0 (Input Fields)Multimedia (Audio Tag, Video Tag)2D drawing (Canvas)
JS APIs
New Selectors
Finding elements by class (DOM API)
var el = document.getElementById('section1'); el.focus(); var els = document.getElementsByTagName('div');els[0].focus();var els = document.getElementsByClassName('section'); els[0].focus();
Finding elements by CSS syntax (Selectors API)
var els = document.querySelectorAll("ul li:nth-child(odd)");var els = document.querySelectorAll("table.test > tr > td");
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
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/
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
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);
}
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 web browsers and web servers.
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
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
Geolocation
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map);
});}
New in JS APIs
Client Side Storage (Web SQL Database, App Cache, Web Strorage)
Communication (Web Sockets) Desktop experience (Notifications, Drag and Drop
API) Geolocation
Ukrainian users
<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>
<img src="myPhoto.jpg“ /></figure><br><hgroup>
Hello World!</hgroup>
http://remysharp.com/downloads/html5.js
Thank You!
Copyright © 2010 SoftServe, Inc.
Contacts
Europe Headquarters 52 V. Velykoho Str.Lviv 79053, Ukraine
Tel: +380-32-240-9090Fax: +380-32-240-9080
E-mail: [email protected]: www.softserveinc.com
US Headquarters12800 University Drive, Suite 250Fort Myers, FL 33907, USA
Tel: 239-690-3111 Fax: 239-690-3116