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

Office Hours http://ohours.org/dorischen

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 7

PAGE 8

demo

Layout Module

Device Orientation Events

DOM4 Mutation Observers

Encrypted Media Extensions

Fullscreen API

HTML5 Custom Data

HTML5 Page Transition Events

Input Method Editor API

Media Source Extensions

Navigation Timing

Screen Orientation API

Pointer Events

Tracking Preferences Expression (DNT)

Web Cryptography API

Web GL

Web Video Text Tracks Format

XMLHttpRequest (Level 3)

PAGE

14

PAGE

15

Use @-ms-viewport

to control page

scaling

Use media queries

flexbox, and other

adaptive layout

techniques

CSS device adaptation and media queries

Common sizes to consider: 320, 480, 640, 768, 1024px

demo

WinJS HTML5

Windows app

WinRT

WinJS HTML5

Windows app

WinRT

Windows 8 app

WinJS 1.0

WinJS 1.0

Windows 8 app

WinJS 2.0

Windows 8.1 app

PAGE

27

PAGE

28

The development tools are FREE!

If you use a higher SKU, it just works!

PAGE

33

demo

xhr//access a web service, cloud service, local resource

http://www.example.org/somedata.json

PAGE

42

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

}

...

}

Join us for this Free, hands-on event and learn how to build a Windows 8.1

and/or Windows Phone game in record time. We’ll cover everything you need

to create, upload and publish an amazing game. Expert developers will outline

different game frameworks and give you the tools you need to start building.

They’ll also explain how to add graphics, level and sound to game starter kits,

while sharing other cool ways to make the game your own. In one jam-packed

day of learning and coding, you can turn your idea into reality!

Register today for a local Game On event.

December 4, 2013 December 5, 2013

San Francisco, CA Mountain View, CA

http://aka.ms/gameonsf http://aka.ms/gameonsvc

http://bit.ly/win8OnePage

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

http://Aka.ms/brockschmidtbook

http:/dev.windows.comPAGE

63

PAGE

64

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