HTML5 on Windows Phone 8

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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 ﬂoats) Web Workers HTML5 track

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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, unpreﬁxed in the latest Chrome and Firefox, preﬁxed in IE10 14 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Pointer Events • Support multiple forms of input • Remove the confusion between mouse, touch, pen, etc interactions • Backwards compatible • Supported in IE10 with preﬁx 18 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti

Slide 19

Slide 19 text

What Pointer Events provide • Event names are very similar to Mouse Events • New properties to address diﬀerent 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

Slide 20

Slide 20 text

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 preﬁxed, so msPointerEnabled is the current syntax

Slide 21

Slide 21 text

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 preﬁxes

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Thank you @AndreaTrasatti http://blog.trasatti.it