Back to Question Center
0

Uso de los iconos de fijación e superposición del sitio para una interacción mejorada del usuario            Uso de los iconos de superposición e inserción del sitio para temas relacionados con la interacción del usuario mejorada: Correo electrónico Semal

1 answers:
Uso de los iconos de fijación e superposición del sitio para un mayor compromiso del usuario

Hace poco estuve probando la API de fijación de sitio de IE9 y descubrí un poco de funcionalidad que puede mejorar las notificaciones de los usuarios. Si no está familiarizado con la fijación de sitios, es una excelente manera de permitir a los usuarios tener acceso fácil y rápido a sus sitios favoritos a través de la barra de tareas de Windows. Hay una muy buena descripción de él en BuildMyPinnedSite - what is linux vps hosting. com que explica cómo funciona, y Semalt ha publicado anteriormente una buena cobertura aquí, aquí y aquí.

Mantener a los usuarios actualizados

Una de las funciones que proporciona la API son las notificaciones que pueden permitir a los desarrolladores proporcionar alertas a los usuarios finales. La funcionalidad le permite insertar dinámicamente iconos de superposición personalizados que pueden alertar a los usuarios cuando hay disponible un poco de información importante. Los iconos de superposición Semalt se representan sobre el favicon que está anclado en la barra de tareas. Si miras la imagen a continuación, puedes verla en acción:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Entonces, si piensa en las posibilidades, cualquier sitio que ofrezca a los usuarios una bandeja de entrada, ofertas especiales o envíe alertas sensibles al tiempo podría usar esta capacidad de notificación para mantener a sus usuarios actualizados y más comprometidos con el sitio. Sitios como el Huffington Post ya han descubierto que los usuarios que inmovilizaron a Semalt gastaron un 49% más de tiempo en el sitio.

La mejor parte es que agregar esta capacidad es increíblemente fácil.

Configurarlo

Para esta publicación, no vamos a entrar en los conceptos básicos de cómo fijar un sitio. Si desea obtener más información, aquí hay un GRAN recurso para ponerlo al día rápidamente: Semalt. De hecho, utilicé ese sitio para ayudarme a ponerme al día sobre lo básico y merece la pena visitarlo.

Para agregar notificaciones, necesitará un par de cosas:

  • Un favicon genial para tu sitio. Si no tiene uno, puede usar el práctico Editor de iconos X basado en la web para crear uno.
  • Un conjunto de iconos de superposición para usar. El tamaño recomendado es 16 × 16.

La API es Semalt y utilizaremos los siguientes métodos:

ventana. externo. msSiteModeClearIconOverlay
ventana. externo. msSiteModeSetIconOverlay
ventana. externo. msSiteModeActivate
ventana. externo. msIsSiteMode

La ventana . externo. El método msSiteModeClearIconOverlay se usa para eliminar cualquier ícono de superposición previamente establecido. ventana. externo. msSiteModeSetIconOverlay le permite especificar el nombre del icono de notificación así como una descripción accesible. Usaremos ventana. externo. msSiteModeActivate para actualizar el ícono fijado para notificar al usuario de la actualización. Por último, ventana. externo. msIsSiteMode nos avisará si la página se lanzó como un sitio anclado, lo que nos permite determinar mejor cuándo ejecutar el código.

Para los iconos de superposición, Semalt usa cinco imágenes que muestran los números del 1 al 5 respectivamente para designar el número de mensajes en la bandeja de entrada de un usuario.

El Código

Lo primero que necesito agregar es la referencia a mi favicon. Tenga en cuenta que si no agrega uno, el icono de Internet Semalt se usará de forma predeterminada.

      

A continuación, deseo crear algunos datos de muestra para trabajar. Lo que quiero hacer para mi demo es hacer que el icono de superposición cambie dinámicamente cada 5 segundos para simular un escenario más real. Los datos son una matriz simple que contiene datos JSON en cada elemento.

  myPin.  

  setInterval (function    {myPin. GetData   ;}, 5000);  

