MWC/ADC 2013 HTML5 on Windows Phone 8

HTML5 on Windows Phone 8

Andrea Trasatti
25 February 2013
Mobile World Congress
Barcelona

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 & NO* NO* YES YES YES
stepDown

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


Supporting prefixed implementations
var indexedDB = window.indexedDB || window.webkitIndexedDB
|| window.mozIndexedDB || window.msIndexedDB;
var IDBTransaction = window.IDBTransaction
|| window.webkitIDBTransaction || window.msIDBTransaction;

• 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


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

MWC/ADC 2013 HTML5 on Windows Phone 8

Recommended

Recommended

More Related Content

Similar to MWC/ADC 2013 HTML5 on Windows Phone 8

Similar to MWC/ADC 2013 HTML5 on Windows Phone 8 (20)

More from Microsoft Mobile Developer

More from Microsoft Mobile Developer (20)

Recently uploaded

Recently uploaded (20)

MWC/ADC 2013 HTML5 on Windows Phone 8