Upload
kevin-derudder
View
689
Download
2
Embed Size (px)
DESCRIPTION
Citation preview
GoalUse your existing skills to build apps
Learn few typical features
IS IMPORTANT
the web community is big
because
IS IMPORTANT
There are a lot of reusable things on the internet
because
IS IMPORTANT
It is reusable across multiple platforms
because
IS IMPORTANT
it is reusable across multiple platforms
with a minimum effort
because
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 8 Store application
From HTML to Win 8 in 3 steps
1. Use your existing HTML, CSS and JavaScript skills
2. 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
WinJS
Library 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
jQuery, knockout, MooTools, Dojo, YUI
like
Dangerous scripts
Microsoft 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> element
with data-win-control to specify the control
and 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
Contracts
Every webdeveloper can choose where he wants to
put the search or share functionality
Every windows developer can choose where he wants 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
Tiles
Tap on tile to launch or switch an app
Static tiles
Static default tile specified in app manifest
Square and wide tile
Dynamic Tiles
Can have live updates
Based on templates
Templates
TileUpdater
Demo: Tiles
DEMO:Tiles
Resources
Images
If we don’t remember me
http://iwdrm.tumblr.com
Anonymous Ostrich
Klaus Delanghe