wired2win webinar: windows8 mobile app development

© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential

WIRED2WIN WEBINAR

Developing Windows 8 Mobile Apps

© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential

Vineet AroraCTO | WinWire TechnologiesMS v-TSP & Azure MCP

Session Speaker

@WinWireCTO

linkedin.com/in/VineetArora

Developing Windows 8 Mobile Apps


What am I going to talk about

Introduction to the Windows 8 Platform

Developing Windows 8 Apps

Designing Windows 8 apps

You’ll leave understanding:The Windows 8 App platform to develop rich mobile applications and get started…


Windows 8 – Windows Reimagined

New Metro style UI where touch is a first-class citizen with full mouse-

keyboard support

New development models built on WinRT, including native support for

HTML/CSS/JS, C#/XAML, C++/DirectX

Designed from the chipset up for multiple form-factors : tablets, laptops,

desktops and all-in-ones

Windows Store on every device with a full commerce platform and flexibility


- Brand new look and feel- Run on a variety of devices, - Sold on the Windows Store.

Windows 8 Store App

5

Windows Store app development is supported only on Windows 8Can not be developed Windows Store apps on Windows 7 or Windows Server 2012.

Introducing a new type of application: Windows Store app


Windows 8 Platform – an architecture overview

Metro style Apps

HTMLJava

Script

CC++

C#VB

Desktop Apps

Win32 .NETInternet Explorer

Communication & Data

Application Model

Devices & Printing

WinRT APIs

Graphics & Media

Syst

em S

ervi

ces

Windows Core OS ServicesCore

View

Mod

el

Cont

rolle

r

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSDirectX


Metro Style App APIs architecture

FundamentalsApplication

ServicesThreading/

TimersMemory

Management Authentication Cryptography Globalization

DevicesGeo-

location Portable Sensors NFC

User Interface

SVG Tiles Input Accessibility Printing

HTML5/CSS XAML DirectX Controls Data Binding

Communications & Data

Memory Mgmt XML Networking SMS

Notification Streams

Contracts Local & Cloud Storage Web

MediaPlayback Capture PlayTo Visual

Effects


Paid downloads, trials, and in-apps. Retain 70% of the first $25k,

80% of the rest

Robust analytics for free, including demographics, reviews,

referrals, and usage & performance statistics

Use own commerce engine & retain 100% or use the Windows Store’s full

commerce platform

The Windows Store - Features

Advertise with Microsoft Advertising or your preferred ad vendor.


A Windows Store app is a new type of application that runs on Windows 8 devices leveraging all the

capabilities and features available on the device.

9

At this point, you might be asking, "OK, so what exactly is Windows Store apps and how

do they differ from desktop apps?“


One window that supports multiple

views

Work great with touch and pen

input

Can talk to each other

Have new controls and UI surfaces

Use tiles instead of icons

Can be written in the developers

language of choice

Be sold in the Windows Store

Windows 8 Applications Characteristics

10


• Installed apps show up as a tiles on the Start screen. • Touching or clicking the tile starts the app.

Apps use tiles instead of icons

11


A single, chromeless window that fills the entire screen by default, no

distractions

12

One Window - Multiple Views

Can support different layouts and views to create a fluid and

harmonious experience across a variety of form factors and

display sizes


Work smoothly with a variety of input sources, including touch, pen, mouse, and keyboard input.

You can use a single set of events that work for all these input sources.

Apps get a set of default styles that ensure UI elements work well for touch scenarios.

Input for Windows apps

13


New controls that make it easier to create a great user experienceThe App Bar: To present navigation, commands, and tools.

Interaction and UI

14

App contracts are a way for users to seamlessly search across and share content between different apps

Apps Can Talk to Each-other

New Controls and UI Surfaces


Use the ‘Charms’

15

The charms are a specific and consistent set of buttons in every app: search, share,

connect, settings, and start - core scenarios that every user wants to do in

almost every appSearch for content located in all apps and they can search an app's content from another app.

Share content from an app with people /services.

Go directly to the Start screen.

Connect to devices & send content, stream media, and print.

Use settings to configure app to preferences.


• The Windows Store makes apps available to millions of customers around the world

• Apps uploaded with a price in a local currency is made available in the worldwide marketplace in 100+ languages

The Windows Store makes it easy to distribute, update, and get paid for apps

You sell your app in the Windows Store

16


Developing Windows 8 Apps

17


• You can develop a Windows Store app using HTML5, Cascading Style Sheets, Level 3 (CSS3), and JavaScript.

If you know web development technologies:

• You can develop a Windows Store app using XAML, with code-behind in C++, C#, or Visual Basic.

If you have developed .NET,

Windows Presentation Foundation, or

Microsoft Silverlight applications:

• You can develop a DirectX Windows Store app using native C++ and HLSL to take full advantage of graphics hardware.

If you know DirectX:

Develop Windows apps in a variety of languages

18


Visual Studio 2012 Express for Windows 8

Windows 8 Software Development Kit

Blend for Visual Studio to create and

edit images

