Revisando las novedades por parte de Microsoft en el PDC 2010 hubo un apartado donde hablaban de las mejoras introducidas en la nueva versión de Internet Explorer (aún disponible sólo en fase beta). Una de las características que me llamó la atención fue la posibilidad de integrar Internet Explorer 9 con la barra de tareas y el menú de inicio de Windows 7. Con la nueva versión del explorador, existe la posibilidad de anclar una página web tanto a la barra de tareas como al menú de inicio de nuestro sistema operativo simplemente arrastrando el tab de la página web hasta la barra de tareas
o bien si pulsamos ALT sobre la ventada del explorador y seleccionamos Herramientas + Agregar sitio al menú de inicio podemos crear un enlace directo al sitio web.
Pero lo curioso no es para nada la posibilidad de poder enlazar nuestros sitios preferidos a estos apartados sino la funcionalidad extra que podemos ofrecer con ello. Para verlo directamente con dos claros ejemplos de la funcionalidad que os hablo voy a mostrar qué ocurriría con las páginas de Facebook y Twitter al ser ancladas:
Como podemos ver, en ambas páginas nos ofrecen un conjunto de funcionalidades adicional acorde al sitio, la cual es posible customizar 😀 Para ello tenemos dos formas de hacerlo.
Etiquetas meta en la cabecera de nuestra web
La forma más sencilla de añadir estas tareas a nuestro sitio web sería utilizando las siguientes etiquetas meta dentro del apartado head de nuestro HTML:
<!-- Jumplist -->
<meta name="application-name" content="Return(GiS); - Blog about technologies" />
<meta name="msapplication-tooltip" content="Return(GiS);" />
<meta name="msapplication-starturl" content="./" />
<meta name="msapplication-task" content="name=My Blog;action-uri=http://www.returngis.net;icon-uri=/favicon.ico" />
<meta name="msapplication-task" content="name=GiS on Linkedin;action-uri=http://www.linkedin.com/in/giselatorresbuitrago;icon-uri=http://www.linkedin.com/favicon.ico" />
<meta name="msapplication-task" content="name=GiS on Facebook;action-uri=http://www.facebook.com/returngis#!/pages/ReturnGiS/161658947178444;icon-uri=http://www.facebook.com/favicon.ico" />
<meta name="msapplication-task" content="name=GiS on Twitter;action-uri=http://www.twitter.com/0GiS0;icon-uri=http://www.twitter.com/favicon.ico" />
<!-- End Jumplist -->
Si nos fijamos en el código anterior, vemos que cada tarea asociada utilizará el nombre msapplication-task y contendrá los siguientes valores dentro de content:
- name: Nombre a mostrar dentro del Jump list para ese elemento.
- action-uri: Nos indica la url a la cual nos dirigiremos si accionamos ese elemento.
- icon-uri: Será la dirección donde está alojado el icono asociado con la tarea.
Si ancláramos mi blog utilizando Internet Explorer 9 conseguiríamos las siguientes tareas:
Customizando el Jump list con Javascript
Por otro lado, otra opción que tenemos es hacer uso de los nuevos métodos en javascript que nos ofrece IE 9 para añadir y eliminar elementos dinámicamente, crear secciones personalizadas, etcétera.
- window.external.msAddSiteMode() nos permite añadir el sitio web al menú de inicio de Windows 7.
- window.external.msIsSiteMode() devuelve true si la ventana de Internet Explorer fue lanzada desde un sitio anclado.
- window.external.msSiteModeActivate() hace parpadear el botón de la barra de tareas asociado al sitio web.
- window.external.msSiteModeAddButtonStyle(uiButtonID, bstrIconUrl [, pvarTooltip]) se utiliza para definir una imagen y un tooltip para un botón (se activa llamando a window.external.msSiteModeShowButtonStyle(uiButtonID, uiStyleID)).
- window.external.msSiteModeAddJumpListItem(bstrName, bstrActionUri, bstrIconUri) añade una nueva tarea al Jumplist.
- window.external.msSiteModeAddThumbBarButton(bstrIconURL [, bstrTooltip]) agrega un botón a la vista previa del sitio web.
- window.external.msSiteModeSetIconOverlay(bstrIconUrl [, bstrDescription]) con este método podemos super poner un botón sobre el botón de la barra de tareas. De la misma forma que hacen Twitter o Facebook para informar sobre nuevas notificaciones. Para eliminar este botón, tenemos la opción contraria con window.external.msSiteModeClearIconOverlay().
- window.external.msSiteModeClearJumpList() elimina todo el Jump list.
- window.external.msSiteModeCreateJumpList(bstrHeader) crea un Jump list pasándole como parámetro el título del mismo.
- window.external.msSiteModeShowJumpList() muestra el Jump list actualizado.
- window.external.msSiteModeShowThumbBar() activa la barra de herramientas de la vista previa en miniatura (Thumbnail).
- window.external.msSiteModeUpdateThumbBarButton(uiButtonID, fEnabled, fVisible) cambia el estado de un botón en la barra de herramientas de la vista previa en miniatura (Thumbnail).
Espero que sea de utilidad 🙂
¡Saludos!