[Windows 8] Splash Screen

Posted on


Artículo escrito por: Néstor Fernández.

Twitter: @xamlparaadeptos

Toda aplicación de Windows 8 debe tener un splash screen compuesto por un fondo de color y una imagen. El splash screen se presenta al usuario cada vez que inicie la aplicación y debería ser visible mientras esta se alista para presentar otra información o cuando pueda interactuar con el usuario.

SplashScreen02

Aunque el splash screen es obligatorio existen algunas directivas que se recomienda seguir para implementar uno.

Uso Apropidado del Splash Screen

El splash screen debe identificar claramente tu aplicación

Invierte tiempo en la imagen que quieres utilizar en el splash screen. Una imagen clara y expresiva puede atraer más usuarios a utilizar tu aplicación.

¿La aplicación tarda en iniciar?

Windows 8 cierra una aplicación a esta le toma más de 5 segundos en iniciar. Todas las aplicaciones de Windows 8 deben responder lo más rápido posible.

Si la aplicación debe comenzar realizando varias acciones potencialmente demoradas, como descargar contenido desde Internet, lo mejor es implementar un Extended Splash Screen (ESS). Un ESS es una página XAML que, de cierta manera, clona la apariencia del splash screen y retroalimenta al usuario con alguna información que le indique que el proceso de carga se está realizando. De esta manera Windows no cierra la aplicación y para el usuario es claro que no se ha bloqueado.

Para saber más: How to extend the splash screen

Un splash screen debe presentarse lo más limpio posible

No utilices el splash screen para presentar publicidad, varias imágenes o cualquier otra información no relacionada con el proceso de inicio de la aplicación.

Tipo de imagen a utilizar

Una imagen del tipo PNG con transparencia o un JPG es una buena elección y, siempre que sea posible, debes proveer al menos 3 versiones (tamaños) de la misma, que serán utilizadas dependiendo de la resolución del dispositivo:

  • 620 x 300 (1x)
  • 868 x 420 (1.4x)
  • 1116 x 540 (1.8x)

Para agregar un Splash Screen

SplashScreen01

  1. Abrir el archivo "Package.appxmanifest". Este es un archivo XML, pero Visual Studio cuenta con un diseñador que permite editarlo cómodamente.
  2. En el tab "Application UI", en la sección "Splash Screen:" encontraremos la opción "Splash Screen:". Aquí seleccionamos el archivo de imagen (previamente agregado al proyecto) que presentaremos en el Splash Screen. Es muy importante anotar que debe tener las dimensiones 1x, esto es, 620 x 300.
  3. Para definir el color de fondo, en la misma sección, está la opción "Backgroun color:". Donde indicaremos un color con un valor hexadecimal "#RRGGBB". Ejemplo: Para especificar el color rojo: #ff0000

¿Y las imágenes para la resoluciones 1.4x y 1.8x ?

Ya debes haber notado que el editor del manifiesto solo permite especificar una única imagen, pero hemos recomendado proveer 3. No hay problema.

Si solo proveemos una imagen, esa corresponderá a la que indiquemos en la opción "Splash Screen:".

Si vamos a proveer el splash screen en los tres tamaños recomendados estas son las reglas a seguir:

  • La imagen para la resolución 1x debe tener la sintaxis "NombreArchivo.scale-100.ext", por ejemplo: SplashScreen.scale-100.png.
  • La imagen para la resolución 1.4x debe tener la sintaxis "NombreArchivo.scale-140.ext", por ejemplo: SplashScreen.scale-140.png.
  • La imagen para la resolución 1.8x debe tener la sintaxis "NombreArchivo.scale-180.ext", por ejemplo: SplashScreen.scale-180.png.
  • Los tres archivos arriba anotados deben tener como prefijo el mismo nombre de archivo ("NombreArchivo").
  • En la opción "Splash Screen:" seleccionamos el archivo para la resolución 1x.

Y eso es todo. Dependiendo de la resolución del dispositivo que esté ejecutando nuestra aplicación se escogerá automáticamente la imagen adecuada.

PARA SABER MÁS… Adding a splash screen

3 comentarios sobre “[Windows 8] Splash Screen

    […] el link https://julitogtu.wordpress.com/2012/08/20/windows-8-splash-screen/ se explica como implementar nuestra pagina de […]

    Jorge escribió:
    10/10/2012 en 13:49

    Hola!, puse las tres versiones del archivo para las diferentes resoluciones y cuando ejecuto en el simulador siempre me muestra la 1x, que puedo hacer?

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:06

    […] [Windows 8] Splash Screen […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s