Wired2Win Webinar: Windows8 Mobile App Development

WIRED2WIN WEBINAR

Developing Windows 8 Mobile Apps

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

Developing Windows 8 Mobile Apps

@WinWireCTO
linkedin.com/in/VineetArora


What am I going to talk about


Windows 8 – Windows Reimagined
New Metro style UI where touch is a Designed from the chipset up for
first-class citizen with full mouse- multiple form-factors : tablets, laptops,
keyboard support desktops and all-in-ones

Windows Store on every device with a New development models built on
WinRT, including native support for
full commerce platform and flexibility HTML/CSS/JS, C#/XAML, C++/DirectX


Windows 8 Store App

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

Windows Store app development is
supported only on Windows 8
Can not be developed Windows Store
apps on Windows 7 or Windows
Server 2012.
WinWire Technologies, Inc. Confidential 5
© 2010 WinWire Technologies

Windows 8 Platform – an architecture overview

Metro style Apps Desktop Apps
View

DirectX XAML HTML / CSS
Controller
Model

C C# JavaScript
HTML C C#
C++ VB (Chakra) Java
Script
C++ VB
WinRT APIs
System Services

Communication Graphics & Devices &
& Data Media Printing

Application Model Internet
Explorer
Win32 .NET
Core

Windows Core OS Services


Metro Style App APIs architecture


The Windows Store - Features
Paid downloads, trials, and in-apps. Use own commerce engine & retain
Retain 70% of the first $25k, 100% or use the Windows Store’s full
80% of the rest commerce platform

Advertise with Microsoft Advertising Robust analytics for free,
or your preferred ad vendor. including demographics, reviews,
referrals, and usage & performance
statistics


At this point, you might be
asking, "OK, so what exactly is
Windows Store apps and how
do they differ from desktop
apps?“

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.


Windows 8 Applications Characteristics

One window that Work great with
Can talk to each
supports multiple touch and pen
other
views input

Can be written in
Have new controls Use tiles instead the developers
and UI surfaces of icons language of
choice

Be sold in the
Windows Store


Apps use tiles instead of icons

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


One Window - Multiple Views

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

Can support different layouts
and views to create a fluid and
harmonious experience across a
variety of form factors and
display sizes


Input for Windows apps

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.


Interaction and UI

Apps Can Talk to Each-other
App contracts are a way for users to
seamlessly search across and share
content between different apps

New Controls and UI Surfaces
New controls that make it easier to
create a great user experience
The App Bar: To present
navigation, commands, and tools.


Use the ‘Charms’
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 app
Search 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.

You sell your app in the Windows Store

• 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


Developing Windows 8 Apps

17WinWireTechnologies, Inc. Confidential
WinWire
Technologies, Inc. Confidential

Develop Windows apps in a variety of languages

If you know web • You can develop a Windows Store app
development using HTML5, Cascading Style
technologies: Sheets, Level 3 (CSS3), and JavaScript.

If you have developed
.NET, Windows • You can develop a Windows Store app
Presentation using XAML, with code-behind in C++, C#,
Foundation, or Microsoft or Visual Basic.
Silverlight applications:

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

18

Windows 8 App Development Tools

Visual Studio 2012 Express for Windows 8
Blend for Visual Studio
Windows 8 Software The Windows App
to create and edit
Development Kit Certification Kit
images

Programming Language Choices
DirectX Windows Store
HTML5, Cascading Style XAML, with code- app using native C++
Sheets, Level 3 behind in C++, C#, or and HLSL to take full
(CSS3), and JavaScript Visual Basic advantage of graphics
hardware


Developing Windows Store apps
Create a UI Add multimedia
• Define layouts and navigation, add controls and • Capture multimedia, play audio and video, process
content image files
Define application resources Integrate devices, printers and sensors
• File resources (images, XML) and embedded resources • Support devices like cameras, sensors and removable
(ResW and ResJSON) storage in your app
Respond to user interaction Create Windows Runtime Components
• Handle gestures and keyboard, mouse, pen and stylus • Create components (DLLs) in C++/C#/VB and call
interactions them using JavaScript
Work with data and files Globalize your app
• Data binding, accessing, sharing and exchanging data • Adapt the app for multiple languages, cultures and
regions
Connect to peers, web and network services
Make your app accessible
• Windows Azure Mobile Services
• For people having impairments and disabilities
Manage user info
Debug and test the app
• Credential roaming, single sign-on, managing user
contacts • Visual Studio Windows Store app simulator, code
analysis, performance analysis
Launch and resume app
Package the app
• Manage app lifecycle (activate, suspend, resume)
• Use Visual Studio to package the app for distribution
20
through Windows Store

Designing Windows 8 apps

21WinWireTechnologies, Inc. Confidential
WinWire
Technologies, Inc. Confidential

Windows 8 App Design Style Principles

Do more with less

Fast and Fluid

Pride in craftsmanship

Authentically digital

Win as one


Content over Chrome

Clean & open layout, only relevant elements on screen
• Minimize distraction
• Remove lines, boxes, and unnecessary graphical effects like blurs and
gradients.
• Use open space to frame content.

Clear information hierarchy
• Consistent size, weight, and color in text to convey importance of
information
• Small variations , displaying content fit in overall hierarchy.

Leverage app bar, charms and edges for user actions
• 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


Branding your Windows Store apps

Colors that represent your
business
Less graphics (Content over
chrome)
Images that reflect your
brand
Layout relevant to your
brand
Company logo
Right typography


Incorporate your brand into Windows Store apps

Colors Grid

Layout Typography



Color Images Layout



Graphics Grid

Logo Colors


Touch Interaction Design

• 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 More design guidance
• Swipe from edge for app http://msdn.microsoft.com/en-
us/library/windows/apps/hh770
commands
552.aspx
• Swipe from edge for
system commands

Touch Interaction – Best Practices

Use fingers for what they're good at

• 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.


Windows 8 touch posture
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
Interactionitself to a specific grip, optimize for that. areas:
lends areas: Reading
Slates are most often held along the side, Content in the top half of the screen is easier
the bottom corners and sides are ideal to see than content in the bottom half, which
locations for interactive elements is often blocked by the hands or ignored.


Browse content with touch
• Semantic Zoom and panning make
navigation fast and fluid.
• use large canvases that support panning
and Semantic Zoom.

Provide feedback
Provide 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.


Content follows finger
• 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.

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.



Multiple Fingers Recognition
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.

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

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

Design for various layouts

Orientation
Windows 8 app adapts its layout for orientation and
screen sizes


For questions and inquiries: marketing@winwire.com


Wired2Win Webinar: Windows8 Mobile App Development

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (15)

Semelhante a Wired2Win Webinar: Windows8 Mobile App Development

Semelhante a Wired2Win Webinar: Windows8 Mobile App Development (20)

Mais de WinWire Technologies Inc

Mais de WinWire Technologies Inc (20)

Último

Último (20)

Wired2Win Webinar: Windows8 Mobile App Development

Notas do Editor