Internet Explorer 9 en Modo Anclado

El día 14 de Marzo, Microsoft publicó la versión definitiva de su nuevo navegador Internet Explorer 9. Entre otras novedades que presenta esta versión encontramos una que resulta muy interesante para las aplicaciones Web.

Con Internet Explorer 9 puedes personalizar tu aplicación para integrarse con el escritorio de Windows como cualquier aplicación tradicional. Habilitando el modo anclado de la aplicación los usuarios puede agregar los sitios web a la barra de tareas de Windows, el escritorio o el menú Inicio. El anclaje de sitios facilita el acceso a los sitios favoritos y abre funcionalidades parecidas a los atajos de las aplicaciones para Windows 7.

Esto hace que nuestros usuarios puedan acceder más fácilmente a las áreas que más les interesan, directamente, sin tener que buscar los vínculos en nuestra página de inicio. Este tipo de accesos fideliza a los usuarios, ya que les permite evitar navegaciones más o menos complejas. Al mismo tiempo la individualización de los vínculos que mostramos entre la lista de saltos de una aplicación en modo anclado permite desarrollar una experiencia personalizada para nuestros usuarios.

Por otra parte la implementación es muy sencilla y puede hacerse mediante el uso de tags META o de JavaScript sin modificar el contenido ni los atributos ya existentes.

Internet Explorer 9 en Modo Anclado

Para anclar un sitio todo lo que tenemos que hacer es arrastrar la barra de Url desde Internet Explorer 9 hasta la barra de tareas de Windows 7.

Internet Explorer 9 en Modo Anclado

Desde ese momento el sitio estará anclado a nuestra barra de tareas.

Internet Explorer 9 en Modo Anclado

Internet Explorer 9 nos mostrará un aspecto levemente distinto del sitio.

Internet Explorer 9 en Modo Anclado

Para desanclarlo, todo lo que tenemos que hacer es clic con el botón secundario del ratón y seleccionar Unpin this program from the taskbar, “Desanclar este programa de la barra de tareas”.

Internet Explorer 9 en Modo Anclado

Podemos añadir comportamiento personalizado a este modo anclado mediante dos grupos de APIs. El primer grupo engloba una serie de atributos del sitio. Estos atributos se establecen de forma estática para cualquier usuario del sitio cuando esté anclado y se define mediante el uso de tags META. El segundo grupo de APIs define un conjunto de llamadas que se pueden utilizar de forma dinámica utilizando JavaScript. Este segundo grupo nos permite, si lo deseamos, personalizar la experiencia de anclaje para cada usuario.

Las APIs de IE9 pueden exponer notificaciones, actualizaciones, activar comandos de forma individualizada o global para todos los usuarios y proporcionar acceso rápido a las áreas más interesantes de nuestro sitio.

En How to Pin a Website (en inglés) se puede encontrar información a sobre las APIs y los tags META que expone IE9 en relación al modo anclado (en inglés pinned mode) y en Beauty of the Web(también en inglés) se exponen ejemplos de sitios que utilizan las distintas funcionalidades nuevas de IE9, desde la compatibilidad HTML5 hasta la aceleración hardware de los gráficos.

En este caso, para simplificar el proceso, vamos a contar como hemos implementado el acceso a las áreas de especial interés como Monotemáticos, Secciones, Comunidad, Scripts, etc. Para evitar conflictos en el tratamiento de las tags META por parte los motores de indexación, hemos preferido utilizar la API de JavaScript.

Estas APIs son muy sencillas de utilizar.

Vamos por partes. Lo primero es utilizar un mecanismo de detección de funcionalidades evitando las clásicas comprobaciones de navegador y versión. Para ello disponemos de la función msIsSiteMode. La podemos usar de la siguiente forma:

Internet Explorer 9 en Modo Anclado

Esta forma de detectar capacidades evita la habitual cascada de verificaciones de versión y nos permite centrarnos en verificar si puede hacer lo que queremos.

Las APIs de modo anclado se exponen bajo el objeto window.external y tienen el patrón de nombre msSiteModeXXXXXX. Para crear una lista de saltos nueva utilizaremos:

Internet Explorer 9 en Modo Anclado

Por ejemplo, para nuestro sito podríamos escribir algo como:

Internet Explorer 9 en Modo Anclado

Para añadir una entrada a esta lista de saltos utilizaríamos:

Internet Explorer 9 en Modo Anclado

Es decir si quisiéramos añadir entradas para las secciones principales de nuestro site añadiríamos las siguientes entradas:

Internet Explorer 9 en Modo Anclado

Una vez hemos terminado de añadir entradas a nuestra lista mostramos los resultados:

Internet Explorer 9 en Modo Anclado

Para borrar las listas de saltos:

Internet Explorer 9 en Modo Anclado

Si ponemos todos los elementos juntos:

Internet Explorer 9 en Modo Anclado

Este es el todo código que estamos utilizando en nuestra página de inicio para implementar el modo anclado.

Internet Explorer 9 en Modo Anclado