This document provides biographical information about Doris Chen in 3 paragraphs. It states that she is a Developer Evangelist at Microsoft based in Silicon Valley, California. It lists her blog, Twitter, email, and details about her office hours. It notes that she has over 15 years of experience in the software industry focusing on web technologies. It also shares that she has spoken and published widely at several conferences and meetings. It concludes by mentioning that Doris received her Ph.D. from UCLA.

2. PAGE 2
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)
Blog http://blogs.msdn.com/dorischen

5. PAGE 7

6. PAGE 8

9. demo

11. Media Source Extensions
Navigation Timing
Screen Orientation API
Encrypted Media Extensions
Pointer Events
Layout Module
Fullscreen API
Tracking Preferences Expression (DNT)
Web Cryptography API
HTML5 Custom Data
HTML5 Page Transition Events
Device Orientation Events
DOM4 Mutation Observers
Web GL
Web Video Text Tracks Format
XMLHttpRequest (Level 3)
Input Method Editor API

12. PAGE

13. PAGE

15. CSS device adaptation and media queries
Use @-ms-viewport
to control page
scaling
Use media queries
flexbox, and other
adaptive layout
techniques
Common sizes to consider: 320, 480, 640, 768, 1024px

16. demo

18. Windows app
WinJS
HTML5
WinRT

19. Windows 8 Windows app
app
WinJS 1.0 HTML5
WinJS
WinRT

20. Windows 8 app
Windows 8.1 app
WinJS 1.0
WinJS 2.0

22. PAGE

23. PAGE

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

27. PAGE

28. demo

29. xhr
//access a web service, cloud service, local resource
http://www.example.org/somedata.json

31. PAGE

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

36. 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);
}
...
}

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

42. http://bit.ly/win8OnePage
http://bit.ly/HTML5Wins8Camp
http://bit.ly/CampInBox
http://Aka.ms/brockschmidtbook
PAGE
 http:/dev.windows.com

43. • 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
PAGE
• http://www.beautyoftheweb.com/