Tag Archive: JumpList


Estimados amigos:

Luego de haber participado en distintos eventos presenciales con el MVP Tour Perú 2011 en Cajamarca, Trujillo y Lima. Fui invitado para participar de un evento presencial en Huacho, donde compartí escenario con Fernando Cárdenas y Goyco Obrenovich en la sede de la Universidad Alas Peruanas, tocando diversos temas como Windows 7 e Internet Explorer 9, en esta ocasión tuve el agrado de interactuar con un púbico bastante motivado, más alegre que otros y con muchas ganas de aprender, lo cual me brindó una gran satisfacción y ganas de regresar en una oportunidad futura…

Regresando al tema, esta vez me complace anunciar que estaré participando de un evento Virtual denominado Cloud Power, en el cual hablaremos de la Computación en la Nube, donde podrás informarte acerca de este nuevo concepto que está generando gran expectativa.

Por lo que Microsoft ha preparado 2 salones uno para Profesionales de TI y otro para Profesionales en Desarrollo así que si eres de los que les agrada estar actualizado con las últimas tecnologías de desarrollo, esta es una oportunidad imperdible que se realizará el 17-mayo(Mañana);  por mi parte los espero en la sesión de Internet Explorer 9 – JumpList, a continuación la información de la agenda:

Evento Virtual

Los espero!!!


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

Anuncios

Siguiendo con la serie “Tu Web para Internet Explorer 9” en esta oportunidad seguiré escribiendo acerca de como podemos crear JumpList en tu sitio web para aprovechar las características de Internet Explorer 9, en el post anterior a esta serie utilizamos etiquetas <meta> de HTML estándar, pero si queremos ir más allá con esta característica, necesitamos generar opciones para el JumpList de manera dinámica o aleatoria, hay varios escenarios en los que podríamos necesitar crear opciones aleatorias, sobre todo en sitios que incluyen una opción de inicio de sesión con usuario y contraseña.

Para darles una muestra de esta característica les mostraré el ejemplo del sitio de Twitter, si acceden a su cuenta en Twitter con su usuario y contraseña verán que el JumpList tiene más opciones:

Sin Ingresar:

Out Session

Una vez Ingresado:

In Session

Otra clase de JumpList son los dinámicos, como es el caso de la web de Discovery Channel :

Discovery

Como nos podemos dar cuenta el JumpList cambia y nos muestra más opciones de acuerdo a la página web, otra cosa que podemos notar es que las opciones están organizadas por Grupos de acciones, un grupo con el nombre “Tareas” y otro con el nombre “Discovery Favorites”.

