Html5

NovikovEugeny 29.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>

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"> <lirole="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <lirole="group"> <ul> <lirole="treeitem" tabindex="-1">Oranges</li> <lirole="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul>

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

Multimedia (Audio Tag, Video Tag)

2D drawing (Canvas),[object Object]

New Selectors Finding elements by class (DOM API) var el = document.getElementById('section1'); el.focus(); varels = document.getElementsByTagName('div'); els[0].focus(); varels = document.getElementsByClassName('section'); els[0].focus(); Finding elements by CSS syntax (Selectors API) varels = document.querySelectorAll("ulli:nth-child(odd)"); varels = 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 webbrowsers 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; varlng = 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 ,[object Object]

Html5

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Html5

Similaire à Html5 (20)

Plus de dotNETUserGroupDnipro

Plus de dotNETUserGroupDnipro (9)

Html5