Html5

transcript

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>

Div vs New tags

New link relations

<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

<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>

New form field types

Audio + Video

<audio id="audio" src="djtapolskii.mp3" controls></audio>;

Canvas

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

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

<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>

Hello World!</hgroup>

http://remysharp.com/downloads/html5.js

Thank You!

Contacts

Europe Headquarters 52 V. Velykoho Str.Lviv 79053, Ukraine

Tel: +380-32-240-9090Fax: +380-32-240-9080

E-mail: info@softserveinc.comWebsite: www.softserveinc.com

US Headquarters12800 University Drive, Suite 250Fort Myers, FL 33907, USA

Tel: 239-690-3111 Fax: 239-690-3116

Html5

Documents