Your SlideShare is downloading. ×
MWC/ADC 2013 HTML5 on Windows Phone 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

MWC/ADC 2013 HTML5 on Windows Phone 8

672
views

Published on

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 …

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/windowsphone

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
672
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 on Windows Phone 8Andrea Trasatti25 February 2013Mobile World CongressBarcelona1 © 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 world3 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
  • 4. What’s new in IE10 MobileHTML5 Application Cache CSS 3D Transforms IndexedDBHTML5 async CSS Animations Page VisibilityHTML5 BlobBuilder CSS Grid Pointer EventsHTML5 Forms and Validation CSS Hyphenation RequestAnimationFrameHTML5 History API CSS Image Values (Gradients) Navigation TimingHTML5 Parser CSS multi-column Layout Web SocketsHTML5 Sandbox CSS Exclusions (Positioned floats) Web WorkersHTML5 track4 © 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 past5 © 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 ANDROIDDate NO NO YES NO YESProgress YES YES NO NO YESOutput NO NO YES YES YESDatalist NO YES NO NO NOCustom error NO YES NO NO YESvalueAsNumber NO NO YES YES YESstepUp & NO* NO* YES YES YESstepDown6 © 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 Visibility8 © 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.performanceif (!!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
  • 12. Resource Timing API12 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
  • 13. 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
  • 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 IE1014 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
  • 15. Supporting prefixed implementationsvar 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 connectionvar 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 databaserequest.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 prefix18 © 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 gestures19 © 2013 Nokia HTML5InWP8.pptx v. 0.1 2013-02-25 Andrea Trasatti
  • 20. Pointer Events 101if (!!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
  • 21. Simple fallbackif (!!window.navigator.msPointerEnabled) { canvas.addEventListener("MSPointerMove", paint, false);} else { canvas.addEventListener("mousemove", paint, false);}This example has prefixes 21 © 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 viewport22 © 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 @AndreaTrasattihttp://blog.trasatti.it