Le document traite des éléments interactifs de Windows 8 tels que les 'live tiles', badges et notifications 'toast', en fournissant des recommandations de design, des exemples de mise à jour et des méthodes de notification. Il explique également la gestion des notifications à l'aide de Windows Push Notification Service pour maintenir l'application à jour, même lorsqu'elle n'est pas en cours d'exécution. Plusieurs ressources et directives pour les développeurs sont mentionnées pour optimiser l'utilisation de ces fonctionnalités.

1. Live tiles, badges
et notifications toasts
Laurent Duveau
Windows 8 & Azure
MVP / MCT / RD @laurentduveau Montréal
18 Juin 2013
ldex.ca

2. Mes services
Besoin
d’un
expert ?
Windows
Phone 8
Contactez moi!
www.LDEX.ca
Azure

3. Agenda
Basic Tiles
Live Tiles
Badges
Secondary tiles
Notifications toast
Push notifications

4. Tiles

5. Basic Tiles
150 x 150 px 310 x 150 px
Wide [optionnel]Square
 Image par défaut pour le tile de l’app
 Spécifiée dans le package manifest
 2 formats:
 Support des live update

6. Support dans Visual Studio
 Package.appxmanifest

7. Jusqu’à 25 images à créer!
 Utiliser PerfecTile ($)
http://www.geekchamp.com/marketplace/components/perfectile

8. Live Tiles

9. Live tiles
Updates: Local,
scheduled,
periodic ou push

11. Recommandations de design
1. Dimension recommandée pour logo: 80x80 pixels
2. Centrer le logo dans le tile
3. Le nom de l’app apparait automatiquement en
bas. Si votre logo inclut déjà le nom, enlever le
app name du tile dans le app manifest
4. Pas de pub
5. Un design simple, clean, élégant est encouragé
6. La tile en entier est cliquable: ne pas représenter
de bouton, lien, etc. à l’intérieur

12. Live Tiles
 Syntaxe
• API + XML
 MSDN: Tile Template Catalog
http://tinyurl.com/TileTemplateCatalog
 Utiliser le projet NotificationExtensions
des samples MSDN
http://tinyurl.com/MSDNTilesSample

13. Live Tiles
 Update immédiat du tile actuel
var tileContent =
TileContentFactory.CreateTileSquareText04();
tileContent.TextBodyWrap.Text = "Hello World!";
// send the notification
TileUpdateManager.CreateTileUpdaterForApplication(
).Update(tileContent.CreateNotification());

14. Live Tiles
 Activer la queue de notification
 Cycle jusqu’à 5 des plus récentes
notifications
TileUpdateManager.CreateTileUpdaterForApplication(
).EnableNotificationQueue(true);

15. Images?
• webhttp://
• Depuis le app packagems-appx:///
• Local storagems-appdata:///local/

16. Live Tiles

17. Live Tiles
 Guidelines
• Pas de call to action (« click me! »)
• Image + texte ? => animation peek (2 frames)
• Ne pas afficher de données de temps relatives
(“il y a 10 minutes”) => sera vite obsolète
• Pas de pub!
MSDN: Tiles Guidelines
http://tinyurl.com/TilesGuidelines

18. Badges

19. Badges
 Overlay sur les tiles (square ou wide)
• Nombre (1-99) ex: 111 => 99+
• Glyph
 Coin bas droite
BadgeBadge

20. Badges
 Avec NotificationExtensions
// Clear the badge
BadgeUpdateManager.CreateBadgeUpdaterForAppli
cation().Clear();
var badgeContent = new
BadgeNumericNotificationContent((uint)nb);
//BadgeGlyphNotificationContent(GlyphValue.Busy);
// Update the application tile badge
BadgeUpdateManager.CreateBadgeUpdaterForApplicati
on().Update(badgeContent.CreateNotification());

21. Badges

22. Badges
 Guidelines
