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.
Streamlining Python Development: A Guide to a Modern Project Setup
What Web Developers Need to Know to Develop Windows 8 Apps
1.
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
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.
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;
}
});
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)
});
50.
51.
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) {
… }…
53.
54.
55.
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); });
57.
58.
59.
60.
61.
62.
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
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
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
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/