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

Metro-Style Apps mit Expression Blend 5 für HTML designen Christian Moser User Experience Designer Zühlke Engineering AG moc@zuehlke.com

Sprachen für Metro-Style Apps XAML XAML HTML / CSS C# / VB C++ JavaScript Wieso gerade JavaScript als App-Sprache?

Gründe für JavaScript als App-Sprache Neben 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 JavaScript HTML5-Audio HTML5-Video Grid-Layout Flex-Box Canvas Semantic-Tags Controls Validation Watermark Class-Selectors Animations Transitions Easing Media-Queries Gradients Shadows IndexDB Async-Support Caching Web-Sockets Multitouch Regular-Expressions DataContext Drag&Drop

Metro-Style Apps sind 100% W3C-konforme Web-Applikationen Internet Explorer 10 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 Problemfü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 Notizen des Entwicklers an den Designer: #sample-bank .sample .playing #bank-selector .empty

Light- oder Dark-Theme Light-Theme für Apps mit viel Text <linkrel="stylesheet"href="/Microsoft.WinJS.0.6/css/ui-light.css"/> Dark-Theme für Apps mit vielen Bildern <linkrel="stylesheet"href="/Microsoft.WinJS.0.6/css/ui-dark.css"/>

Das Metro-Theme enthält Styles für Basiselemente html, body, iframe ,… Textelemente h1, h2, h3, p ,… HTML-Controls button, checkbox, radio, slider ,… WinJS-Controls rating, toggle, progress ,…

Grid Layout #root { display: -ms-grid; -ms-grid-columns: 10px1fr10px8fr10px; -ms-grid-rows: 10px100px1fr10px; } #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; } Title 10px 10px 1fr 8fr 10px Controls Samples 10px 100px 1fr <divid="root"> <divid="title"></div> <divid="controls"></div> <divid="samples"></div> </div> 10px

Styling von Controls Control State Part input[type=text]:hover::-ms-clear { background: red; }

Liste von Controls und Parts

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 Snapped 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 .sample { animation: highlight2s linear infinite alternate; } @keyframeshighlight { 0% {background: red; left:0px; top:0px;} 50% {background: blue; left:5px; top:-5px;} 100% {background: green; left:0px; top:0px;} } CSS3 Animations

Animationen in Metro-Style Apps <scriptsrc="/Microsoft.WinJS.0.6/js/base.js"></script> <scriptsrc="/Microsoft.WinJS.0.6/js/ui.js"></script> WinJS.Animation (JavaScript) WinJS.UI.Animation.fadeIn(element); fadeIn() fadeOut() enterContent() exitContent() enterPage() exitPage() pointerDown() pointerUp() reveal() swipeSelect() swipeDeselect() showEdgeUI() CSS3 Animations

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 Fazit Wahl 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? Windows 8 Visual Studio 11 Expression Blend 5  http://dev.windows.com/

Besten Dank für die Aufmerksamkeit!

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