Platform for buildingWindows Store AppsPablo GarcíaPrincipal Platform SpecialistMicrosoft

Windows reimagined

New fast and fluid Start screen

Everything great about Windows 7 we made even better

Touch, mouse, keyboard

Windows 8 Platform

Windows Store Apps

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

Syst

em

Serv

ices

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSVie

wM

od

el

Contr

olle

r

Windows Core OS ServicesCore

Windows 8 HTML5 Application

demo

HTML5 & Windows 8

IE10 hardware-accelerated platformCSS 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

Context in HTML/JS Windows appsFeature 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.

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

WinJS controls SettingsFlyout

Flyout

Appbar

Semantic Zoom

Flipview

SemanticZoomListview

Menu

Rating

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

DatePicker

Windows Run-time (WinRT)

Windows Runtime APIs

FundamentalsApplication

Services Threading/Timers Memory Management Authentication Cryptography Globalization

Devices

Geolocation Portable Sensors NFC

User Interface

SVG Tiles Input Accessibility Printing

HTML5/CSS XAML DirectX Controls Data Binding

Communications & Data

Memory Management XML Networking SMS

Notifications Streams

Contracts Local & Cloud Storage Web

Media

Playback Capture PlayTo Visual Effects

WinRT WinRT APIs are asychronous

WinRT APIs provide rich access to device, OS and services

WinRT APIs feel natural in C#, Javascript and C++

Language projections

WindowsRuntime

Object(or Component)

Writtenin C++, C#, VB

Windows Metadata

C++ App

Pro

jecti

on

CLR

C#/VB App

Pro

jecti

on

HTML AppCh

akra

Pro

jecti

on

App Execution Environment

Windows Store app acquisition

Windows Store

backend

Package ManagerWindows

Store install

Execution Engine

Extension

Handler

stage Single instance store

register Registration Information

Building blocks of an app package App Manifest contains all information needed to deploythe app

Blockmap contains hashes of all files within the app package

Signature validates the integrity of the app package

AppXManifest.xml

BlockMap

Signature

Zip Central Directory

Files / Assets

.appx package

App manifest and capabilities Explicitly declares the app integration endpoints File capabilities (music/pictures/videos/documents libraries,

removable storage) Devices (webcam, microphone, location, sms, proximity);

extensible to new device classes Network and identity (internet, private network, credentials) File type associations App contracts (search, share, etc.)

Contained in appxmanifest.xml; Visual Studio provides editor

Process Isolation

OS

User data Devices Communications Handlers Tiles Cryptography … …

Bro

ker

s

Process1Local context

Web contextAppData

Local Temp Roaming

Contracts

Process2Local context

Web contextAppData

Local Temp Roaming

Dire

ct A

PIs

Process state transitions

RunningApp

Suspended

App

suspending Terminated

App

Low Resources

Code gets to runNo code

runs App not running

resuming

App gets 5s to handle suspend

App is not notified before

termination

Apps are notified when they have been resumed

User Launches App

Splash screen

App data vs. User data

User data

Documents Photos Music Videos

App data

Settings FilesSession State

Local Cache

Roaming

App uses data normally

Data syncs for the user’s Microsoft account

LocalStorage

Recap: App execution

Connected

Seamless data access Data Roaming

Powerful

PerformantNative platform

Confident

Capabilities driven High isolation

Push Notifications with Windows Azure Mobile Services

What is Windows Azure Mobile Services?

Data

Notifications

Auth

Server Logic

Scale

Logging

Diagnostics

Elementos de diseño

Hub

Contoso Travel Featured destinations Last minute deals

Spoke

sD

eta

ils

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View Cabins

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy

Suites

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather

7 daysChicago (3/11 – 3/19)

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips

Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide

Hub

Contoso Travel Featured destinations Last minute deals My Trips

Spoke

sD

eta

ils

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View Cabins

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy

Suites

Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather

7 daysChicago (3/11 – 3/19)

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips

Featured Destinations Top Destinations for 2012

Barcelona, Spain

Design for touch first

Press and hold to learn

Tap for primary action Slide to pan Swipe to select

Turn to rotateSwipe from edge for app commandsPinch to zoom

Swipe from edge for system commands

Follow the Windows 8 touch language and use only the prescribed gesture set

Design for Touch FirstDesign with hands and fingers in mindHit targets should be sized and spaced for touch, your finger is not a pointerDesign with comfort, ergonomics and occlusion in mind

Design for Multiple Views

Widescreen (1366x768+) Snap view (required)Minimum (1024x768)

Portrait

People multi-task. An application can be displayed any one of these layouts:

Windows 8 Contracts

http://msdn.microsoft.com/en-us/library/windows/apps/hh464906(v=VS.85).aspx

1+1=3. Leverage other apps to complete scenariosCharms provide a consistent invocation model that users can always confidently rely onStart with the VS Item Template (available for Search, Share, File Picker extension)

Share

http://msdn.microsoft.com/en-us/library/windows/apps/hh465251(v=VS.85).aspx

Share Source Share a link to online contentShare a copy of the actual content

Share Target Keep interactions simple Use inline controls for errors or progress

Lorem IpsumLorem Ipsum dolor sit amet

Search

http://msdn.microsoft.com/en-us/library/windows/apps/hh465233(v=VS.85).aspx

Leverage search so users can search your content from anywhere in WindowsSearch vs FindSearch (use the contract)

Scope is across your app’s content setResult is usually a list of items containing the search term. From the search results page, you can then navigate to the view the item

Find (use in-app UI)Scope is within the current view (ex: Ctrl+F in IE or Word)Result is usually already on the page you are viewing. You just need help locating it