Cómo conectar tu sitio Web a tu aplicación Windows 8


Las aplicaciones de estilo Metro de Windows 8 conducen las experiencias de los sitios web a una nueva dimensión. Con las aplicaciones estilo Metro ahora podemos crear experiencias más envolventes, más bonitas y mejor conectadas con otras aplicaciones y con el resto del entorno Windows. Las aplicaciones pueden emplear el Runtime de Windows para ofrecer funcionalidades que van mucho más allá de lo que es posible desde un navegador por sí solo, como por ejemplo el acceso directo a archivos y carpetas, la integración con Windows 8 Charms para buscar y compartir contenidos y la interacción con dispositivos conectados al equipo. La tienda Windows Store nos va a ofrecer una excelente experiencia de usuario a la hora de navegar, buscar y descargar las aplicaciones que más interesan a los usuarios. En este post voy a comentar las características de Internet Explorer en estilo Metro en Windows 8 que permiten conectar los sitios Web a las aplicaciones. Además vamos a ver los mecanismos que los desarrolladores Web tienen a su disposición para crear esta conexión.

Navegar para buscar aplicaciones

Navegar por la web es la forma natural de encontrar y conectarnos a aplicaciones estilo Metro. Internet Explorer estilo metro te permite saber cuándo están disponibles las aplicaciones para tus sitios preferidos. Empezando por la barra de direcciones, puedes comprar de la forma más sencilla las aplicaciones desde la tienda Windows Store y puedes pasar a utilizar las aplicaciones instaladas desde sus sitios Web asociados.

Después de crear una aplicación estilo Metro, los desarrolladores pueden llegar a la audiencia actual del sitio Web simplemente añadiendo un poco de código HTML a las páginas, para establecer una conexión con sus aplicaciones. Esta conexión facilita a los usuarios el descubrimiento de las aplicaciones directamente desde la barra de direcciones de Internet Explorer estilo Metro cuando visitan el sitio web.

clip_image001Acceso a la aplicación

Basta con navegar a tus sitios Web preferidos y descubrir que tienen aplicaciones asociadas con ellos, mediante el icono del propio site. El icono del site se convierte en un botón en el momento en que IE descubre que hay una aplicación para ese sitio. Pulsando en él vemos la descripción de la aplicación disponible en la Windows Store.

Paso a la aplicación

Cuando estamos dentro de un sitio web con una aplicación estiloclip_image002 Metro instalada y asociada a él, podemos cambiar directamente a esa aplicación utilizando el botón del site. Por ejemplo, un amigo nos envía un enlace a un contenido Web mediante el correo o por alguna red social, y el enlace abre el navegador estilo Metro. Si existe alguna aplicación asociada a este sitio web, podemos pulsar en el icono del sitio web y seleccionar “Switch to the app,” para arrancarla, de modo que tendremos el mismo contenido dentro de la aplicación.

 

Podemos ver cómo funciona en el vídeo siguiente (en inglés):

Este vídeo muestra cómo Internet Explorer estilo Metro conecta sitios web con aplicaciones estilo Metro de Windows 8


El trasfondo

Los desarrolladores pueden asociar sus sitios web con sus aplicaciones para Windows 8 mediante un sencillo código de markup en el propio sitio web, incluyendo las siguientes etiquetas META en el elemento <head> de sus páginas. Ambas etiquetas son necesarias para que Internet Explorer estilo Metro visualice el icono del sitio web como botón.

<meta name="msApplication-ID"content="microsoft.build.App"/>

<meta name="msApplication-PackageFamilyName"content="microsoft.build_8wekyb3d8bbwe"/>

Cuando ambas etiquetas están presentes, IE estilo Metro las utiliza para determinar si la aplicación ya está instalada en el PC y, en caso contrario, ofrecer un enlace directo a la página de descripción de la misma en Windows Store. La versión de escritorio de IE10 sobre Windows 8 no ofrece este enlace automático.

