twitter #wins8camp http://bit.ly/wins8cheatsheet 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: 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

Blog http://blogs.msdn.com/dorischen

As of March 2012, IDC

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 7

Blog http://blogs.msdn.com/dorischen

demo

Blog http://blogs.msdn.com/dorischen PAGE

12

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 13

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 14

/* Re-arrange and hide/show content */

/* */

/* …*/

/* …*/

Full screen

Snap

Fill

Portrait

PAGE 17

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 21

twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 22

The development tools are FREE!

If you use a higher SKU, it just works!

demo

Blog http://blogs.msdn.com/dorischen PAGE

28

Feature Local context Web context

Windows Run-time Yes No

Windows Library for

Javascript

Yes No *

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.

http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspx

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

Blog http://blogs.msdn.com/dorischen PAGE

32

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

demo

Blog http://blogs.msdn.com/dorischen PAGE

43

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

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

}

...

}

this.MSPointerDown = function(evt)

{

context.beginPath();

context.moveTo(evt.offsetX, evt.offsetY);

x = evt.offsetX;

y = evt.offsetY;

brush.started = true;

};

this.MSPointerUp = function(evt)

{

if (brush.started)

{

brush.MSPointerMove(evt);

context.closePath();

brush.started = false;

}

};

demo

SettingsFlyout

Flyout

Appbar

Semantic Zoom

Flipview

SemanticZoom

Listview

Menu

Rating

Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)

DatePicker

Blog http://blogs.msdn.com/dorischen PAGE

55

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

Blog http://blogs.msdn.com/dorischen

Use what you already know

Best practices

Adopt the right look and feel for your app

Touch, UI Control, View State, Scroll, Zoom

Follow the app model

App Bar, Hardware

PAGE

58

YOUR IDEA.

YOUR APP.

30 DAYS.

You can develop a Windows 8 app in 30 days—

and we’re here to help.

Week 1 App design

Week 2 Coding your app

Week 3 Making your app shine

Week 4 Get published

• Insider tips and tricks on Windows 8 application development.

• Personal on-the-phone access to a Windows 8 architect*.

• An exclusive one-on-one Metro style design consultation*.

• An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.

Sign Up http://bit.ly/Win8GenApp

PAGE

63

• 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://bit.ly/CampInBox

Windows 8 Cheat Sheethttp://bit.ly/wins8cheatsheet

http://bit.ly/Win8GenApp

http:/dev.windows.comPAGE

64