Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3

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, OReilly, 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

As of March 2012, IDC

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

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

Internet Explorer Internet Explorer for the desktop

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

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

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

http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx 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 Yes Yes* Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOMThere are ways to communicate across contexts, ways to give websites access to some web standardsfeatures and ways #devcamp automatic filtering within a function. http://blogs.msdn.com/dorischen twitter to skip lab setup: http://bit.ly/html5setup Blog

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

API surface CSS Properties DOM Attributes DOM Events overflow -ms-scroll-rails -ms-scroll-snap-x scrollLeftScrolling 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-snapBoth MSManipulationStateChanged -ms-scroll-snap-typeSnap-points -ms-scroll-snap-point-x

<!– 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 );

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

Windows.Media.Capture

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

Contracts

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

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

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

http://windows8center.sourceforge.net	7759
http://blogs.msdn.com	1876
http://www.scoop.it	110
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1

Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3

by Doris Chen on Aug 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 9,747

Statistics

Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3 Presentation Transcript