Uno de los aspectos más importantes cuando se desarrolla el nuevo modo anclado de Internet Explorer 9, es cómo hacer para dar a conocer entre los usuarios las nuevas funcionalidades desarrolladas.
Es muy complicado que los usuarios sepan que arrastrando el favicon a la barra de tareas de Windows Vista y Windows 7 se consigue tener el sitio en modo anclado. Sería bastante negativo que después de las horas dedicadas a desarrollar esta funcionalidad y todas las ventajas que supone esta característica para tu sitio web, el usuario nunca llegue a conocerlo.
Para lograr dar a conocer esta funcionalidad de Internet Explorer 9, y además enseñar al usuario las características avanzadas que tiene el sitio en modo anclado, se recomiendan utilizar diferentes técnicas.
Instalar la aplicación
Lo primero que se puede hacer es añadir un enlace o botón que dispare el evento de instalación de la web en Site Mode:
1: function addSite() {
2: try {
3: window.external.msAddSiteMode();
4: } catch (e) {
5: alert("Esta característica está solo disponible en Internet Explorer 9.");6: }7: }8:<button onclick=»addSite();»>Añadir al menu de inicio</button>
Como ya contamos en otro post, éste método no es exactamente igual que anclar el sitio manualmente. Ya que de este modo se añade al menú de aplicaciones pero no se ancla la aplicación a la barra de tareas. Además éste método requiere que el usuario acepte dicha instalación mediante una ventana modal:
Este método no es el más utilizado por los detalles que acabos de comentar.
Discoverability
Lo más recomendado para dar a conocer que tu sitio tienen características avanzadas en el modo anclado es utilizar alguna de las siguientes opciones:
– Top Pop-Down: Detectar si Detecta si el sitio tiene el anclaje implementado (o no) y manda una notificación.
– Toast-Style: Mensaje que aparece en la pantalla. Emplazamiento configurable (pop up o pop under)
– Banner de Publicidad: Implementación de una imagen. Recomendado para el escenario del “drag to PIN”
Una vez que elijas la opción que creas más conveniente, Internet Explorer 9 te lo pone fácil. Sólo necesitas poner en un div, una imagen o el elemento HTML que consideres más interesante la clase “msPinSite”.
<div id=»divPinSite» class=»msPinSite»>
….
</div>
Y controlar cuando el usuario se encuentra en el modo anclado para no volver a enseñar esta recomendación.
1: window.onload = function() {2: try {
3: if (window.external.msIsSiteMode()) {4: // Iniciamos resto de funciones del site mode
5: } else {
6: document.getElementById('divPinSite').style.display = "block"; }7: } catch (e) {
8: }9: }
Mi opción favorita es la de la barra en la parte superior o inferior de la página. Concretamente haciendo toda la barra pineable o un icono dentro de la barra.
En mi caso hago que si se pulsa en “Saber más” despliego un div con información para el usuario.
Además tenemos un método que podemos utilizar para dar una mejor experiencia para el usuario. Podemos utilizar msIsSiteModeFirstRun. De esta manera podemos conocer si es la primera vez que el usuario ha abierto nuestra web en modo anclado y aprovechar para contabilizarlo para nuestras estadísticas y para mostrarle alguna ayuda sobre cómo usar las funcionalidades implementadas. Los valores devueltos por esta función son:
0 — El sitio anclado no está en un estado de primera ejecución.
1 — Es el primer inicio a partir de una operación de arrastrar y colocar.
2 — Este es el primer inicio a partir de un acceso directo en el menú Inicio
Por último, nos quedaría recordar que este aviso deberíamos mostrarlo sólo cuando el usuario está visualizando el sitio en un Internet Explorer 9.
También podríamos comprobar si el usuario ha entrado por una instancia de Internet Explorer 9 a nuestro sitio, aunque el usuario ya tuviera nuestro sitio anclado previamente. La forma de hacer esto es utilizando una cookie que implique que el usuario ha anclado el sitio, y si nos da negativo el método window.external.msIsSiteMode() podríamos informar al usuario que si entra por el la aplicación anclada disfrutará de una mayor funcionalidad.
Un ejemplo de cómo utilizar el discoverability lo podemos ver en el sitio de Antena3.com
Espero que os sea de utilidad!
Hola:
Interesante artículo.
La verdad es que todo lo que tiene que ver con Pinned Sites tiene un potencial enorme.
Por cierto, en el div lo has definido como «divPinSite». No sé si también vale como class, pero en la documentación y en los dos ejemplos que enlazas están usando «msPinSite».
Como ya comentamos en el artículo anterior de Discoverability , las nuevas características
Los usuarios en Windows Internet Explorer 9 pueden anclar cualquier sitio web en la barra de tareas de
@Javier – Gracias Javier, había subido mal eso, ya está corregido. Es la clase «msPinSite».
🙂