Internet Explorer 9 en Modo Anclado

Este artículo forma parte de una serie sobre Internet Explorer para explicar el nuevo modo de anclado.

Internet Explorer 9 en Modo Anclado

Utilizando la Jumplist de IE9

Creando ThumbBar Buttons de IE9

Añadiendo Overlay Icons de IE9

 

¿Tenéis una web o un blog? ¿Queréis dar una característica extra a vuestros clientes?

Internet Explorer 9 ha nacido bajo el concepto de la web es la protagonista y no el navegador. A fin de cuentas, el usuario quiere navegar por la web y no por el propio navegador. No quiere verse abrumado con cientos de características y ventanas del navegador, simplemente quiere ver la web. Basándose en esto, IE9 añade el concepto de anclar la web a nuestra barra de tareas de Windows 7. Permitiendo que nuestra web se convierta en aplicación, y quede anclada a la barra de tareas e integrada con Windows 7.

El principal objetivo es el de crear un enlace permanente con nuestros usuarios, pudiendo además ahorrar el tiempo de nuestros usuarios habituales y conduciéndolos a las páginas que quieren visitar.

image

El primer paso será descargar Internet Explorer 9 en

http://windows.microsoft.com/ie9?os=win7&arch=b&browser=ie9

 

Anclando mí sitio web

En Internet Explorer 9 el usuario podrá arrastrar el favicon de la página a su barra de tareas. Cuando el usuario hace el anclaje de la web a la taskbar de Windows, esta se añadirá como si se tratara de cualquier otra aplicación de Windows. Automáticamente se creará una instancia de Internet Explorer que será personalizada con la imagen y el color principal del sitio.

Aunque arrastrar el favicon no es la única manera que podemos hacer para que nuestro usuario ancle nuestra web, también podemos crear un botón de instalación y colocarlo en nuestra página.

Estos métodos no son exactamente iguales, y es que no es lo mismo que el usuario siendo consciente de lo que hace, arrastre el favicon a la barra de tareas, a que se llame a una función de javascript y lo haga. Por eso, mediante la función de instalación, nuestra web sólo aparecerá en la lista de programas del menú de inicio, mientras que con el anclado desde el favicon se añadirá tanto a la lista de programas del menú de inicio como a la taskbar. Esta diferencia es debido a que se podría hacer un mal uso de la llamada a instalación de SiteMode e incluir en la barra de usuario una gran cantidad de iconos.

Cuando el usuario pulsa en nuestro botón personalizado de instalación aparecerá una ventana de aviso al usuario, donde se le preguntará al usuario si confía en nuestro sitio y web y por tanto quiere instalarla en SiteMode.

image

Para hacer la instalación sólo necesitaremos incluir un botón y en el manejador del evento click, hacer una llamada a msAddSiteMode.

   1:  <button onclick="addWebApp()" 
   2:       class="installButton"
   3:       title="Instala Softonic.">Instala Softonic</button>
   4:   
   5:   
   6:  <script type="text/javascript">
   7:          function addWebApp() {
   8:              try {
   9:                  window.external.msAddSiteMode();
  10:              }
  11:              catch (ex) {
  12:                  // Site Mode no soportado
  13:                  alert("Instala Internet Explorer 9.");
  14:              }
  15:          }
  16:  </script>

He añadido la captura de excepciones ya que el método windows.external.msAddSiteMode() sólo existe en IE9 y debemos controlar la excepción en el resto de navegadores. Lo siguiente será añadir un manejador para el evento “mssitemodeinstalled” que nos avisará de cuando el usuario ha instalado correctamente la aplicación. Este sería un buen lugar para conocer cuántos de los usuarios han instalado nuestro sitio web en SiteMode.

   1:  <script type="text/javascript">
   2:  window.onload = function () {
   3:              try {
   4:  document.addEventListener('mssitemodeinstalled', function() {
   5:                      alert("Tu aplicación fue instalada correctamente.");
   6:                  }, false);
   7:              }
   8:              catch (ex) {
   9:                  // Site Mode no soportado
  10:                  alert("Instala Internet Explorer 9.");
  11:              }
  12:          }
  13:  </script>

Una vez instalada, como habéis podido imaginar, los favicons se convierten en elementos principales en la nueva experiencia de IE9. Para añadirlos se añadiría al principio de nuestra página:

   1:  <link id="Link1" runat="server" rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
   2:  <link id="Link2" runat="server" rel="icon" href="favicon.ico" type="image/x-icon" />

En cuanto a los iconos que debemos incluir para el anclado de nuestro site deben seguir unas ciertas recomendaciones. Estas recomendaciones son que los iconos deben ser .ico y sus resoluciones deberán corresponder a la siguiente tabla:

Feature

Version

96 dpi

120 dpi

144 dpi

Etiqueta de Nueva pestaña

IE9

32×32

40×40

48×48

Modo Anclado: barra de tareas, menú inicio

IE9

32×32

48×48

64×64

Modo anclado: Icono superior del navegador

IE9

24×24

32×32

48×48

Pestaña y favoritos

IE8 and IE9

16×16

24×24

24×24

Para crear los iconos en todas las resoluciones dentro del mismo favicon recomiendo:

http://ie.microsoft.com/testdrive/Browser/IconEditor/Default.html

http://www.icoconverter.com/ (Es más intuitivo)

Por defecto todas las webs podrán participar en esta nueva experiencia sin necesidad de tener que incluir ninguna nueva línea de código en ellas. IE9 utilizará el favicon de la página y aplicará el color predominante del favicon en personalizar diferentes elementos de IE9.

Aunque también podremos especificar esto utilizando Metas que incluiremos al principio de nuestra página:

Nombre de la aplicación que se mostrará en el menú de inicio.

   1:  <meta name="application-name" content="Softonic" />

Descripción de la aplicación que aparecerá como mensaje de ayuda en el menú de inicio.

   1:  <meta name="msapplication-tooltip" content="Softonic en Site Mode" />

Dirección de nuestro sitio web.

   1:  <meta name="msapplication-starturl" content="http://www.softonic.com/" />

Resolución a la que queremos que se abra el navegador de nuestra aplicación. Si se omite el navegador se abrirá a pantalla completa.

   1:  <meta name="msapplication-window" content="width=1024; height=768" />

Color principal de nuestro site. También puede ponerse en modo RGB hexadecimal.

   1:  <meta name="msapplication-navbutton-color" content="blue" />

SiteMode

Para mejorar la experiencia introducida por el modo de anclaje (Pinned Mode), se pueden desarrollar otras características que permitirán una nueva forma de interacción con nuestros usuarios.

Internet Explorer 9 en Modo Anclado nos permite incorporar sobre el icono de aplicación de nuestra aplicación web tres nuevas funcionalidades propias de Windows 7. Recuerda que no tienes por qué añadir todas, puedes incorporar las que creas necesarias:

– Añadir tareas y categorías a la Jumplist.

– Añadir ThumbBar Buttons.

– Añadir iconos de notificación “Overlay icons”.

clip_image006

Si tenéis cualquier duda no os cortéis en preguntar.

Más información en:

– La web de MSDN

http://msdn.com/ie

– Ejemplos

http://www.softonic.com

http://www.amazon.com

http://www.facebook.com

– Más en http://www.beautyoftheweb.com/

3 comentarios sobre “Internet Explorer 9 en Modo Anclado”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *