Mejorando la Experiencia de Inicio de Sesión: Simulando Actividad con Mensajes Dinámicos

En el mundo de la tecnología, la primera impresión es crucial. En un proceso de inicio de sesión de aplicación web, a menudo se recurre a la típica barra de progreso o al icónico spinner de carga para mantener a los usuarios informados sobre el progreso de la autenticación. Sin embargo, hoy queremos presentar una técnica más interesante y atractiva inspirada en juegos como The Sims: la simulación de actividad con mensajes dinámicos.

El codigo que os muestro es real y esta en producción, concretamente en el login de SWPanel de la empresa SW Hosting (espero que si leen el artículo no se enfaden 😄)

Manteniendo al Usuario Entretenido durante el Inicio de Sesión:

En lugar de hacer que los usuarios observen pasivamente una barra de progreso, ¿por qué no darles la sensación de que la aplicación está ocupada realizando múltiples tareas? Esta técnica simula actividad y proporciona una experiencia más interactiva y atractiva.

El Código en Acción:

A continuación, presentaremos el código JavaScript que permite simular mensajes de carga en un proceso de inicio de sesión. Esto es especialmente útil cuando se trata de aplicaciones que pueden tener una autenticación más larga y compleja. Los usuarios sentirán que algo está sucediendo en segundo plano.

function cambio_estado_login(tipo) {
    var temps = 2e3;

    if (document.getElementById('info_login_status')) {
        if (tipo == '2') {
            texto = login_texto_2fa;
        } else {
            texto = login_texto_1;
        }
        clearInterval(timer_status_login);

        var texto_load = texto.split(',');
        text_info_login_status += 1;

        if (text_info_login_status >= texto_load.length) {
            if (tipo == '2') {
                text_info_login_status = 0;
            } else {
                text_info_login_status = 0;
            }
            document.getElementById('info_login_status').innerHTML =
                texto_load[text_info_login_status];
        } else {
            document.getElementById('info_login_status').innerHTML =
                texto_load[text_info_login_status];
            timer_status_login = setInterval(function () {
                cambio_estado_login(tipo);
            }, temps);
        }
    }
}

var login_texto_1='Validando acceso SWPanel';
	login_texto_1 = login_texto_1 + ',' + 'Generando conexión segura de acceso'
	login_texto_1 = login_texto_1 + ',' + 'Cargando configuración de cuenta de cliente'
	login_texto_1 = login_texto_1 + ',' + 'Cargando datos personalizados de entorno'
	login_texto_1 = login_texto_1 + ',' + 'Personalizando tu SWPanel'
	login_texto_1 = login_texto_1 + ',' + 'Analizando servicios activos y recursos'
	login_texto_1 = login_texto_1 + ',' + 'Analizando uso de recursos de los servicios activos'
	login_texto_1 = login_texto_1 + ',' + 'Analizando servicios de Cloud'
	login_texto_1 = login_texto_1 + ',' + 'Analizando escalabilidad y disponibilidad de Cloud'
	login_texto_1 = login_texto_1 + ',' + 'Estudiando opciones y oportunidades de mejora'
	login_texto_1 = login_texto_1 + ',' + 'Analizando cartera de dominios'
	login_texto_1 = login_texto_1 + ',' + 'Preparando informes de caducidad de dominios'
	login_texto_1 = login_texto_1 + ',' + 'Analizando certificados SSL'
	login_texto_1 = login_texto_1 + ',' + 'Preparando informes de caducidad de SSL'
	login_texto_1 = login_texto_1 + ',' + 'Generando dashboard de SWPanel'
	login_texto_1 = login_texto_1 + ',' + 'Generando dashboards de servicios'
	login_texto_1 = login_texto_1 + ',' + 'Generando datos estadísticos'
	login_texto_1 = login_texto_1 + ',' + 'Generando entorno privado de soporte'
	login_texto_1 = login_texto_1 + ',' + 'Generando entorno privado de soporte'
	login_texto_1 = login_texto_1 + ',' + 'Actualizando cache de SWPanel'
	login_texto_1 = login_texto_1 + ',' + 'Revisando notificaciones pendientes'
	login_texto_1 = login_texto_1 + ',' + 'Revisando mensajes de soporte'
	login_texto_1 = login_texto_1 + ',' + 'Revisando estado de tu cuenta de cliente'
	login_texto_1 = login_texto_1 + ',' + 'Iniciando Interface de usuario de SWPanel'
	login_texto_1 = login_texto_1 + ',' + 'Aplicando perfiles de usuarios'
	login_texto_1 = login_texto_1 + ',' + 'Aplicando permisos de SWPanel'
	login_texto_1 = login_texto_1 + ',' + 'Aplicando seguridad'
	login_texto_1 = login_texto_1 + ',' + 'Analizando restricciones de acceso'
	login_texto_1 = login_texto_1 + ',' + 'Generando estadísticas e históricos de acceso'
	login_texto_1 = login_texto_1 + ',' + 'Generando identificador de sesión único'
	login_texto_1 = login_texto_1 + ',' + 'Iniciando tu SWPanel'
var login_texto_2fa = 'Iniciando verificación de doble factor';
	login_texto_2fa = login_texto_2fa + ',' + 'Validando códigos y tokens de seguridad'
	login_texto_2fa = login_texto_2fa + ',' + 'Comprobando identidad de acceso a SWPanel'
	login_texto_2fa = login_texto_2fa + ',' + 'Últimas validaciones de seguridad'
var text_contrato = 'Debes aceptar los términos del contrato de servicios.';

