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

Wieso gerade JavaScript als App-Sprache?

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

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

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

Mit Expression Web sieht man nur schwarz.

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

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»

Wahl einer Sample-Bank Spielt das Sample bei Touch ab

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

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

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

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

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 = ], 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

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

@media screen and (-ms-view-state: full-screen) { screen and (-ms-view-state: fill) { screen and (-ms-view-state: snapped) { #detailed-list { display:none; } #simle-list { display: block; } screen and (-ms-view-state: device-portrait) { } Full-screen Fill Snapped Portrait

.sample { animation: highlight 2s linear infinite alternate; highlight { 0% {background: red; left:0px; top:0px;} 50% {background: blue; left:5px; top:-5px;} 100% {background: green; left:0px; top:0px;} }

WinJS.UI.Animation.fadeIn(element);

Zusammenfassung

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

Windows 8Visual Studio 11Expression Blend 5