Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 38 Ad
Advertisement

More Related Content

Similar to Windows 8: Live tiles, badges et notifications toasts [french] (20)

More from Laurent Duveau (20)

Advertisement

Recently uploaded (20)

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

  1. 1. Live tiles, badges et notifications toasts Laurent Duveau Windows 8 & Azure MVP / MCT / RD @laurentduveau Montréal 18 Juin 2013 ldex.ca
  2. 2. Mes services Besoin d’un expert ? Windows Phone 8 Contactez moi! www.LDEX.ca Azure
  3. 3. Agenda Basic Tiles Live Tiles Badges Secondary tiles Notifications toast Push notifications
  4. 4. Tiles
  5. 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. 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 tiles Updates: Local, scheduled, periodic ou push
  10. 10. 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
  11. 11. Live Tiles  Syntaxe • API + XML  MSDN: Tile Template Catalog http://tinyurl.com/TileTemplateCatalog  Utiliser le projet NotificationExtensions des samples MSDN http://tinyurl.com/MSDNTilesSample
  12. 12. 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());
  13. 13. Live Tiles  Activer la queue de notification  Cycle jusqu’à 5 des plus récentes notifications TileUpdateManager.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 Guidelines http://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 droite BadgeBadge
  19. 19. 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());
  20. 20. Badges
  21. 21. 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
  22. 22. Secondary Tiles
  23. 23. 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
  24. 24. 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();
  25. 25. Secondary Tiles
  26. 26. Notifications “Toasts”
  27. 27. 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
  28. 28. Toast templates MSDN: The toast template catalog http://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é 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
  31. 31. Push Notifications
  32. 32. 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!
  33. 33. 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"/>
  34. 34. 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/
  35. 35. 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
  36. 36. 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)

×