Windows 8: Live tiles, badges et notifications toasts [french]

3,633 views

Published on

Présenté par Laurent Duveau à la Communauté .NET Montréal le 18 Juin 2013.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Windows 8: Live tiles, badges et notifications toasts [french]

  1. 1. Live tiles, badgeset notifications toastsLaurent DuveauWindows 8 & AzureMVP / MCT / RD @laurentduveau Montréal18 Juin 2013ldex.ca
  2. 2. Mes servicesBesoind’unexpert ?WindowsPhone 8Contactez moi!www.LDEX.caAzure
  3. 3. AgendaBasic TilesLive TilesBadgesSecondary tilesNotifications toastPush notifications
  4. 4. Tiles
  5. 5. Basic Tiles150 x 150 px 310 x 150 pxWide [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. 6. Support dans Visual Studio Package.appxmanifest
  7. 7. Jusqu’à 25 images à créer! Utiliser PerfecTile ($)http://www.geekchamp.com/marketplace/components/perfectile
  8. 8. Live Tiles
  9. 9. Live tilesUpdates: Local,scheduled,periodic ou push
  10. 10. Recommandations de design1. Dimension recommandée pour logo: 80x80 pixels2. Centrer le logo dans le tile3. Le nom de l’app apparait automatiquement enbas. Si votre logo inclut déjà le nom, enlever leapp name du tile dans le app manifest4. Pas de pub5. Un design simple, clean, élégant est encouragé6. La tile en entier est cliquable: ne pas représenterde bouton, lien, etc. à l’intérieur
  11. 11. Live Tiles Syntaxe• API + XML MSDN: Tile Template Cataloghttp://tinyurl.com/TileTemplateCatalog Utiliser le projet NotificationExtensionsdes samples MSDNhttp://tinyurl.com/MSDNTilesSample
  12. 12. Live Tiles Update immédiat du tile actuelvar tileContent =TileContentFactory.CreateTileSquareText04();tileContent.TextBodyWrap.Text = "Hello World!";// send the notificationTileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
  13. 13. Live Tiles Activer la queue de notification Cycle jusqu’à 5 des plus récentesnotificationsTileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
  14. 14. Images?• webhttp://• Depuis le app packagems-appx:///• Local storagems-appdata:///local/
  15. 15. Live Tiles
  16. 16. 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 Guidelineshttp://tinyurl.com/TilesGuidelines
  17. 17. Badges
  18. 18. Badges Overlay sur les tiles (square ou wide)• Nombre (1-99) ex: 111 => 99+• Glyph Coin bas droiteBadgeBadge
  19. 19. Badges Avec NotificationExtensions// Clear the badgeBadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();var badgeContent = newBadgeNumericNotificationContent((uint)nb);//BadgeGlyphNotificationContent(GlyphValue.Busy);// Update the application tile badgeBadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());
  20. 20. Badges
  21. 21. Badges Guidelines• Nombre trop grand: utiliser un glyph• Nombre: relatif au dernier usage de l’app, pasdepuis l’installation• Utiliser glyph si susceptible d’être mis à jourMSDN: http://tinyurl.com/BadgesGuidelines
  22. 22. Secondary Tiles
  23. 23. Secondary Tiles Possibilité d’avoir des tiles supplémentaires• Action de l’usager dans app baro”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
  24. 24. Secondary Tiles Sur action de l’usager!var tile = newWindows.UI.StartScreen.SecondaryTile("Tile Id","A Secondary Tile", // short title"Secondary Tile Sample", // display nametileActivationArguments,Windows.UI.StartScreen.TileOptions.showNameOnLogo,uriLogo);tile.requestCreateAsync();
  25. 25. Secondary Tiles
  26. 26. Notifications “Toasts”
  27. 27. Toasts Délivrer des messages en dehors du contextede lapplication Attirer lattention de lutilisateurimmédiatement Utilisateur est en contrôle et peutdéfinitivement désactiver les notifications Naviguer rapidement vers un emplacementpertinent dans votre application Invoquer depuis votre application ou le cloud
  28. 28. Toast templatesMSDN: The toast template cataloghttp://tinyurl.com/ToastTemplateCatalog
  29. 29. Toasts
  30. 30. 4 façons de notifier Local Notifications• Seulement si app roule.• Utile pour les update de tiles et badges, usage limité pourles 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 methodhttp://msdn.microsoft.com/en-ca/library/windows/apps/hh779721.aspxSupport app off
  31. 31. Push Notifications
  32. 32. Windows Push Notification Service Enables delivery of tile and toast notificationsover the internet. Using WNS your app is alive with activity andalways up to date with fresh content. Tile updates and notifications shown to the usereven 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 touse!
  33. 33. Push Notification OverviewApp ServiceWindowsNotificationServicePOST <channel URI> HTTP/1.1Content-Type: text/xmlHost: db3.notify.windows.comX-WNS-Type: wns/badgeAuthorization: Bearer <authentication token>Content-Length: 58<?xml version="1.0" encoding="utf-8"?><badge value="11"/>
  34. 34. Push Notification Azure Mobile Services!MSDN: Get started with push notifications in Mobile Serviceshttp://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-with-push-dotnet/
  35. 35. Ressources Working with tiles, badges, and toastnotifications Toast template catalog Tile template catalog Tiles UX Guidelines Badges UX Guidelines App tiles and badges sample Push notification client sample
  36. 36. Visit the Windows Developer CentreDownload the Windows 8 SDK and Code SamplesRegister for a Windows Store Developer Account (MSDN subscribers get 12 months free)Sign up for The Developer MovementWatch Developer Movement Virtual Workshops On-DemandReview and test your app for free at a Windows Store App LabCool 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 CentreDownload the Windows Phone SDK and Code SamplesRegister for a Windows Phone Developer Account (MSDN subscribers get 12 months free)Sign up for The Developer MovementWatch Developer Movement Windows Phone Workshop On-DemandWindows Store (dev.windows.com)

×