Tracking del modo anclado

Los usuarios en Windows Internet Explorer 9 pueden anclar cualquier sitio web en la barra de tareas de Windows 7 como si se tratase de una aplicación de escritorio. Cuando un sitio web es anclado, pueden abrirlo rápidamente y comenzar a realizar acciones inmediatamente. Un sitio anclado es mucho más que un enlace directo, sin embargo. Con un poco más de esfuerzo puedes desarrollar una serie de características más avanzadas que ya vimos en artículos anteriores de este blog.

 

Tracking del modo anclado

Lo primero de todo que hay que comprobar es si tus usuarios están o no en modo anclado. Esta es la más importante porque todas las siguientes métricas (Jump List y Thumbnail Toolbar) dependen de esta. Nuestro consejo es que analices todo lo relacionado con el modo anclado (IE9 site mode) como si se tratase de una campaña. La mayoría de herramientas de analíticas en el mercado (Webtrends, Google Analytics) te dejan especificar una campaña, añadiendo algunos parámetros en tus urls. La manera más fácil para hacer esto y comprobar cuando el usuario ha accedido por el modo anclado es añadiendo estos parámetros en el la url definida en el metatag de inicio. Si estás utilizando Google Analytics, lo que deberías hacer es definir la campaña en los parámetros de la url de inicio. Algo así:

<meta name="msapplication-starturl"content="/index.htm?utm_source=ie9&utm_medium=web&utm_campaign=pinned-ie9"/>

Si no quieres utilizar este método para hacer tracking o usar parámetros en la url, siempre puedes usar JavaScript. Cuando tu sitio web es cargado y sabes si está en modo anclado (usando la llamada de JavaScript window.external.msIsSiteMode()) puedes llamar a la función de JavaScript que quieras para incrementar el número de accesos en este modo.

Si estás usando Google Analytics puedes decidir realizar el análisis como un Virtual Page o un Evento.

  1: function onload() {
  2:     if ('external' in window && 'msIsSiteMode' in window.external && window.external.msIsSiteMode()) {
  3:         // puedes usar tracking por eventos
  4:         _gaq.push(['_trackEvent', 'Web', 'Visit', 'IE9Pinned']);
  5:         // o virtual page tracking. ¡No uses ambos!
  6:         _gaq.push(['_trackPageview', '/the-name-of-your-VIRTUAL-page']);        
  7:     }
  8: }
  9: 

 

Finalmente puedes usar un acortador de Urls que también te da estadísticas de uso (como bit.ly). En este caso tu crearás una url para la portada de tu sitio web o para cualquier url que quieras utilizar como inicial) y ponerla en el metatag de url de inicio:

<meta name="msapplication-starturl" content="http://bit.ly/customurl" />

Deberías siempre contactar con tu especialista de analíticas web (si es que existiese Sad smile) y ver qué método se ajusta mejor a tu plan de análisis y la instrumentación que tienes disponible para realizar dichos análisis.

Si lo que quieres es realizar tracking de cómo está funcionando tu campaña de descubrimiento (ver Discoverability), entonces puedes utilizar cookies y usar eventos para comprobar esta información.

Otro evento importante para controlar es el msIsSiteModeFirstRun. Este se produce sólo la primera vez que el usario instala o arrastra la aplicación en la barra de tareas. Además el evento nos devuelve los siguientes valores según la forma de acceder del usuario:

0 — El sitio anclado no está en un estado de primera ejecución.

1 — Es el primer inicio a partir de una operación de arrastrar y colocar.

2 — Este es el primer inicio a partir de un acceso directo en el menú Inicio.

  1: try {
  2:     if (window.external.msIsSiteMode()) {
  3:         // Detectar si es la primera vez que se accede desde el menú de inicio
  4:         if (window.external.msIsSiteModeFirstRun(false) == 2) {
  5:             alert("No olvides anclar esta aplicación a la barra.");
  6:         }
  7:     }
  8: }
  9: catch (ex) {.
 10: }
 11: 

 

Tracking en JumpList

Los elementos de la Jump List actúan como puntos de acceso a tu sitio web. Esta funcionalidad está disponible hasta cuando tu navegador no está funcionando.

