Windows 8 einführung

Windows 8 und Metro-Apps

Christian Moser
moc@zuehlke.com

Folie 1
25. Oktober 2011

Christian Moser

© Zühlke 2011

Was ist neu in Windows 8?

Metro-Style Apps für Windows
8
Folie 2
25. Oktober 2011

Christian Moser

Metro-Style Apps für Windows 8 | Christian Moser © Zühlke 2011

Optimiert für Tablet-PC’s

Microsoft möchte mit Windows 8 dem Apple iPad
Konkurrenz bieten:
• Neuer Lock-Screen
• Neue Touch-Oberfläche (Metro-UI)
• Lauffähig auf ARM-Prozessoren
• Batteriesparend und ressourcenarm
• Windows Store
• Windows Azure integration
• Connected-Standby und
Background-Tasks

Metro-Style Apps für Windows 8 | Christian Moser 25. Oktober 2011 Folie 3 © Zühlke 2011

Neues auf dem Desktop

• Startet in wenigen Sekunden!
• Neuer Task Manager
• Verbessertes Kopieren
• Explorer mit Ribbon
• «Factory Reset» und
Refresh-Funktion
• Internet Explorer 10
• Automatische Synchronisation
in die Cloud (Sky-Drive)
• Mounten von ISO und VHD


Die Metro-Oberfläche

8
Folie 5
25. Oktober 2011

Christian Moser

© Zühlke 2011

Metro-Desktop

Der neue Lock-Screen

Beispiele von Metro-Style Apps

Die Metro-Designprinzipien

• Pride in craftsmanship
Eine gute User Experience entsteht nur durch ein
sauberes Handwerk in allen Disziplinen
• Be fast and fluid
Apps sollen responsive, intuitiv, touch-optimiert
und smooth sein.
• Authentically Digital
Verbunden, dynamisch, lebendig, starke Farben,
bewegt
• Do more with less
Inhalte statt Chrom, gut in etwas sein
• Win as one
Synergien nutzen, Integriert und Vernetzt
Redundanz vermeiden, Standarts einhalten,
© Zühlke 2011

Umdenken – von Desktop zu Metro

Viele unnötige
Linien und
Rahmen

Reduced to
the max


Interaktion mit dem Metro-Desktop

Charms
(Die 5 wichtigsten Systemfunktionen,
Taskwechsel sind immer erreichbar)

Erscheinen, wenn mit dem Finger
über den Touch-Rand gewischt wird.

App-Bars

Variationen, die jede App unterstützen
sollte

Snapped und Vollbild Horizontal und Vertikal Bildschirmgrössen

Auflösungen (dpi)


Windows 8 – Touch-Gesten

Die Windows Touch-
Sprache ist mit nur
7 Gesten einfach
erlernbar und intuitiv.

Sollte wenn möglich
nicht erweitert werden.


Layout-Raster

Ein durchgängiges
Layout-Raster sorgt
für ein konsistentes
Erscheinungsbild.

Visual Studio 11 bietet dafür
fertige Templates
Folie 13 © Zühlke 2011

Komfortable Verwendung
auf dem Tablet

Viele Personen halten Tables mit zwei Händen
 Alle wichtigen Funktionen sollten dabei komfortabel erreichbar sein

Icons auf der App-Bar sollten
links und rechts angeordnet werden

Durchgeführte Usability-Studie Split-Modus der Tastatur

Contracts

• Applikationen interagieren über «Contracts» miteinander,
ohne etwas voneinander zu wissen.
• Jede Applikation kann die Contracts, die Sinn machen anbieten
oder nutzen
• Windows 8 unterstützt drei Contracts:

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


Live Tiles

• Icons sind veraltet, statisch, langweilig und bieten wenig Nutzen

• Live Tiles sind lebendig, persönlich, anziehend aktuell und informativ

• Apps können Inhalte als sekundäre Tiles mit «deep link» auf den Desktop
stellen (Wetter-Standorte, Freunde, wichtige Aktienkurse,…)


Cloud-Integration

• Der Nutzer loggt sich einmal mit einem Windows-Live
Benutzer bei Windows an
• Jede Metro-Style App erhält in der Cloud Speicherplatz für Benutzer-
Einstellungen und kleinere Inhalte
• So können Einstellungen einfach zwischen mehreren Rechnern
synchronisiert werden:

Beginnt ein eBook zu lesen und muss weg… …das Buch öffnet sich auf der richtigen Seite

Zusammenfassung –
Was macht eine gute Metro-App aus

