HTML5 & Windows 8friends with benefits

Frédéric HarperTechnical Evangelist @ Microsoft Canada

@fharper | outofcomfortzone.net

2013-03-10

WINDOWS 8

Windows reimaginedNew fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Great experience across all hardwareTablets to

laptops to all-in-ones

Highest power to the most efficient chipset

Touch, mouse, keyboard

Content Before Chrome

Content comes first. Immerse users in the things they love

Leave only the most relevant elements on screen to minimize distractions

If you know web technologies, you are ready to build amazing apps for

the Windows Store

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Windows 8 Store Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScrip

tCSS

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

od

el

Contr

olle

rC

ore Windows Core OS Services

Communication

& Data

Application Model

Devices & Printing

Graphics & Media

Syst

em

Serv

ices

Core

THE OPPORTUNITY

Opportunity

500M

Windows

234M

Android phones

112M

iPhone

40M

iPad

13M

Android tablets

247M

Android

152M

iOS

30M

Mac

We are reimagining a partnership

Pricing You control the pricing of your app

Prices from $1.49 to $999.99

Tiered model

Revenue Sharing

Starts at 70%for new apps

Jumps to 80%once your app makes $25,000

Flexibility of options

Existing relationship

Subscriptions

Consumable purchases

Use Your Existing Commerce

Use our ad system

Bring your own

Ad Supported

Time limited trials

Feature differentiated trials

One time Purchase

Persistent purchases

Expiring purchases

Purchases over time

Trials Matter

70x

downloads

10%

conversion

10x

revenue

Windows Phone Developer blog, March 2011

Time-based trials

/* No code*/

Trial conversion // get current productvar currentProduct = Windows.ApplicationModel.Store.CurrentProduct;

// get the license informationvar licenseInformation = currentProduct.licenseInformation;

// check to see if the user has an active non-trial licenseif (licenseInformation.isTrial) { // user has trial version of the application // prompt them to purchase before so we can enable full functionality

currentProduct.requestProductPurchaseAsync().then( function () { // Purchase succeeded

EnableFullFunctionality(); });

}

In-App Purhase// can’t do in-app purchase in trial mode, must convert first if (!appLicensingInformation.isTrial) {

//load the listings with all the products currentApp.loadListingInformationAsync().then( function (listing) {

//lookup a specific product var product1 = listing.productListings.lookup("product1");

if (!product1.isActive) { // purchase

currentApp.requestProductPurchaseAsync("product1").then( enableProduct1 );

} });

Advertisement Choices

Microsoft AdvertisementYour own

Add advertising to Windows 8 Apps

3

Set Ad Unit/App IDs in your AppSubmit Ad-enabled App to StoreTrack your success at PubCenter

1

Download Ad SDKAdd few lines of code to add AdsSupport for Metro HTML/XAML

2

Sign in to PubCenterRegister your app at PubCenterGenerate App ID and Ad Unit IDs

Activate Live AdsDownload Ad SDK Publish App to Store

www.windowsadvertising.com

TOOLS

Windows 8 Development tools

Code Editor

WYSIGYG designer

Interactive mode

Animation

Smarter Properties Window

Simulator

Platform window

Expression Blend Code editor w/ Intellisense

UI Designer

Debuggers

DOM Explorer

Javascript Console

Simulator

Platform window

Visual Studio

The development tools are FREE!

If you use a higher SKU, it just works!

Visual Studio 2012 & Blend for Visual Studio 2012

demo

WEB STANDARDS

IE10CSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid

CSS Hyphenation

CSS Image Values (Gradients)

CSS Media Queries

CSS multi-column Layout

CSS Namespaces

CSS OM Views

CSS Positioned Floats (Exclusions)

CSS Selectors

CSS Transitions

CSS Values and Units

Data URI

DOM Element Traversal

DOM HTML

DOM Level 3 Core

DOM Level 3 Events

DOM Style

DOM Traversal and Range

DOMParser and XMLSerializer

ECMAScript 5

File Reader API

File Saving

FormData

