Metro-Style Apps mit Expression Blend 5 für HTML designen

Christian MoserUser Experience DesignerZühlke Engineering AGmoc@zuehlke.com

Sprachen für Metro-Style Apps

C++C# / VB

XAML XAML

Wieso gerade JavaScript als App-Sprache?

JavaScript

HTML / CSS

Gründe für JavaScript als App-SpracheNeben professionellen Entwicklern existiert eine riesige Community von Non-Professionals.

JavaScript-Apps basieren auf erprobten Internet-Technologien (HTML, CSS, JavaScript).

Diese bieten ein umfangreiches Feature-Set an, das sich mit anderen Technologien messen kann.

HTML CSS JavaScriptHTML5-Audio

HTML5-VideoGrid-LayoutFlex-BoxCanvasSemantic-TagsControlsValidationWatermark

Class-SelectorsAnimationsTransitionsEasingMedia-QueriesGradientsShadows

IndexDBAsync-SupportCachingWeb-SocketsMultitouchRegular-ExpressionsDataContextDrag&Drop

Internet Explorer 10

Metro-Style Apps sind 100% W3C-konforme Web-

Applikationen

Windows Runtime WinJS-Framework Metro CSS-Template

Apps sind keine Webseiten

Web-Seite Web-App Windows 8 App

Dynamisch erzeugte Inhalte

Anzahl Seiten

Dynamische Inhalte sind ein Problem für viele Designwerkzeuge

Mit Expression Websieht man nur schwarz.

Developer-Tools erlauben das Analysieren dynamischer Inhalte zur Laufzeit

…haben jedoch keine Verbindung zum Source-Code…und stehen für Metro-Apps nicht zur Verfügung

Expression Blend 5 für Metro-Style Apps HTML/CSS Editor

Führt JavaScript zur Designzeit aus

Interactive-Mode / Design-Mode Umschaltung

Testen verschiedener Auflösungen

Zeigt CSS Vererbung auf

Nahtlose Integration mit Visual Studio

Projekt «Sound-Boxx»

Interaktionsdesign vom Designer

Wahl einerSample-Bank

Spielt das Sample bei Touch ab

Funktionales UI vom Entwickler

.sample.playing

#sample-bank

Notizen des Entwicklers an den Designer:

#bank-selector

.empty

Light- oder Dark-ThemeLight-Theme für Apps mit viel Text

Dark-Theme für Apps mit vielen Bildern

<link rel="stylesheet" href="/Microsoft.WinJS.0.6/css/ui-light.css"/>

<link rel="stylesheet" href="/Microsoft.WinJS.0.6/css/ui-dark.css"/>

Basiselemente html, body, iframe ,…

Textelemente h1, h2, h3, p ,…

HTML-Controls button, checkbox, radio, slider ,…

WinJS-Controls rating, toggle, progress ,…

Das Metro-Theme enthält Styles für

Title

Controls Samples

Grid Layout10px

100px

10px10px 1fr 8fr

10px

1fr

10px

<div id="root"> <div id="title"></div> <div id="controls"></div> <div id="samples"></div></div>

#root { display: -ms-grid; -ms-grid-columns: 10px 1fr 10px 8fr 10px; -ms-grid-rows: 10px 100px 1fr 10px; } #title { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-span: 3; } #controls { -ms-grid-column: 2; -ms-grid-row: 3; } #samples { -ms-grid-column: 4; -ms-grid-row: 3; }

Styling von Controls

input[type=text]:hover::-ms-clear { background: red;}

Control State Part

Liste von Controls und PartsControl Parts

input [type = checkbox] -ms-check

input [type = radio] -ms-check

input [type = range] -ms-fill-lower, -ms-track, -ms-fill-upper, -ms-thumb, -ms-ticks-after, -ms-ticks-before, -ms-ticks-on-track

input [type = email], input [type = search], input [type = tel], input [type = url]

-ms-value, -ms-clear

input [type = password] -ms-value, -ms-reveal

progress -ms-fill

select -ms-value, -ms-expand

Auf Status und Ausrichtung reagieren@media screen and (-ms-view-state: full-screen)

{}

@media screen and (-ms-view-state: fill) { }

@media screen and (-ms-view-state: snapped){ #detailed-list { display:none; } #simle-list { display: block; }}

@media screen and (-ms-view-state: device-portrait) { }

Full-screen

Fill

Sn

ap

pe

d

Portrait

Fast and Fluid

Animationen helfen dem Benutzer zu verstehen, was abläuft.

Sie machen eine App lebendig und emotional ansprechend.

Sie erhöhen den subjektiven Wert einer Applikation.

Animationen in Metro-Style Apps

CSS3 Animations

.sample { animation: highlight 2s linear infinite alternate;}

@keyframes highlight { 0% {background: red; left:0px; top:0px;} 50% {background: blue; left:5px; top:-5px;} 100% {background: green; left:0px; top:0px;} }

Animationen in Metro-Style Apps

fadeIn()

fadeOut()

enterContent()

exitContent()CSS3 Animations

<script src="/Microsoft.WinJS.0.6/js/base.js"></script><script src="/Microsoft.WinJS.0.6/js/ui.js"></script>

WinJS.UI.Animation.fadeIn(element);

enterPage()

exitPage()

pointerDown()

pointerUp()

reveal()

swipeSelect()

swipeDeselect()

showEdgeUI()

WinJS.Animation(JavaScript)

Zusammenfassung

Die wichtigsten Features von Expression Blend 5 für HTML

HTML/CSS Editor

Ausführen von JavaScript zur Designzeit

Interactive-Mode

Plattform-Panel

Anzeige der aktuellen CSS Vererbung

Nahtlose Integration mit Visual Studio

Persönliches FazitWahl einer passenden App-Sprache ist wichtig.

Viel UI: HTML/JS

Viel Business-Logik: C#

Plattformnahe: C++

Die Tücken von JS/CSS/HTML kann auch Blend nicht abnehmen.

Expression Blend erleichtert das Designen von Apps enorm.

Das Ausführen von JavaScript zur Designzeit ist innovativ!

Neugierig geworden?

http://dev.windows.com/

Windows 8 Visual Studio 11 Expression Blend 5

Besten Dank für die Aufmerksamkeit!