• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What Web Developers Need to Know to Develop Windows 8 Apps

What Web Developers Need to Know to Develop Windows 8 Apps



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

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.



Total Views
Views on SlideShare
Embed Views



13 Embeds 9,594

http://html5devconf.com 7171
http://blogs.msdn.com 1523
http://www.html5devconf.com 531
http://www.geekchamp.com 211
http://dev.liranuna.com 89
http://www.moarplay.com 40
http://moarplay.com 18
http://tintamarre7.zoolbia.com 3
http://translate.googleusercontent.com 3
http://garnerville9.celianna.com 2
http://webcache.googleusercontent.com 1
http://feeds.feedburner.com 1
http://i1.blogs.msdn.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    What Web Developers Need to Know to Develop Windows 8 Apps What Web Developers Need to Know to Develop Windows 8 Apps Presentation Transcript

    • 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, OReilly, 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
    • As of March 2012, IDC
    • http://bit.ly/win8cards
    • PAGE 8 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
    • Blog http://blogs.msdn.com/dorischen
    • demo
    • Blog http://blogs.msdn.com/dorischenPAGE
    • PAGE 14 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
    • PAGE 15 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
    • /* Re-arrange and hide/show content */ /* */ Full screen Portrait /* …*/ /* …*/ Snap FillPAGE 18
    • demo
    • PAGE 22 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
    • PAGE 23 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
    • The development tools are FREE!If you use a higher SKU, it just works!
    • demo
    • Blog http://blogs.msdn.com/dorischenPAGE
    • demo
    • 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 NoThere are ways to communicate across contexts, ways to give websites access to some web standardsfeatures 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-130http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
    • PAGE 33 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
    • Blog http://blogs.msdn.com/dorischenPAGE
    • "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; }};
    • demo
    • // Application manifest capabilities required to access cameraand 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 photovar 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 aphoto"; } });
    • id="message" id="videoplayback" type="text/javascript">// Step 1: Invoke the camera capture UI for record a videovar dialog = new Windows.Media.Capture.CameraCaptureUI();dialog.videoSettings.format =Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).done(function (file) { if (file) { var videoBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true}); document.getElementById("capturedVideo").src = videoBlobUrl; }});
    • demo
    • 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 notificationsvar profile = net.NetworkInformation.getInternetConnectionProfile();if (profile.getNetworkConnectivityLevel() === net.NetworkConnectivityLevel.internetAccess){push.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync().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 developmentprofessionals 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 Blog http://blogs.msdn.com/dorischen
    • YOUR IDEA. Week 1 App designYOUR APP . Week 2 Coding your app30 DAYS. Week 3 Making your app shine Week 4 Get publishedYou 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 demosPAGE • http://www.beautyoftheweb.com/