Use html5 to build what you want, where you want it
Upcoming SlideShare
Loading in...5

Use html5 to build what you want, where you want it






Total Views
Views on SlideShare
Embed Views



2 Embeds 330 329 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

Use html5 to build what you want, where you want it Use html5 to build what you want, where you want it Presentation Transcript

  • Goal Use your existing skills to build apps Learn few typical features
  • IS IMPORTANT becausethe web community is big
  • IS IMPORTANT becauseThere are a lot of reusable things on the internet
  • IS IMPORTANT becauseIt is reusable across multiple platforms
  • IS IMPORTANT becauseit is reusable across multiple platformswith a minimum effort
  • How does HTML5 fit in the windows 8 platform
  • Windows 8 platform
  • Windows 8 platform
  • We will build this app
  • DEMO:Turn an existing HTML website into a Win 8Store application
  • From HTML to Win 8 in 3 steps1. Use your existing HTML, CSS and JavaScript skills2. Add typical Windows 8 features like:  Tiles  WinJS and WinJS controls  Portrait, landscape, snapped and filled  Contracts  ...3. Deploy your app to the store
  • Use your HTML and CSS skills
  • Popular HTML Features
  • Popular CSS feature
  • DEMO:(re)use your html and css skills
  • WinJS
  • WinJSLibrary for building Windows Store apps using JavaScript Matches the Windows Store design guidelines Offers controls for common user experiences Designed for touch as well as traditional input Scales across form factors
  • WinJS Contains
  • Or use your favorite library like jQuery, knockout, MooTools, Dojo, YUI
  • Dangerous scriptsMicrosoft doesn’t allow code injection if (isWin8) { MSApp.execUnsafeLocalFunction(function () { body.appendChild(container).appendChild(div); }); } else { body.appendChild(container).appendChild(div); }
  • WinJS Controls or Modern UI Controls
  • First, you have the standard HTML Controls<button> <input> <select> <progress> ...
  • Then, you have WinJS or Modern UI Controlsbased on a <div> or <span> elementwith data-win-control to specify the controland data-win-options to set properties
  • WinJS Controls
  • WinJS Styled Controls
  • More controls
  • Demo: Application bar
  • DEMO:Application bar
  • Different states and orientations
  • Different states == Different UI
  • Different states == CSS3 Media Queries
  • Media Queries to support differentlayouts @media screen and (-ms-view-state: fullscreen-portrait) {} @media screen and (-ms-view-state: fullscreen-landscape) {} @media screen and (-ms-view-state: filled) {} @media screen and (-ms-view-state: snapped) {}
  • Demo: Snapped application
  • DEMO:Support different orientations
  • Contracts
  • ContractsEvery webdeveloper can choose where he wants toput the search or share functionalityEvery windows developer can choose where hewants to put the option to change the settings
  • Contracts Contracts enable integrating the Windows 8 experience into your app
  • Contracts
  • Demo: Share Contract
  • DEMO:Contracts
  • Tiles
  • TilesTap on tile to launch or switch an appStatic tiles Static default tile specified in app manifest Square and wide tileDynamic Tiles Can have live updates Based on templates
  • Templates
  • TileUpdater
  • Demo: Tiles
  • DEMO:Tiles
  • ResourcesImages If we don’t remember me http://iwdrm.tumblr.comAnonymous Ostrich Klaus Delanghe