Contenu connexe Similaire à MWC/ADC 2013 HTML5 on Windows Phone 8 (20) Plus de Microsoft Mobile Developer (20) MWC/ADC 2013 HTML5 on Windows Phone 81. 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
2. 2 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
3. Hello world
3 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
4. 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
4 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
5. 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
6. 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
6 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
7. 7 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
8. Web Performance
• Navigation Timing
• Performance Timeline
• Resource Timing
• Page Visibility
8 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
9. How fast are you?
9 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
10. 10 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
11. 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
14. 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. 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
15 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
16. 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);
};
16 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
17. 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]);
}
};
17 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
18. 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
19. 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
20. 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
20 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
22. 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
23. 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
24. Thank you
@AndreaTrasatti
http://blog.trasatti.it