Cómo Funciona:

  • La función cambio_estado_login toma un argumento tipo, que determina los mensajes a mostrar.
  • Los mensajes se dividen en una matriz para que se puedan mostrar uno tras otro.
  • Se usa un contador para rastrear qué mensaje se mostrará a continuación.
  • Si se llega al final de la matriz de mensajes, el contador se reinicia.
  • Se configura un temporizador para llamar a la función nuevamente, simulando la animación de mensajes cambiantes.

Inspiración en The Sims:

Si alguna vez has jugado a The Sims, recordarás los mensajes extravagantes que aparecían en la parte inferior de la pantalla. Aunque exagerados, mantenían a los jugadores entretenidos mientras se realizaban tareas en el juego. Esta técnica toma inspiración de ese enfoque, adaptándolo de manera elegante y atractiva a un proceso de inicio de sesión en una aplicación.

En resumen, la simulación de mensajes de carga es una forma efectiva de mantener a tus usuarios entretenidos durante el proceso de inicio de sesión, proporcionando una experiencia más atractiva en lugar de una barra de progreso estática. Al tomar inspiración de juegos como The Sims, podemos mejorar la impresión del usuario y mantener su atención mientras la aplicación se autentica.

Google Analytics en Angular

Si trabajas con Angular (o algún sistema similar SPA) y has intentado usar google analytics para monitorizar tu página, te habrás dado cuenta de que GA no es capaz de «seguir» los cambios de URL de las SPA.

para que el seguimiento se realize correctamente, debemos llamar la función de Google Analytics que notifica que una URL ha sido visitada. Existen diferentes maneras de hacerlo, pero te explicaré la que yo uso 😉


El Script de Google Analytics

Voy a dar por supuesto que te has registrado en Google Analytics y tienes ya tu identificador ( del estilo ‘UA-4353454353-6’) Si no es así, ya sabes lo que toca!

Añade este código en tu ‘index.html’

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
</script>

Este es el código de Google que realizará el seguimiento. (Recuerda cambiar ‘UA-XXXXXXXXX-X’ por tu ID!!)

 

Fíjate que hemos eliminado del script original de GA la línea

ga('send', 'pageview');

Esta es la función que «comunica» la url que estamos visitando. La eliminamos por que la llamaremos desde el constructor de nuestros componentes.

Cargando las funciones GA en los componentes

Ahora, para poder llamar las funciones de Google Analytics desde nuestros componentes, vamos a instalar los @types/google.analytics que contienen las definiciones para Google Analytics. (Puedes consultar el paquete npm para más información)

Para instalarlas ejecutaremos en la carpeta de nuestro proyecto la siguiente instrucción:

npm install --save-dev @types/google.analytics

De esta manera tendremos disponibles las funciones ga() en nuestros componentes.

 

Llamando a desde el constructor del componente

Genial, pues solo nos falta llamar las funciones desde el componente que deseemos (hay que tener en cuenta que deberemos añadir este código a los constructores de cada componente que sea subsceptible de ser llamado por una ruta)
  constructor(
    private router: Router,
  ) {
    this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
    }
    });
  }
Como habrás adivinado, debes importar el Router de angular y el NavigationEnd para poder usarlos:
import { Router } from '@angular/router';
import { NavigationEnd } from '@angular/router';

En ocasiones algunos usuarios han reportado errores del estilo:
Cannot find name 'ga'. webpack: Failed to compile.
Esto es debido a que al compilar, angular no reconoce ga() como una función (aunque en realidad si esta disponible). Podemos solucionarlo fácilmente escribiendo la siguiente línea justo debajo de los imports:
declare var ga: Function;

Y con esto ya lo tienes! Tu página está monitorizada y podrás saber que le gusta a tus visitantes!

¿Qué són los Evergreen Browsers?

El término «evergreen browser» se refiere a los navegadores que se actualizan automáticamente a futuras versiones, en lugar de actualizarse mediante la distribución de nuevas versiones del fabricante, como es el caso de los exploradores incluidos en sistemas operativos como windows XP, Vista o 7.

El nombre «evergreen browser» viene dado por las hojas de compatibilidad de las versiones, en las que se comparan los navegadores con sus listas de compatibilidades, pintando las celdas de color verde si son compatibles y en rojo si no lo son.

Los evergreen son aquellos que siempre tienen su última versión en verde (compatible con las funcionalidades actuales)

Aparentemente este concepto de puede dar problemas a los desarolladores, ya que están forzados a tener en cuenta cada una de las versiones que se publican y dada la alta frecuencia de  actualizaciones, puede llegar a ser un quebradero de cabeza.

Por suerte, si los desarolladores siguen todos los estándares establecidos, las nuevas versiones respetarán el aspecto general (salvando algunas nuevas funcionalidades) y las webs serán compatibles o parcialmente compatibles.

¿Entonces que navegador debo usar?

Vayamos al grano: a día de hoy, prácticamente todos los sistemas operativos modernos traen un navegador que se actualiza regularmente, por lo tanto si usamos MacOS X 10.4 Mojave, Windows 10, iOS o Android en sus últimas versiones, podemos estar seguros de que los navegadores se mantienen actualizados.

Si por el contrario tenemso Windows XP o 7 (por ejemplo) nuestros navegadores seguramente ya estarán obsoletos.

Dicho esto, en términos generales podemos decir que nuestras preferencias de navegadores deberían ser Chrome, Firefox, Opera o Edge .

Personalmente uso Chrome, pero como os podéis imaginar, es cuestión de gustos!

OJO!

En Windows 10 todavía se conserva Internet Explorer como navegador, pero hay que diferenciarlo de Edge, són navegadores diferentes y Internet Explorer actualmente se considera obsoleto!