Hola a todos, desde hace tiempo he querido hacer algunos post sobre las nuevas características de Internet Explorer 9 y su forma de integración con Windows 7, así que este será el primer post que estaré haciendo, de al menos un grupo de 4 que estaré publicando.

Y las características que tenemos disponibles son:

  • Añadir sitio al menú inicio
  • Añadir sitio a la barra de tareas
  • Añadir tareas al JumpList
  • Añadir categorías al JumpList
  • Añadir ítems a una categoría del JumpList
  • Iconos de notificación
  • Botones en Thumbnail
  • Solicitar interacción del usuario

La integración de Internet Explorer 9 con Windows 7 no es exclusiva de aplicaciones realizadas con ASP.NET, podemos aprovechar todo este set de funcionalidades con aplicaciones realizadas en PHP o solo HTML.

En esta primera entrega vamos a revisar como podemos acondicionar nuestro sitio para poder ser añadido a menú inicio y posteriormente anclarlo en la barra de tareas.

Antes de comenzar a echar código, debemos conocer la información meta que debe tener nuestro sitio:

Propiedad

Descripción

Ejemplo

application-name

Texto a mostrar en el menú inicio o en el icono de la barra de tareas

msapplication-tooltip

Texto mostrado como tooltip de la entrada en el menú inicio.

msapplication-navbutton-color

Color de los botones adelante y atrás del navegador.

msapplication-task

Permite agregar una tarea al jumplist del sitio.

Entonces el head de nuestro sitio se verá algo así:

1: <metaname="application-name"content="Ejemplos Internet Explorer 9"/> 2: <metaname="msapplication-tooltip"content="Abrir sitio en el explorador"/> 3: <metaname="msapplication-navbutton-color"content="Green"/> 4: <metaname="msapplication-window"content="width=800; height=600"/> 5: <linkrel="icon"type="image/ico"href="images/Bomb.ico"/> 6: <linkrel="shortcut icon"type="image/x-icon"href="images/Bomb.ico"/>

Luego lo que debemos hacer es verificar si el sitio ya se encuentra anclado y si el browser que usamos es compatible o no, esto lo logramos mediante JavaScript utilizando window.external.mslsSiteMode(), así que vamos a crear una función para realizar esta tarea:

1: function CheckFeatures(){ 2: try { 3: if (window.external.msIsSiteMode()){ 4: returnfalse; 5: } 6: else { 7: return true; 8: } 9: } 10: catch(ex){ 11: returnfalse; 12: } 13: }

Ahora vamos a crear una función que nos añada el sitio al menú inicio:

1: function AddMenuInicio() { 2: try { 3: window.external.msAddSiteMode(); 4: } 5: catch(ex) { 6: alert('No es posible añadir el sitio al menú inicio.'); 7: } 8: }

Listo ya tenemos las dos funciones definidas, ahora vamos a crear un botón que tendrá dos funciones, 1 verificar si es posible añadir el sitio y 2 anclar el sitio, para manejar el evento click vamos a hacer uso de jQuery para no tener que hacer uso de JavaScript inline, entonces tendríamos:

1: $(function() { 2: $("#btnAnclar").click(function() { 3: if (!CheckFeatures()) 4: alert('El sitio no puede ser anclado.');} 5: else 6: AddMenuInicio(); 7: }); 8: });



Entonces una vez demos click en Anclar sitio vamos una ventana como esta:

Imagen1

Dicha ventana nos esta informando el nombre del sitio, de donde proviene y finalmente que se añadirá en el menú inicio, una vez aceptemos inmediatamente se abrirá el sitio ya anclado y lucirá algo así:

Imagen2

Y en el menú inicio:

Imagen3

Listo y finalmente para anclar el sitio a la barra de tareas lo que debemos hacer es sobre la entrada den el menú inicio darle click derecho y decirle anclar a la barra de tareas.

Ha sido un poco largo el post, pero como ven es bastante sencillo, en el próximo post vamos a ver como podemos añadir tareas al JumpList.

Como siempre les dejo el código con el ejemplo:

Descarga del ejemplo !