what web developers need to know to develop native html5/js apps
DESCRIPTION
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps. This session will start with the introduction on new HTML5 and CSS3 features introduced in Internet Explorer. Internet Explorer is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 app development. • You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime. • You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration. This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.TRANSCRIPT
![Page 1: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/1.jpg)
![Page 2: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/2.jpg)
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
![Page 3: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/3.jpg)
![Page 4: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/4.jpg)
![Page 5: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/5.jpg)
PAGE 7
![Page 6: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/6.jpg)
PAGE 8
![Page 7: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/7.jpg)
![Page 8: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/8.jpg)
![Page 9: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/9.jpg)
demo
![Page 10: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/10.jpg)
![Page 11: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/11.jpg)
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 12: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/12.jpg)
PAGE
14
![Page 13: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/13.jpg)
PAGE
15
![Page 14: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/14.jpg)
![Page 15: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/15.jpg)
Use @-ms-viewport
to control page
scaling
Use media queries
flexbox, and other
adaptive layout
techniques
CSS device adaptation and media queries
Common sizes to consider: 320, 480, 640, 768, 1024px
![Page 16: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/16.jpg)
demo
![Page 17: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/17.jpg)
![Page 18: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/18.jpg)
WinJS HTML5
Windows app
WinRT
![Page 19: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/19.jpg)
WinJS HTML5
Windows app
WinRT
Windows 8 app
WinJS 1.0
![Page 20: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/20.jpg)
WinJS 1.0
Windows 8 app
WinJS 2.0
Windows 8.1 app
![Page 21: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/21.jpg)
![Page 22: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/22.jpg)
PAGE
27
![Page 23: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/23.jpg)
PAGE
28
![Page 24: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/24.jpg)
![Page 25: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/25.jpg)
The development tools are FREE!
If you use a higher SKU, it just works!
![Page 26: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/26.jpg)
![Page 27: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/27.jpg)
PAGE
33
![Page 28: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/28.jpg)
demo
![Page 29: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/29.jpg)
xhr//access a web service, cloud service, local resource
http://www.example.org/somedata.json
![Page 30: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/30.jpg)
![Page 31: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/31.jpg)
PAGE
42
![Page 32: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/32.jpg)
![Page 33: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/33.jpg)
"Code for touch, get mouse and pen for free!"
![Page 34: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/34.jpg)
![Page 35: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/35.jpg)
![Page 36: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/36.jpg)
function onLoad() {
...
var workSpaces = document.getElementsByClassName("workspace");
for (i = 0; i < workSpaces.length; i++) {
workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false);
workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false);
workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false);
workSpaces[i].addEventListener("MSManipulationStateChanged",
resetInteractions, false);
}
...
}
![Page 37: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/37.jpg)
![Page 38: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/38.jpg)
![Page 39: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/39.jpg)
Join us for this Free, hands-on event and learn how to build a Windows 8.1
and/or Windows Phone game in record time. We’ll cover everything you need
to create, upload and publish an amazing game. Expert developers will outline
different game frameworks and give you the tools you need to start building.
They’ll also explain how to add graphics, level and sound to game starter kits,
while sharing other cool ways to make the game your own. In one jam-packed
day of learning and coding, you can turn your idea into reality!
Register today for a local Game On event.
December 4, 2013 December 5, 2013
San Francisco, CA Mountain View, CA
http://aka.ms/gameonsf http://aka.ms/gameonsvc
![Page 40: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/40.jpg)
![Page 41: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/41.jpg)
![Page 42: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/42.jpg)
http://bit.ly/win8OnePage
http://bit.ly/HTML5Wins8Camp
http://bit.ly/CampInBox
http://Aka.ms/brockschmidtbook
http:/dev.windows.comPAGE
63
![Page 43: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/43.jpg)
PAGE
64
• 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/
![Page 44: What Web Developers Need to Know to Develop Native HTML5/JS Apps](https://reader033.vdocuments.mx/reader033/viewer/2022051314/54b6e1914a7959ca538b4829/html5/thumbnails/44.jpg)