Modo Anclado (Pinned Mode) con Internet Explorer 9 Beta. Parte I

  • Artículo

 

Autor: Javier Yagüe Sánchez

MSP – Developer Evangelist Junior at Microsoft

Introducción

Internet Explorer 9 ofrece a los desarrolladores web una forma sencilla de integrar sus webs en el escritorio de Windows 7. En este tutorial veremos cómo hacer que nuestra web, utilizando la API de SiteMode, se integre en la barra de tareas o en el menú inicio, y acceder a las nuevas funcionalidades de este explorador, como pueden ser Jump List, categorías, tareas, superponer iconos…

Añadir la web al menú inicio

Los Pinned Sites, permiten a cualquier web ser añadida en el Menú Inicio usando los comandos “Archivo” y “Página” (Añadir al menú inicio), o arrastrando y soltando el icono de la barra de direcciones en el Menú Inicio, lo que permitirá a nuestra web estar en la lista de “Todos los programas”.

El mecanismo es muy simple, y se consigue con unas cuantas líneas de código HTML. Hay varios modos de hacerlo. Nos creamos un archivo Javascript, en este ejemplo lo vamos a llamar scriptsIE9.js, donde iremos introduciendo los siguientes métodos para invocarlos posteriormente:

 

function AddToStartMenu() { window.external.msAddSiteMode(); }

Ahora lo único que debemos hacer es crear una etiqueta HTML que llame a este método. En el apartado de “Acciones de IE9”:

<li><a onclick="AddToStartMenu();" href="#">Añadir al menú inicio</a></li>

Podemos comprobar si el explorador soporta la API de SiteMode con la siguiente linea:

If (window.external.msIsSiteMode) {…}

También se pueden usar etiquetas META para personalizar la información que se mostrará en el Menú Inicio.

  • Definición del nombre de la aplicación.
<meta name="application-name" content="Music Table" />
  • Definición del mensaje tooltip.  
<meta name="msapplication-tooltip" content="Music table Web" />
  • Definición del tamaño de la ventana cuando ésta sea abierta.
<meta name="msapplication-windows" content="width=1500;height=900" />
  • Definición del icono que aparecerá en el Menú Inicio.
<link rel="Shortcut Icon" href="images/Logo3.ico"/>

Definición de tareas en el Jump List

Las tareas en el Jump List son acciones específicas que están ligadas a la web. Esta opción puede representar los sitios más comunes de nuestra web, las cuales podrán ser accesibles directamente desde el Menú Inicio, sin necesidad de tener el explorador abierto. Si posteriormente se cambian estas opciones habrá que volver a agregar nuestro site al menú inicio. En el ejemplos de Music Table hemos definido dos tareas, “Home” y “Recursos”, las cuales se han implementado con etiquetas META. La estructura de esta etiqueta es la siguiente:

 

Name: debemos identificarlo como “msapplication-task”.
Content:
   Name: el nombre de la tarea.

   Action-uri: la URL donde se dirigirá la tarea.

   Icon-uri: la URL donde se encuentra el icono que queramos asociar a la tarea.

<meta name="msapplication-task" content="name=Home; action-uri=https://localhost:3198/default.htm;icon-uri=images/Logo3.ico" />

<meta name="msapplication-task" content="name=Recursos; action-uri=https://localhost:3198/resources.htm;icon-uri=images/MAX.ico" />

Definir Categorías en el Jump List y añadirle elementos

Las categorías en las Jump List permiten al usuario acceder a información contextual según el detino. Por ejemplo, en el caso de Music Table, tenemos una categoría “Música” en la que hemos añadido los elementos “Popular”, “Pop” y “Rock”. Todos los métodos se encuentran en el archivo scriptsIE9.js La definición de las categorías debe seguir los siguientes pasos:

  • Crear la Categoría: éste método debe ser el primero en ser llamado antes de escribir los elementos de la categoría. El siguiente código crea la categoría “Música”:
window.external.msSiteModeCreateJumplist('Música');
  • Añadir elementos a la Categoría: los elementos se cargarán en memoria pero no se mostrarán. En este caso los elementos son “Popular”, “Rock” y “Pop”. El primer parámetro es el nombre del elemento, el segundo parámetro es la URL a la que apunta el elemento, y el tercer parámetro es la ruta del icono que queremos asociar al elemento de la lista.
window.external.msSiteModeAddJumpListItem('Rock', 'https://localhost:3198/rock.htm', 'https://localhost:3198/images/WHALE.ico');

window.external.msSiteModeAddJumpListItem('Pop', 'https://localhost:3198/pop.htm', 'https://localhost:3198/images/JEREMY.ico');

window.external.msSiteModeAddJumpListItem('Popular', 'https://localhost:3198/popular.htm', 'https://localhost:3198/images/MAX.ico');
  • Mostrar la lista de elementos: una vez cargados los elementos de la lista, llamamos al método msSiteModeShowJumpList
window.external.msSiteModeShowJumplist();
  • Quitar todos los elementos de la Categoría: si queremos limpiar todos los elementos de la lista debemos invocar el método:
Window.external.msSiteModeClearJumplist();

Mostrar iconos superpuestos

Podemos agregar iconos que se superpongan al de nuestra web de manera dinámica, añadiendo sencillos métodos JavaScript  a nuestro código. En nuestro ejemplo añadimos un icono desde una etiqueta HTML de enlace, llamando al método AddOverlayIcon(), que a su vez llamará a msSiteModeSetIconOverlay con la URL del icono que queremos mostrar y el nombre que lo identifique. Para quitarlo llamaremos al método QuitOverlayIcon() que llamará a su vez al método msSiteModeClearIconOverlay:

function AddOverlayIcon() { window.external.msSiteModeSetIconOverlay('https://localhost:3198/images/YellowSubmarine.ico', 'Overlay1'); }

function QuitOverlayIcon() { window.external.msSiteModeClearIconOverlay(); }