building beautiful and interactive metro apps with javascript, html5 & css3

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

App container

HTML host process

Internet Explorer

Web

platform

TAB

App code

Web platform

Windows

runtime

App code

PA

GE

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

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

32

demo

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

40

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

}

};

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

}

...

}

demo

• Free open source cross platform framework for apps on mobile devices

• Renders UI using HTML5 and CSS; Web browser encased in a native app for each platform

• Build for Windows Phone and Port to Windows 8

HTML5/JS developers

HTML5/JS developers (Game)GameMaker - family of products that caters to entry-level developers and seasoned game development professionals to create cross platform games

HTML5/JS developers (Game): Construct 2 (Game)

Construct2 - cross platform game development for beginners

HTML5/JS developers (Game)GameSalad – create cross platform games rapidly with no code

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

Join http://bit.ly/FreeStoreReg Publish your app to the Windows Store and/or Windows Phone Store between

December 20, 2012 through February 28, 2013 and qualify for the following rewards:

1. A store registration reimbursement* AND a copy of Halo 4 for Xbox 360!

2. A chance to win one of 12 Xbox 360 consoles with Kinect. The more apps you enter,

the more chances you'll have to win.

3. The Grand Prize: Three devs with the best apps will win an ultimate backstage pass to Microsoft Studios and spend the day with the Windows 8 Games Studios team—makers of Windows 8, Windows Phone 8 and XBOX-enabled games!

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

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

http:/dev.windows.comPAGE

61

PAGE

62

• 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://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