25
Building Windows Store Apps with HTML & JavaScript Dave Isbitski Technology Evangelist, Windows 8 twitter.com/TheDaveDev blogs.msdn.com/davedev [email protected]

Windows Store Apps with HTML and JavaScript

Embed Size (px)

DESCRIPTION

DaveDev Building Windows Store Apps with HTML and JavaScript from #NewEraOfWork events

Citation preview

Page 1: Windows Store Apps with HTML and JavaScript

Building Windows Store Apps with HTML & JavaScript

Dave IsbitskiTechnology Evangelist, Windows 8twitter.com/TheDaveDevblogs.msdn.com/[email protected]

Page 2: Windows Store Apps with HTML and JavaScript

Now is the time to write your game. Enjoy the first to market advantage!

twitter.com/thedavedev | [email protected]

http://bit.ly/genapp8

Page 3: Windows Store Apps with HTML and JavaScript

AgendaHTML5, CSS3 and IE 10 Windows Library for Javascript (WinJS) Tools for building Windows Store Apps with HTML

You’ll leave understanding:New features in HTML5 and CSS3 now available for building websites and Windows Store AppsHow WinJS complements web-standards to add Windows personality to your Windows Store Apps

Page 4: Windows Store Apps with HTML and JavaScript

You can build amazing sites and Windows Store Apps with the Windows 8 web platform

Page 5: Windows Store Apps with HTML and JavaScript

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Windows Store Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

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

Page 6: Windows Store Apps with HTML and JavaScript

HTML 5

Page 7: Windows Store Apps with HTML and JavaScript

IE9 hardware-accelerated web platform

CSS 2D Transforms

CSS Backgrounds & Borders

CSS Color

CSS Fonts

CSS Media Queries

CSS Namespaces

CSS OM Views

CSS Selectors

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

HTML5 Canvas

HTML5 Geolocation

HTML5 Selection

HTML5 semantic elements

HTML5 video and audio

ICC Color Profiles

Selectors API Level 2

SVG, standalone and in HTML

XHTML/XML

Page 8: Windows Store Apps with HTML and JavaScript

Windows 8 hardware-accelerated web platformCSS 2D Transforms

CSS 3D Transforms

CSS Animations

CSS Backgrounds & Borders

CSS Color

CSS Flexbox

CSS Fonts

CSS Grid Alignment

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 APIs

FormData

HTML5 Application Cache

HTML5 async

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 video and audio

ICC Color Profiles

IndexedDB

Page Visibility

Pointer (Mouse, Pen, and Touch) Events

Selectors API Level 2

Filter Effects

SVG, standalone and in HTML

Timing callbacks

Web Messaging

Web Sockets

Web Workers

XHTML/XML

XMLHttpRequest (Level 2)

Page 9: Windows Store Apps with HTML and JavaScript

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

Page 10: Windows Store Apps with HTML and JavaScript

IE TestDrive - CSS3 Transforms, Win8GameKit CSS Layout

demo

Page 11: Windows Store Apps with HTML and JavaScript

Popular HTML5 features in Windows 8Web 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

Page 12: Windows Store Apps with HTML and JavaScript

HTML5 demos: Win8GameKit – Canvas, GameLoop, HTML5 Audio, Touch

demo

Page 13: Windows Store Apps with HTML and JavaScript

Tools

Page 14: Windows Store Apps with HTML and JavaScript

Visual Studio 2012 & Blend for Visual Studio 2012

demo

Page 15: Windows Store Apps with HTML and JavaScript

WinJS

Page 16: Windows Store Apps with HTML and JavaScript

Windows Library for JavaScript (WinJS)library for building Windows Store Apps using JavaScript

Web technologies you’re already familiar with

Modern patterns for responsive, reliable apps

Use interactive design tools

Build your apps fast and with high quality

Matches the Microsoft 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

Page 17: Windows Store Apps with HTML and JavaScript

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

Page 18: Windows Store Apps with HTML and JavaScript

Win8GameKit – WinJS App Object, AppBar, Flyout

demo

Page 19: Windows Store Apps with HTML and JavaScript

Promises Object that is a promise for a later value Hook up to completion with then() method

then(completion, error, progress)

then() returns another promise Implementation in base.js: WinJS.Promise

Common.js promises/A spec http://wiki.commonjs.org/wiki/Promises/A

Page 20: Windows Store Apps with HTML and JavaScript

Promise// Object that is a promise for a later value

WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});

Page 21: Windows Store Apps with HTML and JavaScript

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

Understand our webcontext & sandboxing model

Mix & match works fine

Page 22: Windows Store Apps with HTML and JavaScript

If you know web technologies, you are ready to build amazing Windows Store Apps.

Page 23: Windows Store Apps with HTML and JavaScript

Now is the time to write your game. Enjoy the first to market advantage!

twitter.com/thedavedev | [email protected]

http://bit.ly/genapp8

Page 24: Windows Store Apps with HTML and JavaScript

Building Windows Store Apps with HTML & JavaScript

Dave IsbitskiTechnology Evangelist, Windows 8twitter.com/TheDaveDevblogs.msdn.com/[email protected]

Page 25: Windows Store Apps with HTML and JavaScript