HTML5, part III – API, … Štěpán Developer Evangelist Microsoft, Czech Republic

ECMAScript 5  Standard ECMA-262   Test:  Results:  New array methods  Enhanced object model  Other computational methods and functions  Strict mode  Asynchronus Script Execution 

Official ECMAScript tests # of failed tests IE9323 IE10 Developer Preview7 Chrome Firefox Opera Test Suite Ver.: ES5 Number of Tests: Test Suite Date: Last run:

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

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

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

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 

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

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)

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)); }

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

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

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

Resources  Books  Introducing HTML5 by Bruce Lawson & Remy Sharp  W3C  W3C HTML5 Specification –  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 –  IE Test Drive –  HTML5 Labs – html5labs.interoperabilitybridges.com/html5labs.interoperabilitybridges.com/