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.

2. 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
 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 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

5. As of March 2012, IDC

8. PAGE 9 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

9. PAGE 10 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

10. Internet Explorer
TAB HTML host process
App code
Web platform App code
Web Windows
platform runtime
App container
PAGE 12 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

11. demo

13. Internet Explorer
Internet Explorer
for the desktop

14. PAGE 17 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

15. PAGE 18 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

18. /* Re-arrange and hide/show content */
Full screen Portrait
Snap
Fill
PAGE 21 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

21. 1,1 2,1
1,2 2,2
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

22. demo

23. PAGE 26 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

24. demo

26. The development tools are FREE!
If you use a higher SKU, it just works!

28. PAGE 33 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

29. PAGE 34 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

31. PAGE 36 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

32. PAGE 38 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

33. PAGE 39 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

34. 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
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

35. Feature Local context Web context
Windows Run-time Yes No
Windows Library for Yes Yes*
Javascript
External script No Yes
references
Cross-domain XHR Yes No
requests
Automatic filtering for Yes No
script injection on
DOM
There are ways to communicate across contexts, ways to give websites access to some web standards
features and ways #devcamp automatic filtering within a function. http://blogs.msdn.com/dorischen
twitter to skip lab setup: http://bit.ly/html5setup Blog

36. demo

39. "Code for touch, get mouse and pen for free!"

40. API surface CSS Properties DOM Attributes DOM Events
overflow
-ms-scroll-rails
-ms-scroll-snap-x scrollLeft
Scrolling scroll
-ms-scroll-snap-y scrollTop
-ms-scroll-chaining
-ms-scroll-boundary
-ms-content-zooming
-ms-content-zoom-
Zooming msContentZoomFactor MSContentZoom
boundary
-ms-content-zoom-snap
Both MSManipulationStateChanged
-ms-scroll-snap-type
Snap-points
-ms-scroll-snap-point-x

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

49. <!– 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.addEvent
Listener (‘selectionchanged’, onSelChanged );

50. DatePicker SettingsFlyout
Listview
SemanticZoom
Semantic Zoom
Flipview
Menu Flyout
Rating
Appbar
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)

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

52. Windows.Media.Capture

54. // Handle click events from the Photo command
capture.CameraCaptureUI()
// Capture a photo and display the share UI

56. Contracts

60. demo

64.  Windows 8 Cheat Sheet
http://bit.ly/wins8cheatsheet
http://bit.ly/Win8GenApp
 http:/dev.windows.com
PAGE 80 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

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

66. 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.aspx
PAGE 82 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen