What Web Developers Need to Know to Develop Windows 8 Apps

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

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

http://bit.ly/win8cards

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

PAGE

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

/* */ Full screen Portrait

/* …*/
/* …*/

Snap
Fill

PAGE 18

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

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.

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

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

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

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

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

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

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

});

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

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

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) {
… }…

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

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

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

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

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

 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

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

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

http://bit.ly/Wins8Download

http://Aka.ms/brockschmidtbook

PAGE
 http:/dev.windows.com

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

What Web Developers Need to Know to Develop Windows 8 Apps

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to What Web Developers Need to Know to Develop Windows 8 Apps (20)

More from Doris Chen (20)

Recently uploaded (20)

What Web Developers Need to Know to Develop Windows 8 Apps