Your SlideShare is downloading. ×
0
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5

1,211

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,211
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. NovikovEugeny<br />29.10.10<br />HTML5 review<br />
  • 2. Rough Timeline of Web Technologies<br />1991 HTML<br />1994 HTML 2<br />1996 CSS1 + JavaScript<br />1997 HTML 4<br />1998 CSS 2<br />2000 XHTML 1<br />2002 Tableless Web Design<br />2005 AJAX<br />2009 HTML 5<br />
  • 3. What is HTML5 ?<br />HTML5 ~=HTML + CSS + JS APIs<br />
  • 4. New simple doctype<br /><!DOCTYPE html><br />
  • 5. New semantic tags<br /><body><br /><header><br /> <hgroup><br /> <h1>Page title</h1><br /> <h2>Page subtitle</h2><br /> </hgroup> <br /> </header> <br /><nav> <br /> <ul> Navigation... </ul><br /> </nav> <br /> <section><br /> <article> <br /> <header> <br /> <h1>Title</h1> <br /> </header> <br /> <section><br /> Content... <br /> </section> <br /> </article> <br /> <article> <br /> <header><br /> <h1>Title</h1> <br /> </header> <br /> <section> <br /> Content...<br /> </section> <br /> </article> <br /> <article> <br /> <header><br /> <h1>Title</h1> <br /> </header> <br /> <section> <br /> Content... <br /> </section> <br /> </article><br /></section><br /><aside> <br /> Top links...<br /> </aside><br /><footer><br /> Copyright © 2010. <br /> </footer> <br /></body><br />
  • 6. Div vs New tags<br />
  • 7. New link relations<br /><link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed" /> <br /><link rel="icon" href="/favicon.ico" /> <br /><link rel="pingback" href="http://myblog.com/xmlrpc.php"> <br /><link rel="prefetch"href="http://myblog.com/main.php"> <br />...<br /><a rel="archives" href="http://myblog.com/archives">old posts</a> <br /><a rel="external" href="http://notmysite.com">tutorial</a> <br /><a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <br /><a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <br /><a rel="tag" href="http://myblog.com/category/games">games posts</a><br />http://www.blog.whatwg.org/the-road-to-html-5-link-relations#what<br />
  • 8. ARIA attributes<br /><ul id="tree1" <br />role="tree" <br />tabindex="0«<br />aria-labelledby="label_1"><br /><lirole="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <br /><lirole="group"> <br /><ul> <br /><lirole="treeitem" tabindex="-1">Oranges</li> <br /><lirole="treeitem" tabindex="-1">Pineapples</li><br />... <br /></ul> <br /></li> <br /></ul><br />
  • 9. New form field types<br />
  • 10. Audio + Video<br /><audio id="audio" src="djtapolskii.mp3" controls></audio>;<br /><video id="video" src="10 минут для пресса.avi" autoplay controls></video><br />
  • 11. Canvas<br /><canvas id="canvas" width="838" height="220"></canvas> <br /><script><br />varcanvasContext = document.getElementById("canvas").getContext("2d");<br />canvasContext.fillRect(250, 25, 150, 100);<br />canvasContext.beginPath();<br /> canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); <br />canvasContext.lineWidth = 15; <br />canvasContext.lineCap = 'round'; <br />canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; <br />canvasContext.stroke(); <br /></script><br />
  • 12. New in HTML<br /><ul><li>Semantics (New tags, Link Relations)
  • 13. Accessibility (ARIA roles)
  • 14. Web Forms 2.0 (Input Fields)
  • 15. Multimedia (Audio Tag, Video Tag)
  • 16. 2D drawing (Canvas)</li></li></ul><li>JS APIs<br />
  • 17. New Selectors<br />Finding elements by class (DOM API)<br />var el = document.getElementById('section1'); <br />el.focus(); <br />varels = document.getElementsByTagName('div');<br />els[0].focus();<br />varels = document.getElementsByClassName('section'); <br />els[0].focus();<br />Finding elements by CSS syntax (Selectors API)<br />varels = document.querySelectorAll("ulli:nth-child(odd)");<br />varels = document.querySelectorAll("table.test > tr > td");<br />
  • 18. Web Storage<br />// use localStorage for persistent storage <br />// use sessionStorage for per tab storage <br />textarea.addEventListener('keyup', function () { <br />window.localStorage['value'] = area.value; <br />window.localStorage['timestamp'] = (new Date()).getTime(); <br />}, false); <br />textarea.value = window.localStorage['value'];<br /> Save text value on the client side<br />
  • 19. Web SQL Database<br />Var db = window.openDatabase(“Database Name”, “Database Version”);<br />db.transaction(function(tx)<br />{<br />tx.executeSql(“SELECT * FROM test”, [], successCallback, errorCallback);<br />});<br />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.<br /> http://html5doctor.com/introducing-web-sql-databases/<br />
  • 20. Application Cache<br /><html manifest = “cache.manifest”><br />Window.applicationCache.addEventListener( ‘checking’ ,<br />updateCacheStatus, false);<br />CACHE MANIFEST<br /># version 1<br />CACHE:<br />/html5/src/refresh.png<br />/html5/src/logic.js<br />/html5/src/style.css<br />/html5/src/background.png<br />
  • 21. Web Workers<br />main.js: <br />var worker = new Worker('extra_work.js');<br />worker.onmessage = function(event) { alert(event.data); };<br />extra_work.js: <br />self.onmessage= function(event) { <br /> // Do some work. <br />self.postMessage(some_data);<br /> }<br />
  • 22. Web Sockets<br />var socket = new WebSocket(location); <br />socket.onopen = function(event) {<br />socket.postMessage(“Hello, WebSocket”); <br />} <br />socket.onmessage = function(event) { alert(event.data); } <br />socket.onclose = function(event) { alert(“closed”); } <br />Bi-directional, full-duplex communications channels, over a single Transmission <br />Control Protocol (TCP) socket, designed to be implemented in webbrowsers <br />and web servers.<br />
  • 23. Notifications<br />if (window.webkitNotifications.checkPermission() == 0) {<br /> // you can pass any url as a parameter <br />window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();<br /> } else {<br />window.webkitNotifications.requestPermission();<br />}<br /> http://playground.html5rocks.com/#simple_notifications<br />
  • 24. Drag and drop<br />document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed= 'copy'; <br />}, false);<br />http://playground.html5rocks.com/#drag_from_desktop<br />
  • 25. Geolocation<br />if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { <br />var lat = position.coords.latitude; <br />varlng = position.coords.longitude; <br />var options = { position: new google.maps.LatLng(lat, lng) } <br />var marker = new google.maps.Marker(options); <br />marker.setMap(map); <br /> });<br />}<br />
  • 26. New in JS APIs<br /><ul><li>Client Side Storage (Web SQL Database, App Cache, Web Strorage)
  • 27. Communication (Web Sockets)
  • 28. Desktop experience (Notifications, Drag and Drop API)
  • 29. Geolocation</li></li></ul><li>Ukrainian users<br />
  • 30. <html>5doctor<br /><!--[if lte IE 8]><br /><script src="html5.js" type="text/javascript"></script><br /><![endif]--><br /> <style><br /> time { font-style: italic; };<br /> figure { border: 4px inset #AAA; padding: 4px }<br />hgroup { color: red;}<br />…<br /><time datetime="2009-09-13">my birthday</time><br /><br><br /><figure><br /> <imgsrc="myPhoto.jpg“ /><br /></figure><br /><br><br /><hgroup><br /> Hello World!<br /></hgroup><br /> http://remysharp.com/downloads/html5.js<br />
  • 31. Europe Headquarters<br />52 V. Velykoho Str.<br />Lviv 79053, Ukraine<br />Tel: +380-32-240-9090Fax: +380-32-240-9080<br />E-mail: info@softserveinc.com<br />Website: www.softserveinc.com<br />US Headquarters<br />12800 University Drive, Suite 250Fort Myers, FL 33907, USA<br />Tel: 239-690-3111 Fax: 239-690-3116<br />Thank You!<br />Copyright ©2010 SoftServe, Inc.<br />Contacts<br />

×