Procedimientos recomendados de XboxXbox best practices

Todas las aplicaciones para UWP se ejecutarán en Xbox One de manera predeterminada sin que tengas que hacer nada más.By default, all UWP apps will run on Xbox One without any extra effort on your part. Sin embargo, si quieres que tu aplicación destaque, haga las delicias de los clientes y pueda competir con las mejores experiencias que ofrecen otras aplicaciones de Xbox, te recomendamos que sigas los siguientes procedimientos a continuación.However, if want your app to shine, delight your customers, and compete with the best app experiences on Xbox, you should follow the practices below.

Nota

Antes de comenzar, échales un vistazo a las pautas de diseño que encontrarás en el artículo Diseño para Xbox y televisión.Before you start, take a look at the design guidelines laid out in Designing for Xbox and TV.

Crear las mejores experiencias para Xbox OneTo build the best experiences for Xbox One

Cómo: desactivar el modo de mouseDo: Turn off mouse mode

Los usuarios de Xbox adoran sus controladores.Xbox users love their controllers. Para optimizar la entrada del controlador, deshabilite el modo del mouse y habilite la navegación direccional (también conocida como navegación y interacción con el foco XY).To optimize for controller input, disable mouse mode and enable directional navigation (also known as XY focus navigation and interaction). Vea las capturas de foco y la interfaz de usuario inaccesible.Watch out for focus traps and inaccessible UI.

Cómo: crear un rectángulo de foco que sea adecuado para una experiencia de 10 piesDo: Draw a focus rectangle that is appropriate for a 10-foot experience

La mayoría de usuarios de Xbox tienen la consola conectada a la televisión del salón, así que recuerda que el rectángulo de foco estándar resulta difícil de distinguir a una distancia de 10 pies.Most Xbox users are sitting across the living room from their TV, so keep in mind that the standard focus rectangle is hard to see from ten feet away. Para garantizar que el usuario pueda ver claramente y en todo momento el elemento de interfaz de usuario que tiene el foco de entrada, sigue las instrucciones del foco visual.To ensure that the UI element with the input focus is clearly visible to the user at all times, follow the Focus visual guidelines. En XAML obtendrás este comportamiento de forma gratuita cuando la aplicación se ejecute en Xbox, pero ten en cuenta que para las aplicaciones HTML deberás usar un estilo CSS personalizado.In XAML you will get this behavior for free when your app runs on Xbox, but HTML apps will need to use a custom CSS style.

Cómo: integrar con la clase SystemMediaTransportControlsDo: Integrate with the SystemMediaTransportControls class

A los usuarios de Xbox les gusta controlar las aplicaciones multimedia con el mando multimedia Xbox, Cortana (especialmente los comandos de voz "Reproducir" y "Pausa") y Xbox SmartGlass.Xbox users want to control media apps with the Xbox Media Remote, Cortana (especially the "Play" and "Pause" voice commands), and Xbox SmartGlass. Para obtener estas características de forma gratuita, la aplicación debe usar la clase SystemMediaTransportControls, que se incluye automáticamente en los controles multimedia de Xbox.To get these features for free your app should use the SystemMediaTransportControls class, which is automatically included in the Xbox media controls. Si la aplicación tiene controles multimedia personalizados, asegúrate de integrarlos con la clase SystemMediaTransportControls para poder proporcionar estas características a los usuarios.If your app has custom media controls, make sure to integrate with the SystemMediaTransportControls class to provide these features to your users. Si vas a crear una aplicación de música en segundo plano, intégrala con la clase SystemMediaTransportControls para asegurarte de que los controles de música en segundo plano funcionan correctamente en la pestaña de multitarea de Xbox.If you are creating a background music app, integrate with the SystemMediaTransportControls class to ensure that the background music controls work correctly in the Xbox multitasking tab.

A tener en cuenta: dibujar hasta el borde de la pantallaConsider: Draw to the edge of the screen

