MWC/ADC 2013 HTML5 on Windows Phone 8

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


Hello world


What’s new in IE10 Mobile


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

Forms and Validation

• Backwards compatible • Improve usability • Make form filling less tedious • Learnt from the past


HTML5 forms support


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


Web Performance

• Navigation Timing • Performance Timeline • Resource Timing • Page Visibility


How fast are you?



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.”);

}


Resource Timing API


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.”);

}

}


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


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

Opening a connection


var request = indexedDB.open("PeopleDB", 1);

request.onsuccess = function (evt) {

db = request.result;

};

request.onerror = function (evt) {

console.log("IndexedDB error: " + evt.target.errorCode);

};

Initiating a database


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

}

};

Pointer Events • Support multiple forms of input • Remove the confusion between mouse, touch, pen, etc

interactions • Backwards compatible • Supported in IE10 with prefix


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


Pointer Events 101


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

Simple fallback


if (!!window.navigator.msPointerEnabled) {

canvas.addEventListener("MSPointerMove", paint, false);

} else {

canvas.addEventListener("mousemove", paint, false);

}

This example has prefixes

The different IE10’s

• Drag and drop • File API • Some HTML5 form features • Snap-view viewport


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


http://www.developer.nokia.com/Blogs/Code/2012/11/09/html5-forms-and-ie10-mobile/

http://www.developer.nokia.com/Blogs/Code/2012/11/09/html5-forms-and-ie10-mobile/

http://www.developer.nokia.com/Blogs/Code/2012/11/19/measuring-site-performance-with-javascript-on-mobile/

http://www.developer.nokia.com/Blogs/Code/2012/11/19/measuring-site-performance-with-javascript-on-mobile/

http://www.developer.nokia.com/Blogs/Code/2012/12/10/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/

http://msdn.microsoft.com/library/ie/hh673549(v=vs.85).aspx

http://www.codeproject.com/Articles/325135/Getting-Started-with-IndexedDB

http://www.codeproject.com/Articles/325135/Getting-Started-with-IndexedDB

http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx

http://bitly.com/bundles/atrasatti/1

Thank you

@AndreaTrasatti http://blog.trasatti.it

http://blog.trasatti.it

MWC/ADC 2013 HTML5 on Windows Phone 8

Technology

andrea trasatti25

mozindexeddb window

webkitindexeddb window

webkitidbtransaction

timing var

var objectstore

var rl

function evt