clip_image001

Una Jump List puede contener los destinos y las areas más communes de tu sitio web. Y pueden ser específicos para ciertos usuarios o para todos.

 

¿Cómo puedo hacerlo?

Hay dos secciones en la JumpList:

  • Tareas estáticas que son definidas usando meta tags. Estas propiedades puede aparecerán cuando el sitio sea anclado y estarán contenidas en la categoría “Tareas” o “Tasks” según el idioma del sistema operativo. Esta categoría puede contener hasta 5 elementos. Los elementos de esta lista serán los mismos, independientemente del estado de la aplicación.

Deberías usar los tags de campaña para comprobar su uso. Otra vez, si estás usando Google Analytics deberías tener algo como esto:

<metaname="msapplication-task"content="name=News;action-uri=/news.htm?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9;icon-uri=news.ico"/>

  • Tareas Dinámicas son definidas usando APIs de JavaScript. Estas tareas aparecen dentro de la categoría JumpList que has definido. Esta categoría puede contener hasta 20 elementos, aunque sólo se mostrarán los 10 últimos por defecto en la JumpList.

Si utilizaras estos enlaces para redirigir o abrir una nueva ventana del navegador, entonces deberías tratarlo como enlaces de campaña (igual que como los enlaces estáticos). Cuando añades un elemento usando este método, deberías tener algo como lo siguiente si usas Google Analytics:

window.external.msSiteModeAddJumpListItem("Task1", "/task1.htm?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9", "img/task1.ico");

Si estás usandolos para controlar algunas acciones que tienen lugar en la ventana actual sin forzar al usuario a navegar fuera, entonces deberías tratarlos como eventos/acciones. Probablemente ya estés listo para hacer tracking de estos eventos en tu sitio web cuando las acciones se ejecuten. Otra vez, si estás usando Google Analytics deberías tener algo como esto en el manejador del evento:

_gaq.push([‘_trackEvent’, ‘PlayList’, ‘Create’, ‘Jumplist’]);

Donde PlayList es la Categoría. Crea una acción y una etiqueta para identificar la fuente. Otra vez, debes de adaptar estos nombres como mejor se ajuste a tu solución.

 

ThumbBar Button / Thumbnail Toolbar

La thumbnail toolbar es como un control remoto para tu aplicación. Te permite interactuar con un sitio anclado sin tener que abrirlo. Otra buena idea de uso, es utilizarlos para realizar determinadas acciones cuando se le muestra un Overlay Icon (una notificación) al usuario. De esa manera el usuario pasa el ratón por encima de tu aplicación cuando ha mostrado una notificación y en la pre visualización tiene una serie de acciones asociadas a la notificación.

Si recuerdas lo que vivos en el artículo que hablábamos sobre los ThumbBar Buttons, recordarás que están asociadas a un manejador en donde detectaríamos que botón ha sido accionado. Si estás usando Google Analytics deberías realizar en tracking directamente sobre ese Switch donde detectas que botón ha sido pulsado:

_gaq.push([‘_trackEvent’, ‘Audio’, ‘Play’, ‘Thumbbutons’]);

 

 

Espero que os sea de utilidad, y según tengáis resultados asociados a vuestro sitio os rogaría que lo compartierais, para que podamos conocer cómo ha influido en vuestros sitios implementar estas funcionalidades de Internet Explorer 9.

Detectar navegador y S.O. para modo anclado.

Como ya comentamos en el artículo anterior de Discoverability, las nuevas características del modo anclado pueden mejorar mucho la experiencia de nuestros usuarios y sobre todo nos ayudan a tener un contacto más directo con ellos. De esta manera rompemos la dependencia que existe entre el motor de búsqueda y nuestro sitio, con los usuarios que ya son fieles al sitio.

Como ejemplo, el diario norteamericano de noticias online Huffington Post lanzó una serie de datos sobre cómo habían mejorado sus cifras utilizando el modo anclado. En resumen, 11% más de páginas vistas y hasta un 49% más de tiempo de permanencia de sus usuarios. Este último dato se debe a la posibilidad de dejar anclado y abierta la aplicación anclada del Huffington Post y que te notifique con las nuevas noticias que vayan publicando (utilizando Overlay Icons).