Muchos televisores cortan los bordes de la pantalla, por lo que todo el contenido de importancia de la aplicación debería mostrarse en la zona segura del televisor.Many TVs cut off the edges of the display, so all of your app's important content should be displayed within the TV-safe area. UWP usa la opción de sobrebarrido para mantener el contenido dentro de la zona segura del televisor, pero ten en cuenta que este comportamiento predeterminado puede dibujar un borde alrededor de la aplicación que puede resultar obvio.UWP uses overscan to keep the content within the TV-safe area, but this default behavior can draw an obvious border around your app. Para proporcionar la mejor experiencia, desactiva el comportamiento predeterminado y sigue las instrucciones que se detallan en Cómo dibujar la interfaz de usuario hasta el borde de la pantalla.To provide the best experience, turn off the default behavior and follow the instructions at How to draw UI to the edge of the screen.

Importante

Si deshabilitas la opción de sobrebarrido, tienes que asegurarte de que los elementos interactivos y el texto permanezcan dentro de la zona segura del televisor.If you disable overscan, it's your responsibility to make sure that interactive elements and text remain within the TV-safe area.

A tener en cuenta: usa colores seguros para el televisorConsider: Use TV-safe colors

Los televisores no administran las intensidades extremas de color tan bien como los monitores.TVs don't handle extreme color intensities as well as computer monitors do. Evita los colores de gran intensidad en la aplicación para que así los usuarios no vean franjas extrañas o imágenes difuminadas.Avoid high-intensity colors in your app so that users don't see odd banded effects or a washed-out image. Asimismo, ten en cuenta las diferencias existentes entre televisores: es posible que aquellos colores que se vean perfectamente en tu televisión, no se vean tan bien en las de los usuarios.Also, be aware that differences between TVs mean that colors that look great on your TV might look very different to your users. Lea los colores para entender cómo hacer que la aplicación tenga un aspecto excelente para todo el mundo.Read Colors to understand how to make your app look great to everybody!

Recuerda: puedes deshabilitar el escaladoRemember: You can disable scaling

Las aplicaciones para UWP se escalan automáticamente para garantizar que los elementos de interfaz de usuario (como los controles y las fuentes) sean legibles en todos los dispositivos.UWP apps are automatically scaled to ensure that UI elements such as controls and fonts are legible on all devices. Aquellas aplicaciones que usan XAML se escalan en un 200 %, mientras que las aplicaciones que usan HTML se escalan en un 150 %.Apps that use XAML are scaled by 200%, while apps that use HTML are scaled by 150%. Si quieres controlar mejor el aspecto de tu aplicación en Xbox, deshabilita el factor de escala predeterminado y usa las dimensiones en píxeles reales de una HDTV (1920 x 1080).If you want more control over how your app looks on Xbox, disable the default scale factor to use the actual pixel dimensions of an HDTV (1920x1080). Si quieres obtener información acerca de cómo conseguir que tu aplicación tenga un aspecto genial en Xbox, échale un vistazo a Cómo desactivar el ajuste de escala y Escalado y píxeles efectivos.Take a look at How to turn off scaling and Effective pixels and scaling for information about tailoring your app to look great on Xbox.

Si quiere obtener una visión de estos procedimientos aplicados a una aplicación de UWP, eche un vistazo a este vídeo.If you want to get a glimpse of these practices applied to a UWP app, check out this video!

Channel 9Channel 9

Las siguientes conversaciones sobre Channel 9 son una excelente fuente de información para compilar aplicaciones increíbles en Xbox:The following talks on Channel 9 are a great source of information for building amazing apps on Xbox:

Desarrollo de aplicaciones en XboxApp Dev on Xbox

El evento App dev on Xbox es un excelente punto de partida para que los desarrolladores empiecen a compilar aplicaciones en Xbox.The App Dev on Xbox event is a great starting point for developers new to building apps on Xbox.

Vea tambiénSee also