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/

2 comentarios en “Utilizando la Jumplist de IE9”

Deja un comentario

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