Windows Platform *39PDA Principles of Mobile Application Design Václav Jirovský, ČVUT FIT
Topics What is Windows Platform? Development Devices types Languages & IDEs New functions in Windows 10 Application resources Windows Insiders Localization Notifications Universal Windows Platform App design Windows Store Overview Rules Resources
Big revolution happening right now!
What is Windows Platform? Development Win8 & WP
Device types IoT + devices Windows Phone Windows (tablet + desktop) Xbox One Surface Hub HoloLens
Internet of Things + devices Microsoft Band Windows 10 IoT Small or no screen For example. Raspberry Pi2 support
What is Windows Phone? OS for mobile devices
WP history Windows Phone 7 revolution no backward compatibility with Windows Mobile Discontinued - you can t upgrade your WP7 device Windows Phone 8 New core same as in Windows 8 Backward app compatibility with WP7 Windows Phone 8.1 Improved UI, enterprise fuctions Backward app compatibility with WP8 Windows 10
Desktop + tablets Old traditional Win32 apps New WinRT apps
Windows history Windows 7, Vista, XP Win32 apps Windows 8 New WinRT apps - Metro UI Also Win32 apps support Windows 8.1 Improved support and features of WinRT apps Windows 10 Still backward compatibility Win32 apps
Surface Hub Big screens, multiple users
Xbox One Gaming console Kinect
Microsoft HoloLens
Microsoft HoloLens - DEMO
Windows 10 Not finished yet! Expected release in summer 2015 Free upgrade for everyone! Windows Insider program
Windows Insiders Public program for testing new releases of Windows Fast or Slow ring Submit your feedback http://insider.windows.com
Universal Windows Platform (UWP)
UWP - principles Same as responsive website One app (one file) runs on all device By width and available HW is decided which breakpoint is used
UWP - example
Windows Continuum
App design More relaxed rules than before Previous versions had tight guidelines, now it s more like dont forget about App doesn t have to be on all devices For design purposes Adobe Illustrator and PowerPoint templates
Effective pixels System cares about visibility 24px font (scales itself)
Touch devices - gestures
UI controls App bar App bar
UI controls
Navigation Nav pane Global navigation Hamburger Not expected to be used by user so frequently Source: http://blogs.msdn.com/b/africaapps/archive/2014/03/08/ux-guidelines-for-windows-phone-8.aspx
Navigation nav pane Source: http://blogs.msdn.com/b/africaapps/archive/2014/03/08/ux-guidelines-for-windows-phone-8.aspx
Navigation Pivot Local navigation - for example. filter of restaurants Source: http://blogs.msdn.com/b/africaapps/archive/2014/03/08/ux-guidelines-for-windows-phone-8.aspx
App pages flow Back button Back button
App lifecycle
Development
What you need? Windows <10 Windows 8 Pro 64-bit processor with Hyper-V+SLAT support Visual Studio 2013 (Update 2)+ Windows Phone Emulators images https://dev.windows.com/en-us/develop/download-phone-sdk Where to get it (for free)? Dreamspark students www.dreamspark.cz Bizspark startups www.bizspark.cz Or Express version
What you need? Windows 10 Windows 10 Pro 64-bit processor with Hyper-V+SLAT support Visual Studio 2015 RC+ Windows 10 Mobile emulators Where to get it? Windows Insider program, all is free
Architecture NEW Windows 10! Project Astoria Develop Windows 10 apps by reusing Android code Convert your Android Java project to UWP and publish to Windows Store Also with UI controls https://dev.windows.com/en-us/uwpbridges/project-astoria
Architecture NEW Windows 10! Project Islandwood Develop Windows 10 apps by reusing Objective-C code Swift support coming soon https://dev.windows.com/en-us/uwpbridges/project-islandwood
Projects Islandwood & Astoria Coming soon Should be available with release of Windows 10
Architecture
Development using C# (C++, VB) Used technologies: XAML, C# XAML
Development using HTML5+CSS Used technologies: HTML, JavaScript, CSS Microsoft open-source library WinJS Calls system API (access to file, sensors,...) HTML5 data- attributes <div id="ratingcontrolhost" data- win- control="winjs.ui.rating" data- win- options="{maxrating: 10, averagerating: 6}"> </div> <div id="timepicker data- win- control="winjs.ui.timepicker data- win- options="{current: '10:29 am'}"> </div>
DEMO C# and WinJS project wizard
Appmanifest XML files Package.appxmanifest Currently without Describes app Application name Icons Languages Permissions For example: microphone, sensors, webcam
Notification - live tiles
Push notifications - principle
Notification - toasts Soon toast notifications with quick actions
DEMO Universal applications VS project
Windows Store
Windows Store https://dev.windows.com/en-us/dashboard One Store together for Windows Platform Registration fee Lifetime registration For students free registration App is compiled into one package (.appx)
Windows Store Before Win10: Only WinRT apps After Win10: Universal apps Win32 apps
Windows Store certification process All apps (even updates of existing app) goes through certification Usually takes 3-5 days Certification rules
More resources MSDN documentation Documentation, demos, tutorials http://msdn.microsoft.com/en-us/library/windows/apps/br229565.aspx http://dev.windows.com StackOverflow Lot of answered questions http://stackoverflow.com
Samples Universal app samples on GitHub https://github.com/microsoft/windows-universal-samples
Thank you for you attention! Václav Jirovský @vjirovsky