KEMBAR78
Every Web Developer is a Win8 developer | PDF
@kevinderudder working for
eGuidelines and a lecturer at the
Technical University of West Flanders.

Contact me on kevin@e-guidelines.be
Goal of this session


   Download and play with Windows 8 and VS11


   If you know web technologies, you are ready to build
    amazing Metro style apps


   Understand what you need to add upon your HTML5
    skills to build Win8 Metro apps
HTML5 Page
CSS3 Grid
CSS3 Media Queries
Tiles
Metro Application != Web Application


                              Dieter is quite
                              serious on this
Building Metro Style Applications




                   Windows Core OS Services
Popular HTML features in Windows 8
Popular CSS features in Windows 8

     Transforms                   Motion                     Layout

     2D & 3D transforms           Animations                 Grid
                                  Transitions                Flexbox




                 Graphics                       Motion

                 Gradients                      Multi-column,
                 Filter Effects                 hyphenation
                 Text-shadow                    Pagination
                                                Position float



  Windows hardware acceleration makes these beautiful and fast
Controls
WinJS
Library for building Metro Style apps using JavaScript



    Make your apps look and feel great
      Matches the Windows Metro design style
      Controls for common user experiences
      Designed for touch as well as traditional input



    Build your apps fast and with high quality
Windows Library for JavaScript (WinJS)
or use your favourite JavaScript library
So far, so good
Thank you ListView
Void
Different states == Different UI

              UI always in CSS
MEDIA QUERY


      Type                  Query or Expression
@media all and (-ms-view-state: fullscreen-portrait)
{
                  Feature                         Value

}
Run 2 applications next to each other
   Snapped app           Main app
@media screen and (-ms-view-state: snapped)
{



}
Search




 Users often search to find the content they care about, be
    it on the web, local machine, network, or in an app.
Search




   Apps have rich content, but users have to find and
         launch the app before searching in it.
Search




    Search is universally accessible, contextual to
    your app and always just a single swipe away.
Tiles are the “front door” to you app,
 Treat it as an extension of your app
Basic Tiles
   Tap on tile to launch or switch to an app

   Static default tile specified in manifest of the app

   Two sizes:




      Square (1x1)                    Wide (2x1)
Every Web Developer is a Win8 developer
Every Web Developer is a Win8 developer
Every Web Developer is a Win8 developer

Every Web Developer is a Win8 developer

  • 5.
    @kevinderudder working for eGuidelinesand a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
  • 6.
    Goal of thissession  Download and play with Windows 8 and VS11  If you know web technologies, you are ready to build amazing Metro style apps  Understand what you need to add upon your HTML5 skills to build Win8 Metro apps
  • 8.
  • 9.
  • 10.
  • 11.
  • 13.
    Metro Application !=Web Application Dieter is quite serious on this
  • 15.
    Building Metro StyleApplications Windows Core OS Services
  • 17.
  • 18.
    Popular CSS featuresin Windows 8 Transforms Motion Layout 2D & 3D transforms Animations Grid Transitions Flexbox Graphics Motion Gradients Multi-column, Filter Effects hyphenation Text-shadow Pagination Position float Windows hardware acceleration makes these beautiful and fast
  • 19.
  • 22.
    WinJS Library for buildingMetro Style apps using JavaScript  Make your apps look and feel great Matches the Windows Metro design style Controls for common user experiences Designed for touch as well as traditional input  Build your apps fast and with high quality
  • 23.
    Windows Library forJavaScript (WinJS)
  • 24.
    or use yourfavourite JavaScript library
  • 27.
  • 28.
  • 30.
  • 31.
    Different states ==Different UI UI always in CSS
  • 33.
    MEDIA QUERY Type Query or Expression @media all and (-ms-view-state: fullscreen-portrait) { Feature Value }
  • 36.
    Run 2 applicationsnext to each other Snapped app Main app
  • 37.
    @media screen and(-ms-view-state: snapped) { }
  • 40.
    Search Users oftensearch to find the content they care about, be it on the web, local machine, network, or in an app.
  • 41.
    Search Apps have rich content, but users have to find and launch the app before searching in it.
  • 44.
    Search Search is universally accessible, contextual to your app and always just a single swipe away.
  • 48.
    Tiles are the“front door” to you app, Treat it as an extension of your app
  • 49.
    Basic Tiles  Tap on tile to launch or switch to an app  Static default tile specified in manifest of the app  Two sizes: Square (1x1) Wide (2x1)