150 likes | 255 Views
HTML5, part III – API, …. Štěpán Bechynský , @ stepanb. Developer Evangelist Microsoft, Czech Republic. ECMAScript 5. Standard ECMA-262 http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf Test: http://test262.ecmascript.org /
E N D
HTML5, part III – API, … Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic
ECMAScript5 • Standard ECMA-262 • http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf • Test: http://test262.ecmascript.org/ • Results: http://en.wikipedia.org/wiki/ECMAScript#Conformance_tests • New array methods • Enhanced object model • Other computational methods and functions • Strict mode • AsynchronusScriptExecution • <scriptasyncsrc=“library.js"></script>
OfficialECMAScripttests http://test262.ecmascript.org/ Test Suite Ver.: ES5 NumberofTests: 11016 Test Suite Date: 2011-09-25 Last run: 2011-11-01
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
GeolocationAPI • Location based on IP address, Wi-Fi, GSM or GPS • User must confirm access to location
<audio>, <video> 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 offlineevents • Application Cache API • Manifest: <html manifest="appcache.manifest"> • Object: window.applicationCache • Indexed Database API • http://www.w3.org/TR/IndexedDB/
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 SocketsAPI • 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 varworker=newWorker("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 – www.w3.org/TR/html5 • HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htm • Validator –validator.w3.org/ • Microsoft Internet Explorer 9 and 10 • Engineering Blog – blogs.msdn.com/ie/ • Beauty Of The Web – www.beautyoftheweb.com/experience/ • IE Test Drive – www.ietestdrive.com • HTML5 Labs – html5labs.interoperabilitybridges.com/