[ASP.NET] IE 9 + W7: Anclando el sitio

Posted on


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

<meta name=”application-name” content=”Ejemplos Internet Explorer 9″ />

msapplication-tooltip

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

<meta name=”msapplication-tooltip” content=”Abrir sitio en el explorador” />

msapplication-navbutton-color

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

<meta name=”msapplication-navbutton-color” content=”Green”/>

msapplication-task

Permite agregar una tarea al jumplist del sitio.

<meta name=”msapplication-task” content=”name=Google;action-uri=http://google.com.co;icon-uri=images/bomb.ico”/>

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

   1:  <meta name="application-name" content="Ejemplos Internet Explorer 9" />
   2:  <meta name="msapplication-tooltip" content="Abrir sitio en el explorador" />
   3:  <meta name="msapplication-navbutton-color" content="Green" />
   4:  <meta name="msapplication-window" content="width=800; height=600" />
   5:  <link rel="icon" type="image/ico" href="images/Bomb.ico"/>
   6:  <link rel="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:              return false;
   5:          }
   6:          else {
   7:              return true;
   8:          }
   9:      }
  10:      catch(ex){
  11:          return false;
  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 !

2 comentarios sobre “[ASP.NET] IE 9 + W7: Anclando el sitio

    […] [ASP.NET] IE 9 + W7: Anclando el sitio […]

    […] [ASP.NET] IE 9 + W7: Anclando el sitio […]

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