En este artículo trataré de complementar el artículo de Discoverability, explicando cómo detectar el sistema operativo y si el navegador soporta el modo anclado de Internet Explorer 9.

Para detectar el sistema operativo podemos usar una detección de navegador utilizando el siguiente código JavaScript, comento sobre el propio código.

  1: this.supportLevel = { none: 0, upgradeable: 1, limited: 2, full: 3 };
  2: this.getOSPinSupportLevel = function () {
  3:   try {
  4:     var userAgent = navigator.userAgent;
  5:     
  6:     // Comprobamos si es Windows 7
  7:     if (userAgent.indexOf("Windows NT 6.1") !== -1)
  8:                 return this.supportLevel.full;
  9: 
 10:     // Comprobamos si es Windows Vista SP2
 11:     else if (userAgent.indexOf("Windows NT 6.0") !== -1)
 12:                 return this.supportLevel.limited;
 13: 
 14:     // Comprobamos si es Windows Vista
 15:     else if (userAgent.indexOf("Windows NT") !== -1)
 16:                 return this.supportLevel.upgradeable;
 17: 
 18:     // Ninguno de los anteriores, Windows XP, MacOS, etc.
 19:     else
 20:                 return this.supportLevel.none;
 21:   } catch (exc) {
 22:     // En caso de un posible error
 23:             return this.supportLevel.none;
 24:   }
 25: }
 26: 
 27: 

Para detectar el navegador lo primero que necesitamos es conocer si el navegador se puede anclar.

this.browserCanPin = (‘external’ in window && ‘msIsSiteMode’ in window.external);

Y también es necesario conocer si el usuario está viendo el sitio anclado.

this.viewingFromPin = (‘external’ in window && ‘msIsSiteMode’ in window.external && window.external.msIsSiteMode());

Utilizando estos métodos ya podemos crear la función de JavaScript para saber si es Internet Explorer 9.

  1: this.abilityLevel = {none: 0, limited: 1, full: 2};
  2:    this.getBrowserPinAbilityLevel = function () {
  3:      try {
  4: 
  5:         var appVersion = navigator.appVersion;
  6:         // Es IE9
  7:         if (this.browserCanPin) {
  8:             // Es IE9 en Windows 7   
  9:             if (appVersion.indexOf("Windows NT 6.0") !== -1)
 10:                     return this.abilityLevel.limited;
 11:             // Es IE9 en Windows Vista
 12:             else
 13:                     return this.abilityLevel.full;
 14:             }
 15:             // No es IE9
 16:             else
 17:                 return this.abilityLevel.none;
 18:       } catch (exc) {
 19:             return this.abilityLevel.none;
 20:       }
 21:   }
 22: 

Para hacerlo menos complejo y facilitar el uso de los métodos anteriores, hemos creado una serie de propiedades resumen.

 

  1: this.hasFullPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.full);
  2: this.hasLimitedPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.limited);
  3: this.hasNoPinAbilityBrowser = (this.getBrowserPinAbilityLevel() === this.abilityLevel.none);
  4: 
  5: this.hasFullPinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.full);
  6: this.hasLimitedPinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.limited);
  7: this.hasUpgradeablePinSupportOS = (this.getOSPinSupportLevel() === this.supportLevel.upgradeable);
  8: this.hasNoPinSupportOS = (this.getOSPinSupportLevel() == this.supportLevel.none);
  9: 

 

Para ver un ejemplo de uso de cómo podemos usarlo para hacer las comprobaciones, os dejo el siguiente ejemplo.

  1: if(pinnedSiteDetection.browserCanPin){
  2:     // Estamos en IE9
  3:     if(pinnedSiteDetection.hasFullPinSupportOS){
  4:         // Estamos en Windows 7
  5:         // Comprobamos si está anclada
  6:         if(pinnedSiteDetection.getDaysSincePinAccess() > -1){
  7:            // IE9 Anclado
  8:         }else{
  9:            // IE9 No anclado
 10:         }
 11:     }else{
 12:         // Estamos en Windows Vista
 13:     }   
 14: } else if(pinnedSiteDetection.hasFullPinSupportOS){
 15: // Estamos en W7 pero no en IE9  
 16: }else if(pinnedSiteDetection.hasNoPinSupportOS){
 17: // Estamos en Windows XP u otros.
 18: }else if(pinnedSiteDetection.hasLimitedPinSupportOS){
 19: // Estamos en Windows VIsta
 20: }
 21: 

