build 2011 in anaheim

Design – Development – Training www.xamllab.net

BUILD 2011 in Anaheim.

Zusammenfassung für die DNUG Dresden

Wir waren auf der BUILD 2011 in Anaheim, dem Microsoft-Entwickler-Event des Jahres.

Besonders wegen des unklaren Strategiebildes des letzten Jahres waren die Erwartung besonders hoch.

Das erwartet Euch heute: Windows 8 Der Metrostyle als Design-Prinzip Der W8-Marketplace Die neuen alten Tools Metro-Apps mit XAML Metro-Apps mit HTML


Das neue Windows

Windows 8

Priorität auf Content und schnellst mögliche Interaktion damit.

Komplett-Änderung der User Experience in der Computer Nutzung

Die UX ist mobil, touchbasiert, metrostyled und cloudangebunden.

Volle Gestensteuerung in jedem Detail.


Die Startseite

Windows 8

Die perfekte Umsetzung eines Personal Computer.

Bedienen der aktuellsten und persönlichen Belange des Benutzers mittels über Apps gefütterter Live-Tiles.

Personalisierbare und hoch aktuelle Startseite mit Live-Tiles.

Apps und Livetiles stellt sich der Benutzer selber zusammen auf der Startseite.


Das neue Windows

Windows 8

Ab Log-In Komplette Bedienung mit Gestensteuerung.

Der Look ist Metro at it‘s best.

Optik im schon bekannten Metrostyle mit leichtem Windows Phone 7 Charme.

Verzicht auf Chrome – also Rahmen und visuellen Puderzucker.

Der neue IE10 kommt ohne Browser-Rahmen aus, so dass sich surfen wie Softwarebenutzung anfühlt.


Das App-Konzept

Die Plattform

Ein Benutzererlebnis wie beim Mitbewerber – allerdings metrostylisch und mit einem vollwertigen PC darunter, was ein riesen Unterschied ist zu reinen „App-Viewern“.

Die Denke geht weg von schwerer Software hin zu kleinen smarten Apps. Die Apps erhält der Benutzer aus einem entsprechenden Marktplatz. Die Apps laufen im Parallelbetrieb.


Windows 7 dahinter

Windows 8

Der Wechsel zwischen Windows 7 zu Windows 8 ist holprig. Eine überzeugende Integration fehlt noch.

Windows 8 ist eher etwas für den Endnutzer und weniger etwas fürs Business.

Aber vielleicht Windows 9

Hintergrundsystem ist Windows 7 – allerdings verbessert mit erheblich mehr Power.

Windows 7 Software läuft weiterhin über den Klick auf „Desktop“.


Die Hardware

Windows 8

Leistungsstarke Grafik für Touch, Widescreen in perfekter Screengrößen-übergreifend Darstellung.

Windows 8 ist gedacht für Tablets, Desktop-PCs, Laptops und POIs.

Die Hardware ist performant, grafikstark, daueronline, multitouch, mit Riesenpower und -speicher.


Der Tablet-PC

Windows 8

Die dringend notwendige Reaktion auf die Anforderungen des Marktes.

Im Unterschied zum I-Pad handelt es sich um hier einen echten PC PLUS einem Tablet – also quasi das beste von Beidem.

Im Praxistest wirklich auf allen Ebenen. Ungute Brüche gibt es allerdings beim Wechsel zwischen Windows 8 und Windows 7. Dennoch sind die Potentiale hervorragend, weil sich hier das Beste aus Windows 7, Windows Phone 7 und Tablets zusammen findet.


Windows Server 8

Windows 8

Windows Server 8 Windows Azure bietet entsprechende Strukturen, starkes Backend, komponierbare Services und kontinuierliche Verfügbarkeit.

Datenübertragungen im Gigabyte-Rahmen mit geringer CPU-Belastung.


Azure und der Datenmarkt

Windows 8

Nicht nur Hosting der Daten, sondern auch Konsum. Content kann über einen Data-Marketplace angebunden werden an die eigenen Websites über Azure und entsprechende Bindings.


.Net 4.5

Windows 8

Scott zeigt .Net 4.5

Visual Studio 2011 hat einen schönen Previewmodus.

CSS kann sinnvoll gemergt werden.

Jquery Mobile wird für APS verfügbar.

Entsprechende Webservices für hochleistungsfähige Websites.

Multiuser-Handling.

TFS-Unterstützung.


Die heiligen Worte

Windows 8

Die Plattform enthält: Windows, Windows Phone, Xbox, Windows Azure, Office, Bing, Dynamics, Kinect, Tablets, Phones, neue PCs und Arms.

Verkaufszahlen Windows 7 mit

über 350 Mio. Geräte

Steve Balmer: Angekündigt wird maximaler ROI. Es sind die Tage des Windows Developers.

We want you all!

Na dann …


