• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Windows 8: Live tiles, badges et notifications toasts [french]
 

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

on

  • 2,503 views

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

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

Statistics

Views

Total Views
2,503
Views on SlideShare
2,103
Embed Views
400

Actions

Likes
0
Downloads
0
Comments
0

8 Embeds 400

http://weblogs.asp.net 379
http://duveau2.rssing.com 7
http://cloud.feedly.com 4
http://feeds.feedburner.com 4
http://www.feedly.com 3
http://weblogs.aspnet06.orcsweb.com 1
http://feeds2.feedburner.com 1
http://www.directrss.co.il 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Live tiles, badgeset notifications toastsLaurent DuveauWindows 8 & AzureMVP / MCT / RD @laurentduveau Montréal18 Juin 2013ldex.ca
    • Mes servicesBesoind’unexpert ?WindowsPhone 8Contactez moi!www.LDEX.caAzure
    • AgendaBasic TilesLive TilesBadgesSecondary tilesNotifications toastPush notifications
    • Tiles
    • 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
    • Support dans Visual Studio Package.appxmanifest
    • Jusqu’à 25 images à créer! Utiliser PerfecTile ($)http://www.geekchamp.com/marketplace/components/perfectile
    • Live Tiles
    • Live tilesUpdates: Local,scheduled,periodic ou push
    • 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
    • Live Tiles Syntaxe• API + XML MSDN: Tile Template Cataloghttp://tinyurl.com/TileTemplateCatalog Utiliser le projet NotificationExtensionsdes samples MSDNhttp://tinyurl.com/MSDNTilesSample
    • Live Tiles Update immédiat du tile actuelvar tileContent =TileContentFactory.CreateTileSquareText04();tileContent.TextBodyWrap.Text = "Hello World!";// send the notificationTileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());
    • Live Tiles Activer la queue de notification Cycle jusqu’à 5 des plus récentesnotificationsTileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);
    • Images?• webhttp://• Depuis le app packagems-appx:///• Local storagems-appdata:///local/
    • Live Tiles
    • 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
    • Badges
    • Badges Overlay sur les tiles (square ou wide)• Nombre (1-99) ex: 111 => 99+• Glyph Coin bas droiteBadgeBadge
    • 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());
    • Badges
    • 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
    • Secondary Tiles
    • 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
    • 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();
    • Secondary Tiles
    • Notifications “Toasts”
    • 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
    • Toast templatesMSDN: The toast template cataloghttp://tinyurl.com/ToastTemplateCatalog
    • Toasts
    • 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
    • Push Notifications
    • 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!
    • 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"/>
    • 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/
    • 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
    • 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)