Todo este código para detector el navegador y el sistema operativo, lo hemos empaquetado en una librería de JQuery que podéis utilizar, y que además utiliza el Storage de HTML5 para almacenar el tiempo que lleva anclada la aplicación. Todos estos datos son muy útiles a la hora de realizar analíticas sobre el efecto que provoca que nuestros usuarios anclen nuestro sitio web.

Ejemplo en http://redsandbox.net/concepts/discoverability2/

Librería JavaScript en http://redsandbox.net/concepts/discoverability2/scripts/ie9.discoverability.js

 

Espero que os sea de utilidad.

Discoverability en IE9

Uno de los aspectos más importantes cuando se desarrolla el nuevo modo anclado de Internet Explorer 9, es cómo hacer para dar a conocer entre los usuarios las nuevas funcionalidades desarrolladas.

Es muy complicado que los usuarios sepan que arrastrando el favicon a la barra de tareas de Windows Vista y Windows 7 se consigue tener el sitio en modo anclado. Sería bastante negativo que después de las horas dedicadas a desarrollar esta funcionalidad y todas las ventajas que supone esta característica para tu sitio web, el usuario nunca llegue a conocerlo.

Para lograr dar a conocer esta funcionalidad de Internet Explorer 9, y además enseñar al usuario las características avanzadas que tiene el sitio en modo anclado, se recomiendan utilizar diferentes técnicas.

 

Instalar la aplicación

Lo primero que se puede hacer es añadir un enlace o botón que dispare el evento de instalación de la web en Site Mode:

  1: function addSite() { 
  2:   try { 
  3:      window.external.msAddSiteMode(); 
  4:   } catch (e) { 
  5:      alert("Esta característica está solo disponible en Internet Explorer 9."); 
  6:   }
  7: }
  8: 

<button onclick=”addSite();”>Añadir al menu de inicio</button>

Como ya contamos en otro post, éste método no es exactamente igual que anclar el sitio manualmente. Ya que de este modo se añade al menú de aplicaciones pero no se ancla la aplicación a la barra de tareas. Además éste método requiere que el usuario acepte dicha instalación mediante una ventana modal:

clip_image001

 

Este método no es el más utilizado por los detalles que acabos de comentar.

 

Discoverability

Lo más recomendado para dar a conocer que tu sitio tienen características avanzadas en el modo anclado  es utilizar alguna de las siguientes opciones:

Top Pop-Down: Detectar si Detecta si el sitio tiene el anclaje implementado (o no) y manda una notificación.

clip_image003

Toast-Style: Mensaje que aparece en la pantalla. Emplazamiento configurable (pop up o pop under)

clip_image005

Banner de Publicidad: Implementación de una imagen. Recomendado para el escenario del “drag to PIN”

clip_image007

Una vez que elijas la opción que creas más conveniente, Internet Explorer 9 te lo pone fácil. Sólo necesitas poner en un div, una imagen o el elemento HTML que consideres más interesante la clase “msPinSite”.

<div id=”divPinSite” class=”msPinSite”>

….

</div>

Y controlar cuando el usuario se encuentra en el modo anclado para no volver a enseñar esta recomendación.

  1: window.onload = function() { 
  2:  try { 
  3:    if (window.external.msIsSiteMode()) { 
  4:       // Iniciamos resto de funciones del site mode
  5:    } else { 
  6:      document.getElementById('divPinSite').style.display = "block"; } 
  7:  } catch (e) { 
  8:  }
  9: }

 

Mi opción favorita es la de la barra en la parte superior o inferior de la página. Concretamente haciendo toda la barra pineable o un icono dentro de la barra.

clip_image009

 

