Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

52

description

The demo and resrouces are available at http://bit.ly/Wins8DevHTML5Pres. 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 Windows 8 style app development on Windows 8. Get started writing Windows 8 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 Windows 8 style apps with the skills you already have.

Transcript of Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

Page 1: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 2: Building Beautiful and Interactive Windows 8 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: [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 Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 4: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

As of March 2012, IDC

Page 5: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 6: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 7: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 8: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

demo

Page 9: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 10: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

12

Page 11: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 12: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 13: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 14: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

/* */

/* …*/

/* …*/

Full screen

Snap

Fill

Portrait

PAGE 17

Page 15: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 16: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 17: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 18: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 19: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

The development tools are FREE!

If you use a higher SKU, it just works!

Page 20: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

demo

Page 21: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 22: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

28

Page 23: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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.

Page 24: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 25: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

32

Page 26: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 27: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 28: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 29: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 30: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 31: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

demo

Page 32: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

43

Page 33: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 34: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 35: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 36: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 37: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 38: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

}

...

}

Page 39: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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;

}

};

Page 40: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

demo

Page 41: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 42: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

SettingsFlyout

Flyout

Appbar

Semantic Zoom

Flipview

SemanticZoom

Listview

Menu

Rating

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

DatePicker

Page 43: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

55

Page 44: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 45: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

<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 46: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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

Page 47: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 48: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 49: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Page 50: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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 51: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

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/

Page 52: Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

http://bit.ly/CampInBox

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

http://bit.ly/Win8GenApp

http:/dev.windows.comPAGE

64