building beautiful and interactive metro apps with javascript, html5 & css3
DESCRIPTION
This session outlines some of what you can do with new HTML5 and CSS3 features introduced in Internet Explorer 10. Internet Explorer 10 is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Metro style app development on Windows 8. Get started writing Metro style apps using your HTML5, JavaScript, and CSS skills today! 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. • 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 arm you with everything you need to know to start building Metro style apps with the skills you already have.TRANSCRIPT
![Page 1: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/1.jpg)
![Page 2: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/2.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup 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]
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: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/3.jpg)
![Page 4: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/4.jpg)
![Page 5: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/5.jpg)
As of March 2012, IDC
![Page 6: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/6.jpg)
![Page 7: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/7.jpg)
![Page 8: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/8.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 9
![Page 9: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/9.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 10
![Page 10: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/10.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
App container
HTML host process
Internet Explorer
Web
platform
TAB
App code
Web platform
Windows
runtime
App code
PAGE 12
![Page 11: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/11.jpg)
demo
![Page 12: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/12.jpg)
![Page 13: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/13.jpg)
Internet Explorer
for the desktop Internet Explorer
![Page 14: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/14.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 17
![Page 15: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/15.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 18
![Page 16: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/16.jpg)
![Page 17: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/17.jpg)
![Page 18: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/18.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
/* Re-arrange and hide/show content */
Full screen
Snap
Fill
Portrait
PAGE 21
![Page 19: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/19.jpg)
![Page 20: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/20.jpg)
![Page 21: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/21.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
1,1 2,1
2,2 1,2
![Page 22: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/22.jpg)
demo
![Page 23: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/23.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 26
![Page 24: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/24.jpg)
demo
![Page 25: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/25.jpg)
![Page 26: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/26.jpg)
The development tools are FREE!
If you use a higher SKU, it just works!
![Page 27: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/27.jpg)
![Page 28: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/28.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 33
![Page 29: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/29.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 34
![Page 30: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/30.jpg)
![Page 31: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/31.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 36
![Page 32: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/32.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 38
![Page 33: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/33.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 39
![Page 34: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/34.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
![Page 35: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/35.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
Feature Local context Web context
Windows Run-time Yes No
Windows Library for
Javascript
Yes Yes*
External script
references
No Yes
Cross-domain XHR
requests
Yes No
Automatic filtering for
script injection on
DOM
Yes No
There are ways to communicate across contexts, ways to give websites access to some web standards
features and ways to skip automatic filtering within a function.
![Page 36: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/36.jpg)
demo
![Page 37: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/37.jpg)
![Page 38: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/38.jpg)
![Page 39: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/39.jpg)
"Code for touch, get mouse and pen for free!"
![Page 40: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/40.jpg)
API surface CSS Properties DOM Attributes DOM Events
Scrolling
overflow
-ms-scroll-rails
-ms-scroll-snap-x
-ms-scroll-snap-y
-ms-scroll-chaining
-ms-scroll-boundary
scrollLeft
scrollTop scroll
Zooming
-ms-content-zooming
-ms-content-zoom-
boundary
-ms-content-zoom-snap
msContentZoomFactor MSContentZoom
Both MSManipulationStateChanged
Snap-points -ms-scroll-snap-type
-ms-scroll-snap-point-x
![Page 41: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/41.jpg)
![Page 42: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/42.jpg)
![Page 43: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/43.jpg)
![Page 44: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/44.jpg)
![Page 45: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/45.jpg)
![Page 46: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/46.jpg)
![Page 47: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/47.jpg)
![Page 48: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/48.jpg)
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> <div class="smallListIconTextItem-Detail"> </div> </div> </div> <!-- Call WinJS.UI.processAll() in your initialization code --> <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, itemTemplate: smallListIconTextTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none', layout: { type: WinJS.UI.GridLayout } }" ></div>
![Page 49: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/49.jpg)
<!– Step1: declare control -->
<div id=“list” data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
/* Step 2: Call WinJS.UI.processAll() */
/* Step 3: Use the control */
document.getElementById(‘list’).winControl.addEventListener (‘selectionchanged’, onSelChanged );
![Page 50: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/50.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
SettingsFlyout
Flyout
Appbar
Semantic Zoom
Flipview
SemanticZoom
Listview
Menu
Rating
Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
DatePicker
![Page 51: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/51.jpg)
<div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button>
</div>
<div id="bragFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'photo', label:'Photo'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'video', label:'Video' }"></button>
</div>
![Page 52: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/52.jpg)
Windows.Media.Capture
![Page 53: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/53.jpg)
![Page 54: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/54.jpg)
// Handle click events from the Photo command
capture.CameraCaptureUI()
// Capture a photo and display the share UI
![Page 55: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/55.jpg)
![Page 56: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/56.jpg)
Contracts
![Page 57: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/57.jpg)
![Page 58: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/58.jpg)
![Page 59: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/59.jpg)
![Page 60: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/60.jpg)
demo
![Page 61: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/61.jpg)
![Page 62: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/62.jpg)
![Page 63: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/63.jpg)
![Page 64: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/64.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
Windows 8 Cheat Sheet http://bit.ly/wins8cheatsheet
http://bit.ly/Win8GenApp
http:/dev.windows.com PAGE 80
![Page 65: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/65.jpg)
Launch your Windows 8 App in 30 days
Generation App Online training and tips from insiders Tele-support with a Windows 8 architect Exclusive one-on-one Metro style design consultation Virtual Labs- 90 min labs http://aka.ms/vLabsWin8 Sign up at http://bit.ly/Win8GenApp
![Page 66: Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3](https://reader034.vdocuments.mx/reader034/viewer/2022051412/54b6e19d4a7959ca538b482b/html5/thumbnails/66.jpg)
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
http://ie.microsoft.com/testdrive/Views/SiteMap/
http://www.ietestdrive.com/Links/DevGuide9.html
http://www.ietestdrive.com/Links/DevGuide10.html
http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspxPAGE 82