En mi caso hago que si se pulsa en “Saber más” despliego un div con información para el usuario.

clip_image011

Además tenemos un método que podemos utilizar para dar una mejor experiencia para el usuario. Podemos utilizar msIsSiteModeFirstRun. De esta manera podemos conocer si es la primera vez que el usuario ha abierto nuestra web en modo anclado y aprovechar para contabilizarlo para nuestras estadísticas y para mostrarle alguna ayuda sobre cómo usar las funcionalidades implementadas. Los valores devueltos por esta función son:

0 — El sitio anclado no está en un estado de primera ejecución.

1 — Es el primer inicio a partir de una operación de arrastrar y colocar.

2 — Este es el primer inicio a partir de un acceso directo en el menú Inicio

Por último, nos quedaría recordar que este aviso deberíamos mostrarlo sólo cuando el usuario está visualizando el sitio en un Internet Explorer 9.

 

También podríamos comprobar si el usuario ha entrado por una instancia de Internet Explorer 9 a nuestro sitio, aunque el usuario ya tuviera nuestro sitio anclado previamente. La forma de hacer esto es utilizando una cookie que implique que el usuario ha anclado el sitio, y si nos da negativo el método window.external.msIsSiteMode() podríamos informar al usuario que si entra por el la aplicación anclada disfrutará de una mayor funcionalidad.

Un ejemplo de cómo utilizar el discoverability lo podemos ver en el sitio de Antena3.com

clip_image013

 

Espero que os sea de utilidad!

Buenas prácticas para desarrollo web multinavegador

El día 16 de Diciembre de 2010, se celebró el REMIX 2010 en el Ilustre Colegio de Médicos de Madrid.

Alejandro Hidalgo realizó una sesión sobre buenas prácticas en el desarrollo de aplicaciones web multinavegador. Los principales problemas y los mejores consejos para no que nuestro código se adapte con facilidad a los nuevos navegadores y no tengamos sustos de última hora.

Y es que estamos en un mercado con muchos navegadores, con muchas versiones diferentes y con frecuentes actualizaciones. Durante esta sesión aprendimos a tomar las mejores decisiones para crear sitios web que funcionen de la misma forma en todos los navegadores.

Entre las técnicas que vimos durante la sesión se encuentran, la detección de capacidades en lugar de navegadores, utilización de Frameworks como Jquery y Modernizr, buenas prácticas en HTML y CSS, y muchas más.

Recordad:

– No os dejéis llevar por el corazón y pensar que vuestra web será visualizada por muchos navegadores. No os baséis sólo en vuestro favorito, recordad que programáis para mucha gente.

– Intentad basaros en los estándares para que vuestro código sea compatible en todos los navegadores.

– Intentad programar pensando en los últimos navegadores, y solucionar los posibles fallos en navegadores antiguos, con detección de capacidades.

No os preocupéis por el DÓNDE sino por el POR QUÉ. No utilicéis detección por navegador, en vez de eso es recomendable usar detección por capacidades.

Además Alejandro mostró como Internet Explorer 9 hace más fácil crear sitios Web utilizando HTML interoperable, CSS y JavaScript.

URLs útiles:

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

http://msdn.com/ie

http://api.jquery.com/jQuery.browser/

http://www.modernizr.com/

El código fuente lo podéis descargar desde aquí:

Buenas prácticas para construir webs multinavegador.pptx

RemixDemo.zip

Aunque el proyecto que se encuentra en RemixDemo.zip sea de Visual Studio 2010, no os preocupéis sino tenéis Visual Studio 2010. Podéis abrir los ficheros HTML directamente para ver el código. En la carpeta js están las librerías para jQuery y Modernizr.

Los ficheros demo son:

· Index1.html – Ejemplo de Detección de navegador con fallos en IE9 y Firefox 3.5+.

· Index2.html – Ejemplo de Detección de capacidades sin fallos en IE9 y Firefox 3.5+.

· Ejemplo1.htm – Ejemplo de Detección de navegador donde IE9 utiliza attachEvent por error.

· Ejemplo2.htm – Ejemplo de Detección de capacidades donde IE9 utiliza correctamente el estándar addEventListener.

