MWC/ADC 2013 HTML5 on Windows Phone 8
Post on 12-May-2015
702 Views
Preview:
DESCRIPTION
Transcript
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 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
Hello world
3 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
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
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
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 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
Web Performance
• Navigation Timing • Performance Timeline • Resource Timing • Page Visibility
8 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
How fast are you?
9 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
10 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
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
Resource Timing API
12 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
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
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 © 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
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);
};
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]);
}
};
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
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
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
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
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
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
top related