In the talk, it starts with highlighting the new HTML5 and CSS3 features in modern browsers, then it illustrate how easy it is to convert a web application to a modern app. Finally it introduces Apache Cordova project and how feasible it is to leverage the web content (HTML5, CSS3, and JavaScript) and convert it into an app that will run cross platforms on Android, iOS and Windows.

2. 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

4. demo

8. 8

11. A look…
11

12. precise device capabilities

14. @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)

15. min/max-width
min/max-height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
PAGE

17. http://mediaqueri.es
17

18. PAGE

19. demo

20. Layout Module
Device Orientation Events
DOM4 Mutation Observers
EncryptedMedia Extensions
Fullscreen API
HTML5Custom Data
HTML5PageTransition 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 TracksFormat
XMLHttpRequest (Level 3)

21. PAGE

22. demo

24. PAGE

27. PAGE

28. demo

29. PAGE

31. 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

32. 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

34. demo

38. PAGE
• 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/

39. http://cordova.apache.org/
http://aka.ms/cordova
#multi-device-hybrid-apps