Estas dos etiquetas necesarias son algunas delas cinco posibles etiquetas <META> que existen para controlar la interacción sitio web/tienda/aplicación. Esta es la lista completa:

nombre

contenido

msApplication-ID

Obligatoria. El ID de la aplicación relativa al paquete, dentro del Manifiesto de la Aplicación. Se utiliza para enlazar el sitio web a la aplicación.

msApplication-PackageFamilyName

Obligatoria. El Nombre de Familia del Paquete correspondiente a la aplicación creada con Visual Studio en el momento de su publicación. Se utiliza para enlazar el sitio web con la tienda.

msApplication-Arguments

Opcional. Es un argumento en forma de cadena de texto que se pasa a la aplicación. Por defecto, IE pasa el URL de la página Web, pero podemos utilizarlo para enviar cualquier cadena de texto que nos interese.

msApplication-MinVersion

Opcional. Indica el número mínimo de versión exigido para la aplicación instalada. Si el usuario quiere pasar desde la página Web a una aplicación obsoleta, antes se le hace pasar por la Tienda para actualizarla.

msApplication-OptOut

Opcional. Permite utilizar de manera optativa toda o parte de estas funcionalidad:

  • “install” impide que se ofrezca al usuario la posibilidad de instalar la aplicación si no la tiene ya instalada
  • “switch” impide que el usuario pueda tener la opción de pasar a una aplicación ya instalada
  • “both” evita la presentación de ambas posibilidades al usuario.

Procesamiento de msApplication-Arguments

Los desarrolladores pueden crear las mejores experiencias para los consumidores si se aseguran de que hay un contexto adecuado para pasar del sitio web a la aplicación. Por ejemplo, en el vídeo anterior, cuando el usuario pasa a la aplicación mientras está leyendo un comentario sobre un teléfono en el sitio web, la aplicación lleva automáticamente al usuario hacia ese mismo artículo sobre el teléfono, pero dentro de la aplicación. Con ello los usuarios disponen de una experiencia continua y fluida de paso desde el sitio web a la aplicación.

Esto se hace con msApplication-Arguments. La cadena de contexto de esta etiqueta meta se pasa a la aplicación como argumento. La aplicación analiza este parámetro y lleva a los usuarios al contenido relevante desde este nuevo entorno.

El siguiente fragmento de código muestra cómo se gestiona este parámetro en una aplicación estilo Metro escrita en HTML/JavaScript:

// Function available in default.js file in Visual Studio Express 11 templates provided in Developer Preview Build

WinJS.Application.onmainwindowactivated = function (e) {

    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

        // Insert this code to handle incoming argument when Metro style Internet Explorer launches the app

        if (e.detail.arguments) {

            // Parse the value of the msApplication-Arguments string

            // Direct incoming user to relevant in-app content

        }

    }

}

Este fragmento podría utilizarse en una aplicación estilo Metro creada en XAML/C#

// Function available in App.xaml.js file in Visual C# templates provided in Developer Preview Build Visual Studio Express 11

partial class App

{

    protected override void OnLaunched(LaunchActivatedEventArgs args)

    {

        // Insert this to handle incoming arguments, when Metro Style Internet Explorer launches the app

        if (!String.IsNullOrEmpty(args.Arguments))

        {

            // Parse the value of the msApplication-Arguments string

            // Direct incoming user to relevant in-app content

        }

    }

}

Conclusión

Internet Explorer estilo Metro permite al usuario descubrir y experimentar la Web a través de aplicaciones estilo Metro asociadas. Con ello los programadores pueden derivar a la audiencia actual de sus sitios web hacia sus aplicaciones, y con ello habilitar nuevas oportunidades para interactuar con los usuarios y ofrecerles una experiencia mucho más rica y avanzada desde Windows 8.

Fuente: Rahul Lalmalani – http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-your-web-site-to-your-windows-8-app.aspx

 

Saludos,

El equipo de MSDN España

Comments (0)

Skip to main content