Anclar tu sitio a la barra de tareas de Windows 7 con Internet Explorer 9
El pasado 15 de septiembre se lanzó Internet Explorer 9 Beta, y entre sus nuevas funcionalidades se encuentra una que aprovecha de la barra de tareas de Windows 7 , tanto de jumplists (lista rápida), thumbnails (miniaturas) y barra de herramientas de miniaturas.
Esta funcionalidad permite que nuestro sitio pueda también ser anclado a esta barra y además aprovechar de la “super barra” de Windows 7.
Anclar un sitio web es muy sencillo, sólo basta con arrastrar la pestaña del sitio a un espacio vacío en la barra de tareas.
¿Pero cómo hacemos para que nuestro sitio muestre su propio icono, nombre y listas de acceso personalizadas (jumplists)?
Para que nuestro sitio web (webapp) anclado tenga su propio icono, debemos asegurarnos de tener un favicon, ya que Internet Explorer 9 buscará un icono de 32x32 o sino de 16x16 o en su defecto mostrará el icono del navegador si no se encuentra ningún icono, claro está.
Generalmente se tiene el favicon en nuestro sitio web en la dirección raíz, pero no está de más asegurarnos como en el siguiente código que colocaremos dentro de <head></head> para cada página que deseemos (generalmente en index.php index.html, o la plantilla html en tumblr, blogger, wordpress entre otras), además podemos especificar otra dirección donde encontrar nuestro favicon.
1 <link href='http://demo.codigobit.info/favicon.ico' rel='shortcut icon' type='image/x-icon'/> 2 <link href='http://demo.codigobit.info/favicon.ico' rel='icon' type='image/ico'/>
En href ponemos la dirección de nuestro icono a utilizar.
También podemos personalizar el acceso directo y la forma en que será lanzada nuestros sitio (webapp):
1 <meta content='Codigobit' name='application-name'/> 2 <meta content='web, tutoriales y software' name='msapplication-tooltip'/> 3 <meta content='http://www.codigobit.info/' name='msapplication-starturl'/> 4 <meta content='black' name='msapplication-navbutton-color'/>
application-name: sirve para darle nombre al acceso directo, si no se especifica se utilizará el título de la página web.
msapplication-tooltip: una descripción desplegable al posar el puntero sobre el acceso directo
msapplication-starturl: la dirección inicial del sitio, si no se especifica se usará la dirección actual (por ejemplo http://misitioweb.com/direccionactual.html)
msapplication-navbutton-color: color de los botones de navegación (atrás, adelante)
msapplication-window: sirve para especificar el tamaño de la ventana (en content se pone “width=800;height=600” por ejemplo)
Y si tenemos páginas específicas dentro de nuestro website, y queremos que éstas estén en la lista rápida (jumplist), lo hacemos de la siguiente manera:
1 <meta content='name=Codigobit;action-uri=http://www.codigobit.info;icon-uri=http://demo.codigobit.info/favicon.ico' name='msapplication-task'/> 2 <meta content='name=Software por Codigobit;action-uri=http://www.codigobit.info/search/label/Mis%20Aplicaciones;icon-uri=http://demo.codigobit.info/favicon.ico' name='msapplication-task'/> 3 <meta content='name=Tutoriales;action-uri=http://www.codigobit.info/search/label/Tutorial;icon-uri=http://demo.codigobit.info/favicon.ico' name='msapplication-task'/> 4
msapplication-task: esto agregará en la lista de tareas de los jumplists con los siguiente datos dentro de content
name: Nombre de esa página dentro de nuestro sitio
action-uri: la dirección de esa página
icon-uri: un icono diferente o el mismo
Al arrastrar el sitio (pestaña) en la barra de tareas de Windows 7, obtendrán algo parecido a este que hice para este blog.
Esto sólo es una posibilidad sencilla utilizando META tags, existen otras que recurren a propiedades específicas de Internet Explorer 9 que se llaman mediante JavaScript utilizando window.external... por ejemplo crear otra categoría dentro de los jumplists y agregar listas dinámicamente, o crear miniaturas + su barra de herramientas, o sobreponer iconos sobre el acceso directo, etc.
Para mayor información, en MSDN sobre Pinned Taskbar & IE9
Entradas
