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 practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc. ◦Expect a lot of code and demo. This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.

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)
PAGE 2 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen

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

4. As of March 2012, IDC

5. http://bit.ly/win8cards

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

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

10. demo

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

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

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

16. /* Re-arrange and hide/show content */
/* */ Full screen Portrait
/* …*/
/* …*/
Snap
Fill
PAGE 18

17. demo

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

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

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

23. demo

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

26. demo

27. Feature Local context Web context
Windows Runtime Yes No
Windows Library for JavaScript Yes Partial
JavaScript
No Yes
URIs(attribute="javascript:code")
Data URIs ("data:" ) for fonts No Yes
External script references
No Yes
(<script src="http://*" /> )
window.close Yes No
Cross-domain XHR requests 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.

28. http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-
css-javascript-apps-into-windows-8-application.aspx
http://github.com/appendto/jquery-win8
http://channel9.msdn.com/Events/Build/2012/3-130
http://msdn.microsoft.com/en-
us/library/windows/apps/hh700404.aspx

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

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

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

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

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

38. 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;
}
};

41. demo

42. // Application manifest capabilities required to access camera
and microphone
<Capabilities>
<DeviceCapability Name="webcam" />
<DeviceCapability Name="microphone" />
</Capabilities>

43. id="message"
id="imagedisplay"
type="text/javascript">
// Step 1: Invoke the camera capture UI for snapping a photo
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).
then(function (capturedItem) {
if (capturedItem) {
// Step 2: Display the photo
document.getElementById("imagedisplay").src =
URL.createObjectURL(capturedItem);
} else {
document.getElementById("message").innerHTML = "User didn’t capture a
photo";
}
});

44. id="message"
id="videoplayback"
type="text/javascript">
// Step 1: Invoke the camera capture UI for record a video
var dialog = new Windows.Media.Capture.CameraCaptureUI();
dialog.videoSettings.format =
Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).done(fun
ction (file) {
if (file) {
var videoBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true});
document.getElementById("capturedVideo").src = videoBlobUrl;
}
});

48. demo

49. document.getElementById("pin").addEventListener("click", function (e) {
var uri = new Windows.Foundation.Uri("ms-appx:///" + item.tileImage);
var tile = new start.SecondaryTile(
item.key, // Tile ID
item.shortTitle, // Tile short name
item.title, // Tile display name
JSON.stringify(Data.getItemReference(item)), // Activation argument
start.TileOptions.showNameOnLogo, // Tile options
uri // Tile logo URI
);
})
return nav.navigate("/pages/itemDetail/itemDetail.html", { item: JSON.parse(args.detail.arguments)
});

52. default.js:
// Register for push notifications
var profile = net.NetworkInformation.getInternetConnectionProfile();
if (profile.getNetworkConnectivityLevel() === net.NetworkConnectivityLevel.internetAccess)
{
push.PushNotificationChannelManager.createPushNotificationChannelForApplic
ationAsync().then(function (channel) {
var buffer =
wsc.CryptographicBuffer.convertStringToBinary(channel.uri, wsc.BinaryStringEncoding.utf8);
var uri = wsc.CryptographicBuffer.encodeToBase64String(buffer);
WinJS.xhr({ url:
"http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile"
}).then(function (xhr) {
… }…

56. // Handle click events from the Reminder command
document.getElementById("remind").addEventListener("click", function (e) {
// Create a toast notifier
var notifier = notify.ToastNotificationManager.createToastNotifier();
// Make sure notifications are enabled
if (notifier.setting != notify.NotificationSetting.enabled) {…}
// Get a toast template and insert a text node containing a message
var template =
notify.ToastNotificationManager.getTemplateContent(notify.ToastTemplateType.toastText01);
var element =
template.getElementsByTagName("text")[0];element.appendChild(template.createTextNode("Reminder!"));
// Schedule the toast to appear 10 seconds from now
var date = new Date(new Date().getTime() + 10000);
var stn = notify.ScheduledToastNotification(template, date);
notifier.addToSchedule(stn); });

63. HTML5/JS developers
• 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

64. HTML5/JS developers (Game): Construct 2 (Game)
Construct2 - cross platform game development for beginners

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

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

69.  Publish your app to the Windows
Store and/or Windows Phone Store
http://bit.ly/2000Cash
March 8, 2013 through June 30, 2013
 Submit up to 10 published apps per
Store and get a $100 Virtual Visa®
 More: http://bit.ly/2000Cash
Blog http://blogs.msdn.com/dorischen

70. YOUR IDEA. Week 1 App design
YOUR APP . Week 2 Coding your app
30 DAYS.
Week 3 Making your app shine
Week 4 Get published
You can develop a Windows 8 app in 30 days—
and we’re here to help.
• 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

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

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