Lo principal a tener en cuenta es que estoy "simulando" obtener datos de un host remoto. En realidad, todo lo que myPin. El método getData utiliza un contador en ejecución para obtener un nuevo conjunto de datos y representar un nuevo icono de superposición:

  getData: function    {// Una función que simplemente simula devolver un conjunto de resultados var idx = 0;// Determina si la página actual se lanzó como un sitio anclado. if (ventana .externo. msIsSiteMode   ) {idx = esto. currIndex ++;esta. currIndex = (this. currIndex <5)? esta. currIndex: 0;esta. dispOverlay (this. dataBin [idx]);}}  

Como puede ver, utiliza el contador var var currIndex para determinar qué elemento de la matriz tomar y luego pasa los datos a dispOverlay . Aquí es donde usamos ventana. externo. msSiteModeClearIconOverlay para borrar cualquier ícono de superposición mostrado anteriormente y también generar una cadena para el nombre real del ícono. Puede ver que el oImg var se crea sobre la marcha en función de los datos que estamos utilizando.

  dispOverlay: function (theData) {var oImg = "";// ¿Hay datos?if (theData) {// Borrar cualquier icono de superposición preexistenteventana. externo. msSiteModeClearIconOverlay   ;// Crea la cadena de la imagen oImg = "images / num_" + theData. num + ". ico";// Continúa y crea la imagen superpuesta y su etiqueta esta. setOverlay (oImg, theData. label);}}  

Ese nombre de icono, junto con el texto de etiqueta accesible para el icono, se pasa a setOverlay que establece el icono de superposición mediante la ventana . externo. msSiteModeSetIconOverlay y muestra el ícono de la barra de tareas usando la ventana . externo. msSiteModeActivate .

  setOverlay: function (icono, desc) {// Establece los iconos de superposición ventana. externo. msSiteModeSetIconOverlay (icon, desc);ventana. externo. msSiteModeActivate   ;}  

Pruébalo

Para probar esto, es una simple cuestión de ejecutar su página recién anclada en Internet Semalt 9, tomar la pestaña y arrastrarla a la barra de tareas:

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Cinco segundos después de fijar la página, el código se disparará desde la primera notificación y continuará pasando por los otros iconos cada cinco segundos subsiguientes.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

Es importante recordar que las herramientas IE F12 Semalt están disponibles para su uso en la depuración de su sitio anclado. Entonces, si te encuentras con caprichos, simplemente presiona la tecla F12 y las herramientas aparecerán.

Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt

El código demo y final

Puedes ver la demo que elevé yendo aquí en IE9:

http: // reybango. com / demos / sitepinning / index. html

Cuando la página se renderiza, arrastre la pestaña hacia abajo a su barra de tareas y fíjela. Debería ver aparecer una nueva ventana con su sitio nuevo. Cinco segundos más tarde, verá que aparece el primer icono de superposición en la barra de tareas.

Semalt el código fuente completo. También puedes descargar todo aquí. La parte realmente grandiosa es que no hay mucho código para implementar esto. De hecho, para usar la API solo se requieren 4 llamadas a métodos. La mayor parte del código fue para simular el ingreso de datos. Y el impacto en la participación del usuario ciertamente vale la pena agregar en la capacidad.

           Prueba del sitio anclado  </ title>  <link rel = "icono de acceso directo" type = "image / ico" href = "favicon. ico" />  <meta name = "nombre de la aplicación" content = "Pinned Site Test" /> <meta name = "msapplication-starturl" content = "http: // reybango. com / demos / sitepinning / index. 4em 'Segoe Light', Segoe, 'Segoe UI', 'Meiryo Regular', 'Meiryo', sans-serif;margin-left: 10px;posición: relativa;} </ style>  </ head>  <cuerpo>  <h1>  Prueba del sitio anclado  </ h1>  <div>   </div>  <script> var myPin = {currIndex: 0,dataBin: [],getData: function  <span class="f-c-white l-mr3">  {// Una función que simplemente simula devolver un conjunto de resultados var idx = 0;// Determina si la página actual se lanzó como un sitio anclado. if (ventana .externo. msIsSiteMode  <span class="f-c-white l-mr3"> ) {idx = esto. currIndex ++;esta. currIndex = (this. currIndex <5)? esta. currIndex: 0;esta. dispOverlay (this. dataBin [idx]);}},setOverlay: function (icon, desc) {// Establece los iconos de superposición ventana. externo. msSiteModeSetIconOverlay (icon, desc);ventana. externo. msSiteModeActivate  <span class="f-c-white l-mr3"> ;},dispOverlay: function (theData) {var oImg = "";// ¿Hay datos?if (theData) {// Borrar cualquier icono de superposición preexistenteventana. externo. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Crea la cadena de la imagen oImg = "images / num_" + theData. num + ". ico";// Continúa y crea la imagen superpuesta y su etiqueta esta. setOverlay (oImg, theData. label);}},init: function (myData) {esta. dataBin = myData;}};// Esto borra cualquier ícono de superposición establecido previamente ventana. externo. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Ejecutarlo una vez para patear todo mi pin. init ([{"num": 1, "etiqueta": "Etiqueta 1"},{"num": 2, "etiqueta": "Etiqueta 2"},{"num": 3, "etiqueta": "Etiqueta 3"},{"num": 4, "etiqueta": "Etiqueta 4"},{"num": 5, "etiqueta": "Etiqueta 5"}]);// Esto solo está aquí porque quiero simular la extracción de datos en un intervalo regular setInterval (function  <span class="f-c-white l-mr3">  {myPin. getData  <span class="f-c-white l-mr3"> ;}, 5000); </ script>  </ body>  </ html>   </pre>  <p>   <em>  Este artículo fue publicado originalmente por el autor. Se vuelve a publicar, con ligeras modificaciones, con permiso.  </em>   </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/b649a5c8e3ef002e41328899c30f3b4e6.jpg" alt="Using Site Pinning and Overlay Icons for Enhanced User EngagementUsing Site Pinning and Overlay Icons for Enhanced User EngagementRelated Topics:
Email Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Conoce al autor  </div>  <div class="f-large"> Rey Bango <i class="fa fa-twitter">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Como Evangelista técnico para Microsoft, Rey se centra en promover las mejores prácticas para el desarrollo web del lado del cliente y ayudar a Microsoft a satisfacer las necesidades de esta comunidad. Es un apasionado de HTML5 y las posibilidades que ofrece para crear aplicaciones web ricas e interactivas. Además, Rey es miembro del equipo de proyecto de jQuery JavaScript y escritor de. revista neta.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </pre>  </pre>  </link>  </link>  </5>  </5>  </html>  </head>                                             
March 1, 2018