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

Präsentation zum Thema: "Metro-Style Apps mit Expression Blend 5 für HTML designen Christian Moser User Experience Designer Zühlke Engineering AG"—  Präsentation transkript:

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

2 Wieso gerade JavaScript als App-Sprache?

3

4 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

5 Internet Explorer 10 Metro-Style Apps sind 100% W3C-konforme Web-Applikationen Windows RuntimeWinJS-FrameworkMetro CSS-Template

6 Web-SeiteWeb-AppWindows 8 App Dynamisch erzeugte Inhalte Anzahl Seiten

7 Mit Expression Web sieht man nur schwarz.

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

9 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

10 Projekt «Sound-Boxx»

11 Wahl einer Sample-Bank Spielt das Sample bei Touch ab

12 .sample.playing #sample-bank Notizen des Entwicklers an den Designer: #bank- selector.empty

13 Light-Theme für Apps mit viel Text Dark-Theme für Apps mit vielen Bildern

14

15 10px 100px 10px 1fr8fr 10px 1fr 10px #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; }

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

17 ControlParts 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

18 ... #root { display: -ms-box; -ms-box-lines: multiple; -ms-box-align: stretch; }.sample { margin-left: 10px; margin-top: 10px; }

19 @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

20

21 .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;} }

22 WinJS.UI.Animation.fadeIn(element);

23 Zusammenfassung

24

25 HTML/CSS Editor Ausführen von JavaScript zur Designzeit Interactive-Mode Plattform-Panel Anzeige der aktuellen CSS Vererbung Nahtlose Integration mit Visual Studio

26

27 http://dev.windows.com/ Windows 8Visual Studio 11Expression Blend 5

28

29

30