lastest trends in web development
TRANSCRIPT
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: [email protected]
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
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