· Ie9.htm – Ejemplo de Detección de capacidades para el Pinned Mode de IE9.

Saludos y espero que este material os resulte útil.

Sesiones IE9 en PDC10

Este viernes 29 de Octubre en el evento del PDC10 que se celebra en Seattle se realizarán 3 sesiones dedicadas a Internet Explorer 9. HTML5, JavaScript y el Modo Anclado son los temas principales de los que tratarán dichas sesiones.

Os dejo la agenda y tal como vayan colgando los videos y transparencias de la sesión iré actualizando este artículo.

 

Building High Performance HTML 5 Sites with IE 9

Seattle: Viernes 9:00 AM – 10:00 AM (GMT -7)

Jason Weber nos da una visión en profundidad de la importancia del rendimiento en la web actual. Enseñando cómo IE9 ha mejorado en cuanto a su rendimiento, lo que nosotros podemos mejorar para obtener beneficio de ese rendimiento y las herramientas para medir el rendimiento de nuestros sitios web.

 

Unlocking the JavaScript Opportunity with IE 9

Seattle: Viernes 10:15 AM – 11:15 AM (GMT -7)

Geauray Seth nos habla sobre como a día de hoy las aplicaciones web tienen miles de líneas de JavaScript para ofrecer una funcionalidad similar a las tradicionales aplicaciones de escritorio. Internet Explorer 9 introduce un nuevo motor de JavaScript, Chakra, que cambia radicalmente las características de rendimiento de JavaScript en Internet Explorer 9. Geauray profundizará en las novedades de Chakra, incluyendo el nuevo que compilador que compila el código JavaScript en código nativo de alta calidad, un nuevo intérprete para ejecutar secuencias de comandos en las páginas web y mejoras en el runtime de JavaScript y sus librerías como el soporte para ECMAScript 5.

 

Pinned Sites with Internet Explorer 9 & Windows 7

Seattle: Viernes 3:15 PM – 1:15 PM (GMT -7)

Israel Hilerio hace una sesión dedicada al nuevo modo de anclado de Internet Explorer 9. Principalmente será una sesión en la que podremos ver en vídeo lo que ya explicamos en este blog en artículos anteriores, anclar a la barra de tareas nuestra aplicación web, usar las Jumplist, los ThumbBar Buttons y los Notification Icons.

Más información en http://player.microsoftpdc.com/

Creando ThumbBar Buttons de IE9

Este artículo forma parte de una serie sobre Intrnet 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

 

Los ThumbBar Buttons son botones que permiten a los usuarios interactuar con las aplicaciones sin necesidad de abrir la ventana de la propia aplicación. Cada botón representa un comando que puede ser ejecutado en la página web mientras que esta se encuentra minimizada. Puedes añadir un máximo de 7 ThumbBar Buttons, los cuales puedes crear, mostrar, esconder, habilitar o deshabilitar, o hasta cambiar su imagen por otra.

El máximo de botones que se podrán visualizar a la vez son 7 debido a las dimensiones de la ventana de pre visualización. Una recomendación sería ordenar estos iconos según su importancia.

Ejemplos de aplicaciones que utilizan está funcionalidad en Windows 7 son la mayoría de reproductores, donde aparecen las típicas acciones de reproducir, pausar, detener o hasta añadir a favoritos.

image

Para añadir un botón simplemente tendremos que utilizar el método:

btn1 = window.external.msSiteModeAddThumbBarButton(‘/images/Key.ico’, ‘Registro’);

Este método devolverá un identificador que utilizaremos para comprobar cuál de los botones ha sido pulsado. Para esto necesitaremos suscribirnos al evento ‘msthumbnailclick’ que nos informará de que un botón ha sido pulsado.

document.addEventListener(‘msthumbnailclick’, handler1, false);

Para que se actualice la ThumbBar con los botones que hemos creado llamaremos a la función:

window.external.msSiteModeShowThumbBar();

 

