SlideShare a Scribd company logo

HTML 5 Development for Windows Phone and Desktop

•
•
Doris Chen
Doris Chen

In this session Ben Riga and Doris Chen from Microsoft will join us. Ben and Doris will give us an overview of Microsoft’s overall HTML 5 strategy overview including Internet Explorer on the desktop. They will also show us Windows Phone and Internet Explorer for Windows Phone. And finally they’ll provide a quick overview of the recently announced PhoneGap for Windows Phone.

1 of 41
Download to read offline
HTML 5 Development for Windows Phone and Windows Desktop Ben Riga Doris Chen Ph.D. Technical Evangelist Developer Evangelist Windows Phone US West Region benriga@microsoft.com Doris.Chen@microsoft.com @benriga @doristchen http://blogs.msdn.com/benriga/ http://blogs.msdn.com/dorischen/ Bay Area Mobile Meetup Oct 6, 2011
Agenda  Windows Phone – A Quick Look  Microsoft and HTML 5  Internet Explorer on the desktop, Windows Phone  A preview of PhoneGap on Windows Phone
A quick look at Windows Phone Windows Phone Microsoft confidential.
People vs. Icons
Windows Phone puts people at the center making it easier to connect and share with friends, family and colleagues, so you never miss a moment. Modern communication A smarter way Internet built in. to app. beyond the browser.  People Hub with Facebook,  Pin apps to the Start screen for  A fast, beautiful web experience LinkedIn and Twitter, built in. live updates at a glance. with Internet Explorer 9 and hardware acceleration.  Group friends, pin them to Start  Apps connected to your searches for live updates and text, email make them easier to discover  Local Scout provides suggestions and IM them all at once. and use. and prioritized local search results on restaurants, shopping  Facebook Chat, Messenger, and things to do. check-ins, and photo tagging built in. 5
Agenda  Windows Phone – A Quick Look  Microsoft and HTML 5  Internet Explorer on the desktop, Windows Phone  A preview of PhoneGap on Windows Phone
A quick look at Windows Phone Windows Phone Microsoft confidential.
People vs. Icons
Windows Phone puts people at the center making it easier to connect and share with friends, family and colleagues, so you never miss a moment. Modern communication A smarter way Internet built in. to app. beyond the browser.  People Hub with Facebook,  Pin apps to the Start screen for  A fast, beautiful web experience LinkedIn and Twitter, built in. live updates at a glance. with Internet Explorer 9 and hardware acceleration.  Group friends, pin them to Start  Apps connected to your searches for live updates and text, email make them easier to discover  Local Scout provides suggestions and IM them all at once. and use. and prioritized local search results on restaurants, shopping  Facebook Chat, Messenger, and things to do. check-ins, and photo tagging built in. 9
Microsoft and HTML 5 Windows Phone Microsoft confidential.
What Developers Told Us  Interoperability and Same Markup  HTML5 Canvas, Audio, Video, XHTML, SVG, DOM L2 Core, DOM L2 & L3 Events, CSS3 Selectors, DOM Traversal, DOM Range, HTML5 Parsing, etc.  Performance  Holistic Focus on Performance, Faster JavaScript, GPU Powered Graphics  Websites more like native applications  Reducing the User Interface surface area, Unlocking the Hardware  Safe and Trusted Browsing  No ActiveX Controls, no Browser Helper Objects, no Plug-ins or Binary Behaviors
Understanding Today’s Sites API Usage Over Top 7200 Sites 8000 7000 API Rank % 6000 indexOf 1 94% Number of Sites 5000 getElementById 13 80% 4000 addEventListener 27 65% 3000 getComputedStyle 62 26% 2000 1000 0 1 51 101 151 201 251 301 351 401 451 501 551 601 651 701 API (By Rank)
100+ Specifications Geolocation ECMA HTML CSS Web Apps SVG
Microsoft Approach with HTML5
Internet Explorer on the desktop, Windows Phone Windows Phone Microsoft confidential.
HTML5 in IE9 HTML5 CSS3 SVG Others • New Markup • 2D Transforms • Shapes • ECMA Script 5 (all Elements • Border Radius • Clipping, but Strict Mode) • Canvas • Box-Shadow Masking, and • Native JSON • Audio • Fonts (WOFF) Compositing support (IE8) • Video • Media Queries • Transforms • Performance API • Local Storage • Multiple • Extensibility • Geo-Location • Cross-Window Backgrounds • Gradients • Data-uri (IE8) Messaging • Namespaces • Interactivity • DOM L2, L3 • Text Selection • Opacity • Linking and Views • Selectors API L2 APIs • rgba(), hsl(), • Painting and • AJAX Navigation • Parsing SVG in Colors (IE8) hsla() HTML • Paths • DOMParser and • Selectors (IE8) XMLSerializer • Text • ICC v2 and Color Profile • ARIA Hardware Acceleration
HTML5 in IE10 Platform Previews HTML5 CSS3 Others • Drag&Drop • Grid • Web Performance • File API • Flexbox APIs • Forms Validation • Gradient • ECMA Script 5 • Sandbox • Multi-Column Strict Mode • Web Workers • Floats • Advanced Hit Testing APIs • async • Media Queries Listeners • Removal of Style Sheet Limits
Partial Summary of IE9 Windows Phone Support HTML5 Canvas 2D Transforms Colors Module HTML5 Video Background/Borders Namespaces SVG Fonts Module Values & Units HTML5 Audio CSS Media Queries Selectors DOM Core Level 2/.3 Geolocation Semantic Elements Traversal & Range ECMAScript 5 XML Parse/Serial DOM Events Level 2/3 Selector APIs Level 2 DataURIs L2 HTML & Style ICC Color Profiles CSSOM View
Key IE9 Mango Features
Key IE9 Windows Phone Technologies for Mobile • Support for Viewport <meta> tag • Support for W3C Geolocation, including GPS • Full support for CSS Media Queries • DOM Local Storage and Session Storage • Data URIs
Controlling the Viewport <META name="HandheldFriendly" content="true" /> <META name="MobileOptimized" content="320" /> <META name="Viewport" content="width=device-width" />
Controlling the Viewport Viewport Property Description width Sets the width of the viewport. Can be either an integer value or "device-width". Defaults to 1024 on Windows Phone, 980 on iPhone height Sets the height of the viewport. Can be either an integer value or "device-height". initial-scale Sets the initial scale value of the viewport. Defaults to 1.0. maximum-scale Determines the maximum scale value of the viewport. Range is from 0.1 to 10.0 minimum-scale Determines the minimum scale value of the viewport. Range is from 0.1 to 10.0 user-scalable Boolean that determines whether the user can scale the viewport
Using Media Queries  Provide a way of applying style sheets based upon certain characteristics of the media  Window size, screen size, aspect ratio, color depth, resolution, etc.  Are a W3C candidate recommendation as of July 2010  Specification can be found at  http://www.w3.org/TR/css3-mediaqueries/ <link rel="stylesheet" media="screen and (max-width:800)" href="example.css" /> Or… @media screen and (max-width:800) { /* style definitions that apply to screens less than 800px wide */ }
Using Media Queries Media Query Description Feature width Indicates an output surface, such as a window, of exactly width units (px, etc.) height Indicates an output surface, such as a window of exactly height units device-width Indicates a device that has exactly the given width, in given units device-height Indicates a device that has exactly the given height, in given units orientation Used with “portrait” or “landscape” for devices that can do both.
Using Media Queries <link rel=“stylesheet” media=“screen and (max-device-width:800px)” href=“styles.css”> @media screen and (max-device-width:800px) { /* style definitions that apply to screens less than 800px wide */ } <link rel=“stylesheet” media=“screen and (min-width:480px) and (max-width:800px)” href=“styles.css”> @media screen and (min-width:480px) and (max-width:800px){ /* style definitions that apply to screens less than 800px wide */ } http://mediaqueri.es/popular/
Geolocation  Geolocation allows a phone to figure out where it is  IP Address location or Wireless network location  Triangulation of cellular towers  GPS device that uses satellite signals  Can get location as a "one-shot" or continuously  Location is always opt-in  “User Agents must not send location information to Web sites without the express permission of the user.”  W3C Geolocation API  http://www.w3.org/TR/geolocation-API/
Geolocation API: getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn( positionObject ) errFn( positionErrorObject )
Client-side LocalStorage / SessionStorage  Provides easier way of storing data on client without cookies
DOM Storage API Available from the window object: window.localStorage window.sessionStorage getItem(key) setItem(key, value) removeItem(key) clear() key(index) length
Things to remember about DOM Storage  Data is stored as strings – if you store other types, you must convert them yourself  Example:  setItem("mysite.product.price", 59.99);  var price = parseFloat("mysite.product.price");  If you try to store more than 5MB, an exception of type QUOTA_EXCEEDED_ERR is thrown  There is currently no way to request an increase in the available storage space in any of the browsers
The data:// URI  Defines a way for embedding content such as images directly inline into markup or CSS content  Used to reduce the number of HTTP requests  IE9 allows data URIs up to 4GB in size  General Format: data:[mime-type][;base64],<image data as text>
Data URI Usage  Use data URIs in place of normal URLs: HTML Replaces: <img src=“http://imagename.png” /> With:<img src=“data:image/png;base64,00af037491806ed...” /> CSS Replaces: .rule { background-image:url(‘http://imagename.png’) } With:.rule { background-image: url(‘data:image/png;base64,00af037491806ed...’) }
Where to from here? Windows Phone Microsoft confidential.
Looking forward Windows 8 Preview Guide Developer Preview Builds Dev Tools Conf Sessions http://dev.windows.com
PhoneGap on Windows Phone (a preview) Windows Phone Microsoft confidential.
PhoneGap  Open Source project for building mobile apps using web technologies  HTML, Javascript, CSS  http://PhoneGap.com  Across multiple platforms  iOS, Android, etc and soon Windows Phone  Maintained by Nitobi (recently acquired by Adobe)  Access to native APIs  Accelerometer, Camera, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage
PhoneGap on Windows Phone  Currently includes:  Accelerometer, Camera, Compass, Contacts, Events (partial, still underway), GeoLocation, MediaCapture, Connection, Notification  Requires installation  Windows Phone SDK 7.1 (which includes VS 2010)  Getting Started Info here:  http://bit.ly/PhoneGapMangoIntro  Code Here  https://github.com/phonegap/phonegap-wp7
PhoneGap on Windows Phone (a demo) Windows Phone Microsoft confidential.
Next Steps Internet Explorer Windows Phone  Internet Explorer Test Drive  Download SDK  http://bit.ly/ietestdrive/  Includes Dev Tools and  http://BeautyOfTheWeb.com Emulator  http://create.msdn.com Windows 8  Mobile Internet Explorer Test Drive  Preview Guide  http://bit.ly/IEmobile  Developer Preview Builds  Dev Tools  Conf Sessions  http://dev.windows.com
HTML 5 Development for Windows Phone and Windows Desktop Ben Riga Doris Chen, Ph.D. Technical Evangelist Developer Evangelist Windows Phone US West Region benriga@microsoft.com Doris.Chen@microsoft.com @benriga @doristchen http://blogs.msdn.com/benriga/ http://blogs.msdn.com/dorischen/ Bay Area Mobile Meetup Oct 6, 2011
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

More Related Content

HTML 5 Development for Windows Phone and Desktop

  • 1. HTML 5 Development for Windows Phone and Windows Desktop Ben Riga Doris Chen Ph.D. Technical Evangelist Developer Evangelist Windows Phone US West Region benriga@microsoft.com Doris.Chen@microsoft.com @benriga @doristchen http://blogs.msdn.com/benriga/ http://blogs.msdn.com/dorischen/ Bay Area Mobile Meetup Oct 6, 2011
  • 2. Agenda  Windows Phone – A Quick Look  Microsoft and HTML 5  Internet Explorer on the desktop, Windows Phone  A preview of PhoneGap on Windows Phone
  • 3. A quick look at Windows Phone Windows Phone Microsoft confidential.
  • 4. People vs. Icons
  • 5. Windows Phone puts people at the center making it easier to connect and share with friends, family and colleagues, so you never miss a moment. Modern communication A smarter way Internet built in. to app. beyond the browser.  People Hub with Facebook,  Pin apps to the Start screen for  A fast, beautiful web experience LinkedIn and Twitter, built in. live updates at a glance. with Internet Explorer 9 and hardware acceleration.  Group friends, pin them to Start  Apps connected to your searches for live updates and text, email make them easier to discover  Local Scout provides suggestions and IM them all at once. and use. and prioritized local search results on restaurants, shopping  Facebook Chat, Messenger, and things to do. check-ins, and photo tagging built in. 5
  • 6. Agenda  Windows Phone – A Quick Look  Microsoft and HTML 5  Internet Explorer on the desktop, Windows Phone  A preview of PhoneGap on Windows Phone
  • 7. A quick look at Windows Phone Windows Phone Microsoft confidential.
  • 8. People vs. Icons
  • 9. Windows Phone puts people at the center making it easier to connect and share with friends, family and colleagues, so you never miss a moment. Modern communication A smarter way Internet built in. to app. beyond the browser.  People Hub with Facebook,  Pin apps to the Start screen for  A fast, beautiful web experience LinkedIn and Twitter, built in. live updates at a glance. with Internet Explorer 9 and hardware acceleration.  Group friends, pin them to Start  Apps connected to your searches for live updates and text, email make them easier to discover  Local Scout provides suggestions and IM them all at once. and use. and prioritized local search results on restaurants, shopping  Facebook Chat, Messenger, and things to do. check-ins, and photo tagging built in. 9
  • 10. Microsoft and HTML 5 Windows Phone Microsoft confidential.
  • 11. What Developers Told Us  Interoperability and Same Markup  HTML5 Canvas, Audio, Video, XHTML, SVG, DOM L2 Core, DOM L2 & L3 Events, CSS3 Selectors, DOM Traversal, DOM Range, HTML5 Parsing, etc.  Performance  Holistic Focus on Performance, Faster JavaScript, GPU Powered Graphics  Websites more like native applications  Reducing the User Interface surface area, Unlocking the Hardware  Safe and Trusted Browsing  No ActiveX Controls, no Browser Helper Objects, no Plug-ins or Binary Behaviors
  • 12. Understanding Today’s Sites API Usage Over Top 7200 Sites 8000 7000 API Rank % 6000 indexOf 1 94% Number of Sites 5000 getElementById 13 80% 4000 addEventListener 27 65% 3000 getComputedStyle 62 26% 2000 1000 0 1 51 101 151 201 251 301 351 401 451 501 551 601 651 701 API (By Rank)
  • 13. 100+ Specifications Geolocation ECMA HTML CSS Web Apps SVG
  • 15. Internet Explorer on the desktop, Windows Phone Windows Phone Microsoft confidential.
  • 16. HTML5 in IE9 HTML5 CSS3 SVG Others • New Markup • 2D Transforms • Shapes • ECMA Script 5 (all Elements • Border Radius • Clipping, but Strict Mode) • Canvas • Box-Shadow Masking, and • Native JSON • Audio • Fonts (WOFF) Compositing support (IE8) • Video • Media Queries • Transforms • Performance API • Local Storage • Multiple • Extensibility • Geo-Location • Cross-Window Backgrounds • Gradients • Data-uri (IE8) Messaging • Namespaces • Interactivity • DOM L2, L3 • Text Selection • Opacity • Linking and Views • Selectors API L2 APIs • rgba(), hsl(), • Painting and • AJAX Navigation • Parsing SVG in Colors (IE8) hsla() HTML • Paths • DOMParser and • Selectors (IE8) XMLSerializer • Text • ICC v2 and Color Profile • ARIA Hardware Acceleration
  • 17. HTML5 in IE10 Platform Previews HTML5 CSS3 Others • Drag&Drop • Grid • Web Performance • File API • Flexbox APIs • Forms Validation • Gradient • ECMA Script 5 • Sandbox • Multi-Column Strict Mode • Web Workers • Floats • Advanced Hit Testing APIs • async • Media Queries Listeners • Removal of Style Sheet Limits
  • 18. Partial Summary of IE9 Windows Phone Support HTML5 Canvas 2D Transforms Colors Module HTML5 Video Background/Borders Namespaces SVG Fonts Module Values & Units HTML5 Audio CSS Media Queries Selectors DOM Core Level 2/.3 Geolocation Semantic Elements Traversal & Range ECMAScript 5 XML Parse/Serial DOM Events Level 2/3 Selector APIs Level 2 DataURIs L2 HTML & Style ICC Color Profiles CSSOM View
  • 19. Key IE9 Mango Features
  • 20. Key IE9 Windows Phone Technologies for Mobile • Support for Viewport <meta> tag • Support for W3C Geolocation, including GPS • Full support for CSS Media Queries • DOM Local Storage and Session Storage • Data URIs
  • 21. Controlling the Viewport <META name="HandheldFriendly" content="true" /> <META name="MobileOptimized" content="320" /> <META name="Viewport" content="width=device-width" />
  • 22. Controlling the Viewport Viewport Property Description width Sets the width of the viewport. Can be either an integer value or "device-width". Defaults to 1024 on Windows Phone, 980 on iPhone height Sets the height of the viewport. Can be either an integer value or "device-height". initial-scale Sets the initial scale value of the viewport. Defaults to 1.0. maximum-scale Determines the maximum scale value of the viewport. Range is from 0.1 to 10.0 minimum-scale Determines the minimum scale value of the viewport. Range is from 0.1 to 10.0 user-scalable Boolean that determines whether the user can scale the viewport
  • 23. Using Media Queries  Provide a way of applying style sheets based upon certain characteristics of the media  Window size, screen size, aspect ratio, color depth, resolution, etc.  Are a W3C candidate recommendation as of July 2010  Specification can be found at  http://www.w3.org/TR/css3-mediaqueries/ <link rel="stylesheet" media="screen and (max-width:800)" href="example.css" /> Or… @media screen and (max-width:800) { /* style definitions that apply to screens less than 800px wide */ }
  • 24. Using Media Queries Media Query Description Feature width Indicates an output surface, such as a window, of exactly width units (px, etc.) height Indicates an output surface, such as a window of exactly height units device-width Indicates a device that has exactly the given width, in given units device-height Indicates a device that has exactly the given height, in given units orientation Used with “portrait” or “landscape” for devices that can do both.
  • 25. Using Media Queries <link rel=“stylesheet” media=“screen and (max-device-width:800px)” href=“styles.css”> @media screen and (max-device-width:800px) { /* style definitions that apply to screens less than 800px wide */ } <link rel=“stylesheet” media=“screen and (min-width:480px) and (max-width:800px)” href=“styles.css”> @media screen and (min-width:480px) and (max-width:800px){ /* style definitions that apply to screens less than 800px wide */ } http://mediaqueri.es/popular/
  • 26. Geolocation  Geolocation allows a phone to figure out where it is  IP Address location or Wireless network location  Triangulation of cellular towers  GPS device that uses satellite signals  Can get location as a "one-shot" or continuously  Location is always opt-in  “User Agents must not send location information to Web sites without the express permission of the user.”  W3C Geolocation API  http://www.w3.org/TR/geolocation-API/
  • 27. Geolocation API: getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn( positionObject ) errFn( positionErrorObject )
  • 28. Client-side LocalStorage / SessionStorage  Provides easier way of storing data on client without cookies
  • 29. DOM Storage API Available from the window object: window.localStorage window.sessionStorage getItem(key) setItem(key, value) removeItem(key) clear() key(index) length
  • 30. Things to remember about DOM Storage  Data is stored as strings – if you store other types, you must convert them yourself  Example:  setItem("mysite.product.price", 59.99);  var price = parseFloat("mysite.product.price");  If you try to store more than 5MB, an exception of type QUOTA_EXCEEDED_ERR is thrown  There is currently no way to request an increase in the available storage space in any of the browsers
  • 31. The data:// URI  Defines a way for embedding content such as images directly inline into markup or CSS content  Used to reduce the number of HTTP requests  IE9 allows data URIs up to 4GB in size  General Format: data:[mime-type][;base64],<image data as text>
  • 32. Data URI Usage  Use data URIs in place of normal URLs: HTML Replaces: <img src=“http://imagename.png” /> With:<img src=“data:image/png;base64,00af037491806ed...” /> CSS Replaces: .rule { background-image:url(‘http://imagename.png’) } With:.rule { background-image: url(‘data:image/png;base64,00af037491806ed...’) }
  • 33. Where to from here? Windows Phone Microsoft confidential.
  • 34. Looking forward Windows 8 Preview Guide Developer Preview Builds Dev Tools Conf Sessions http://dev.windows.com
  • 35. PhoneGap on Windows Phone (a preview) Windows Phone Microsoft confidential.
  • 36. PhoneGap  Open Source project for building mobile apps using web technologies  HTML, Javascript, CSS  http://PhoneGap.com  Across multiple platforms  iOS, Android, etc and soon Windows Phone  Maintained by Nitobi (recently acquired by Adobe)  Access to native APIs  Accelerometer, Camera, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage
  • 37. PhoneGap on Windows Phone  Currently includes:  Accelerometer, Camera, Compass, Contacts, Events (partial, still underway), GeoLocation, MediaCapture, Connection, Notification  Requires installation  Windows Phone SDK 7.1 (which includes VS 2010)  Getting Started Info here:  http://bit.ly/PhoneGapMangoIntro  Code Here  https://github.com/phonegap/phonegap-wp7
  • 38. PhoneGap on Windows Phone (a demo) Windows Phone Microsoft confidential.
  • 39. Next Steps Internet Explorer Windows Phone  Internet Explorer Test Drive  Download SDK  http://bit.ly/ietestdrive/  Includes Dev Tools and  http://BeautyOfTheWeb.com Emulator  http://create.msdn.com Windows 8  Mobile Internet Explorer Test Drive  Preview Guide  http://bit.ly/IEmobile  Developer Preview Builds  Dev Tools  Conf Sessions  http://dev.windows.com
  • 40. HTML 5 Development for Windows Phone and Windows Desktop Ben Riga Doris Chen, Ph.D. Technical Evangelist Developer Evangelist Windows Phone US West Region benriga@microsoft.com Doris.Chen@microsoft.com @benriga @doristchen http://blogs.msdn.com/benriga/ http://blogs.msdn.com/dorischen/ Bay Area Mobile Meetup Oct 6, 2011
  • 41. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.