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
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);
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
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());
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
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();
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
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
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)