Pinned web sites con Internet Explorer 9 - parte 2

  • Article

Siguiendo con el tema de pinned websites con Internet Explorer 9 (si no saben que es un pinned web site échenle un vistazo al primer artículo de esta serie), hay varias características que pueden ser útiles al preparar un sitio web que va a sacar provecho de estas características. En este ejemplo, he abierto el sitio de Channel 9 y lo he agregado al taskbar de mi PC. Al abrir el sitio desde el taskbar se ve así:

Algo que se puede notar es que el favicon del sitio se encuentra colocado a la izquierda de la barra de navegación del navegador, y que el color de los botones de navegación de adelante y atrás a cambiado a un color naranja:

¿Cómo se hace esto? Es muy simple, basta con agregar en el encabezado de la página (entre las etiquetas <tag>) las siguientes líneas:

<meta name="application-name" content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>
<meta name="msapplication-starturl" content="https://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>

<meta name="msapplication-navbutton-color" content="red"/>

Estas líneas son guías, por supuesto, que deberemos llenar con los datos del propio sitio. Los valores de los atributos de cada una los explico mejor a continuación:

  • application-name: el nombre del sitio. Sí se deja en blanco se utiliza el título de la página (<title>). Esto sirve particularmente cuando se agrega la página al menú de inicio. 

  • msapplication-tooltip: es el texto que aparecerá en la cajita de texto (tooltip) cuando dejamos el puntero del ratón sobre el icono del sitio agregado en la barra de tareas o en el menú de inicio.

  • msapplication-starturl: es la dirección base (root) de la aplicación. Si no se coloca, se utiliza la dirección de la página tal como fue agregada. Esta propiedad soporta los protocolos HTTP, HTTPS y FTP por ahora.

  • msapplication-navbutton-color: indica el color de los botones de navegación del navegador (atrás y adelante). Cualquier color definido en la especificación de CSS 3 es soportado (más información sobre estos códigos en la tabla de  colores). Si no se especifica un valor, IE9 utiliza el color del favicon del sitio.

  • msapplication-window: el tamaño inicial de la ventana del nevagador cuando se abre desde el acceso directo en la barra de tareas o el menú de inicio. Los dos valores van separados por una coma y los valores indican el tamaño en pixeles, por ejemplo:

    <meta name="msapplication-window" content="width=800;height=600"/>

    esta línea indica que la ventana del navegador se abrirá en un tamaño de 800 por 600 pixeles. Este valor puede ser cambiado por el usuario si cambia manualmente el tamaño de la ventana mientras navega.

El ícono (favicon) deberá ser un archivo de extensión .ico de 32 por 32 pixeles, que se puede especificar también en la sección del encabezado de la página de la siguiente manera:

<LINK rel="shortcut icon" type=image/x-icon href="https://host/favicon.ico">
<LINK rel=icon type=image/ico href="./favicon.ico">

WIndows intentará cargar el archivo como una imagen de 32 por 32 pixeles, pero si esta fuera más pequeña (16 por 16 pixeles, que es lo más común estos días) entonces esta quedará en tamaño reducido dentro de un marco de 32 por 32 pixeles. El usuario puede cambiar este icono después a través del panel de Propiedades del acceso directo.