1. Developing Windows Store Apps - Intro Level 250 Martin Esmann Technical Evangelist (Windows 8 & Windows Phone) mesmann@microsoft.com

2. Who’s to blame? Me ;) 2

3. Microsoft Developer Achievements Developer Achievements! Your apps Our passion! Publish amazing apps => Earn Points => Convert Pints to Pearks! Get fame. Move to Vegas. Join on Facebook! aka.ms/DK

4. Agenda 4 Introduction to the Windows 8 Platform Introduction to the APIs, Controls and Tools Let’s build an app! Let’s get in the Store! Optional Hands-on labs

5. Objectives  Understand the Windows 8 platform  Understand the Windows 8 UI/UX  Know how to build apps for Windows 8  Understand the Windows Store requirements  Understand the role of XAML 5

6. If you know.NET You already have the skills to build Windows 8 apps with XAML + C# and VB

7. Introduction to the Windows 8 Platform (overview)

8. Layout, UI/ UX and …  There are guides and directions to everyone!  From iOS to Windows 8  From Windows Phone to Windows 8  Etc…

13. Silhouette Metro style design In the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form. Page title Baseline at 100px Content area Top aligned at 140px Content area Left margin 120px Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail. Create a focal point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

14. Silhouette Metro style design In the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form. Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail. Create a focal point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

15. Silhouette Metro style design In the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form. Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail. Create a focal point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

16. Silhouett e In the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form. Metro style design Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail. Create a focal point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

17. Silhouette In the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form. Metro style design Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail. Create a focal point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

18. Press and hold to learn Swipe to select Slide to dragTap for primary actionPinch to zoomRotate to rotate Swipe from edge for app and system UI Touch First design The touch language… See BUILD talk APP-391T: Designing Metro Style apps that are touch-optimized

19. Touch First - reasoning…

20. Screens  Minimum app resolution is 1024x768  Recomended to design for 1366x768  Use Visual Studio Simulator to test for different views and scales 20

21. Designing UX for apps http://msdn.microsoft.com/en- us/library/windows/apps/hh779 072.aspx 21

22. Let’s try some Windows Store apps!

23. Introduction to the APIs, Controls, Tools and developer platform

24. Windows 8 Platform

25. Language projections

26. Windows Store application APIs

27. Development Patterns  Code-behind approaches  Simpler apps  Event-driven  Coupling UI to logic  Model-View-ViewModel (MVVM)  Separation of concerns  More easily testable (TDD)  Binding-driven  No Behavior support currently

28. Windows.UI.Xaml  Same XAML primitives  Optimized for touch experiences  New UI Controls, familiar XAML structure  GridView/ListView  SemanticZoom  AppBar  Animation Library  ThemeAnimations and Transitions  Extensibility  Large 3 rd party ecosystem still thriving 28

29. Requirements + Tools & SDK’s  PC with Windows 8 RTM (required)  Visual Studio 2012 (express or higher)  Expression Blend (UX/Design)  Simulator (Screen sizes and screen shots) http://msdn.microsoft.com/en-us/windows/apps/br229512.aspx 29

30. Let’s build a simple app! Hello Windows Store App

31. Break!

32. Application State & Life Cycle

33.  How to handle application state and life cycle of the app 33

34. Navigation Layout Views

35. Navigation, Layout and Views  Pages and Navigation  Controls & Layout  Styles  App Bar and menus  Settings & Flyouts 35

36. Adding Content to the app

37.  Static data  Privacy, menu text, app text etc. (non updated)  Dynamic data  Fetch data from an online source.  Syndication feed  web service  rest service  etc. 37

38. What about games?!

39. Getting started with Games  Unity 3D supports both Windows Store + Windows Phone 8 apps!  http://unity3d.com/  MSDN Doc:  http://msdn.microsoft.com/en- us/library/windows/apps/hh868271.aspx http://msdn.microsoft.com/en- us/library/windows/apps/hh868271.aspx  HTML/JS Games…  http://jessefreeman.com/articles/building-html5-metro- games-for-windows-8/ http://jessefreeman.com/articles/building-html5-metro- games-for-windows-8/ 39