The Windows App Certification Kit

Windows 8 App Development Tools

19

Programming Language Choices

HTML5, Cascading Style Sheets, Level 3 (CSS3),

and JavaScript

XAML, with code-behind in C++, C#, or

Visual Basic

DirectX Windows Store app using native C++ and HLSL to take full

advantage of graphics hardware


Create a UI• Define layouts and navigation, add controls and

content

Define application resources• File resources (images, XML) and embedded resources

(ResW and ResJSON)

Respond to user interaction• Handle gestures and keyboard, mouse, pen and stylus

interactions

Work with data and files• Data binding, accessing, sharing and exchanging data

Connect to peers, web and network services• Windows Azure Mobile Services

Manage user info• Credential roaming, single sign-on, managing user

contacts

Launch and resume app• Manage app lifecycle (activate, suspend, resume)

Developing Windows Store apps

20

Add multimedia• Capture multimedia, play audio and video, process

image files

Integrate devices, printers and sensors• Support devices like cameras, sensors and removable

storage in your app

Create Windows Runtime Components• Create components (DLLs) in C++/C#/VB and call

them using JavaScript

Globalize your app• Adapt the app for multiple languages, cultures and

regions

Make your app accessible• For people having impairments and disabilities

Debug and test the app• Visual Studio Windows Store app simulator, code

analysis, performance analysis

Package the app• Use Visual Studio to package the app for distribution

through Windows Store


Designing Windows 8 apps

21


Do more with less

Fast and Fluid

Pride in craftsmanship

Authentically digital

Win as one

Windows 8 App Design Style Principles

22


• Minimize distraction• Remove lines, boxes, and unnecessary graphical effects like blurs and

gradients. • Use open space to frame content.

Clean & open layout, only relevant elements on screen

• Consistent size, weight, and color in text to convey importance of information

• Small variations , displaying content fit in overall hierarchy.

Clear information hierarchy

• Commands in the app bar to be brought up on demand through a swipe from top or bottom edge, and dismissed when complete.

• Invoke Search, Share, Devices, or Settings charms on demand with a swipe from the right edge

Leverage app bar, charms and edges for user actions

Content over Chrome

23


Colors that represent your businessLess graphics (Content over chrome)Images that reflect your brandLayout relevant to your brandCompany logoRight typography

Branding your Windows Store apps

24


Incorporate your brand into Windows Store apps

25

Colors Grid

Layout Typography



26

Color Images Layout



27

Colors

Grid

Logo

Graphics


• Press and hold to learn• Tap for primary action• Slide to pan• Swipe to select command,

& move• Pinch and stretch to zoom• Turn to rotate• Swipe from edge for app

commands• Swipe from edge for system

commands

Touch Interaction Design

28

More design guidancehttp://msdn.microsoft.com/en-us/library/windows/apps/hh770552.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh770552.aspx





Use fingers for what they're good at

Touch Interaction – Best Practices

29

• Small targets require precision. • Use large targets that support

direct manipulation and provide rich touch interaction data.

• Swiping down on a large item is quick and easy because the entire item is a target for selection.


Designing for touch requires designing for how the device will be held (grip).

The current task and how it’s presented usually determines which grip is used.

Immediate environment and physical comfort also affect how long a grip is used and how often it’s changed.

Optimize your app for different kinds of grips. But if an interaction naturally lends itself to a specific grip, optimize for that.

Windows 8 touch posture

30

Interaction areas: Slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements

Reading areas: Content in the top half of the screen is easier to see than content in the bottom half, which is often blocked by the hands or ignored.


• Semantic Zoom and panning make navigation fast and fluid.

• use large canvases that support panning and Semantic Zoom.


31

Browse content with touch

Provide feedbackProvide immediate visual feedback whenever the screen is touched. Interactive elements should react by changing color, changing size, or by moving. Items that are not interactive should show system touch visuals only when the screen is touched.


• Elements that can be moved or dragged by a user should follow the user's finger when moving.

• Elements that do not move should return to their default state when the user slides or lifts their finger off the element.


32

Content follows finger

Keep interactions reversible

• Touch interactions should be reversible. • Provide visual feedback to indicate what

will happen when the user lifts their finger.

• This will make the app safe to explore using touch.


Touch interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldn't make a difference.


33

Multiple Fingers Recognition

Untimed Interactions• Interactions that require compound

gestures such as double tap or press and hold need to be performed within a certain amount of time.

• Avoid timed interactions like these because they are often triggered accidentally and are difficult to time correctly.


Scaling to Multiple Form Factors

34

Supported on a wide range of screen sizes, resolutions; range <10" tablets to >27"

3 Ways to use Max On-Screen Real Estate:• Fluid Layout support built into platform controls• Automatic scaling based on device screen size and

resolution• Test app on different form factors with the Visual

Studio simulator


OrientationWindows 8 app adapts its layout for orientation and screen sizes

Design for various layouts

35


For questions and inquiries: [email protected]

THANK YOU

wired2win webinar: windows8 mobile app development

Technology