Tutorial sobre pinned sites / anclar sitios a la barra de tareas de Win7 con IE9

por Ricardo Escudé

¡Hola!

Lo prometido es deuda, este es nuestro pequeño tutorial sobre cómo hacer pinned sites (anclar sitios y establecer ‘subopciones’) para nuestros desarrollos web.

Sabéis que nuestros tutoriales son resumidos, así que vamos al grano:

1.-¿Qué son los pinned sites?

Son sencillamente sitios anclados a la nueva barra inferior de tareas de Windows 7. Microsoft ofrece a los desarrolladores en IE9 la opción de anclar un sitio web sencillamente arrastrándolo a la barra de tareas. Para ello, los usuarios sólo tienen que arrastrar una pestaña desde Internet Explorer 9 hasta su barra de tareas (¡ojo! Sólo Windows 7).

Arrastra una pestaña de IE9 a tu barra de tareas

Arrastra una pestaña de IE9 a tu barra de tareas

2.-Agrega la meta para renderizar en modo IE9

La primera meta que deberás insertar obliga a IE9 a renderizar la página web en su modo nativo (tendrás que colocarla antes del final de head):

  1. <meta http-equiv="X-UA-Compatible" content="IE=9" >

3.-Crea un icono de 32×32 con Photoshop o similar

Puedes crear un icono de mayor resolución que el favicon típico para que éste se vea con mayor resolución en la barra de tareas. Si no lo creas, IE9 cogerá el favicon clásico de 16×16 y lo meterá en una caja blanca.

Crea tu icono de 32x32 en photoshop o similar para que se vea bien en la barra de tareas

Crea tu icono de 32x32 en photoshop o similar para que se vea bien en la barra de tareas

Ahora súbelo a la web (no tiene que ser ni siquiera el mismo sitio donde tengas alojada la página que quieres anclar).

4.-Establece las metas con los accesos directos que quieras

Vamos a la creación de los accesos directos. Cuando los usuarios hacen click derecho en un icono de la barra de tareas en Win7, les aparece lo siguiente:

Opciones contextuales de la barra de tareas de Windows 7

Opciones contextuales de la barra de tareas de Windows 7

Queremos replicar ese comportamiento, ¿verdad?

Pues sólo tienes que agregar una meta por cada acción que quieras (limitadas a un máximo de 5):

  1. <meta name="msapplication-task" content="name=Contactar con Alia;action-uri=http://tuURL;icon-uri=http://URL/tuicono.ico" />

5.-El resultado final

IE9 trata a los sitios web como WebApps

IE9 trata a los sitios web como WebApps

¡Genial!

6.-Más información

Sí, sabemos que se puede hacer mucho más que este simple tutorial, pero como siempre os dejamos ese trabajo a vosotros. Sí os indicamos donde expandir esta información:

Documentación oficial pinned sites en IE9 (¡en español!): http://msdn.microsoft.com/library/gg131029.aspx

Saludos del equipo de Alia