Tech days faridabad

Windows 8 and Metro-Apps
Windows 8 App using HTML5 and JavaScript

Ankur Mishra Christian Moser

© Zühlke 2011

Windows 8 App Using HTML5 and JavaScript | Ankur Mishra 2/9/2013 © Zühlke 2011

Windows 8?

Metro-Style Apps für Windows
8

2/9/2013

Christian Moser

Windows 8 App Using HTML5 and JavaScript | Ankur Mishra © Zühlke 2011

Desktop :

• Starts in a few seconds !
• New Task Manager !
• Improved Copy !
• Explorer Ribbon !
• "Factory Reset" and? Refresh function !
• Internet Explorer 10 !
• Automatic synchronization? Into the Cloud (Sky Drive) !


Metro UI

8

2/9/2013

Christian Moser

© Zühlke 2011

Metro Desktop

The new lock screen

The Metro Design Principles :

• Pride in craftsmanship
A good user experience comes only with a clean
craft in all disciplines
• Be fast and fluid
Apps are responsive, intuitive, touch-optimized and
smooth..
• Authentically Digital
Connected, dynamic, active, strong colors, moves
• Do more with less
Content instead of chrome, to be good at
something


Interaction with the Metro desktop

Charms
(The 5 major system functions,
Task switching Are always available)

Appear when the fingers
is wiped from the touch-edge.

App-Bars

Variations that would support every app :

Snapped and full screen Horizontal and Vertical screen sizes

Resolutions


Layout Grid :

A consistent
Layout Grid provides
consistent Appearance.

Visual Studio 12 provides
Ready-made templates for this.

Contracts

• Applications interact via "Contracts" with each other Without knowing
each other.
• Each application can offer contracts that make sense to use.
• Windows 8 supports three contracts:

Share (Push Content) Picker (Pull Content) Search (Find Content)


Live Tiles

• Icons are outdated, static, boring and offer little benefit.

• Live Tiles are alive, personally, appealing to date and informative

• Apps can content as secondary tiles with "deep link" to the desktop set
(weather stations, friends, important share prices, ...)


Cloud-Integration

• The user logs in once a Windows Live Users with Windows
• Each Metro Style app gets in the cloud storage for user settings and smaller
content.
• Therefore, settings can be easily synchronized between multiple computers.

Begins to read an ebook and need to get away ... ……... The book opens on the right side

What makes a good Metro App

1. Appears completely in the Metro-style design.
2. Feels fast and fluid
3. Supports scaling, snapping and alignment in a meaningful way.
4. Implement meaningful Contracts (Search, Share, Picker).
5. Provides valuable information on their live tile.
6. Always feel connected, current and alive.
7. Large power of the cloud for data synchronization.


Metro Style Apps :

8

2/9/2013

Christian Moser

© Zühlke 2011

Windows Runtime (WinRT)


Language Projection

• Metro-style apps can be written equivalent in C + +, C #, VB or JS

C#
var fp = new FileOpenPicker();
var result = await fp.PickSingeFileAsync();
C++
auto fp = Windows::Storage::Pickers::FileOpenPicker();
auto result = fp->PickSingeFileAsync();
JavaScript
var fp = new Windows.Storage.Pickers.FileOpenPicker;
fp.pickSingleFileAsync().then();


Windows Store App.

Let’s Try …!!


Windows 8 brings a number of new
controls :

• WebView (without problems AirSpace)
• ListView / GridView / FlipView / Jump View (with "semantic zoom")
• Media player with controls
• Toggleswitch
• Extended TextBox
• Progress ring


Comparison of Desktop and Metro :

Metro Apps Desktop Software
Main input medium Touch Mouse / Keyboard
UI-Style Metro Windows
Runtime WinRT (Win32) .NET/SL/Win32
Distribution Windows Store Download Webseite
Installation .appx Package MSI
System Access Only about WinRT Full access

Conclusion
• Business applications will continue to be primarily mouse and
keyboard-based and based on WPF / SL / HTML or C + +.


Navigation im Windows Store

1. Store Home :
List of all categories of good, popular apps. (Can
not be bought)

2.Second View :
Possibilities with all
the apps, Category
and filter.

3. Application Detail


Application details :

Reviews
Feedback from customers, Through the app.

Without buying,
Try !!.

Used resources


Licensing models :

* After Certification.
• The store supports Metro Style Apps and ordinary
Win32 (desktop) apps.
• Licenses are per user (account). Please be 'roamed'
automatically.
• Microsoft earned 30%
• Apps are downloaded 10 times more often if they
offer a trial
• 10% of the trials will be purchased later
• "In-App" purchases


Wenn die App im Store ist…

The Developer Dashboard lists,
All apps.

1. Vorbereitung 2. Submission 3. Nutzungsstatistik 4. Crash-Data


For more Ping me :

@er_ankur_mishra

/ankurmishrayugal

ankur.mishra@uen.in
ankur.mishra@studentpartner.com

www.ankurmishra.in | www.Go4Every.com | www.blog.uen.in

Tech days faridabad

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Destaque

Destaque (19)

Semelhante a Tech days faridabad

Semelhante a Tech days faridabad (20)

Tech days faridabad