1. Erscheint vollständig im Metro-Style Design
2. Hält sich an alle Designprinzipien von Metro
3. Fühlt sich schnell und flüssig an
4. Unterstützt Skalieren, Snapping und Ausrichtung auf eine sinnvolle Art
5. Implementiert sinnvolle Contracts (Search, Share, Picker)
6. Bietet wertvolle Informationen auf ihrem Live-Tile an
7. Fühlt sich immer verbunden, aktuell und lebendig
8. Nutzt die Funktionen der Cloud zur Daten-Synchronisierung

Folie 18 © Zühlke 2011

Metro-Style Apps
entwickeln

8
Folie 19
25. Oktober 2011

Christian Moser

© Zühlke 2011

Windows Runtime (WinRT)

• Neues Subsystem in
Windows 8
• API für Metro-Style Apps
• Native in C++ (COM-ähnlich)
• Natürliche Projektion der API
in verschiedene Sprachen
• Entwicklung mit C#/VB/C++
und XAML oder JS und HTML
• WinRT ist weder WPF noch Silverlight!
• Ist erst ab Windows 8 verfügbar
das heisst Metro-Style Apps laufen nur unter Windows 8
und höher!
25. Oktober 2011 Folie 20 © Zühlke 2011

Funktionsübersicht der Windows Runtime

• Die Windows Runtime deckt
alle wichtigen Funktionen ab
• Saubere API – für jede
Funktion gibt es nur eine
Implementierung
• Enthält eine native XAML-
Implementierung für C#/VB
Apps


App Isolation & Privacy

• Gemäss Microsoft läuft die App in
einem App-Container
• Tatsächlich beschränkt der Kompiler
und die Store-Zertifizierung die
Funktionalität
• Diese Einschränkung bedeutet:
– Kein Zugriff auf das Dateisystem
– Kein Zugriff auf Win32-Funktionen
– Kein Zugriff als lokale Devices

• Potentiell gefährliche Funktions-
aufrufe laufen über Broker
• Anwender muss den Zugriff auf
die Ressourcen genehmigen (AppXManifest )
20. September 2011 Folie 22 © Zühlke 2011

Language Projection

• Metro-Style Apps können gleichwertig in C++, C#, VB oder JS
geschrieben werden
• Alle Funktionen der WinRT wurden
natürlich abgebildet.
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();

Language Projection

WinRT Objekte sind Über die
eine moderne Art von Windows-Metadaten-kann
COM. das .NET-Framework diese
Sie unterstützen das Objekte nutzen.
neue Interface Das Format ist sehr nahe
IInspectable am .NET-Metadatenformat.
ILDASM


Type Mapping

Ein Grossteil der Typen stimmen überein zwischen .NET und WinRT
Primitives Interfaces Enums Structs Delegates
Klassen Konstrukturen Static Methoden Properties
Events
Andere Typen werden «natürlich» gemappt
• HRESULT  Spezifische Exceptions
(Fallback: ComException)
• IAsyncOperation<T>  ITask<T>
• IITerable<T>  IEnumerable<T>
• Ivector<T>  IList<T>


Eigene WinRT Komponenten in C#
erstellen

• z.B. um ein Teil einer App in einer anderen Sprache zu schreiben
COM (bisher) WinRT

Regeln, die beachtet werden müssen
 Können nur in einer App verwendet werden (kein GAC / keine DLL-hell)
 Public = ComVisible
 Public Funktionen dürfen nur native WinRT-Typen verwenden
 Structs dürfen nur public Members haben (keine private Members oder Methoden)
 Alle Klassen müssen sealed sein.
 Keine eigene generics.


Metro-App - Lebenszyklus

• Apps werden nur gestartet, nicht beendet
• Inaktive Apps wechseln nach 5s in «suspended» Mode. Zustand wird gespeichert.
• Wird eine App wieder sichtbar, wird sie «resumed». Zustand wird wieder geladen.
• Wenn wenig Speicher verfügbar ist, beendet Windows eine «suspended»-Apps.
• System-Events: Application.Current.Suspending, Application.Current.Resuming


Metro-Style Controls

Folie 28
25. Oktober 2011

Christian Moser


Windows 8 bringt diverse neue Controls

• WebView (ohne AirSpace probleme)
• ListView/GridView/FlipView/JumpView (mit «semantic zoom»)
• MediaPlayer mit Steuerelementen
• ToggleSwitch
• Extended TextBox
• Progress Ring


ApplicationBar

• Control für die Application Bar
<ApplicationBar DismissMode="LightDismiss">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Home" />
<Button Content="Save" />
</StackPanel>
</ApplicationBar>


XAML