El código quedaría de la siguiente forma:

   1:  <body onload="onLoad()">
   2:   
   3:  <script type="text/javascript">
   4:  function onLoad() {
   5:  try {
   6:  if (window.external.msIsSiteMode()) {
   7:   
   8:          // ThumbBar Buttons
   9:                document.addEventListener('msthumbnailclick', handler1, false);
  10:   
  11:  btn1 = window.external.msSiteModeAddThumbBarButton('/images/Key.ico', 'Registro');
  12:                
  13:  btn2 = window.external.msSiteModeAddThumbBarButton('/images/Card2.ico', 'Top descargas');
  14:                      
  15:  btn3 = window.external.msSiteModeAddThumbBarButton('/images/Cart2.ico', 'Top ventas');
  16:                   
  17:  window.external.msSiteModeShowThumbBar();
  18:                      
  19:                }
  20:             catch (ex) {
  21:                 // Site Mode not supported.
  22:                alert("Instala IE9.");
  23:         }
  24:  }
  25:  </script>

Será en el manejador del evento ‘msthumbnailclick’ donde ejecutaremos una acción u otra en la página que estamos visualizando según el identificador del botón pulsado.

   1:  function handler1(btn) {
   2:  if (btn.buttonID == btn1) {
   3:                document.location = "http://www.softonic.com/registro";
   4:  }
   5:             else if (btn.buttonID == btn2) {
   6:                 document.location = "http://www.softonic.com/windows/top-descargas";
   7:         }
   8:            else if (btn.buttonID == btn3) {
   9:                 document.location = "http://www.softonic.com/windows/top-ventas";
  10:         }
  11:  }

También tenemos la posibilidad de habilitar o deshabilitar, hacer visible o invisible de forma dinámica los ThumbBar Buttons que tenemos añadidos. Para hacer esta actualización utilizaremos el método:

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);

Por último, tenemos la posibilidad de cambiar la apariencia de nuestro botones de forma dinámica. Para ello crearemos un nuevo estilo y se lo aplicaremos al botón que deseamos cambiar.

style1 = window.external.msSiteModeAddButtonStyle(btn1, ‘images/Alarme.ico’, ‘style1’);

window.external.msSiteModeShowButtonStyle(btn1, style1);

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/

Añadiendo Overlay Icons de IE9

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

 

Los Overlay Icons son unos iconos utilizados como sistema de notificaciones, que permiten mostrar eventos ocurridos o estados de los usuarios en nuestro sitio web. Las notificaciones aparecerán en forma de iconos superpuestos al icono de nuestra aplicación. De esta manera llamaremos la atención del usuario aunque este se encuentre visualizando otra aplicación.

El ejemplo más común para explicar los Overlay Icons son los iconos de notificación utilizados en los programas de correo. En estos programas aparece un pequeño icono sobre el icono de la barra de tareas para avisarnos de que tenemos correo sin leer.

image

De la misma forma podemos crear estos iconos de notificación con los eventos de nuestro sitio web, por ejemplo si alguien nos ha hablado o enviado un mensaje, si se ha publicado un nuevo artículo o si el evento que estábamos esperando para visualizar online ha empezado.

Como es lógico sólo podremos tener un icono a la vez, es decir, que si añadimos uno nuevo sobrescribiremos el anterior.

image

Para añadirlo a nuestra página sólo necesitamos definirlo.

window.external.msSiteModeSetIconOverlay(‘/images/Alarme.ico’, ‘Alarma’);

Y para borrarlo llamaremos al método:

window.external.msSiteModeClearIconOverlay();