Metro-Prinzipien

Metrostyle

Modernes Design in Anlehnung an Tradition: Bauhaus-Stil als Basis für das Metro-Design. Reduktion und Form follows Function.

Bildsprache der Metros und Flughäfen hilft bei schneller Informationserfassung.

Schweizer Typodesign

ist geprägt durch Lesbarkeit und Klarheit.

Animationen stützen die Emotionalität und bringen Leben in ein Interface.


Metro-Prinzipien

Metrostyle

Echten Nutzen bieten

Authentisch digital sein.

Reduzierung auf Wesentliches.

Typografie als Design-Element nutzen.

Freiräume lassen.

Interaktion mit dem Inhalt.

Aktualität bieten.

Ikonografie statt Icons.

Informationen in Grafik aufbereiten.

Animationen einbeziehen.

Mehr mit weniger erreichen.

Redundanzen reduzieren.

Für Touch gestalten.


Designing Metro

Metrostyle

Konsistente UX durch konsequente Anwendung des Metrostyles: Inhalt statt Rahmen

Die Charm-Bar

NUI und Gestensteuerung

Design-Regelns.

Schnell und flüssig: Interaktion und Animation mit hoher Performance. Windows 8 unterstützt Gesten und reagiert mit Animation.

Touch-Verhalten mit erster Priorität gestalten. Erst Interaktionsdesign, dann Visual-Design.


Designing Metro

Metrostyle

Skallierung über alle Mediengrößen durch Vektor, XAML, SVG und CSS. SnapView: Jed App hat eine reduzierte Ansicht, muss skallierbar und ausrichtbar beim Landscape- und Portrait-View.

Aktualität und Bezug aufbauen durch Lifetiles. Dadurch bleibt die Applikation persönlich und lebendig.

Herstellung von Verbindungen bedeutet Interaktion mit anderen Applikationen.


Designing Metro

Metrostyle

Die Tool und Templates helfen bei der Anwendung.

Die Design sind in Form von XAML-Styles und CSS-Style fix integriert.

Für Animationen gibt es entsprechende Bibliotheken.

Bei Strukturen und Raster helfen entsprechende Grids.

Für die Icons ist ein entsprechender Symbol-Alphabet in Arbeit.

dev.windows.com


Der App-Marktplatz

Metrostyle

Zertifizierungsprozess: 1. Zerfizierungskit nutzen 2. Gute und getestete App einreichen 3. Startseite anlegen

Debugging und Auswertungstools über die Entwicklerseiten.

Marketplace ähnlich zum Windows Phone 7 Store.

In 3 Stufen werden die Apps geprüft und dann zertifiziert.


Metro-Apps bauen

Die Tools

Wahl der Programmiersprache nach Zweck und Vorlieben: XAML, HTML

JS, C#, C++ oder VB

Tools:

Visual Studio 2011 den Code

Blend 5 für die Oberfläche

Klappt in den Demo-Apps überzeugend gut.

Erste Test zeigen das System aber noch als unfertig und buggy auf.

Die Tools sind zum Download verfügbar und auf dem Tablet.

Für uns erfreulich: XAML bleibt!


Apps in XAML

Die Tools

Aus XAML-Sicht verhält sich das erstellen von Apps wie gewont

Controlsstyling kann implizit durch den Metrostyleerfolgen oder verändert werden mit expliziten Styles.

Es gibt div. Hilfetemplate.

Animationen werden mittels Libraries integriert, sind aber teils schon implizit vorhanden.

Auch hier gilt: Der Metrostyle liefert vieles mit, es kann aber alles individuell angepasst werden.

Beispiele im SDK..


Blend im VS 2011

Die Tools

Aus Blend für die UI-Bearbeitung integriert: Split-Modus Zooming Brush-Editor Panel-Verhalten Objektlayer Property-Panal Visuelles Masken-Editing Resourcen-Dialog

Erweiterungen on Top: Template-Preview Grid-Einstellung als Context-Menu 3 Ansichten des Property-Editors Verbessertes Styling. Schöner Grid-Editor.

Alles ab jetzt verfügbar.


HTML mit Blend

Die Tools

Markup-Editierung WYSIWYG ähnlich zu XAML

User Experience analog zum XAML-Blend

Styling-Prinzip analog zu Styles in XAML, aber natürlich nach CSS-Logik.

Erste Fassung ist schon nett, aber noch etwas dünn.

Animationslibraries per Javascript.


HTML mit Blend

Die Tools

Die Styles sind in den CSS-Daten integriert und müssen angewandt werden.

Animationen können per Libraries hinzugefügt werden.

Es gibt analog zu den XAML-Templates ebenfalls Template-Dateien z. B. für das Layoutgrid.

build 2011 in anaheim

Documents

xaml

design

tiles

metro

net 4

anaheim

xamllab