KEMBAR78
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3 | PDF
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
          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
As of March 2012, IDC
PAGE 7   twitter #wins8camp   http://bit.ly/wins8cheatsheet   Blog http://blogs.msdn.com/dorischen
Blog http://blogs.msdn.com/dorischen
demo
Blog http://blogs.msdn.com/dorischen
PAGE
PAGE 13   twitter #wins8camp   http://bit.ly/wins8cheatsheet   Blog http://blogs.msdn.com/dorischen
PAGE 14   twitter #wins8camp   http://bit.ly/wins8cheatsheet   Blog http://blogs.msdn.com/dorischen
/* Re-arrange and hide/show content */

                                                               /* */   Full screen          Portrait

                                                      /* …*/
                                             /* …*/




                                                                                     Snap
                                                                             Fill


PAGE 17
PAGE 21   twitter #wins8camp   http://bit.ly/wins8cheatsheet   Blog http://blogs.msdn.com/dorischen
PAGE 22   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/dorischen
PAGE
Feature                   Local context             Web context
      Windows Run-time          Yes                       No
      Windows Library for       Yes                       No *
      Javascript

      External script           No                        Yes
      references
      Cross-domain XHR          Yes                       No
      requests

      Automatic filtering for   Yes                       No
      script injection on
      DOM


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://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx


      http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx




    http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
Blog http://blogs.msdn.com/dorischen
PAGE
PAGE 40   twitter #devcamp   lab setup: http://bit.ly/html5setup   Blog http://blogs.msdn.com/dorischen
demo
Blog http://blogs.msdn.com/dorischen
PAGE
"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
DatePicker      SettingsFlyout
Listview
                                            SemanticZoom




     Semantic Zoom

                              Flipview
   Menu                                                                              Flyout

                                                                                                       Rating


 Appbar



Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
Blog http://blogs.msdn.com/dorischen
PAGE
<div id="appbar" data-win-control="WinJS.UI.AppBar">
   <button data-win-control="WinJS.UI.AppBarCommand" data-win-
options="{id:'brag', label:'Brag', icon:'emoji2',
section:'selection', type:'flyout',
flyout:'bragFlyout'}"></button>
 </div>
 <div id="bragFlyout" data-win-control="WinJS.UI.Menu">
   <button data-win-control="WinJS.UI.MenuCommand" data-win-
options="{id:'photo', label:'Photo'}"></button>
   <button data-win-control="WinJS.UI.MenuCommand" data-win-
options="{id:'video', label:'Video' }"></button>
 </div>
 Use what you already know
   Best practices
 Adopt the right look and feel for your app
   Touch, UI Control, View State, Scroll, Zoom
 Follow the app model
   App Bar, Hardware



        Blog http://blogs.msdn.com/dorischen
PAGE
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
• 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/
http://bit.ly/CampInBox




 Windows 8 Cheat Sheet
 http://bit.ly/wins8cheatsheet



 http://bit.ly/Win8GenApp


 http:/dev.windows.com
 PAGE

Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

  • 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  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.
  • 4.
    As of March2012, IDC
  • 6.
    PAGE 7 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  • 7.
  • 8.
  • 10.
  • 11.
    PAGE 13 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  • 12.
    PAGE 14 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  • 14.
    /* Re-arrange andhide/show content */ /* */ Full screen Portrait /* …*/ /* …*/ Snap Fill PAGE 17
  • 16.
    PAGE 21 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  • 17.
    PAGE 22 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  • 19.
    The development toolsare FREE! If you use a higher SKU, it just works!
  • 20.
  • 22.
  • 23.
    Feature Local context Web context Windows Run-time Yes No Windows Library for Yes No * Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOM 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.
  • 24.
    http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into- windows-8-application.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
  • 25.
  • 29.
    PAGE 40 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 31.
  • 32.
  • 35.
    "Code for touch,get mouse and pen for free!"
  • 38.
    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.
    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; } };
  • 40.
  • 42.
    DatePicker SettingsFlyout Listview SemanticZoom Semantic Zoom Flipview Menu Flyout Rating Appbar Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
  • 43.
  • 45.
    <div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button> </div> <div id="bragFlyout" data-win-control="WinJS.UI.Menu"> <button data-win-control="WinJS.UI.MenuCommand" data-win- options="{id:'photo', label:'Photo'}"></button> <button data-win-control="WinJS.UI.MenuCommand" data-win- options="{id:'video', label:'Video' }"></button> </div>
  • 46.
     Use whatyou already know  Best practices  Adopt the right look and feel for your app  Touch, UI Control, View State, Scroll, Zoom  Follow the app model  App Bar, Hardware Blog http://blogs.msdn.com/dorischen PAGE
  • 50.
    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
  • 51.
    • Responsive WebDesign 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/
  • 52.
    http://bit.ly/CampInBox  Windows 8Cheat Sheet http://bit.ly/wins8cheatsheet http://bit.ly/Win8GenApp  http:/dev.windows.com PAGE