mwc/adc 2013 html5 on windows phone 8
DESCRIPTION
An overview of the new functionality in Internet Explorer 10 for Windows Phone 8 provided by Andrea Trasatti at MWC/ADC 2013. The presentation covers HTML5 forms, Web Performance APIs, IndexedD,B and Pointer events. For more information please check out: http://bitly.com/bundles/atrasatti/1 Discover more about developing for Nokia Lumia: http://www.developer.nokia.com/windowsphoneTRANSCRIPT
![Page 1: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/1.jpg)
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
![Page 2: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/2.jpg)
2 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 3: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/3.jpg)
Hello world
3 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 4: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/4.jpg)
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
![Page 5: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/5.jpg)
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
![Page 6: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/6.jpg)
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
![Page 7: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/7.jpg)
7 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 8: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/8.jpg)
Web Performance
• Navigation Timing • Performance Timeline • Resource Timing • Page Visibility
8 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 9: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/9.jpg)
How fast are you?
9 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 10: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/10.jpg)
10 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 11: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/11.jpg)
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
![Page 12: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/12.jpg)
Resource Timing API
12 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
![Page 13: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/13.jpg)
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
![Page 14: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/14.jpg)
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
![Page 15: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/15.jpg)
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
![Page 16: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/16.jpg)
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);
};
![Page 17: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/17.jpg)
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]);
}
};
![Page 18: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/18.jpg)
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
![Page 19: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/19.jpg)
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
![Page 20: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/20.jpg)
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
![Page 21: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/21.jpg)
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
![Page 22: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/22.jpg)
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
![Page 23: MWC/ADC 2013 HTML5 on Windows Phone 8](https://reader036.vdocuments.site/reader036/viewer/2022062513/55515093b4c905c6268b5558/html5/thumbnails/23.jpg)
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