El código resultante sería similar al siguiente:

   1:  <body onload="onLoad()">
   2:   
   3:  <script type="text/javascript">
   4:  function onLoad() {
   5:  try {
   6:  if (window.external.msIsSiteMode()) {
   7:                      
   8:                  // Overlay Icon
   9:                   window.external.msSiteModeClearIconOverlay();
  10:  window.external.msSiteModeSetIconOverlay('/images/Alarme.ico', 'Alarma');
  11:   
  12:  }
  13:             catch (ex) {
  14:                 // Site Mode not supported.
  15:                alert("Instala IE9.");
  16:         }
  17:  }
  18:  </script>

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/

Utilizando la Jumplist de IE9

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

 

Las tareas de la Jumplist, son acciones específicas de la aplicación que aparecen listadas como URLs estáticas en el menú contextual de nuestra aplicación. Para visualizar la Jumplist sólo tenemos que hacer click derecho sobre el icono de aplicación y seleccionar la tarea a la que queremos acceder. Otra ventaja, es que se puede acceder a este menú contextual sin necesidad de que la aplicación esté ejecutada, de manera que el usuario está a un solo click de lo que busca en nuestro sitio web.

Otra de las ventajas que supone utilizar tareas en la Jumplist es la posibilidad de publicitar funcionalidades de nuestro sitio web que nuestros usuarios no conocen, o que simplemente queremos que utilicen.

Para añadir nuevas tareas a la Jumplist podemos hacerlo utilizando Metas o mediante JavaScript. El método recomendable si se utilizan Metas, es cargarlas dinámicamente mediante JavaScript en caso de que el usuario tenga instalado IE9 en modo SiteMode. La razón principal es que estos Metas pueden no ser entendidas por las reglas de SEO de los buscadores y penalizar la posición de nuestro sitio web.

   1:  <META name="msapplication-task" 
   2:  content="name=Registro;action-uri=http://www.softonic.com/registro;icon-uri= /images/Key.ico"/>
   3:  <META name="msapplication-task" 
   4:  content="name=Top descargas;action-uri=http://www.softonic.com/windows/top-descargas;icon-uri=/images/Card2.ico"/>

Una vez cargadas en la Jumplist, el usuario podrá seleccionar una de estas tareas y se abrirá una pestaña/ventana con la dirección que asignamos a esa tarea. En cuanto a las tareas de la Jumplist, podríamos añadir diferentes categorías según la página que estemos visualizando en ese momento, aunque yo recomendaría utilizar los ThumbBar Buttons para este tipo de acciones.

Si decidimos hacerlo mediante JavaScripts podremos añadir categorías y posteriormente añadir tareas dentro de estas categorías.

La creación de categorías y de nuevas tareas podemos dividirlas en diferentes etapas.

1. Lo primero que deberíamos hacer es borrar los elementos de la JumpList para así poder añadir los nuevos.

window.external.msSiteModeClearJumplist();

2. Luego crearemos una nueva categoría, para esto necesitaremos pasar al método el nombre que queremos darle y que será mostrado en la Jumplist.

window.external.msSiteModeCreateJumpList(‘Tareas’);

3. Crearemos las tareas que queramos añadir al Jumplist. El método que utilizaremos tiene tres parámetros, el nombre, la url a la que navegará el usuario y el icono asociado a la tarea. Podremos añadir hasta un total de 12 tareas por categoría, aunque tener tantas puede ser contraproducente.

window.external.msSiteModeAddJumpListItem(‘Registro’, ‘http://www.softonic.com/registro’, ‘/images/Key.ico’);

4. Por último, para visualizar los nuevos elementos en la Jumplist necesitaremos llamar al método:

window.external.msSiteModeShowJumplist();

 

El código final será similar al siguiente:

   1:  <body onload="onLoad()">
   2:   
   3:  <script type="text/javascript">
   4:  function onLoad() {
   5:  try {
   6:          if (window.external.msIsSiteMode()) {
   7:                      
   8:  // Jumplist
   9:                    window.external.msSiteModeClearJumplist();
  10:                    
  11:  window.external.msSiteModeCreateJumpList('Tareas');
  12:   
  13:  window.external.msSiteModeAddJumpListItem('Registro', 'http://www.softonic.com/registro', '/images/Key.ico');
  14:   
  15:  window.external.msSiteModeAddJumpListItem('Top descargas', 'http://www.softonic.com/windows/top-descargas', '/images/Card2.ico');
  16:   
  17:  window.external.msSiteModeAddJumpListItem('Top ventas', 'http://www.softonic.com/windows/top-ventas', '/images/Cart2.ico');
  18:                
  19:  window.external.msSiteModeShowJumplist();
  20:  }
  21:  }
  22:             catch (ex) {
  23:                 // Site Mode not supported.
  24:                alert("Instala IE9.");
  25:         }
  26:  }
  27:  </script>

 

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/

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/