• Der XAML-Stack von Windows 8 ist Teil der WinRT (native)
• Die API ist zu einem grossen Teil kompatibel mit Silverlight
• Interne Umsetzung ist jedoch komplett unterschiedlich
• Neuer Namespace Windows.UI.XAML


Implementierung des «Share»-Contracts


Implementierung des «Share»-Contracts

DataTransferManager.GetForCurrentView().DataRequested += OnDataRequested;

private void OnDataReqested(DataTransferManager sender, DataRequestedEventArgs e)
{
if( DoIHaveSomethingToShare )
{
e.Request.FailWithDisplayText("No data to share... ");
}
else
{
e.Request.Data.SetBitmap(picture);
}
}


Auf Statusänderungen reagieren

Bildschirmauflösung
var screenSize = Windows.Current.Bounds;
Windows.Current.SizeChanged += OnScreenSizeChanged;

Orientierung
var orientation = DisplayProperties.CurrentOrientation;
Landscape
DisplayProperties.OrientationChanged += … Portrait

Layout
var layout = ApplicationLayout.Value Snapped
ApplicationLayout.GetForCurrentView().LayoutChanged +=

Filled

FullScreen

Verwendung der Kamera


Vergleich von
Desktop und Metro

Metro Apps Desktop Software
Haupt-Eingabemedium Touch Maus/Tastatur
UI-Style Metro Windows
Runtime WinRT (Win32) .NET/SL/Win32
Verteilung Windows Store Download Webseite
Installation .appx Package MSI
Systemzugriff Nur über WinRT Voller Zugriff

Fazit
• Metro Style Apps auf WinRT eignen sich vorwiegend für Consumer-
Anwendungen mit viel Inhalt und wenig Dateneingabe.
• Business Applikationen werden weiterhin hauptsächlich maus- und
tastaturbasiert bleiben und auf WPF/SL/HTML oder C++ basieren.

Windows Store

Folie 38
25. Oktober 2011

Christian Moser


Navigation im Windows Store

1. Startseite
Liste aller Kategorien mit guten, populären
Apps. (Können nicht gekauft werden)

2. Kategorieansicht
mit allen Apps einer
Kategorie und Filter-
möglichkeiten

3. Applikationsdetails
Alle Details über die
App.


Applikationsdetails

Reviews
Feedbacks von Kunden
über die App

Ausprobieren ohne
zu kaufen
Dank speziellen
Trial-API’s. Verhindert
Duplizierung im Store.

Verwendete Resourcen
Deklarierte Ressourcen müssen für den Typ von App
Sinn machen . Sonst kann dies die Store-Zertifizierung
mühsamer machen.


Wie kommen Kunden an eine App

1. Direkt über den Store
2. Über die Suche in Windows 8, welche auch den
Store durchsuchen kann (mittels «search»-Kontrakt)
3. Über Google  Applikationsdetail-Seiten werden
von Suchmaschinen indexiert
4. Über eine Webseite der App, wobei über Meta-Tags
in IE10 ein «Get the app» Icon eingeblendet werden
<meta name="msApplication-ID«
content="microsoft.build.App"/>
<meta name="msApplication-PackageFamilyName«
content="microsoft.build_8wekyb3d8bbwe"/>

http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-
your-web-site-to-your-windows-8-app.aspx

Zertifizierung

Technische Korrektheit
• Das App-Manifest muss mit dem überein stimmen,
was die App an Ressourcen verwendet
• Grösse und Skalierung von Bildern
• Korrekte Verwendung von API’s (z.Bsp. keine
unerlaubten Win32 aufrufe)
• Stabilität und Sicherheit
 Kann 1:1 offline überprüft werden
mittels «App Certification Kit»


Lizenzierungsmodelle

• Der Store unterstützt Metro-Style-Apps und
gewöhnliche Win32(Desktop)-Apps
• Lizenzen sind pro Benutzer (Account).
Sie werden automatisch «geroamt».
• Microsoft verdient 30%
• Trials
– Apps werden 10x öfters heruntergeladen, wenn sie ein Trial
anbieten
– 10% der Trials werden später gekauft

• «In-App»-Käufe
– 48% der Einnahmen stammen aus reinen In-App käufen


Wenn die App im Store ist…

Das Entwickler-Dashboard
listet alle Apps.

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


Ressourcen

Windows 8 Sample Pack:
http://code.msdn.microsoft.com/windowsapps/Windows-Developer-
Preview-6b53adbb

Blogs:
http://www.scottlogic.co.uk/blog/colin/2011/10/winrt-transitions-creating-
fast-and-fluid-metro-uis/


Windows 8 einführung

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Windows 8 einführung

Windows 8 einführung