El segundo grupo de acciones “Discovery Favorites” se generan aleatoriamente de la siguiente manera utilizando JavaScript:

  1. Crear  la categoría:
    Para empezar lo primero que debemos hacer es crear la categoría donde se incluirán las nuevas opciones en el jump list utilizando el método msSiteModeCreateJumplist y es necesario crear una lista antes de utilizar cualquier otro método posterior. Para crear una lista llamada "Amazon Favorites" agregaremos el siguiente código de Javascript:

    window.external.msSiteModeCreateJumplist(‘Amazon Favorites’);

  2. Agregar elementos:
    Luego de haber la categoría, agregamos acciones con el método
    msSiteModeAddJumpListItem:

    window.external.msSiteModeAddJumpListItem(‘Elemento1’, ‘URI del elemento1’, ‘URI del icono para elemento1’);

    De igual manera que usando la etiqueta <meta> aquí todos los atributos son obligatorios. En el caso del icono, el URI debe apuntar a un archivo .ico de 16 x 16 pixeles como mínimo. En el caso de Discovery.com, el primer elemento ‘Cash Cab’ de la categoría ‘Discovery Favorites’ se crea con la siguiente línea:

    window.external.msSiteModeAddJumpListItem("Cash Cab", "http://dsc.discovery.com/tv/cash-cab/&quot;, favicon);

    Cada categoría soporta hasta 20 elementos como máximo; si se agregan más los primeros serán eliminados automáticamente.

  3. Mostrar la lista:
    Esta lista se encuentra en memoria lista para mostrarse cuando sea más conveniente, con la siguiente línea:

    window.external.msSiteModeShowJumplist();

    Windows actualizará automáticamente el JumpList en memoria con las nuevas opciones.

  4. Borrar la lista:
    Cuando los nuevos elementos hayan servido su propósito, es posible borrar una categoría completa con la siguiente línea de código:

    window.external.msSiteModeClearJumplist();

Si un usuario elimina manualmente un elemento de un jump list creado de esta manera (con clic derecho como se ve abajo):

Discovery 2

Es posible detectar esta acción utilizando cualquier de los siguientes métodos:

document.addEventListener(‘mssitemodejumplistitemremoved’, removed, false);
document.attachEvent(‘onmssitemodejumplistitemremoved’, removed);

Lo que hará una invocación a la siguiente función con el URI de la opción eliminada como parámetro:

function removed(URI) { … }

Cualquier página en el mismo dominio en el que fueron creadas las nuevas categorías y opciones en el JumpList puede realizar modificaciones al mismo en cualquier momento.

Espero que esta tercera parte de la serie: “Tu Web para Internet Explorer 9”  sea de utilidad para los desarrolladores.

Saludos


Francis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

En este post realizaré un tutorial de cómo crear JumpLists para Internet Explorer 9 ya que con el lanzamiento de Internet Explorer 9 beta se han liberado también muchas características nuevas que integran los sitios web más con algunas características de Windows 7 como los JumpLists. Un JumpList es un menú emergente que se obtiene dando clic derecho sobre un sitio que ha sido arrastrado a la barra de tareas de Windows 7, y se ve así:

JumpList

En este caso podemos ver el JumpList del sitio del STC Cajamarca, que además de las opciones estándar de InPrivate Browsing y desanclar nos muestra una lista de acciones específicas para los usuarios del STC Cajamarca Otros sitios que integran esta funcionalidad son Twitter, Facebook y muchos más.

¿Cómo se hacen? Es realmente muy sencillo y pueden incluirse en cualquier sitio ya existente con un poco deHTML.

Acá viene un ejemplo: lo primero es ubicar el espacio para los encabezados meta de la página de inicio de nuestro sitio (default.* o index.*), que se encuentre dentro de las etiquetas <head> y </head> antes de<body> y colocar algo como la siguiente línea:

<meta name="msapplication-task"
  content="name=Título de la acción ;
  action-uri=URI a la que dirigirá esta acción;
  icon-uri=URI del archivo favicon para esta acción" />

Esta línea corresponderá a una acción en la JumpList del sitio: el nombre "msapplication-task" es obligatorio al igual que los otros tres atributos:

  • content: Será el título de la acción para el JumpList que aparecerá una vez instalada el sitio en la taskbar. Lo recomendable es que sea menor de 25 caracteres y lo más descriptivo posible.
  • action-uri: La dirección web que se abrirá en el navegador cuando reciba clic. Puede incluir variables GET y soporta http, https y ftp.
  • icon-uri:El icono que se mostrará a la derecha de la acción en la JumpList. El valor puede ir vacío pero no se puede omitir el atributo. El icono deberá tener ser al menos de 16 x 16 pixeles(Pueden crear uno para cada acción con el primer tutorial).

El mismo ejemplo del STC Cajamarca , la primera línea (PDC Cajamarca) se vería así:

<meta name="msapplication-task"
  content
="name=PDC Cajamarca;
  action-uri=
http://www.stccajamarca.com/PDC%20Cajamarca.html;
  icon-uri=http://www.stccajamarca.com/events.ico" />

Se pueden colocar tantas líneas como se necesite, aunque lo mejor es colocar las que al usuario más le hagan sentido. Con este pequeño tutorial ya pueden empezar a colocar JumpList a sus sitios web para que los usuarios de sus sitios saquen provecho de esta nueva funcionalidad.

Espero les sirva. Saludos


MVP_HorizontalFrancis Urteaga
Microsoft MVP | Internet Explorer
Microsoft Student Partner Senior | Microsoft Perú
clip_image00352clip_image00452clip_image00652clip_image00752clip_image00952

A %d blogueros les gusta esto: