HTML 5 Development for Windows Phone and Windows Desktop
Ben Riga Technical Evangelist Windows Phone [email protected] @benriga http://blogs.msdn.com/benriga/
Bay Area Mobile Meetup Oct 6, 2011
Doris Chen Ph.D. Developer Evangelist US West Region [email protected] @doristchen http://blogs.msdn.com/dorischen/
Windows Phone Microsoft confidential.
Agenda Windows Phone – A Quick Look
Microsoft and HTML 5
Internet Explorer on the desktop, Windows Phone
A preview of PhoneGap on Windows Phone
Windows Phone Microsoft confidential.
A quick look at Windows Phone
Windows Phone Microsoft confidential.
vs. People Icons
Windows Phone Microsoft confidential. 5
Internet beyond the browser. A fast, beautiful web experience
with Internet Explorer 9 and hardware acceleration.
Local Scout provides suggestions and prioritized local search results on restaurants, shopping and things to do.
Modern communication built in.
People Hub with Facebook, LinkedIn and Twitter, built in.
Group friends, pin them to Start for live updates and text, email and IM them all at once.
Facebook Chat, Messenger, check-ins, and photo tagging built in.
A smarter way to app. Pin apps to the Start screen for
live updates at a glance.
Apps connected to your searches make them easier to discover and use.
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.
Windows Phone Microsoft confidential.
Agenda Windows Phone – A Quick Look
Microsoft and HTML 5
Internet Explorer on the desktop, Windows Phone
A preview of PhoneGap on Windows Phone
Windows Phone Microsoft confidential.
A quick look at Windows Phone
Windows Phone Microsoft confidential.
vs. People Icons
Windows Phone Microsoft confidential. 9
Internet beyond the browser. A fast, beautiful web experience
with Internet Explorer 9 and hardware acceleration.
Local Scout provides suggestions and prioritized local search results on restaurants, shopping and things to do.
Modern communication built in.
People Hub with Facebook, LinkedIn and Twitter, built in.
Group friends, pin them to Start for live updates and text, email and IM them all at once.
Facebook Chat, Messenger, check-ins, and photo tagging built in.
A smarter way to app. Pin apps to the Start screen for
live updates at a glance.
Apps connected to your searches make them easier to discover and use.
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.
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
Understanding Today’s Sites
0
1000
2000
3000
4000
5000
6000
7000
8000
1 51 101 151 201 251 301 351 401 451 501 551 601 651 701
Nu
mb
er
of
Sit
es
API (By Rank)
API Usage Over Top 7200 Sites
API Rank %
indexOf 1 94%
getElementById 13 80%
addEventListener 27 65%
getComputedStyle 62 26%
Windows Phone Microsoft confidential.
HTML CSS Web Apps SVG
Geo
loca
tio
n
EC
MA
100+ Specifications
Windows Phone Microsoft confidential.
Microsoft Approach with HTML5
Windows Phone Microsoft confidential.
Internet Explorer on the desktop, Windows Phone
Windows Phone Microsoft confidential.
HTML5 in IE9
HTML5
• New Markup Elements
• Canvas
• Audio
• Video
• Local Storage
• Cross-Window Messaging
• Text Selection APIs
• Parsing SVG in HTML
CSS3
• 2D Transforms
• Border Radius
• Box-Shadow
• Fonts (WOFF)
• Media Queries
• Multiple Backgrounds
• Namespaces
• Opacity
• rgba(), hsl(), hsla()
• Selectors (IE8)
SVG
• Shapes
• Clipping, Masking, and Compositing
• Transforms
• Extensibility
• Gradients
• Interactivity
• Linking and Views
• Painting and Colors
• Paths
• Text
Others
• ECMA Script 5 (all but Strict Mode)
• Native JSON support (IE8)
• Performance API
• Geo-Location
• Data-uri (IE8)
• DOM L2, L3
• Selectors API L2
• AJAX Navigation (IE8)
• DOMParser and XMLSerializer
• ICC v2 and Color Profile
• ARIA
Hardware Acceleration
Windows Phone Microsoft confidential.
HTML5 in IE10 Platform Previews
HTML5
• Drag&Drop
• File API
• Forms Validation
• Sandbox
• Web Workers
• async
CSS3
• Grid
• Flexbox
• Gradient
• Multi-Column
• Floats
Others
• Web Performance APIs
• ECMA Script 5 Strict Mode
• Advanced Hit Testing APIs
• Media Queries Listeners
• Removal of Style Sheet Limits
Windows Phone Microsoft confidential.
Partial Summary of IE9 Windows Phone Support
HTML5 Video
HTML5 Canvas
SVG
HTML5 Audio
Background/Borders
2D Transforms
Fonts Module
CSS Media Queries
Namespaces
Colors Module
Values & Units
Selectors
Traversal & Range
DOM Core Level 2/.3
DOM Events Level 2/3
L2 HTML & Style
ECMAScript 5
Geolocation
Selector APIs Level 2
ICC Color Profiles
XML Parse/Serial
Semantic Elements
DataURIs
CSSOM View
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
Controlling the Viewport
<META name="HandheldFriendly" content="true" />
<META name="MobileOptimized" content="320" />
<META name="Viewport" content="width=device-width" />
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
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" />
@media screen and (max-width:800) { /* style definitions that apply to screens less than 800px wide */ }
Or…
Windows Phone Microsoft confidential.
Using Media Queries Media Query Feature
Description
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.
Windows Phone Microsoft confidential.
Using Media Queries
<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 */ }
<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 */ }
http://mediaqueri.es/popular/
Windows Phone Microsoft confidential.
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/
Windows Phone Microsoft confidential.
Geolocation
API: getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn( positionObject ) errFn( positionErrorObject )
Windows Phone Microsoft confidential.
Client-side LocalStorage / SessionStorage
Provides easier way of storing data on client without cookies
Windows Phone Microsoft confidential.
DOM Storage API Available from the window object: window.localStorage
window.sessionStorage
getItem(key) setItem(key, value) removeItem(key) clear() key(index) length
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
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
Windows Phone Microsoft confidential.
PhoneGap on Windows Phone (a demo)
Windows Phone Microsoft confidential.
Next Steps Internet Explorer Internet Explorer Test Drive
http://bit.ly/ietestdrive/ http://BeautyOfTheWeb.com
Windows 8
Preview Guide
Developer Preview Builds
Dev Tools
Conf Sessions http://dev.windows.com
Windows Phone Download SDK
Includes Dev Tools and Emulator
http://create.msdn.com
Mobile Internet Explorer Test Drive
http://bit.ly/IEmobile
HTML 5 Development for Windows Phone and Windows Desktop
Ben Riga Technical Evangelist Windows Phone [email protected] @benriga http://blogs.msdn.com/benriga/
Bay Area Mobile Meetup Oct 6, 2011
Doris Chen, Ph.D. Developer Evangelist US West Region [email protected] @doristchen http://blogs.msdn.com/dorischen/
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.