WinWire webinar: Converting iPad apps to Windows Store apps

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of WinWire webinar: Converting iPad apps to Windows Store apps

  • 1. Converting iPad Apps to Windows StoreApps Wired2Win Webinar@WinWireWinWire Technologies, Inc. Confidential 2010 WinWire Technologies

2. Agenda Popular Apps Application Architecture Application Lifecycle Data Storage UI Design Guidelines Similarities & Differences Commands Orientation & Views Notifications Windows 8 Application Layouts Unique Traits of Windows 8 Apps Snap Views & Semantic Zoom Tools & ResourcesWinWire Technologies, Inc. Confidential 2010 WinWire Technologies 2 3. Evolution of Mobile OS & Apps iOS App Store Apps (March 2013) : 821,438 Windows Store Apps (Dec 2012):35,000Surface Surface ProLumia 800,710 Lumia 900 Lumia 620 WindowsWindows Phone 7 MangoPhone 8Windows Windows PhonePhone 6.5 Tango CupcakeiPadiPad 2iPad MiniiPhone 1iPhone 3G iPhone 3GS iPhone 4GiPhone 4S iPhone 5 iOS 1.0iOS 2.0iOS 3.0 iOS 4.0iOS 5.0iOS 6.0Exploring2007 2008 2009 20102011 20122013*Source: Wikipedis, GigaonWinWire Technologies, Inc. Confidential 3 2010 WinWire Technologies 4. Key ChallengesMultiple screen sizes need to be targeted Mac ComputersiPhoneiPadapple TVWindowsWindows phone Surface Microsoft TVWinWire Technologies, Inc. Confidential 2010 WinWire Technologies 5. Popular AppsWinWire Technologies, Inc. Confidential 2010 WinWire Technologies 5 6. Application Architecture Objective-CC#/VB, C++/CX, JavaScript + HTML5 Cocoa TouchUIKit Language Projections Core Graphics Storage & Network Media Open GL ESGraphics & MediaCore AnimationUI, Pickers & ControlsWin RTCore DataMetadata & Namespace Core Services FoundationRuntime Code Core OSWindows KernelWinWire Technologies, Inc. Confidential6 2010 WinWire Technologies 7. Application Lifecycle - iOS One app in the foreground which owns the screen and receives touch events. Applications can work in the background. Allows for scenario based multitasking and fast application switching.iOS Callbackapplication:didFinishLaunchingWithOptions:applicationDidBecomeActive:applicationWillResignActive:applicationDidEnterBackground:applicationWillEnterForeground:WinWire Technologies, Inc. Confidential7 2010 WinWire Technologies 8. Application Lifecycle Win 8 Much simpler lifecycle. Suspended apps cannot execute code. Use Background Transfer API for file downloads or run light code. BackgroundCapabaleMedia API for playing audio in the background.Windows 8 EventsOnLaunchedApplication.SuspendingApplication.ResumingWinWire Technologies, Inc. Confidential8 2010 WinWire Technologies 9. Data Storage Both provide mechanisms to store and access data locally. Internal storage area is private to each application.iOS Windows 8 Out of the box support for SQL LiteNo inbuilt database support yet. Extensionsfrom SQLite are available. Recommended to centralize appApplication settings are stored on a per- preferences in system settings.application basis. Apps can uses system interfaces to A few specific folders can be accessed access the users contacts or musicdirectly by the application Documents, etc. Music, Pictures etc.Use File Picker to access arbitrary files andRemovableDevices API for SD cards.WinWire Technologies, Inc. Confidential9 2010 WinWire Technologies 10. UI Design GuidelinesSimilarities Touch first Focus on content Intuitive navigation Consistent UX across all appsDifferences No app chrome! Search and share contracts Discreet app bars for commands Live tiles and toast notificationsWinWire Technologies, Inc. Confidential 10 2010 WinWire Technologies 11. Commands in iOS Apps Commands displayed as part of persistent navigation bar at the top or bottom.Bottom barforcontextual Some use slide commands. out bars.WinWire Technologies, Inc. Confidential 11 2010 WinWire Technologies 12. Commands in Win8 Apps - App BarsSwipe from top or bottom edges brings up the app bars.Top bar can be used for navigation in a flat hierarchy or for switching between content.Bottom barforcontextualcommands.WinWire Technologies, Inc. Confidential 12 2010 WinWire Technologies 13. Commands in Win8 Apps - Charms Menu Swipe from the right edge. Used for sharing, searching and settings.WinWire Technologies, Inc. Confidential 13 2010 WinWire Technologies 14. iPad Apps - Orientation & Views Same content in both landscape and portrait layout. Content reflows in portrait orientation.WinWire Technologies, Inc. Confidential 14 2010 WinWire Technologies 15. Win 8 Apps - Orientation & Views Windows 8 runs on various form factors. The extra real estate can be used to show more content. The design should scale for both portrait layout and highresolution screens. Use multiple images for different orientations, resolutions orscreen-sizes.WinWire Technologies, Inc. Confidential 15 2010 WinWire Technologies 16. iOS Apps - Notifications Besides in-app notification, two other mechanisms - apps have iOS Live Tiles two mechanisms for notifications - Notification the functionality of the notification Combine CentreNew notifications appear on the top of the center and the app badges.screen. a rich collection of templates to Tiles haveUsers can swipe choose from. from the top to view all messages.Toast Notifications AppImportant updates that interrupt users BadgesApp appear anywhere in the system. numeric Can icons in the Springboard can havebadges attached to users of events inthat there Use them to notify them to indicate real timeare new messages. Should be opt-in.A number of templates are available to choose from.WinWire Technologies, Inc. Confidential 16 2010 WinWire Technologies 17. Win 8 Apps - Notifications Win 8 apps have two mechanisms for notification - Live Tiles Combine the functionality of the notification center and the app badges. Tiles have a rich collection of templates to choose from. Toast NotificationsImportant updates that interrupt usersCan appear anywhere in the system.Use them to notify users of events in real timeShould be opt-in.A number of templates are available to choose from.WinWire Technologies, Inc. Confidential 17 2010 WinWire Technologies 18. Win 8 Apps Layout - Hierarchical The Hub Layout Pattern For apps with different sections of related content, with varying levels of detail. Hub Page - Landing page of the app. - Content is separated in horizontally scrolling sections - Each section mapping to a Section page. Section Page - Consists of individual items. - Each item has its own Detail page. - Can also leverage grouping and a panorama style layout. Detail Page - The third level of the app. - The format could varies with type of content, - A News app can show a news item or a photo app, just a picture.WinWire Technologies, Inc. Confidential 18 2010 WinWire Technologies 19. Win 8 Apps Layout - Flat Flat layout scheme for apps with all the content at the same hierarchical level. Allows users to switch between small number of unrelated sections or tabs. Typically no back buttons. Fast switching between content with the top app bar. Apps use thumbnails to denote items in the app bar. An add button to include more tabs or sections. Common use cases - browsers, document creation apps,games with different modes.WinWire Technologies, Inc. Confidential 19 2010 WinWire Technologies 20. Win 8 Apps - Navigation Elements Header & Back Button Header Menus Home Links Filters, pivots, sorts and viewsWinWire Technologies, Inc. Confidential 20 2010 WinWire Technologies 21. Unique Traits of Win 8 Apps - Snap ViewsA way of multitasking.Leverage to keep users involved for longer durations.WinWire Technologies, Inc. Confidential 21 2010 WinWire Technologies 22. Unique Traits of Win 8 Apps - Semantic Zoom Zoom out to see data in related groups. Quick way to dive back in instead of navigating long lists.WinWire Technologies, Inc. Confidential 22 2010 WinWire Technologies 23. Tools & Resources iOSWindows 8 XCode and iOS software Visual Studio 2012 Express for Windows development kit (SDK)8 and Blend (optional) Apple developer account needed Developer license free but valid for 30 only when testing on actual devicesdays at a time. $99 a year. Windows Store Developer Account Provisioning portal$49 for individuals $99 for companies. Windows Store dashboard.WinWire Technologies, Inc. Confidential 23 2010 WinWire Technologies 24. DEMO: Design elements of Windows 8 apps WinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential 2010 WinWire Technologies24 25. Takeaways Windows 8 has equivalents for all the features available on iOS. More flexible, more choices and unique mechanisms like Snap Views for better user-engagements. Take advantage of multiple form-factors or orientation changes to show more content. System-wide integration with search and share enables seamless communication between applications. Conform with the Windows 8 design language. Re-think your application design to leverage all the features of the platform.WinWire Technologies, Inc. Confidential 25 2010 WinWire Technologies 26. Thank you!Send in your questions to Visit us: WinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential 2010 WinWire Technologies26