HTML5 on Windows Phone 8

An overview of the new functionalities in IE10 for Windows Phone 8 including HTML5 forms, Web Performance API's, IndexedDB and Pointer events.
If you want to read more, check out this selection of related contents: http://bitly.com/bundles/atrasatti/1

Transcript

1. Andrea Trasatti 25 February 2013 Mobile World Congress Barcelona HTML5 on Windows Phone 8 1 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
2. 2 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
3. Hello world 3 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
4. What’s new in IE10 Mobile 4 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti HTML5 Application Cache CSS 3D Transforms IndexedDB HTML5 async CSS Animations Page Visibility HTML5 BlobBuilder CSS Grid Pointer Events HTML5 Forms and Validation CSS Hyphenation RequestAnimationFrame HTML5 History API CSS Image Values (Gradients) Navigation Timing HTML5 Parser CSS multi-column Layout Web Sockets HTML5 Sandbox CSS Exclusions (Positioned floats) Web Workers HTML5 track
5. Forms and Validation • Backwards compatible • Improve usability • Make form filling less tedious • Learnt from the past 5 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
6. HTML5 forms support 6 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti FEATURE IE10 ON WP8 IE10 ON WIN8 IOS 5&6 ANDROID 4.1.1 CHROME 18 ON ANDROID Date NO NO YES NO YES Progress YES YES NO NO YES Output NO NO YES YES YES Datalist NO YES NO NO NO Custom error NO YES NO NO YES valueAsNumber NO NO YES YES YES stepUp & stepDown NO* NO* YES YES YES
7. 7 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
8. Web Performance • Navigation Timing • Performance Timeline • Resource Timing • Page Visibility 8 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
9. How fast are you? 9 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
10. 10 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
11. window.performance if (!!window.performance) { var t = window.performance.timing; var start = t.navigationStart; var end = t.loadEventEnd; var totalLoadTime = Math.round(end-start); console.log(“It took “+totalLoadTime+” ms to load the page.”); } 11 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
12. Resource Timing API 12 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
13. window.performance.getEntries() if (!!window.performance.getEntries) { var rl = window.performance.getEntries(); for (var i in rl) { var t = Math.round(rl[i].responseEnd-rl[i].startTime); console.log(rl[i].name+“ took ”+t+“ seconds to load.”); } } 13 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
14. IndexedDB • Do you know Web SQL? Forget it. • NoSQL database to store large amounts of data • Synchronous within a Web Worker, asynchronous (within or without Web Worker) • Implemented in all major browsers, unprefixed in the latest Chrome and Firefox, prefixed in IE10 14 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
15. 15 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; Supporting prefixed implementations •  Prefixed since Chrome 11, Firefox 4, IE10 •  Unprefixed since Chrome 24, Firefox 16 •  NOT SUPPORTED by Opera and Safari
16. Opening a connection 16 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti var request = indexedDB.open("PeopleDB", 1); request.onsuccess = function (evt) { db = request.result; }; request.onerror = function (evt) { console.log("IndexedDB error: " + evt.target.errorCode); };
17. Initiating a database 17 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti request.onupgradeneeded = function (evt) { var objectStore = evt.currentTarget.result.createObjectStore( "people", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true }); for (i in peopleData) { objectStore.add(peopleData[i]); } };
18. Pointer Events • Support multiple forms of input • Remove the confusion between mouse, touch, pen, etc interactions • Backwards compatible • Supported in IE10 with prefix 18 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
19. What Pointer Events provide • Event names are very similar to Mouse Events • New properties to address different forms of input • Support for multi-touch • Smooth interaction with default OS gestures 19 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
20. Pointer Events 101 20 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti if (!!window.navigator.pointerEnabled) { canvas.addEventListener("pointermove", paint, false); if(window.navigator.maxTouchPoints>1) alert("Your user agent and hardware support multi-touch!"); } IE10 implementation is prefixed, so msPointerEnabled is the current syntax
21. Simple fallback 21 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti if (!!window.navigator.msPointerEnabled) { canvas.addEventListener("MSPointerMove", paint, false); } else { canvas.addEventListener("mousemove", paint, false); } This example has prefixes
22. The different IE10’s • Drag and drop • File API • Some HTML5 form features • Snap-view viewport 22 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
23. Useful links •  HTML5 forms (and IE10 (Mobile)): http://www.developer.nokia.com/Blogs/Code/2012/11/09/html5-forms-and-ie10-mobile/ •  Measuring site performance with JavaScript on mobile: http://www.developer.nokia.com/Blogs/Code/2012/11/19/measuring-site-performance-with- javascript-on-mobile/ •  Measuring the speed of resource loading with JavaScript and HTML5: http://www.developer.nokia.com/Blogs/Code/2012/12/10/measuring-the-speed-of-resource- loading-with-javascript-and-html5/ •  IE10 guide for developers (on MSDN): http://msdn.microsoft.com/library/ie/hh673549(v=vs.85).aspx •  IndexedDB code example: http://www.codeproject.com/Articles/325135/Getting-Started-with-IndexedDB •  http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx •  Find more useful links at http://bitly.com/bundles/atrasatti/1 23 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
24. Thank you @AndreaTrasatti http://blog.trasatti.it