October 3rd, 2010 by JuanK

Continuando con la serie de artículos dedicados a aprovechar en este blog las características de IE9, en este artículo enseñaré a utilizar la características agregar un sitio al menú de inicio y de utilizar  de Pinned Sites.

*Desde luego este artículo describe como utilizar estas características desde el punto de vista de un programador o de un web master, no desde el punto de vista del usuario final.

Estas características las podemos utilizar para que el usuario habitual de nuestro sitio tenga una manera fácil y directa de acceder a el , al tiempo que le brindamos  funcionalidades adicionales que harán más enriquecedora su experiencia de navegación.

Adicionar nuestro sitio al menú de inicio

Esta funcionalidad permite al usuario agregar nuestro sitio como si fuera una aplicación más del menú de programas, si bien el usuario puede hacerlo a través de las opciones de Internet Explorer, nosotros podemos colocar un shortcut que lo haga desde nuestro propio sitio.

Antes de utilizar las instrucciones que nos permiten hacer ello es importante asegurarnos de dos cosas, primero que el el usuario este utilizando Internet Explorer 9, ya que de lo contrario el script fallará y segundo verificar que nuestro sitio no este ya previamente abierto como Pinned Site, para fortuna nuestra ambas validaciones las podemos hacer con el método msIsSiteMode de la siguiente forma.

try {
     if(window.external.msIsSiteMode()) { }
     else {}
}
catch(e) { }

 
Como se puede ver, sino estas en IE9 se ira por la exception, de lo contrario se ejecutará normalmente. Este método nos sirve para identificar si el sitio ha sido abierto normalmente o desde un pinned site.
 
Una vez estamos seguros, podemos utilizar un código HTML como este para que el usuario agregue nuestro sitio al menú inicio:
 
<a onclick="window.external.msAddSiteMode();" href="#">Adicióname al menú de inicio!</a><br />
 
Adicionar nuestro sitio a la barra de inicio, como Pinned Site
 
Para hacer esto no existe una API que nos lo permita hacer, el usuario debe por consentimiento propio anclar nuestro sitio a la barra.  Esto lo puede hacer de dos formas
 
1- Una vez instalado nuestro sitio en el menú de inicio, ejecutarlo y cuando este en ejecución dar click derecho sobre el icono y seleccionar la opción “anclar este programa a la barra de tareas”.
 

2- Cuando el usuario este navegando en el sitio puede tomar con el mouse la pestaña de IE9 y arrastrarla hasta la barra de inicio para finalmente liberarla allí.

 
 
Un conjunto de cosas Importantes
 
Cuando un usuario configura un sitio como pinned site hay varias características que debe notar al acceder al sitio:
 

los colores de los botones de IE9 se modifican automáticamente de acuerdo al color predominante en el favicon del sitio 
como ahora se abre un IE9 optimizado para nuestro sitio, ya no aparece el botón “home”  (la casita) en los comandos de IE9 
en el costado izquierdo de la barra de navegación aparece el favicon de nuestro sitio 
si el usuario hace clic derecho sobre el icono de nuestro sitio se despliegan opciones personalizadas para nuestro sitio, a diferencia de si hace clic derecho sobre la ventana de IE en cuyo caso se despliegan las opciones normales para el browser 

Características como los colores de los comandos, el icono , y el contenido de las JumpList (las opciones) puede ser modificados por nosotros como desarrolladores, y ese será el tema de nuestros próximos artículos.
 
Sin embargo y como adelanto necesario, hay un tema que no da espera. 
 
Recomendaciones para los íconos.
 
Si bien por defecto IE9 utilizara el favicon de nuestro sitio, es probable que no contemos con un ícono de la calidad adecuada para ser desplegado en la hermosa barra de Windows 7 ni dentro de IE9.
 
Mi recomendación es que tengan como mínimo un ícono en formato .ico y con las siguientes dimensiones:

48×48 
32×32 
16×16 

Si fuera posible lo óptimo es utilizar un ícono con las siguientes dimensiones:

16×16 
24×24 
32×32 
64×64 

 
Respecto al color lo mejor es tener cada una de las resoluciones del ícono con los siguientes tipos de color

32 bit (paleta XP) 
8 bit (256 colores) 

 
Es decir como mínimo nuestro ícono debe contener 6 imágenes con las diferente resoluciones y combinaciones de color.
 
Para el caso de este blog (“Ideas de un Conejo”) el ícono utilizado esta a: 16×16,24×24,32×32,64×64 a 8 y 32 bit de color.
 
Si bien Visual Studio permite crear y trabajar con iconos, mi recomendación es que utilicen un programa especializado en el tema, a mi personalmente este me parece el mejor ( y es gratis ): IcoFX
 

 
Hasta la próxima.
Artículos de la serie: 
IE9 – Adicionando el sitio al menú de inicio y como “Pinned Site”
IE9 – Personalizando el sitio cuando es lanzado como “Pinned Site”
IE9 – Definiendo opciones para el “Pinned Site” en el JumpList
IE9 – Mostrando overlay icons
Follow @JuanKRuiz