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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MWC/ADC 2013 HTML5 on Windows Phone 8

717

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
717
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
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

×