40. Let’s get in the Store!

41. Windows Store

42. Windows Store – Account  To submit apps to Windows Store you need a Developer Account  DreamSpark Members 0DKK (1 st year)  BizSpark Members 0DKK  Selected MSDN Subscribers * 0DKK  Individuals approx. 260 DKK /pr. Year.  Companies approx. 530 DKK /pr. Year. Validation is required and can take some time! 42 Sign-up Guide: http://msdn.microsoft.com/en-us/library/windows/apps/hh868181.aspx

43. Windows Store – Certification  Application Policies  In short your app or game is required to work!  Content Policies  Copyright, Hate, alcohol, weapons, adult content, violence  Application Submission Requirements  Only use allowed API’s, Release build, capabilities, graphics/images/icons, Language/localization.  Technical Certification Requirements  Responsiveness, Launch Time, Back Button, Memory, Application content quality.  Additional Requirements for Specific Application Types  Location (on/off), Notification (on/off), Locked Screen (on/off), Media playback.  Privacy Policy!  All apps need to tell the user to what extend information is used and why!  Unique…  The app needs to add unique value to the end user and may not simply be a wrapper around a html site etc. Also multi publishing is not allowed… 43 http://msdn.microsoft.com/en-US/library/windows/apps/hh694083

44. Unique oppertunity – RIGHT NOW!  DA Banner!! 44

45. Getting the app ready for certification and publishing to Windows Store

46. Comon Errors & Tips  Windows App Certification Kit  Content tests  Privacy / Usage Text  About / Title / Content  Uniqueness/ relevens  Step 1: Read “Store App Certification Requirements”  http://aka.ms/StoreReq http://aka.ms/StoreReq  Step 2: Read “Resolving Certification Errors”  http://aka.ms/StoreFix http://aka.ms/StoreFix  Step 3: Escalate through CSS  http://aka.ms/StoreSupport http://aka.ms/StoreSupport 46

47. Getting started  Hands-on labs - Windows 8 Camp in a Box  http://www.microsoft.com/en-us/download/details.aspx?id=29854  Getting started  http://msdn.microsoft.com/en-us/library/windows/apps/br229519.aspx  Traning  Vod, books, events., online, etc… search and you will find!  Samples!  http://code.msdn.microsoft.com/windowsapps  StoreFront Starter Kit’s  https://bitbucket.org/martinesmann/storefront-starter-kit  https://bitbucket.org/martinesmann/storefront-starter-kit-preview  Community!  http://windowsdev.dk | 47 … Don’t panic it’s really easy!

48. … Questions? :)

49. Please fill out the evaluation: bit.ly/ Sub2GB

50. Up-coming events! from Microsoft Denmark & DPE

51. Hands-on lab (workshop)

52. Steps! To get you started 1. Register your personal Windows Store Dev Account 1. http://dev.windows.com 2. Important!!!! Use Dreamspark 2. Register for Developer Achievements (DA) on Facebook 1. http://aka.ms/DK 3. Download the Windows Store SDK and tools 1. http://dev.windows.com 4. Complete Track 1 or 2 (next slide!!!) 5. Create your own app from your own idea! 6. Publish the app 7. Receive Credit on DA! 52 …

53. HANDS-ON/WOWKSHOP TRACK#1 – Simple Create your first Windows Store app  Link: http://msdn.microsoft.com/en- us/library/windows/apps/hh974581.aspx http://msdn.microsoft.com/en- us/library/windows/apps/hh974581.aspx  Out come: Blog Reader App 53 2 TRACKS/OPTIONS TRACK#2 – LABS Complet the individual labs  Link: http://msdn.microsoft.com/en- us/windows/apps/jj674832.aspx  Out come: Learning by sample/labs, no final/nor complet app will be created but deep knowledge in specific technologies.

54. Thanks! Martin Esmann mesmann@microsoft.com twitter.com/martinesmann 54