HTML 5 Development for Windows Phone and Windows Desktop

Ben Riga Technical Evangelist Windows Phone benriga@microsoft.com @benriga http://blogs.msdn.com/benriga/

Bay Area Mobile Meetup Oct 6, 2011

Doris Chen Ph.D. Developer Evangelist US West Region Doris.Chen@microsoft.com @doristchen http://blogs.msdn.com/dorischen/

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

vs. People Icons

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.

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

vs. People Icons

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

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

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%

HTML CSS Web Apps SVG

Geo

loca

tio

n

EC

MA

100+ Specifications

Microsoft Approach with HTML5

Windows Phone Microsoft confidential.

Internet Explorer on the desktop, Windows Phone

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

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

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

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

@media screen and (max-width:800) { /* style definitions that apply to screens less than 800px wide */ }

Or…

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.

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/

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:

<img src=“http://imagename.png” />

<img src=“data:image/png;base64,00af037491806ed...” />

Replaces:

With:

HTML

.rule { background-image:url(‘http://imagename.png’) }

.rule { background-image: url(‘data:image/png;base64,00af037491806ed...’) }

Replaces:

With:

CSS

Windows Phone Microsoft confidential.

Where to from here?

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)

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

Windows Phone Microsoft confidential.

PhoneGap on Windows Phone (a demo)

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 benriga@microsoft.com @benriga http://blogs.msdn.com/benriga/

Bay Area Mobile Meetup Oct 6, 2011

Doris Chen, Ph.D. Developer Evangelist US West Region Doris.Chen@microsoft.com @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.