1. HTML5, part III – API, … Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic

2. ECMAScript 5  Standard ECMA-262  http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf  Test: http://test262.ecmascript.org/http://test262.ecmascript.org/  Results: http://en.wikipedia.org/wiki/ECMAScript#Conformance_testshttp://en.wikipedia.org/wiki/ECMAScript#Conformance_tests  New array methods  Enhanced object model  Other computational methods and functions  Strict mode  Asynchronus Script Execution 

3. Official ECMAScript tests # of failed tests IE9323 IE10 Developer Preview7 Chrome 15418 Firefox 7.0.1187 Opera 11.523750 http://test262.ecmascript.org/ Test Suite Ver.: ES5 Number of Tests: 11016 Test Suite Date: 2011-09-25 Last run: 2011-11-01

4. Data URI  Embedding data in the context of a web page  Most common is tiny image embedded in a web page  Standalone web pages with graphics

5. Geolocation API  Location based on IP address, Wi-Fi, GSM or GPS  User must confirm access to location

6. , and Javascript  You can write your own audio or video player  Independent on “build-in” controls

7. Offline capabilities  Offline storage  localStorage  sessionStorage  Size 5 MB  Can’t be extended  Online and offline events  Application Cache API  Manifest:  Object: window.applicationCache  Indexed Database API  http://www.w3.org/TR/IndexedDB/

8. File API  Read data from files chosen by the user  New objects to represent data  Blob, File, FileReader  New methods to access data  readAsArrayBuffer  readAsBinaryString  readAsText  readAsDataURL

9. Web Sockets API  Real-time duplex communication  First handshake uses HTTP protocol  No problems with proxy, firewall, etc.  Small overhead  Needs socket server  Internet Engineering Task Force (IETF)

10. Web Workers  Runs script on background  All communication to and from the worker thread is managed through messages  postMessage  Onmessage  Can’t access DOM  Developer Tools contains Web Workers debugging support var worker = new Worker("worker.js") worker.addEventListener("message", callback, false); worker.postMessage(myData); onmessage = function (event) { postMessage(LongRunningCode(event.data)); }

11. Drag and Drop  Attribute draggable  true - The content can be dragged  false - The content cannot be dragged  auto - The content takes the default browser behavior (text, links, and images are draggable; other elements are not)  Events  dragstart  dragover  drop  …  dataTransfer property of event argument contains D&D information  setData  getData  clearData

12. Developer Tools  Internet Explorer 9 Developer Tools  Visual Studio 2010 SP1  Web Standards Update for Microsoft Visual Studio 2010 SP1  Visual Studio 2011  Expression Web 4 SP2

13. www.vyvijej.cz

14. HTML5.cz  Shromažďuje české zdroje  Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“

15. Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification – www.w3.org/TR/html5www.w3.org/TR/html5  HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htmtest.w3.org/html/tests/reporting/report.htm  Validator – validator.w3.org/validator.w3.org/  Microsoft Internet Explorer 9 and 10  Engineering Blog – blogs.msdn.com/ie/blogs.msdn.com/ie/  Beauty Of The Web – www.beautyoftheweb.com/experience/www.beautyoftheweb.com/experience/  IE Test Drive – www.ietestdrive.comwww.ietestdrive.com  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/