Windows 8 einführung

© Zühlke 2011

Christian Moser

Windows 8 und Metro-Apps

Christian [email protected]

25. Oktober 2011Folie 1

mailto:[email protected]

© Zühlke 2011

Metro-Style Apps für Windows 8

Christian Moser

Was ist neu in Windows 8?


Metro-Style Apps für Windows 8 | Christian Moser

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

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

25. Oktober 2011 Folie 3


• 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

Neues auf dem Desktop


© Zühlke 2011


Christian Moser

Die Metro-Oberfläche


Der neue Lock-Screen

Metro-Desktop

Beispiele von Metro-Style Apps

© Zühlke 2011

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,


Umdenken – von Desktop zu Metro


Viele unnötige Linien und Rahmen

Reduced tothe max


Interaktion mit dem Metro-Desktop


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

App-Bars

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


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.

© Zühlke 2011

Layout-Raster

Folie 13

Visual Studio 11 bietet dafür fertige Templates

Ein durchgängigesLayout-Raster sorgt für ein konsistentesErscheinungsbild.


Split-Modus der Tastatur

Viele Personen halten Tables mit zwei Händen

Alle wichtigen Funktionen sollten dabei komfortabel erreichbar sein

Komfortable Verwendung auf dem Tablet


Durchgeführte Usability-Studie

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


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

Contracts


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


• 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,…)

Live Tiles



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

Cloud-Integration


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

© Zühlke 2011

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


Christian Moser

Metro-Style Apps entwickeln


© Zühlke 2011

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

Windows Runtime (WinRT)



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

© Zühlke 2011

App Isolation & Privacy

20. September 2011

• 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 aufdie Ressourcen genehmigen (AppXManifest )

Folie 22

© Zühlke 2011

• 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

20. September 2011 Folie 23


Language Projection


WinRT Objekte sind eine moderne Art von COM.

Sie unterstützen das neue Interface IInspectable

Über die Windows-Metadaten-kann das .NET-Framework diese Objekte nutzen.

Das Format ist sehr nahe am .NET-Metadatenformat.

ILDASM


Ein Grossteil der Typen stimmen überein zwischen .NET und WinRT

Primitives Interfaces Enums StructsDelegates

Klassen Konstrukturen Static MethodenProperties

Events

Andere Typen werden «natürlich» gemappt

• HRESULT Spezifische Exceptions (Fallback: ComException)

• IAsyncOperation<T> ITask<T>

• IITerable<T> IEnumerable<T>

• Ivector<T> IList<T>

Type Mapping



Eigene WinRT Komponenten in C# erstellen


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.

• z.B. um ein Teil einer App in einer anderen Sprache zu schreiben


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

© Zühlke 2011

Christian Moser

Metro-Style Controls




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>


• 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

XAML


© Zühlke 2011

Christian Moser

Contracts


© Zühlke 2011

Implementierung des «Share»-Contracts


© Zühlke 2011

Implementierung des «Share»-Contracts

25. Oktober 2011

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); }}

Folie 34


Bildschirmauflösung

Orientierung

Layout

Auf Statusänderungen reagieren


var screenSize = Windows.Current.Bounds;Windows.Current.SizeChanged += OnScreenSizeChanged;

var orientation = DisplayProperties.CurrentOrientation;DisplayProperties.OrientationChanged += …

1366x768

Landscape Portrai

t

var layout = ApplicationLayout.ValueApplicationLayout.GetForCurrentView().LayoutChanged +=

Snapped

Filled

FullScreen


Verwendung der Kamera


© Zühlke 2011

Vergleich von Desktop und Metro

20. September 2011

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.

Folie 37

© Zühlke 2011

Christian Moser

Windows Store




Navigation im Windows Store


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

2. Kategorieansichtmit allen Apps einerKategorie und Filter-möglichkeiten

3. ApplikationsdetailsAlle Details über die App.


Applikationsdetails


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

Ausprobieren ohnezu kaufenDank speziellen Trial-API’s. VerhindertDuplizierung im Store.

ReviewsFeedbacks von Kundenüber die App


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


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

<meta name="msApplication-ID« content="microsoft.build.App"/><meta name="msApplication-PackageFamilyName« content="microsoft.build_8wekyb3d8bbwe"/>





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


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/

Ressourcen







Education

Windows 8 einführung