Contenu connexe
Similaire à Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with Windows 8 (20)
Plus de WinWire Technologies Inc (20)
Wired2Win Webinar: Build Enterprise Apps with Live Tiles & Notifications with Windows 8
- 1. Build Enterprise Apps with Live Tiles
and Notifications with Windows 8
Wired2Win Webinar Series
www.winwire.com
@WinWire
WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
- 3. Who We Are
WinWire Technologies is an
IT Services Company that
helps business and
technology leaders harness
the power of Collaboration
and Analytics across the
enterprise leveraging
technology trends such as
cloud, mobility, big data,
user interface and
enterprise social
WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
- 4. Agenda
Introduction to Windows 8 Platform
Developing Windows Store Apps
Tiles and Notifications
Demo
WinWire Technologies, Inc. Confidential 4
© 2010 WinWire Technologies
- 5. Windows 8
• Released on 25th October 2012
• Primarily focused towards improved mobile experience
• New Modern UI based on Microsoft Design Language
WinWire Technologies, Inc. Confidential 5
© 2010 WinWire Technologies
- 6. Windows 8 Platform
Windows 8 Apps Desktop Apps
View
DirectX XAML HTML / CSS
Controller
Model
C C# JavaScript
HTML C C#
C++ VB (Chakra) JavaScri
pt
C++ VB
WinRT APIs
System Services
Communication Graphics & Devices &
& Data Media Printing
Application Model Internet .NET
Explorer
Win32 / SL
Core
Windows Core OS Services
WinWire Technologies, Inc. Confidential © 2010 WinWire Technologies
- 7. Languages to Develop Windows Store Apps
Web Development • HTML5, Cascading Style Sheets,
Technologies Level 3 (CSS3), and JavaScript
.NET, Windows
Presentation • XAML, with code-behind in C++,
Foundation, C#, or Visual Basic.
Microsoft Silverlight
• Native C++ and HLSL to take full
DirectX
advantage of graphics hardware.
WinWire Technologies, Inc. Confidential 7
© 2010 WinWire Technologies
- 8. Before You Begin
Decide what your app is great at
Decide what user activities to support
Decide what features to include
Decide how to monetize your app
Design the UI for your app
Validate your design
WinWire Technologies, Inc. Confidential 8
© 2010 WinWire Technologies
- 9. Windows 8 Tiles
• Represent your app to the user
• Rich and engaging view into your app
• Alive with activity and continually updated
• Draw users back into your app over and over
• Easy to create and update
WinWire Technologies, Inc. Confidential 9
© 2010 WinWire Technologies
- 10. Tile Design Philosophy
• Why should I invest in a live tile?
• Characteristics that make a live tile compelling
• Choosing between a square and wide tile size
• Using default tiles
• Using peek templates
• Design considerations for tiles
WinWire Technologies, Inc. Confidential 10
© 2010 WinWire Technologies
- 11. Badges
• Convey summary or status
information specific to app
• Numeric or glyph
• Appear at lower-right corner of tile
• Defined as an XML document,
elements defined in badge schema
• Badge catalog not extendable
WinWire Technologies, Inc. Confidential 11
© 2010 WinWire Technologies
- 12. Secondary Tiles
• Enable users to promote specific
content in an app
• Created via Pin to Start option in
app bar
• Same as tiles but can be
created/deleted at runtime
• Can be duplicated across devices
WinWire Technologies, Inc. Confidential 12
© 2010 WinWire Technologies
- 13. App on Lock Screen
• Should your app be on the lock screen?
• Badge only or Badge and Tile Text
• Up to seven apps on the lock screen
• Tile and toast notifications update text/badge
• Secondary tiles on the lock screen
WinWire Technologies, Inc. Confidential 13
© 2010 WinWire Technologies
- 14. Toast Notifications
• Transient messages to user out of app context
• Tap by user launches the specific area of app
• Toast notification types
• Standard and Long-duration toasts
• Scheduled and recurring toasts
WinWire Technologies, Inc. Confidential 14
© 2010 WinWire Technologies
- 15. Notification Delivery Methods
Local
A set of API calls that send notifications while your app is running
Scheduled
A set of API calls that schedule a notification in advance
Periodic
Update tiles and badges periodically by polling a cloud service
Push
Notifications sent from a cloud server, even if your app isn't running
WinWire Technologies, Inc. Confidential 15
© 2010 WinWire Technologies
- 16. Periodic Notifications
• Update tiles/badges at fixed
interval by polling a cloud service
• Windows sends an HTTP GET
request to URI, receives XML
• Expire after 3 days by default
• Notification cycling
WinWire Technologies, Inc. Confidential 16
© 2010 WinWire Technologies
- 17. Push Notifications
• Enable 3rd party developers to send updates from their cloud service
WinWire Technologies, Inc. Confidential 17
© 2010 WinWire Technologies
- 18. How Push Notification Works
• App requests for a push notification channel to the Notification Client
Platform
• NCP asks WNS to create a notification channel
• A notification channel is returned in the form of a URI
• The URI is returned by Windows to the app
• The app sends the URI to the cloud service
• When the cloud service has an update to send, it notifies WNS using
the URI
• WNS receives the request and routes the notification to the app
WinWire Technologies, Inc. Confidential 18
© 2010 WinWire Technologies
- 19. Globalization and accessibility
• Store strings in resource file
• Store local images in local storage
• Append query string to cloud image URL
WinWire Technologies, Inc. Confidential 19
© 2010 WinWire Technologies
- 20. App package structure for Globalization
Strings Images
/ProjectFolder /ProjectFolder
/images
/strings welcome.scale-80.png
/en-US welcome.scale-100.png
resources.resjson
/fr-FR /contrast-black
welcome.scale-80.png
resources.resjson welcome.scale-100.png
/ja-JP /contrast-white
resources.resjson welcome.scale-80.png
welcome.scale-100.png
/ja-JP
Strings Usage: welcome.scale-80.png
<text id="1">ms-resource:greeting</text> welcome.scale-100.png
/contrast-black
Images Usage: welcome.scale-80.png
<image id="1" src="ms- welcome.scale-100.png
appx:///images/welcome.png"/> /contrast-white
welcome.scale-80.png
welcome.scale-100.png
WinWire Technologies, Inc. Confidential 20
© 2010 WinWire Technologies
- 21. References
• Guidelines and checklist for tiles and badges
• http://msdn.microsoft.com/en-us/library/windows/apps/hh465403.aspx
• Tile Template Catalog
• http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx
• Tiles, Badges and notifications
• http://msdn.microsoft.com/en-US/library/windows/apps/hh779725
• App Tiles and Badges Sample
• http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-
5fc49148
WinWire Technologies, Inc. Confidential 21
© 2010 WinWire Technologies
- 22. Questions
Questions?
Mail them to: marketing@winwire.com
WinWire Technologies, Inc. Confidential 22
© 2010 WinWire Technologies