• Nombre trop grand: utiliser un glyph
• Nombre: relatif au dernier usage de l’app, pas
depuis l’installation
• Utiliser glyph si susceptible d’être mis à jour
MSDN: http://tinyurl.com/BadgesGuidelines

23. Secondary Tiles

24. Secondary Tiles
 Possibilité d’avoir des tiles supplémentaires
• Action de l’usager dans app bar
o”Pin to Start” et ”Unpin from Start”
• Pas possible par programmation
 Support des notifications et badges
• Doit être spécifique au contexte du tile
 Supprimé si app désinstallée

25. Secondary Tiles
 Sur action de l’usager!
var tile = new
Windows.UI.StartScreen.SecondaryTile(
"Tile Id",
"A Secondary Tile", // short title
"Secondary Tile Sample", // display name
tileActivationArguments,
Windows.UI.StartScreen.TileOptions.showNameOnLogo,
uriLogo);
tile.requestCreateAsync();

26. Secondary Tiles

27. Notifications “Toasts”

28. Toasts
 Délivrer des messages en dehors du contexte
de l'application
 Attirer l'attention de l'utilisateur
immédiatement
 Utilisateur est en contrôle et peut
définitivement désactiver les notifications
 Naviguer rapidement vers un emplacement
pertinent dans votre application
 Invoquer depuis votre application ou le cloud

29. Toast templates
MSDN: The toast template catalog
http://tinyurl.com/ToastTemplateCatalog

30. Toasts

31. 4 façons de notifier
 Local Notifications
• Seulement si app roule.
• Utile pour les update de tiles et badges, usage limité pour
les toasts.
 Scheduled Notifications
• Notification locale cédulée à un temps précis.
 Periodic Notifications
• Poll régulier d’un service cloud à intervalle de temps fixe.
 Push Notifications
• Update des tiles, badges et ouvre des toasts depuis le cloud
(même si l’app ne roule pas).
MSDN: Choosing a notification delivery method
http://msdn.microsoft.com/en-ca/library/windows/apps/hh779721.aspx
Support app off

32. Push Notifications

33. Windows Push Notification Service
 Enables delivery of tile and toast notifications
over the internet.
 Using WNS your app is alive with activity and
always up to date with fresh content.
 Tile updates and notifications shown to the user
even if your app is not running.
 WNS handles communication with your app
 Scales to millions of users
 Best of all, WNS is a free service for your app to
use!

34. Push Notification Overview
App Service
Windows
Notification
Service
POST <channel URI> HTTP/1.1
Content-Type: text/xml
Host: db3.notify.windows.com
X-WNS-Type: wns/badge
Authorization: Bearer <authentication token>
Content-Length: 58
<?xml version="1.0" encoding="utf-8"?>
<badge value="11"/>

35. Push Notification
 Azure Mobile Services!
MSDN: Get started with push notifications in Mobile Services
http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-
with-push-dotnet/

37. Ressources
 Working with tiles, badges, and toast
notifications
 Toast template catalog
 Tile template catalog
 Tiles UX Guidelines
 Badges UX Guidelines
 App tiles and badges sample
 Push notification client sample

38. Visit the Windows Developer Centre
Download the Windows 8 SDK and Code Samples
Register for a Windows Store Developer Account (MSDN subscribers get 12 months free)
Sign up for The Developer Movement
Watch Developer Movement Virtual Workshops On-Demand
Review and test your app for free at a Windows Store App Lab
Cool App Templates:
• IdeaPress (Turn a WordPress site into a Windows 8 app in minutes)
• Platformer Game Starter Kit (Including 2 HTML5-based examples)
Windows Phone (dev.windowsphone.com)
Visit the Windows Phone Developer Centre
Download the Windows Phone SDK and Code Samples
Register for a Windows Phone Developer Account (MSDN subscribers get 12 months free)
Sign up for The Developer Movement
Watch Developer Movement Windows Phone Workshop On-Demand
Windows Store (dev.windows.com)