![New SelectorsFinding 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");](https://image.slidesharecdn.com/html5-110126090840-phpapp02/85/Html5-17-320.jpg)
![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](https://image.slidesharecdn.com/html5-110126090840-phpapp02/85/Html5-18-320.jpg)
![Web SQL DatabaseVar 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/](https://image.slidesharecdn.com/html5-110126090840-phpapp02/85/Html5-19-320.jpg)
Html5
- 2. Rough Timeline of Web Technologies1991 HTML1994 HTML 21996 CSS1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless Web Design2005 AJAX2009 HTML 5
- 3. What is HTML5 ?HTML5 ~=HTML + CSS + JS APIs
- 4. New simple doctype<!DOCTYPE html>
- 5. 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>
- 6. Div vs New tags
- 7. 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
- 8. 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>
- 9. New form field types
- 10. Audio + Video<audio id="audio" src="djtapolskii.mp3" controls></audio>;<video id="video" src="10 минут для пресса.avi" autoplay controls></video>
- 11. 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>
- 12. New in HTMLSemantics (New tags, Link Relations)
- 14. Web Forms 2.0 (Input Fields)
- 15. Multimedia (Audio Tag, Video Tag)
- 16. 2D drawing (Canvas)JS APIs
- 17. New SelectorsFinding 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");
- 18. 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
- 19. Web SQL DatabaseVar 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/
- 20. Application Cache<html manifest = “cache.manifest”>Window.applicationCache.addEventListener( ‘checking’ ,updateCacheStatus, false);CACHE MANIFEST# version 1CACHE:/html5/src/refresh.png/html5/src/logic.js/html5/src/style.css/html5/src/background.png
- 21. Web Workersmain.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); }
- 22. Web Socketsvar 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.
- 23. Notificationsif (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
- 24. Drag and dropdocument.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed= 'copy'; }, false);http://playground.html5rocks.com/#drag_from_desktop
- 25. Geolocationif (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); });}
- 26. New in JS APIsClient Side Storage (Web SQL Database, App Cache, Web Strorage)
- 28. Desktop experience (Notifications, Drag and Drop API)
- 30. <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> <imgsrc="myPhoto.jpg“ /></figure><br><hgroup> Hello World!</hgroup> http://remysharp.com/downloads/html5.js
- 31. Europe Headquarters52 V. Velykoho Str.Lviv 79053, UkraineTel: +380-32-240-9090Fax: +380-32-240-9080E-mail: [email protected]: www.softserveinc.comUS Headquarters12800 University Drive, Suite 250Fort Myers, FL 33907, USATel: 239-690-3111 Fax: 239-690-3116Thank You!Copyright ©2010 SoftServe, Inc.Contacts