HTML5 Application Cache

HTML5 async

HTML5 BlobBuilder

HTML5 Canvas

HTML5 Drag and drop

HTML5 Forms and Validation

HTML5 Geolocation

HTML5 History API

HTML5 Parser

HTML5 Sandbox

HTML5 Selection

HTML5 semantic elements

HTML5 track

HTML5 video and audio

JavaScript Typed Array

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

RequestAnimationFrame

Navigation Timing

Selectors API Level 2

SVG Filter Effects

SVG, standalone and in HTML

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

XMLHttpRequest CORS

Popular CSS3 features in Windows 8

2D & 3D transforms

Transforms Animations

Transitions

MotionGrid

Flexbox

Layout

Gradients

Filter Effects

Text-shadow

GraphicsMulti-column, hyphenation

Pagination

Position float

Content flow

Windows hardware acceleration makes these beautiful and fast

Popular HTML5

features in

Windows 8

Web Sockets

Web Workers

IndexedDB

Ecmascript 5

File API & Blobs

Geolocation

Audio tag

Video tag

Touch-first

Pointer events

Zoom regions

Snap Points

Forms

Validation

Input types

Spell checking

Context in HTML/JS Windows apps

Feature Local context Web context

Windows Run-time Yes No

Windows Library for Javascript

Yes No

External script references

No Yes

Cross-domain XHR requests

Yes No

Automatic filtering for script injection on DOM

Yes No

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.

Porting from HTML5

demo

WINJS

Windows Library for JavaScript (WinJS)library for building apps using JavaScript

Web technologies you’re already familiar with

Utilities and patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Windows 8 design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Make your apps look and feel great

WinJS

Helpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

WinJS controls SettingsFlyout

Flyout

Semantic Zoom

Flipview

SemanticZoomListview

Menu

Rating

Slide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)

DatePicker

Built-in controls implement Microsoft Design Style UI principles

and personality

Designed for touch, mouse, and keyboard

Controls <!– Step1: declare control --> <div id=“list” data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>

/* Step 2: Call WinJS.UI.processAll() */ WinJS.UI.processAll();

/* Step 3: Use the control */ document.getElementById(‘list’).winControl.addEventListener(‘selectionchanged’, onSelChanged );

Prefer your own library? Go ahead! Adhere to the Windows UI and personality

Understand our web context & sandboxing model

Mix & match works fine

FEATURES & THE WINDOWS 8 STORE

SNAP VIEW

SnapSnapping is a built-in Windows 8 scenarioBuilding a great snapped view keeps your app on screenDesign a purposeful snapped statePan vertically in snapped for ergonomics and to avoid conflict with the edge and snap gutterMaintain state and continuity across snapping and unsnappingIt is trivially easy to snap and unsnap. Don’t blow away the user’s work when this happens

Designing for snapLayout tailored 320px width

LayoutsScroll vertically instead of horizontallyUse a single columnKeep wire frame still intact

CSS media queries are your friend

HTML5: CSS media queriesThe view state media queries allow you easily to target portrait and snap views

@media screen and (-ms-view-state: snapped){  /* Re-arrange and hide/show content */}@media screen and (-ms-view-state: device-portrait)@media screen and (-ms-view-state: fill)@media screen and (-ms-view-state: full-screen) Full screen

Snap

Fill

Portrait

Snap view

demo

SETTING CONTRACTS

Settings contract provides quick,

consistent, in-context access to settings in your app

Settings

demo

CONCLUSION

You can build amazing apps with the Windows 8 platform, and HTML5

dev.windows.com

Free

Open Source

HTML5

Windows 8

template

for Wordpress

MetroPress

Made by

IdeaNotion

http://metropress.codeplex.com

Self-hosted &

Wordpress.com

Easy to use & customize

Windows 8 secret sauce

included

Ready to create the next app phenomenon?developermovement.ca

Rewards examples – more on developermovement.ca

Points structure

Questions

Frédéric Harper

fredh@microsoft.com@fharper

http://webnotwar.cahttp://outofcomfortzone.net