Post on 05-Apr-2015
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!