Upload
winwire-technologies-inc
View
671
Download
1
Embed Size (px)
Citation preview
© 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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…
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
- 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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?“
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential
Developing Windows 8 Apps
17
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential
Designing Windows 8 apps
21
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Do more with less
Fast and Fluid
Pride in craftsmanship
Authentically digital
Win as one
Windows 8 App Design Style Principles
22
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Incorporate your brand into Windows Store apps
25
Colors Grid
Layout Typography
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Incorporate your brand into Windows Store apps
26
Color Images Layout
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Incorporate your brand into Windows Store apps
27
Colors
Grid
Logo
Graphics
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• Semantic Zoom and panning make navigation fast and fluid.
• use large canvases that support panning and Semantic Zoom.
Touch Interaction – Best Practices
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
• 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.
Touch Interaction – Best Practices
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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.
Touch Interaction – Best Practices
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.
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
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
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
OrientationWindows 8 app adapts its layout for orientation and screen sizes
Design for various layouts
35
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
For questions and inquiries: [email protected]
THANK YOU