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

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