1. Developer Day Designing Windows Store Apps with Expression Blend Christian Moser Developer and Designer, Zühlke moc@zuehlke.com

2. Why using JavaScript to develop Apps?

3.  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

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

6. Web-Page Windows Store App

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

8. Expression Web only shows black

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

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

11. 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

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

13. Select sample bank Plays sample on touch

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

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

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

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

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

19. Let’s build it…

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

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

22. @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

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

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

25. Let’s build it…

26. Summary

29.  http://dev.windows.com/http://dev.windows.com/ Windows 8Visual Studio 2012 +Expression Blend