Blog http://blogs.msdn.com/dorischen

Who am I? Developer Evangelist at Microsoft based in Silicon Valley, CA

Blog: http://blogs.msdn.com/b/dorischen/

Twitter @doristchen

Email: doris.chen@microsoft.com

Office Hours http://ohours.org/dorischen

Has over 15 years of experience in the software industry focusing on web technologies

Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings

Doris received her Ph.D. from the University of California at Los Angeles (UCLA)

PAGE 2

demo

8

A look…

11

precise device capabilities

@media screen and (max-width: 600px) {

body {

font-size: 80%;

}

}

@media screen and (min-width:320px) and (max-width:480px)

@media not print and (max-width:600px)

min/max-width

min/max-height

device-width

device-height

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

PAGE

15

http://mediaqueri.es

17

PAGE

18

demo

Layout Module

Device Orientation Events

DOM4 Mutation Observers

Encrypted Media Extensions

Fullscreen API

HTML5 Custom Data

HTML5 Page Transition Events

Input Method Editor API

Media Source Extensions

Navigation Timing

Screen Orientation API

Pointer Events

Tracking Preferences Expression (DNT)

Web Cryptography API

Web GL

Web Video Text Tracks Format

XMLHttpRequest (Level 3)

PAGE

21

demo

PAGE

24

PAGE

27

demo

PAGE

29

Native Wrapper

• Open-source framework

• Hosted webview

• Single, shared codebase deployed to all targets

• Plugins provide a common JavaScript API to access device capabilities

http://aka.ms/cordova

<webview>

Your JavaScript App

Cordova Plugin JS API

72%

62%

34%

28% 27%24%

20%

9%

0%

10%

20%

30%

40%

50%

60%

70%

80%

Familiarity of

Languages

(HTML, JS, CSS)

Cross Platform

Support

Performance Availability of

Tools/Libraries

Productivity Based on Open

Standards

Cost of

Development

Community

Source: Kendo UI Developer Survey 2013

demo

PAGE

38

• Responsive Web Design and CSS3

• http://bit.ly/CSS3Intro

• HTML5, CSS3 Free 1 Day Training

• http://bit.ly/HTML5DevCampDownload

• Using Blend to Design HTML5 Windows 8 Application (Part II): Style,

Layout and Grid

• http://bit.ly/HTML5onBlend2

• Using Blend to Design HTML5 Windows 8 Application (Part III): Style

Game Board, Cards, Support Different Device, View States

• http://bit.ly/HTML5onBlend3

• Feature-specific demos • http://ie.microsoft.com/testdrive/

• Real-world demos• http://www.beautyoftheweb.com/

http://cordova.apache.org/

http://aka.ms/cordova

#multi-device-hybrid-apps