Developer Day Designing Windows Store Apps with Expression Blend Christian Moser Developer and Designer, Zühlke

Why using JavaScript to develop Apps?

 To enable a huge community of non-professional developers to write apps  HTML, CSS and JavaScript are proven web-technologies  They support a rich feature set and there are tons of frameworks and libraries available

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 Windows Store Apps are just 100% W3C-valid web-applications + WinRT functionsWinJS-Library Modern UI CSS-Template

Web-Page Windows Store App

Web-PageWeb-AppWindows Store App Dynamic Content No. of Pages

Expression Web only shows black

…but are not linked to the source code …are not available for Windows Store apps

Take Expression Blend Take the dynamic DOM inspector from IE Add an HTML-Editor

A new HTML/CSS Editor Execute JavaScript at designtime Switch between design and interactive mode Simulate modes, orientations and resolutions Show CSS inheritance Seamless integration with Visual Studio 2012

Let’s build an app JavaScript Sample Project «SoundBoxx»

Select sample bank Plays sample on touch

.sample.playing #sample-bank Notes of the developer for the designer #bank- selector.empty

Light theme for apps with a lot of text Dark theme for apps with a lot of media

Base elements html, body, iframe,… Text styles h1, h2, h3, p,… HTML-Controls button, checkbox, radio, slider,… WinJS-Controls rating, toggle, progress,…

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

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

Let’s build it…

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

@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);

Let’s build it…

Summary

 Windows 8Visual Studio Expression Blend