(c) 2011 Microsoft. All rights reserved.

CROSS PLATFORM MOBILE APPLICATION DEVELOPMENT

Nick Randolph (Built to Roam)

SESSION CODE: DEV-WPH314

(c) 2011 Microsoft. All rights reserved.

AgendaMulti-Platform Applications

► Mobile Platforms► Cross Platform Options– Mobile Web Sites– Web Applications– Hybrid Applications– Rich Client Applications– Native Applications

► Frameworks & Tools

(c) 2011 Microsoft. All rights reserved.

Platform Adoption

(c) 2011 Microsoft. All rights reserved.

The Web is Unavoidable

(c) 2011 Microsoft. All rights reserved.

HTML 5 in Mobile Browsers

http://www.triballabs.net/2011/03/html5-on-mobile-browsers-what-can-you-do-today

Overview of IE9 Capabilities

Media & Graphics

HTML5 Video

HTML5 Canvas

SVG

HTML5 Audio

Cascading Style Sheets (CSS3)Backgnd/Borders

2D Transforms

Fonts Module

Media Queries

Namespaces

Colors Module

Values & Units

Selectors

Additional Standards & Web Applications Support

Traversal & Range

DOM Core L2/L3

Events L2/L3

L2 HTML & Style

ECMAScript 5

Geolocation

Selector APIs L2ICC Color Profiles

XML Parse/Serial

Semantic Elems

DataURIs (4GB)CSSOM View

(c) 2011 Microsoft. All rights reserved.

But UX is Important

Native Control Look and Feel

Geolocation

Camera Image Capture

Read/Write Access to Device File System

Device Interaction (Beep, Vibrate, Etc)

Ability to Launch Other Apps

Read/Write Access to Calendar/Tasks

Ability to Send SMS, MMS, emails

Device Orientation (e.g., compass/gyro)

Read/Write Access to Contacts/Addr BookAccess to Device Accelerometer

Camera Video Capture

Video Player Control

Audio Player Control

Device Status (Battery, Signal, Screen, etc)

49.78%

47.36%

31.77%

30.31%

29.72%

29.14%

27.38%

25.55%

20.28%

20.13%

19.47%

15.23%

14.35%

13.62%

11.13%

Q: What are the 5 key features needed to compete with native applications on devices?

(c) 2011 Microsoft. All rights reserved.

Developer Mindshare

(c) 2011 Microsoft. All rights reserved.

Application Lifecycle

(c) 2011 Microsoft. All rights reserved.

Cross Platform: Mobile Web Sites

Detecting IE on Windows Phone

► User Agent strings for IE 7 and 9 7 Doc Mode for Mobile 7 Doc Mode for Desktop

7 RTM Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; <device>; <manufacturer>)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/3.1; XBLWP7; ZuneWP7)

Mango Mozilla/4.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0 <device>; <manufacturer>)

Mozilla/4.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; XBLWP7; ZuneWP7)

Meta-Tags

Formatting for Devices

(c) 2011 Microsoft. All rights reserved.

demo

TechEd Mobile Web App

Android and iOSHTML 5Sencha Touch, jQuery Mobile and JQTouch

(c) 2011 Microsoft. All rights reserved.

demo

(c) 2011 Microsoft. All rights reserved.

Cross Platform: Web Applications

Rich Experience on the Web

Web Application DemoKindleFinancial Times

(c) 2011 Microsoft. All rights reserved.

demo

(c) 2011 Microsoft. All rights reserved.

Cross Platform: Hybrid Applications

► Managed code can communicate with page– Control.InvokeScript("fn", "arguments");

► Script can call into managed code– window.external.notify("string to pass");

Hosting the Web

Javascript CommunicationCustomize layout using eval()

(c) 2011 Microsoft. All rights reserved.

demo

Widgets

Packaged HTML/CSS/JS

(c) 2011 Microsoft. All rights reserved.

demo

(c) 2011 Microsoft. All rights reserved.

Cross Platform: Rich Client

Going Rich

Simple application Consume OData feedStyle in Blend

(c) 2011 Microsoft. All rights reserved.

demo

(c) 2011 Microsoft. All rights reserved.

Cross Platform: Native

(c) 2011 Microsoft. All rights reserved.

Frameworks & Tools

Mono (Touch and Droid)

Same ApplicationiOS – Mono TouchAndroid – Mono Droid

(c) 2011 Microsoft. All rights reserved.

demo

(c) 2011 Microsoft. All rights reserved.

► Developer Mindshare: Android (67%) iOS (59%) Mobile Web (56%)

► Platforms being abandoned: Symbian (40%) Java ME (35%)

► App stores primary channels for 45% of developers► Android less fragmented than Java ME or

BlackBerry► Platform development:

Closing Thoughts

Enrol in Microsoft Virtual Academy TodayWhy Enroll, other than it being free?The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies.

What Do I get for enrolment?► Free training to make you become the Cloud-Hero in my Organization► Help mastering your Training Path and get the recognition► Connect with other IT Pros and discuss The Cloud

Where do I Enrol?

www.microsoftvirtualacademy.com

Then tell us what you think. TellTheDean@microsoft.com

(c) 2011 Microsoft. All rights reserved.

© 2010 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.

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.