Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1

Share

Download to read offline

Un mundo de notificaciones

Download to read offline

Charla en el evento Hel10 Windows 10, hablando de las nuevas notificaciones interactivas de Windows 10 y los nuevos templates para crear Tiles y notificaciones toast

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Un mundo de notificaciones

  1. 1. #helloWindows10 Hel10 Windows 10!
  2. 2. #helloWindows10 Rafa Serna Desarrollador en Diez Software (Grupo SDM) @rafasermed – rafaserna@outlook.com Un mundo de notificaciones
  3. 3. #helloWindows10 Nuevas plantillas para nuestros live tiles Notificaciones toast interactivas El Action Center Agenda
  4. 4. #helloWindows10 Developer en Diez Software MVP Windows Platform Developer Nokia Developer Champion @rafasermed rafaserna@outlook.com
  5. 5. #helloWindows10 Nuevas plantillas para nuestros live tiles
  6. 6. Plantillas heredadas • Si una plantilla se adapta a nuestras necesidades, podemos seguir usándola. • Las plantillas anteriores se mantienen • Las plantillas de Phone y Windows se han fusionado. • Hay mas de 80 plantillas disponibles
  7. 7. Responsive tiles • Los tiles no son siempre del mismo tamaño • Los tiles se adaptan a la pantalla en la que están Dado que el grid de la pantalla de start tiene diferentes densidades y se adapta al tamaño de la pantalla del dispositivo, también lo hacen los tiles y su contenido. High density exampleLow density example
  8. 8. Tiles adaptables – Estructura XML Min. Med Size Max Med. Size <tile> <visual> <binding template="TileSmall"> ... </binding> <binding template="TileMedium"> ... </binding> <binding template="TileWide"> ... </binding> <binding template="TileLarge"> ... </binding> </visual> </tile>
  9. 9. Tiles adaptables – Código C# Min. Med Size Max Med. Size TileContent content = new TileContent() { Visual = new TileVisual() { TileMedium = new TileBinding() { .... }, TileWide = new TileBinding() { .... }, TileLarge = new TileBinding() { .... } } };
  10. 10. Tiles adaptables <tile> <visual version? = "integer" lang? = "string" baseUri? = "anyURI" branding? = "none" addImageQuery? = "boolean" contentId? = "string" displayName? = "string" > <!-- Child elements --> <binding template="TileSmall"> ... </binding> ... </visual> </tile> <binding template = "tileTemplateNameV3" fallback? = "tileTemplateNameV1" lang? = "string" baseUri? = "anyURI" branding? = "none" addImageQuery? = "boolean" contentId? = "string" displayName? = "string" hint-textStacking? = "top" hint-overlay? = [0-100] hint-presentation="" hint-lockDetailedStatus1=""? = string="" hint-lockDetailedStatus2=""? = string="" hint-lockDetailedStatus3=""? = string="" > <!-- Child elements --> ( image | text | group )* </binding>
  11. 11. Tiles adaptables <image src = "string" placement? = "inline | “background" | “peek" alt? = "string" addImageQuery? = "boolean" hint-crop? = "none" hint-removeMargin? = "boolean" hint-align? = "stretch" | "left" | "center" | "right" /> <text lang? = "string" hint-style? = "textStyle" hint-wrap? = "boolean" hint-maxLines? = "integer" hint-minLines? = "integer" hint-align? = "left" | "center" | "right" > </text> caption captionSubtle body bodySubtle base baseSubtle subtitle subtitleSubtle title titleSubtle titleNumeral subheader subheaderSubtle subheaderNumeral header headerSubtle headerNumeral
  12. 12. Tiles adaptables <text hint-style="*" /> Font Height Weight caption 12 epx Regular body 15 epx Regular base 15 epx SemiBold subtitle 20 epx Regular title 24 epx Semilight subheader 34 epx Light header 46 epx Light Subtle (text 60 opaque) captionSubtle bodySubtle baseSubtle subtitleSubtle titleSubtle titleNumeralSubtle subheaderSubtle subheaderNumeralSubtle headerSubtle headerNumeralSubtle Numeral (reduce the line height so that content above and below come extremely close to the text) titleNumeral subheaderNumeral headerNumeral
  13. 13. DEMO Tiles Adaptables
  14. 14. Tiles adaptables - Agrupaciones <group> <!-- Child elements --> <subgroup hint-weight? ="" [0-100] hint-textStacking=""? = "top" | "center" | "bottom" > <!-- Child elements --> </subgroup> <subgroup hint-weight? ="" [0-100] hint-textStacking=""? = "top" | "center" | "bottom" > <!-- Child elements --> </subgroup> </group>
  15. 15. Tiles adaptables <group> <subgroup> ……… </subgroup> </group> <group> <subgroup> ……… </subgroup> </group> Agrupaciones Columnas <group> <subgroup hint-weight=“1”> ……… </subgroup> <subgroup hint-weight=“2”> ……… </subgroup> </group>
  16. 16. DEMO Tiles Adaptables (Agrupaciones)
  17. 17. Plantillas heredadas • Si una plantilla se adapta a nuestras necesidades, podemos seguir usándola. • Las plantillas anteriores se mantienen
  18. 18. Estados de un Toast Collapsed Expanded
  19. 19. Toast adaptables – Estructura XML <toast> <visual> <binding template=""> ... </binding> </visual> <actions> ... </actions> <audio/> </toast>
  20. 20. Toast adaptables <toast launch? = "string" duration? = "short|long" activationType? = "foreground|background|protocol" scenario? = "default|alarm|reminder|incomngCall" hint-people? = "string" > <visual version? = "nonNegativeInteger" lang? = "string" baseUri? = "anyURI" branding? = "none|logo|name" addImageQuery? = "boolean" > <binding /> </visual> <actions/> <audio/> </toast>
  21. 21. Toast adaptables Toast templates ToastGeneric ToastText01 ToastText02 ToastText03 ToastText04 ToastImageAndText01 ToastImageAndText02 ToastImageAndText03 ToastImageAndText04 <binding template? = "toastTemplate" lang? = "string" baseUri? = "anyURI" addImageQuery? = "boolean" > <text id = "integer" lang? = "string" /> </text> </binding> <image src = "string" placement? = "inline|appLogoOverride" alt? = "string" addImageQuery? = "boolean" hint-crop? = "none|circle"/>
  22. 22. Toast adaptables Media File ms-winsoundevent:Notification.Default ms-winsoundevent:Notification.IM ms-winsoundevent:Notification.Mail ms-winsoundevent:Notification.Reminder ms-winsoundevent:Notification.SMS ms-winsoundevent:Notification.Looping.Alarm .. 10 ms-winsoundevent:Notification.Looping.Call .. 10 <audio src? = "string" loop? = "boolean" silent? = "boolean" />
  23. 23. DEMO Toast Básicas
  24. 24. Toast adaptables <actions> <input id="string" type="text|selection" title? = "string" placeHolderContent? = "string" defaultInput? = "string" > <selection id = "string" content = "string" /> </input> <action content = "string" arguments = "string" activationType? = "foreground|background|protocol|system" imageUri? = "string" hint-inputId = "string" /> </actions>
  25. 25. Toast adaptables - Activaciones <action activationType="foreground" /> <action activationType="background" /> <action activationType="protocol" /> <action activationType="system" /> Tap button App launches Retrieve Args Take actions Tap button Task launches Retrieve Args Take actions Tap button Protocol activates Web / app Tap button System handles
  26. 26. Toast adaptables – Activaciones protected override void OnActivated(IActivatedEventArgs args) { base.OnActivated(args); if (args is ToastNotificationActivatedEventArgs) { var toastActivationArgs = args as ToastNotificationActivatedEventArgs; if (toastActivationArgs.Argument.Equals("patata") == true) { if (toastActivationArgs.UserInput.ContainsKey("origen")) { string patata = (string)toastActivationArgs.UserInput["origen"]; } } } } Foreground
  27. 27. Toast adaptables – Activaciones Background <Extension Category="windows.backgroundTasks“ EntryPoint="RuntimeComponent1.ActionBTask"> <BackgroundTasks> <Task Type="systemEvent" /> </BackgroundTasks> </Extension> public class ActionBTask : IBackgroundTask { public void Run(IBackgroundTaskInstance taskInstance) { var details = taskInstance.TriggerDetails as ToastNotificationActionTriggerDetail; if (details != null) { string arguments = details.Argument; var userInput = details.UserInput; } } }
  28. 28. DEMO Toast Interactivas
  29. 29. Action Center
  30. 30. Action Center • Manage app notifications • Developers can: • Remove one or many notifications • Tag and group notifications • Replace a notification with a new one • Set an expiration on notifications ToastNotificationHistory tnh = ToastNotificationManager.History; tnh.Remove(“T1“, “G2“); tnh.RemoveGroup(“G1");
  31. 31. Action Center • ToastNotificationHistoryChangedTrigger • Fires whenever a user dismisses a notification from Action Center • Or when an app adds or removes or replaces a notification public sealed class ToastChanged : IBackgroundTask { public void Run(IBackgroundTaskInstance taskInstance) { var toasts = ToastNotificationManager.History.GetHistory(); if (toasts != null) { var count = toasts.Select(t => t.Group == "G2").Count(); ..... } } }
  32. 32. DEMO Action center
  33. 33. #helloWindows10 Q&A
  34. 34. #helloWindows10 No olvides realizar la encuesta ¡Gracias! Rafa Serna Desarrollador en Diez Software (Grupo SDM) @rafasermed – rafaserna@outlook.com http://aka.ms/W10Ev05
  • elbruno

    Dec. 27, 2015

Charla en el evento Hel10 Windows 10, hablando de las nuevas notificaciones interactivas de Windows 10 y los nuevos templates para crear Tiles y notificaciones toast

Views

Total views

1,715

On Slideshare

0

From embeds

0

Number of embeds

1,196

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×