Diseño de una aplicación web para administrar clientes, cortes y generar fichas hotspot con integración a routers MikroTik

Web application layout for managing clients, billing, and generating hotspot vouchers with MikroTik router integration

Cuevas Aldana, Arturo; Sampayo Rodríguez, Carmen Jeannette; Hernández Luna, Aldo; Hernández Cabrera, Hugo

Arturo Cuevas Aldana

m23315016@huauchinango.tecnm.mx

Tecnológico Nacional de México, Instituto Tecnológico Superior de Huauchinango México

Carmen Jeannette Sampayo Rodríguez

carmen.sr@huauchinango.tecnm.mx

Tecnológico Nacional de México, Instituto Tecnológico Superior de Huauchinango México

Aldo Hernández Luna

aldo.hl@huauchinango.tecnm.mx

Tecnológico Nacional de México, Instituto Tecnológico Superior de Huauchinango México

Hugo Hernández Cabrera

hugo.hc@huauchinango.tecnm.mx

Tecnológico Nacional de México, Instituto Tecnológico Superior de Huauchinango México

Revista de Investigación en Tecnologías de la Información

Universitat Politècnica de Catalunya, España

ISSN-e: 2387-0893

Periodicidad: Bianual

vol. 12, núm. 26, 2024

editorial@riti.es

Recepción: abril 19, 2024

Aprobación: julio 25, 2024

URL: https://portal.amelica.org/ameli/journal/368/36851903685190001/

DOI: https://doi.org/10.36825/RITI.12.26.001

© Revista de Investigación en Tecnologías de la Información (RITI) 2024

License Creative Commons
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional.

Modelo de publicación sin fines de lucro para conservar la naturaleza académica y abierta de la comunicación científica

ePub generado a partir de XML JATS4R

Resumen: Con el creciente uso de internet, la gestión de clientes y administración de redes se han convertido en aspectos cruciales para empresas y proveedores de servicios de internet. Este artículo detalla el diseño de una aplicación web enfocada en simplificar la administración de clientes, cortes y la generación automática de fichas hotspot, con integración específica para routers MikroTik. Se adoptó la metodología de diseño centrado en el usuario (DCU), para la cual fue necesario identificar los perfiles y contexto de uso de la aplicación web. El resultado obtenido fueron los diseños y maquetado de alta fidelidad en Figma de las vistas de la aplicación web, las cuales demostraron ser fáciles de usar. Se recopilaron datos mediante encuestas para evaluar la experiencia del usuario con las vistas diseñadas. Se reveló que las interfaces propuestas no solo eran visualmente atractivas, sino también intuitivas para los usuarios. Este enfoque centrado en el usuario garantizó que la aplicación no solo cumpliera con los requisitos funcionales, sino que también ofreciera una experiencia de usuario óptima. En conclusión, la adopción de la metodología DCU en el diseño de esta aplicación web resultó en interfaces eficientes y atractivas, sentando las bases para su desarrollo futuro.

Palabras clave: Metodología DCU, Maquetado, Fichas Hotspot.

Abstract: With the increasing use of the Internet, client and network management have become crucial aspects for companies and Internet service providers. This article details the design of a web application focused on simplifying the management of clients, billing and the automatic generation of hotspot vouchers, with specific integration for MikroTik routers. The user-centered design (UCD) methodology was adopted, for which it was necessary to identify the profiles and context of use of the web application. The result was high fidelity Figma designs and layout of the web application views, which proved to be easy to use. Survey data was collected to assess the user experience with the designed views. It was revealed that the proposed interfaces were not only visually appealing, but also intuitive for users. This user-centric approach ensured that the application not only met the functional requirements, but also provided an optimal user experience. In conclusion, the adoption of the UCD methodology in the design of this web application resulted in efficient and attractive interfaces, laying the foundation for its future development.

Keywords: DCU Methodology, Layout, Hotspot Vouchers.

1. Introducción

En la actualidad digital en México, la conectividad ha adquirido un papel crucial en distintos sectores de la sociedad y las empresas. Esta ha posibilitado llevar a cabo una amplia gama de actividades, todo de manera rápida y sencilla.

Según la Encuesta Nacional sobre Disponibilidad y Uso de Tecnologías de la Información en los Hogares (ENDUTIH) realizada por el Instituto Nacional de Estadística y Geografía (INEGI) [1], el 78.6% de la población mayor de 6 años en México utiliza internet. En Puebla, se estima que el 94.4% tiene acceso desde el hogar, sin embargo, también se accede desde lugares como el trabajo (38.1%), la escuela (19.3%), sitios públicos con costo (18.4%), y sitios públicos sin costo (16.6%). Aunque una gran parte de la población en Puebla tiene acceso a internet desde el hogar, una porción significativa utiliza servicios públicos suministrados por terceros en lugares como el trabajo, la escuela u otros sitios públicos.

Los administradores de servicios de internet suelen gestionar sus redes a través de procedimientos realizados a mano (en papel o software de uso general), desde equipos de control específicos, o mediante software y sistemas propios. Esta gestión implica frecuentemente el control de usuarios, la supervisión de usuarios recurrentes, la denegación de servicios a usuarios no autorizados y, en ocasiones, la gestión de pagos por acceso a redes con mayores beneficios.

Los proveedores de servicios de internet, especialmente aquellos que comercializan sus servicios, suelen asignar a los usuarios un nombre de usuario específico y una contraseña única, conocidos como credenciales de acceso a la red (fichas hotspot), que son habitualmente utilizadas en entornos inalámbricos.

La generación de estas credenciales no es sencilla, ya que deben ser únicas para cada usuario y proporcionar la información de manera adecuada para evitar conflictos por parte de los usuarios de la red. En entornos con alta concurrencia, la generación manual de credenciales para múltiples usuarios se convierte en una tarea tediosa, repetitiva y propensa a errores humanos. La complejidad se incrementa cuando se incorpora el control de costos y la gestión de clientes o usuarios de la red, resaltando la clara necesidad de contar con un control preciso y efectivo en este proceso.

Por tanto, el presente proyecto tiene como objetivo realizar el diseño de una aplicación web que no solo simplificará la generación de fichas, sino que también permitirá:

Administrar los clientes que solicitan el servicio, facilitando las estadísticas y la toma de decisiones respecto al crecimiento del uso del servicio.

Generar los cortes de fichas, mejorando la administración del servicio proporcionado.

Enviar las fichas generadas a los dispositivos MikroTik, reduciendo los tiempos y la necesidad de conocimientos técnicos en el proceso.

Administrar las máquinas expendedoras vending, integrando dispositivos de venta autónomos para aumentar el alcance al público del servicio.

El presente artículo se centra en la fase de diseño del sistema, utilizando una metodología centrada en el usuario. Se describen los perfiles de usuario, junto con los requerimientos funcionales y no funcionales, y el diseño de la interfaz de usuario. Se hace hincapié en comprender las necesidades y expectativas de los usuarios durante este proceso de diseño.

2. Estado del arte

2.1. Metodología de diseño centrado en el usuario

El diseño centrado en el usuario (DCU) es un enfoque que coloca al usuario como el principal foco de atención durante todo el proceso de desarrollo de un sistema o producto. Esto implica una comprensión profunda de las necesidades y requisitos de los usuarios finales, así como una colaboración continua con ellos para garantizar que el producto final satisfaga sus expectativas y sea fácil de usar.

Implementar DCU puede ayudar a crear aplicaciones que ofrecen una visualización clara y automatizada de los datos, permitiendo la personalización de la información según las necesidades de los usuarios, contribuyendo a una experiencia de usuario óptima y altamente satisfactoria [2], [3].

2.2. Figma

Figma es una plataforma de diseño flexible y accesible que ofrece dos herramientas principales: Figma design y FigJam. Figma design es una herramienta colaborativa para crear, compartir y probar diseños de sitios web, aplicaciones móviles y productos digitales. Está dirigida a una amplia gama de usuarios, incluidos diseñadores, gestores de productos, redactores y desarrolladores, y les permite contribuir, aportar comentarios y tomar decisiones de forma eficaz.

Por otro lado, FigJam ofrece pizarras online en las que varios usuarios pueden colaborar en tiempo real. Se utiliza habitualmente para reuniones, sesiones de brainstorming, diagramas, planificación e investigación, y permite a los usuarios representar visualmente ideas utilizando diversos elementos como texto, formas, dibujos, imágenes y notas adhesivas [4].

2.3. Aplicación Web

Una Aplicación Web es un programa informático que funciona a través de internet y no requiere instalación directa en el disco duro del dispositivo. Opera en servidores remotos, procesando y almacenando datos, lo que posibilita el acceso desde cualquier ubicación y dispositivo con conexión a internet mediante un navegador web. A menudo utiliza datos de autenticación para garantizar la seguridad y eficiencia en el almacenamiento de información, respaldado por servidores distribuidos globalmente.

A diferencia de las páginas web estáticas, las aplicaciones web generan contenido dinámico según las interacciones del usuario, ofreciendo una experiencia interactiva. Se desarrollan utilizando lenguajes de programación como PHP, Java, Python y Ruby, los cuales son multiplataforma y compatibles con diversos gestores de bases de datos, facilitando su implementación sin limitaciones [5], [6], [7], [8], [9].

2.4. Administración de Clientes

La Administración de Clientes se refiere a las estrategias y técnicas implementadas por una empresa u organización para gestionar las relaciones e interacciones con sus clientes, tanto actuales como potenciales. Este proceso implica el uso de herramientas y políticas empresariales, como el Customer Relationship Management (CRM), para proporcionar un mejor servicio y atención al cliente en todas las áreas.

La gestión de clientes permite recopilar información relevante, como la frecuencia de compras y los hábitos de consumo, que son fundamentales para la toma de decisiones empresariales. Utilizando un software especializado en la gestión de clientes, la empresa puede optimizar sus estrategias hacia los clientes, fomentando la fidelización y el crecimiento del negocio [10], [11], [12].

2.5. Hotspot

Un hotspot (o punto de acceso), es un lugar físico donde los usuarios pueden conectar sus dispositivos, como computadoras o teléfonos inteligentes, a internet mediante una red inalámbrica local (WLAN), típicamente a través de wifi proporcionado por un router conectado a un proveedor de servicios de internet [13]. Existen tres tipos principales de hotspots según CenturyLink [14]:

Hotspots públicos: Ubicados en lugares como cafeterías, restaurantes, aeropuertos, bibliotecas y centros comerciales, ofrecen acceso a internet de forma gratuita o mediante tarifa para proporcionar comodidad a los usuarios en movimiento.

Hotspots móviles: Permiten a los usuarios convertir sus dispositivos móviles en puntos de acceso Wi-Fi utilizando la conexión de datos móviles para brindar internet a otros dispositivos.

Hotspots prepago: Los usuarios pueden adquirir una cantidad d

Las fichas hotspot son tarjetas (digitales o impresas), que se utilizan para comunicar a los usuarios de la red información importante, como nombre de usuario y contraseña para conectarse a la red de un proveedor de servicios, así como detalles como precio, tiempo de acceso, imágenes atractivas e incluso códigos QR.

2.6. MikroTik

MikroTik es una empresa con sede en Riga, Letonia, fundada en 1996, reconocida por su sistema operativo de red RouterOS y su plataforma de hardware RouterBOARD. RouterOS, basado en Linux, es el software encargado de administrar redes y puede ser instalado en el hardware proporcionado por MikroTik o en dispositivos específicos mediante descarga e instalación. A través de RouterOS, los usuarios pueden ejecutar comandos para diversas tareas utilizando herramientas proporcionadas por la empresa, aunque no permite el uso de controladores externos ni la creación de paquetes de software personalizados [15], [16].

2.7. Antecedentes

Los dispositivos MikroTik ofrecen una solución versátil y eficiente para la implementación de hotspots y portales cautivos en redes WLAN. Como señalan Zarate y Villero [17], “los RouterBoard de MikroTik han ganado una gran popularidad, por lo que son capaces de ofrecer todas las herramientas necesarias para llevar a cabo ya sea la implementación de un hotspot o hacer uso de otras de sus amplias funcionalidades de red”. Esta versatilidad, combinada con su excelente relación costo-beneficio, hace que los dispositivos MikroTik sean una opción ideal para desarrollar sistemas de gestión de usuarios en hotspots.

Además, la facilidad de uso y las capacidades de personalización de los dispositivos MikroTik los convierten en una plataforma ideal para el desarrollo de aplicaciones de gestión de usuarios. El artículo destaca que “gracias a su sistema operativo RouterOS brinda la fiabilidad y eficacia al momento de querer llevar todo esto acabo por lo que simplifica los procesos de creación y administración de todas sus funciones” [17]. Esta característica, junto con las robustas funciones de seguridad y control de tráfico, proporciona una base sólida para el desarrollo de un sistema de gestión de usuarios que sea eficiente, seguro y fácil de administrar.

Existen aplicaciones proporcionadas por los mismos proveedores del hardware que es necesario para administrar este tipo de redes, como lo es “Winbox”, una aplicación diseñada para administrar dispositivos “MikroTik RouterOS” [18] desarrollada y mantenida por esta misma compañía.

Esta aplicación se encuentra únicamente disponible para la plataforma Windows y se centra en la funcionalidad y la eficiencia. Es adecuada tanto para usuarios principiantes como avanzados, aunque carece de funciones administrativas avanzadas, lo que obliga a realizar ciertas tareas manualmente o con la ayuda de otros sistemas de software. Ofrece extensa documentación y una comunidad en línea activa para compartir experiencias y resolver problemas comunes. Su interfaz de usuario tiene una curva de aprendizaje suave, presentando los elementos ordenados y agrupados, facilitando la navegación por la aplicación. Sin embargo, su diseño podría modernizarse para mejorar la estética y la usabilidad en aspectos como la visualización de datos y la retroalimentación del sistema.

Algunas empresas de hardware ofrecen herramientas separadas para las funciones administrativas faltantes, pero estas pueden no ser populares o resultar complicadas para usuarios sin conocimientos técnicos, como en el caso de “MikroTik User Manager”. Esta aplicación RADIUS, distribuida como complemento en dispositivos MikroTik con RouterOS como sistema operativo, tiene una interfaz orientada a la funcionalidad en la que la disposición de los elementos puede ser complicada y desafiante por la falta de una orientación clara, dificultando la navegación en la aplicación [19].

“The Userman” es otra aplicación que simplifica las funciones del complejo “MikroTik User Manager”, ofreciendo una alternativa multiplataforma accesible incluso desde dispositivos Android. Se centra en tareas comunes para proveedores de internet, como la generación y gestión de usuarios, límites de tiempo, exportación de vouchers (fichas hotspot) y más [20]. Esta aplicación tiene un diseño fácil de usar, intuitivo y navegable, sin embargo, para algunos usuarios podría estar limitado o reducido para opciones más avanzadas.

“Mikhmon” es una aplicación web diseñada para facilitar la gestión de hotspots MikroTik sin la necesidad de un servidor RADIUS. Ofrece una configuración y administración más sencilla, disponible de forma gratuita para descarga. Su versión en línea tiene un costo asociado y está limitada a Indonesia, permite el registro de usuarios y proporciona funciones avanzadas como la generación automática de usuarios y la fijación de precios [21].

Los estudios de Hamid y Al Farizi [22] y Syaputra y Stiadi [23] destacan las múltiples ventajas de Mikhmon como una solución eficaz y accesible para la gestión de hotspots MikroTik. Esta herramienta ofrece una interfaz intuitiva que simplifica la administración de redes, haciéndola accesible incluso para usuarios sin conocimientos técnicos avanzados. Mikhmon permite generar y gestionar vouchers con diversos perfiles de usuario, establecer límites de tiempo y datos, y facilita la impresión de vouchers. Además, posibilita la implementación de planes de internet flexibles y asequibles (diarios, semanales o mensuales). Los estudios demostraron que este sistema no solo simplifica la gestión para los administradores, sino que también mejora significativamente la experiencia del usuario final, ofreciendo mejor velocidad de conexión y menor latencia en comparación con las opciones de internet móvil tradicionales.

Arta y Nugraha [24] en su investigación presentan un software de gestión de usuarios para hotspot MikroTik desarrollada en PHP utilizando la API de MikroTik y el framework Bootstrap. Su diseño se basa en una interfaz responsiva que incluye módulos para login de administrador, panel de control, gestión de usuarios activos y perfiles de usuario. La aplicación permite administrar fácilmente los usuarios y perfiles de hotspot sin necesidad de acceder directamente al router MikroTik. Esta solución busca simplificar la gestión de hotspot Mikrotik para administradores que no tienen conocimientos profundos del sistema, proporcionando una interfaz más amigable e intuitiva que la administración directa del router.

Ofrece una interfaz de usuario moderna y atractiva, con un diseño limpio y minimalista. Su UI (User Interface) se centra en la simplicidad, facilidad de uso y la claridad. En la experiencia del usuario (UX, User Experience) cuenta con retroalimentación visual y navegación fluida. Sin embargo, la falta de opciones de personalización y la limitación en algunas funciones pueden ser un obstáculo para usuarios con necesidades más avanzadas

En la Tabla 1 a continuación, se presenta una comparación entre las principales características de las aplicaciones mencionadas anteriormente y la aplicación diseñada en la presente investigación el cual lleva por nombre “Hotspot Manager”.

Tabla 1.

Comparación de sistemas administradores y el sistema diseñado en el presente artículo (Hotspot Manager).

Características | Winbox [18] | MikroTik User Manger [19] | The Userman [20] | Mikhmon [21] | Aplicación de gestión de usuarios hotspot [24] | Hotspot Manager
Año de creación | 1997 | 1997 | 2020 | 2017 | 2020 | 2024
Diseño de la interfaz intuitivo y fácil de usar (UI) | Si | No | Si | Si | Si | Si
Diseño moderno y limpio (UI) | No | No | No | Si | Si | Si
Navegación simplificada (UI) | Si | No | Si | Si | Si | Si
Retroalimentación visual (UX) | Si | No | Si | Si | Si | Si
Orientación y documentación (UX) | Si | No | Si | Si | No | Si
Personalización (UI) | No | No | No | Si | Si | Si
Fácil de usar sin conocimientos técnicos (UX) | No | No | Si | Si | Si | Si
Funciones administrativas para generación de fichas | No | Si | Si | Si | No | Si
Integración de venta automática con dispositivos vending | No | No | No | No | No | Si

Elaboración propia.

De esta forma, se busca abordar el problema mediante la creación de una aplicación web personalizada que pueda automatizar el proceso de generación y administración de credenciales de acceso hotspot.

3. Materiales y métodos

3.1. Proceso general de generación de fichas hotspot

El proceso común que se realiza al generar y distribuir las fichas hotspot incluye una serie de etapas que son necesarias para que el proceso se efectúe de forma clara y ordenada, tal como se muestra en la Figura 1. Es necesario conocer este procedimiento para entender el contexto de uso de la aplicación, así como las funciones que debe cumplir y el tipo de usuarios al que va dirigido.

Figura 1.
Pasos en el proceso general de generación de fichas hotspot.

En la primera etapa, administrar clientes, se debe recopilar y almacenar información detallada de cada cliente o usuario de las fichas hotspot, incluyendo datos de contacto y preferencias de servicio. La administración también incluye mantener un registro de las fichas asignadas a cada cliente, indicando la duración y el estado actual, así como monitorear la expiración de las fichas y realizar cortes o renovaciones según el periodo establecido.

Para la segunda etapa, generar fichas, con los datos de los clientes, se deben crear los usuarios y contraseñas para las fichas hotspot con información única para cada uno, ya sea de forma manual o utilizando alguna herramienta. Los patrones empleados suelen variar y no hay un estándar que garantice la seguridad de estos. Las fichas generadas se deben transferir al dispositivo de red, como los routers MikroTik, y si se requiere, distribuirlas a los puntos de venta o lugares autorizados para su venta al usuario final.

Finalmente, en la tercera etapa, el usuario final, los clientes individuales compran físicamente las fichas hotspot en ciertos puntos de venta autorizados. De esta forma, el usuario puede introducir la información de la ficha adquirida para acceder a la red en el portal hotspot correspondiente para que este verifique la información y establezca la conexión a internet del cliente.

3.2. Diseño centrado en el usuario

La metodología de diseño centrado en el usuario (DCU), también conocida como User-Centered Design (UCD), es fundamental en el desarrollo de productos y servicios, especialmente en el contexto de aplicaciones y sitios web.

Se enfoca en realizar una investigación y hacer partícipes a los usuarios finales, permitiendo que sus necesidades guíen el proceso de desarrollo. A diferencia del design thinking, que se enfoca en diseñar pensando en la funcionalidad del producto adaptado al usuario, el DCU involucra al usuario en todas las etapas, desde el entendimiento del contexto hasta la evaluación de los resultados [25],[26].

El objetivo principal de diseñar utilizando esta metodología es que el producto final satisfaga las necesidades y expectativas de los usuarios. Para esto, debe comprender al usuario y su contexto para identificar quiénes serán los usuarios del producto, qué necesidad suplirá y bajo qué circunstancias se utilizará. Algunas técnicas que se suelen emplear durante las fases del DCU son [27]:

Encuestas o cuestionarios: Se puede obtener información estadística mediante preguntas abiertas o cerradas acerca de la opinión de los usuarios con respecto al diseño del producto.

Test de usuarios: Permite observar cómo los usuarios llevan a cabo tareas encomendadas y detectar así problemas de usabilidad.

Evaluación heurística: No requiere la participación de usuarios, ya que utiliza una inspección de diseño realizada por expertos en usabilidad, buscando problemas y verificando el cumplimiento de los principios de diseño establecidos.

Card sorting: Se usa para comprender la estructura semántica del conocimiento que los usuarios tienen sobre un dominio en concreto. Para esto, se solicita a un grupo de participantes agrupar fichas o tarjetas con conceptos del proceso similares, identificando las relaciones entre ellos, orden y sugerencias.

Eye-tracking: Consiste en analizar la exploración visual de los usuarios en una interfaz, registrado sus áreas de atención y el orden en que lo hacen.

Etnografía: Busca estudiar y describir la conducta, comportamiento y creencias de los usuarios en un contexto específico. Utiliza métodos cualitativos para comprender el comportamiento social de los usuarios y así obtener información para el diseño.

El diseño centrado en el usuario se desarrolla en cuatro fases fundamentales que son el análisis del contexto, la definición de los requisitos, el diseño y la evaluación, como puede observarse en la Figura 2. Estas fases tienen una naturaleza cíclica y adaptativa que permite la retroalimentación entre sí para mejorar continuamente el producto final y garantizar una experiencia óptima [25].

Figura 2.
Fases del proceso de la metodología de diseño centrado en el usuario (DCU) [25].

Durante el diseño para la aplicación web administradora de fichas hotspot, se ejecutó cada una de las fases de forma iterativa hasta lograr un diseño con todas las características requeridas por el sistema, pero a la vez, que sea fácil de usar y con una interfaz moderna y visualmente atractiva para los usuarios.

3.2.1. Análisis del contexto

En esta etapa, se llevó a cabo una investigación para determinar la existencia de aplicaciones con una funcionalidad similar. Se buscó comprender el entorno y las necesidades de los usuarios utilizando entrevistas con posibles usuarios finales de los que se buscó obtener los perfiles de usuario para determinar sus necesidades. A partir del análisis de estos datos y de la retroalimentación, se obtuvieron los perfiles de usuario que se pueden observar en la Tabla 2, Tabla 3 y Tabla 4.

Tabla 2.

Características del perfil de usuario para un Administrador del Sistema.

Perfil:
Administrador del sistema
Nivel de experiencia técnica:
Alto

Objetivos y responsabilidades:
· Supervisar y coordinar las operaciones del sistema de generación de credenciales y control de acceso. · Automatizar procesos de generación de fichas hotspot y su ingreso en los routers Mikrotik. · Gestionar la venta de fichas a los clientes. · Llevar un registro detallado de las transacciones, movimientos y eventos del sistema. · Prever la escalabilidad del sistema para futuras expansiones.

Necesidades y dificultades:
· Requiere un sistema robusto y automatizado que simplifique su trabajo diario. · Necesita acceso a herramientas avanzadas para administrar el sistema y coordinar las operaciones. · Busca una interfaz intuitiva pero potente que le permita supervisar y controlar todas las funciones del sistema.

Expectativas de la aplicación:
· Espera una aplicación web centralizada que integre todas las funciones necesarias para la gestión del negocio. · Desea que el sistema automatice la generación de fichas, su ingreso en los routers y las ventas con las máquinas vending. · Valora un registro detallado y exhaustivo de todas las actividades del sistema.

Habilidades y conocimientos relevantes:
· Experiencia en administración de redes y sistemas. · Conocimientos en el uso y configuración de routers Mikrotik. · Capacidad para analizar datos y tomar decisiones estratégicas para el crecimiento del negocio.

Preferencias de interfaz y experiencia de usuario
· Prefiere una interfaz personalizable y adaptable a sus necesidades específicas. · Busca herramientas de reporte y análisis que le permitan obtener información sobre el rendimiento del negocio.

Elaboración propia.

Tabla 3.

Características del perfil de usuario para un Empleado del negocio.

Perfil: | Usuario Intermedio | Nivel de experiencia técnica: | Medio
Objetivos y responsabilidades: | · Utilizar la aplicación para generar credenciales hotspot y controlar el acceso a la red. · Realizar tareas básicas de administración de usuarios y configuración de credenciales. · Puede necesitar asistencia ocasional para funciones más avanzadas o problemas técnicos.
Necesidades y dificultades: | · Requiere una interfaz intuitiva y fácil de usar para realizar tareas de administración de forma eficiente. · Puede necesitar orientación o documentación adicional para comprender todas las funcionalidades de la aplicación.
Expectativas de la aplicación: | · Espera una aplicación que le permita realizar tareas de administración de manera efectiva sin requerir un conocimiento técnico profundo. · Valora la disponibilidad de soporte o recursos de ayuda para resolver problemas o responder preguntas.
Habilidades y conocimientos relevantes: | · Tiene cierto conocimiento técnico en redes y sistemas, pero puede no estar familiarizado con conceptos avanzados. · Capaz de seguir instrucciones y realizar tareas básicas de administración con orientación mínima.
Preferencias de interfaz y experiencia de usuario | · Prefiere una interfaz clara y organizada que le guíe a través de las tareas de manera sencilla. · Valora la disponibilidad de herramientas de ayuda y documentación dentro de la aplicación.

Elaboración propia.

Tabla 4.

Características del perfil de usuario para un Usuario Intermedio.

Perfil: | Usuario Intermedio | Nivel de experiencia técnica: | Medio
Objetivos y responsabilidades: | · Utilizar la aplicación para generar credenciales hotspot y controlar el acceso a la red. · Realizar tareas básicas de administración de usuarios y configuración de credenciales. · Puede necesitar asistencia ocasional para funciones más avanzadas o problemas técnicos.
Necesidades y dificultades: | · Requiere una interfaz intuitiva y fácil de usar para realizar tareas de administración de forma eficiente. · Puede necesitar orientación o documentación adicional para comprender todas las funcionalidades de la aplicación.
Expectativas de la aplicación: | · Espera una aplicación que le permita realizar tareas de administración de manera efectiva sin requerir un conocimiento técnico profundo. · Valora la disponibilidad de soporte o recursos de ayuda para resolver problemas o responder preguntas.
Habilidades y conocimientos relevantes: | · Tiene cierto conocimiento técnico en redes y sistemas, pero puede no estar familiarizado con conceptos avanzados. · Capaz de seguir instrucciones y realizar tareas básicas de administración con orientación mínima.
Preferencias de interfaz y experiencia de usuario | · Prefiere una interfaz clara y organizada que le guíe a través de las tareas de manera sencilla. · Valora la disponibilidad de herramientas de ayuda y documentación dentro de la aplicación.

Elaboración propia.

Estos perfiles fueron fundamentales para determinar en qué contexto será utilizada la aplicación y la experiencia técnica de los usuarios que la pueden llegar a utilizar. Así como sus expectativas y sugerencias para integrarlas de la mejor manera posible y ofrecer un diseño con una mayor calidad.

3.2.2. Definición de los Requisitos

Con base en los perfiles de usuario obtenidos en la fase anterior, se realizó un análisis para establecer los objetivos de la aplicación basados en las necesidades identificadas. En la Tabla 5 se presentan los requerimientos funcionales y no funcionales, producto del análisis de los datos de los posibles usuarios finales.

Tabla 5.

Requerimientos funcionales y no funcionales de la aplicación web.

Requerimientos Funcionales
Nombre | Descripción
Generación de credenciales hotspot | La aplicación debe permitir la generación automatizada de credenciales hotspot a partir de perfiles predefinidos, incluyendo opciones de precio y duración configurables.
Integración con routers Mikrotik | La aplicación debe integrarse con routers MikroTik para ingresar automáticamente las credenciales generadas, simplificando la configuración de la red.
Gestión de clientes y control de acceso | Los administradores deben poder gestionar clientes y controlar su acceso a la red, incluyendo la capacidad de conectar y desconectar usuarios según su estado de pago o su situación en la red.
Registro detallado de transacciones y eventos | La aplicación debe llevar un registro detallado de todas las transacciones, movimientos y eventos del sistema, proporcionando un historial completo de las actividades realizadas.
Administración de máquinas vending | La aplicación debe permitir la gestión de máquinas vending autónomas, incluyendo la capacidad de mantener un inventario de fichas y gestionar las transacciones de ventas.
Requerimientos no Funcionales
Nombre | Descripción
Seguridad | La aplicación debe cumplir con altos estándares de seguridad para proteger la información sensible de los usuarios y garantizar la integridad de los datos.
Usabilidad | La interfaz de usuario debe ser intuitiva y fácil de usar, permitiendo a los usuarios realizar tareas de manera eficiente y sin la necesidad de un conocimiento técnico avanzado.
Rendimiento | La aplicación debe ser rápida y eficiente, garantizando tiempos de respuesta rápidos y un rendimiento óptimo incluso durante períodos de alta carga de trabajo.
Escalabilidad | El sistema debe ser escalable para adaptarse a un crecimiento futuro, incluyendo la capacidad de manejar un mayor número de usuarios.
Disponibilidad | La aplicación debe estar disponible y accesible en todo momento, minimizando cualquier tiempo de inactividad o interrupción en el servicio.

Elaboración propia.

3.2.3. Diseño

Para la fase de construcción del diseño, se empleó el software Figma en su versión gratuita, ya que la plataforma facilita la creación wireframes (diseños alámbricos que simulan el flujo y distribución de los elementos en la interfaz), mockups (diseños avanzados con colores, tipografías e imágenes) y prototipos interactivos que permitieron visualizar y validar el diseño antes de la implementación.

Con base en las fases anteriores, se construyeron bocetos sencillos de las principales vistas de la aplicación conocidos como wireframes, mismos que también fueron puestos a evaluación por posibles usuarios para obtener así sus opiniones y sugerencias de modo que en una fase de diseño más avanzada se tuviera una noción más clara de lo que se busca en la aplicación.

Estos diseños se presentan a continuación en la Figura 3. La pantalla de inicio de sesión Figura 3 (a) permite a los usuarios ingresar su usuario y contraseña registrados. Una vez autenticados, acceden a la pantalla de lista de clientes Figura 3 (b), donde pueden ver los clientes registrados. La pantalla de registro de nuevos clientes Figura 3 (c) facilita la adición de nuevos clientes mediante un formulario. Por último, la pantalla de generación de fichas Figura 3 (d) permite a los usuarios elegir la cantidad de fichas de cada perfil para utilizar las herramientas del sistema.

Figura 3.
Wireframes de las vistas principales de la aplicación web.

En la fase de diseño más avanzada, se procedió a crear los mockups de la aplicación, agregando también interactividad para que el usuario tenga una noción más clara del sistema real. Estas vistas fueron también evaluadas y verificadas hasta obtener los resultados deseados por los usuarios del sistema.

Se decidió crear también un logotipo con los elementos principales de la aplicación para generar una identidad a la aplicación web y mejorar la aceptación por parte del usuario. En el centro de un círculo que abarca un degradado de tonos azules, con un borde distintivo de color negro, se encuentra el icónico símbolo del wifi. Este símbolo, en un tono azul claro, se encuentra combinado con un icono en color blanco que representa la parte superior de un engranaje, indicando la capacidad administrativa del sistema. Justo debajo, en el mismo tono de azul, se encuentra la palabra “HOTSPOT”, y finalmente, en letras blancas, la palabra “MANAGER” completa el diseño, indicando claramente la capacidad del sistema para gestionar puntos de acceso hotspot de wifi. Este diseño captura de manera efectiva la esencia y la funcionalidad del software, ofreciendo una identidad visual distintiva y memorable. Este logotipo se presenta en la Figura 4.

Figura 4.
Representación gráfica del logotipo diseñado para la aplicación web.

3.2.4. Evaluación

Con la participación de los posibles usuarios de forma iterativa durante el proceso de construcción del diseño de la aplicación, se realizaron constantes evaluaciones para determinar que la interfaz diseñada cuenta con las características deseadas de usabilidad y a la vez, con las funcionalidades requeridas. A continuación, se presenta una lista de las preguntas empleadas para validar los diseños con los usuarios, las cuales fueron presentadas con una escala de respuesta del 1 al 5 (donde 1 es en desacuerdo y 5 de acuerdo) y divididas en tres secciones para evaluar diferentes aspectos de la aplicación:

Distribución y apariencia

1. ¿Qué opinas del diseño visual de la aplicación en general?

2. ¿Te resulta agradable la disposición de los elementos en las vistas de la aplicación?

3. ¿Estás de acuerdo con la paleta de colores utilizada en la aplicación?

4. ¿Estás de acuerdo en que los elementos visuales (iconos, botones, etc.) son coherentes y consistentes en toda la aplicación?

5. ¿La tipografía utilizada en la aplicación es fácil de leer?

6. ¿Estás de acuerdo en que los textos y etiquetas están bien organizados y son claros en todas las vistas de la aplicación?

7. ¿Qué opinas del diseño del logotipo?

Funciones de la aplicación

1. ¿Consideras que la generación de credenciales hotspot es fácil de entender?

2. ¿Estás de acuerdo en que los pasos para generar credenciales hotspot son lógicos y claros?

3. ¿Cómo evaluarías la disposición de los elementos en la pantalla de generación de credenciales hotspot?

4. ¿La navegación del diseño te da una idea clara de cómo sería la integración con routers Mikrotik?

5. ¿Encuentras que la información proporcionada en las pantallas relacionadas con la integración es suficiente para entender el proceso?

6. ¿Es fácil comprender cómo se gestionan los clientes?

7. ¿Encuentras que las opciones para gestionar los cortes de fichas son claras?

Experiencia de usuario

1. ¿Crees que la aplicación cumple con tus expectativas en términos de usabilidad?

2. ¿Te resulta fácil encontrar la información que necesitas en la aplicación?

3. ¿Cómo calificarías tu nivel de satisfacción al utilizar la aplicación?

4. ¿Encuentras que la navegación entre las diferentes secciones de la aplicación es intuitiva?

5. ¿Te resulta fácil volver atrás o encontrar el camino de regreso en la aplicación?

6. ¿Consideras que la estructura de menús y enlaces facilita la exploración de la aplicación?

7. ¿Hay algún aspecto de la navegación que te resulte confuso o difícil de entender?, ¿cuál?

4. Resultados

Como resultado del uso de la metodología de diseño centrada en el usuario, se obtiene una serie de interfaces de alta fidelidad maquetadas con el software de diseño Figma. Estas interfaces representan el diseño y características que debe tener el software cuando sea construido mediante algún lenguaje de programación. En la Figura 5 (a) se muestra la primera interfaz mostrada al usuario, y que consiste en un inicio de sesión para la aplicación. Es esta pantalla, el usuario debe ingresar su correo y contraseña registrados previamente en el sistema. Después de que el usuario inicie sesión, se le muestra la siguiente pantalla de inicio mostrada en la Figura 5 (b), con información relevante que le interesa al usuario y que puede ser usada para conocer el estatus actual del sistema.

Figura 5.
(a) Diseño de la pantalla de inicio de sesión; (b) Diseño de la pantalla principal después de iniciar sesión.

La interfaz de usuario incluye un menú lateral izquierdo para mostrar al usuario las opciones y herramientas disponibles, y dentro de estas opciones, se incluye una específicamente para gestionar los clientes registrados en el sistema. En la Figura 6 (a) puede observarse la pantalla que permite listar los clientes registrados según los filtros aplicados y así efectuar operaciones de edición y de generación de fichas. En la Figura 6 (b) puede observarse la pantalla que tiene la capacidad de registrar los datos de un nuevo cliente que son necesarios para el sistema, así como sus datos de contacto y una imagen representativa del usuario.

Figura 6.
Pantallas para la gestión de clientes: (a) Listado y filtrado de clientes registrados; (b) Registro de nuevos clientes.

Cuando el usuario elige generar fichas para cualquiera de los clientes, se muestra una interfaz como en la Figura 7 (a) que le permite ingresar la cantidad de fichas por cada perfil de fichas definido previamente en el sistema. Además, permite ingresar una promoción que aparecerá en las fichas y comentarios adicionales. Una vez que estas fichas se hayan generado, se agrupan y muestran en la pantalla de la Figura 7 (b) en lotes con las características definidas por el usuario, permitiéndole generar un archivo en formato PDF con estas fichas o enviarlas al dispositivo MikroTik asignado al cliente para que puedan ser usadas al comprarlas.

Figura 7.
Pantallas para la generación de fichas: (a) Generación de nuevas fichas hotspot a partir de las cantidades ingresadas en los perfiles; (b) Visualización de los datos del lote y las fichas generadas.

Después de que el usuario crea el lote de fichas hotspot que desea para un cliente, puede enviarlas al dispositivo MikroTik registrado y asignado previamente al cliente para de esta manera, cuando la ficha sea comprada y utilizada pueda ser funcional y permita la conexión a la red. Esto se realiza desde la pantalla de la Figura 8 (a), que le da posibilidad de enviarlas directamente o generar los comandos de RouterOS que son necesarios. En la pantalla de la Figura 8 (b), el usuario puede crear nuevos cortes de ficha para tener un registro sobre el número de fichas por perfil que han sido vendidas, sobrantes y aquellas que han tenido problemas técnicos al momento de intentar utilizarse.

Figura 8.
Pantallas adicionales: (a) Creación de comandos MikroTik para RouterOS o envío directo desde la aplicación; (b) Generación de un nuevo corte de fichas para un cliente.

Adicionalmente a las herramientas de la aplicación, el usuario puede modificar sus datos a través de la pantalla de la Figura 9 (a), teniendo la capacidad de modificar incluso su contraseña y su imagen de perfil. También puede obtener una experiencia más personalizada al modificar los ajustes de la aplicación a través de la pantalla de la Figura 9 (b).

Figura 9.
Pantallas de configuración: (a) Modificación de datos del usuario y foto de perfil; (b) Edición de configuraciones generales de la aplicación.

Al realizar la evaluación final de las interfaces diseñadas, se obtienen los resultados mostrados en la Tabla 6 en un grupo de cinco usuarios que representan su opinión con respecto a la aplicación.

Tabla 6.

Respuestas de los usuarios a las evaluaciones del diseño de la aplicación web.

Preguntas | Usuarios
U1 | U2 | U3 | U4 | U5
Distribución y apariencia
1) ¿Qué opinas del diseño visual de la aplicación en general? | 5 | 5 | 5 | 3 | 4
2) ¿Te resulta agradable la disposición de los elementos en las vistas de la aplicación? | 5 | 5 | 5 | 4 | 5
3) ¿Estás de acuerdo con la paleta de colores utilizada en la aplicación? | 5 | 5 | 5 | 3 | 4
4) ¿Estás de acuerdo en que los elementos visuales (iconos, botones, etc.) son coherentes y consistentes en toda la aplicación? | 5 | 5 | 5 | 5 | 5
5) ¿La tipografía utilizada en la aplicación es fácil de leer? | 5 | 5 | 5 | 5 | 5
6) ¿Estás de acuerdo en que los textos y etiquetas están bien organizados y son claros en todas las vistas de la aplicación? | 5 | 5 | 5 | 5 | 5
7) ¿Qué opinas del diseño del logotipo? | 5 | 5 | 5 | 4 | 4
Funciones de la aplicación
1) ¿Consideras que la generación de credenciales hotspot es fácil de entender? | 5 | 5 | 5 | 3 | 4
2) ¿Estás de acuerdo en que los pasos para generar credenciales hotspot son lógicos y claros? | 5 | 5 | 5 | 5 | 5
3) ¿Cómo evaluarías la disposición de los elementos en la pantalla de generación de credenciales hotspot? | 5 | 5 | 5 | 4 | 4
4) ¿La navegación del diseño te da una idea clara de cómo sería la integración con routers Mikrotik? | 5 | 5 | 5 | 3 | 3
5) ¿Encuentras que la información proporcionada en las pantallas relacionadas con la integración es suficiente para entender el proceso? | 5 | 5 | 5 | 3 | 3
6) ¿Es fácil comprender cómo se gestionan los clientes? | 5 | 5 | 5 | 4 | 4
7) ¿Encuentras que las opciones para gestionar los cortes de fichas son claras? | 5 | 5 | 5 | 4 | 4
Experiencia de usuario
1) ¿Crees que la aplicación cumple con tus expectativas en términos de usabilidad? | 5 | 5 | 5 | 4 | 4
2) ¿Te resulta fácil encontrar la información que necesitas en la aplicación? | 5 | 5 | 5 | 4 | 4
3) ¿Cómo calificarías tu nivel de satisfacción al utilizar la aplicación? | 5 | 5 | 5 | 4 | 4
4) ¿Encuentras que la navegación entre las diferentes secciones de la aplicación es intuitiva? | 5 | 5 | 5 | 5 | 4
5) ¿Te resulta fácil volver atrás o encontrar el camino de regreso en la aplicación? | 5 | 5 | 5 | 4 | 4
6) ¿Consideras que la estructura de menús y enlaces facilita la exploración de la aplicación? | 5 | 5 | 5 | 4 | 5
7) ¿Hay algún aspecto de la navegación que te resulte confuso o difícil de entender? | 5 | 5 | 5 | 4 | 5

Elaboración propia.

En la Gráfica 1, se muestran los resultados obtenidos en la sección de la encuesta referente a la distribución y apariencia de la aplicación cuyo objetivo es evaluar la percepción del usuario sobre el diseño visual general de la aplicación, incluyendo la disposición de los elementos, la paleta de colores, la coherencia y consistencia de los elementos visuales, la legibilidad de la tipografía y la organización y claridad de los textos y etiquetas en todas las vistas. Además, busca obtener una opinión sobre el diseño del logotipo.

Gráfica 1.
Resultados de la encuesta sobre la distribución y apariencia visual de la aplicación, evaluando la disposición de elementos, paleta de colores, y coherencia visual.

En general, los resultados de esta sección son muy positivos, con excelentes calificaciones en la mayoría de los aspectos evaluados. Los usuarios consideran que la disposición de elementos, la consistencia visual, la tipografía y la organización de textos son aspectos destacados del diseño de la aplicación. Las áreas con un ligero margen de mejora serían el diseño visual y la paleta de colores, aunque aun así la mayoría de los usuarios están satisfechos.

Para evaluar la percepción del usuario sobre la facilidad de uso y comprensión de las funciones principales de la aplicación, como la generación de credenciales hotspot, la integración con routers Mikrotik y la gestión de clientes y cortes de fichas. Se busca determinar si los pasos y la disposición de los elementos son lógicos y claros, si la información proporcionada es suficiente para comprender los procesos y si las opciones de gestión son fáciles de entender. En la Gráfica 2 se muestran los resultados obtenidos de esta sección.

Gráfica 2.
Resultados de la encuesta sobre la facilidad de uso y comprensión de las funciones principales de la aplicación, como la generación de fichas hotspot y la gestión de clientes.

Las áreas más sólidas en esta sección son los pasos para generar credenciales hotspot, la disposición de elementos en esa pantalla, y la gestión de clientes y cortes de fichas. Sin embargo, se identifica un área de mejora potencial en la claridad de la navegación y la información proporcionada sobre la integración con routers Mikrotik. Si bien la mayoría de los usuarios encuentran fácil entender la generación de credenciales, hay una opinión más dividida en cuanto a la comprensión de la integración con Mikrotik.

Finalmente, en la Gráfica 3 correspondiente a la última sección de la encuesta dedicada a la experiencia de usuario, busca evaluar la satisfacción general del usuario con la aplicación en términos de usabilidad, facilidad para encontrar información, navegación intuitiva entre secciones, facilidad para regresar o retroceder, estructura de menús y enlaces, y cualquier aspecto confuso o difícil de entender en la navegación. Se busca obtener una calificación del nivel de satisfacción y determinar si la aplicación cumple con las expectativas del usuario.

Gráfica 3.
Resultados de la encuesta sobre la experiencia de usuario, incluyendo usabilidad, navegación intuitiva, y satisfacción general con la aplicación.

Los resultados de esta sección son muy positivos, sugiriendo una excelente experiencia de usuario en términos de usabilidad, facilidad para encontrar información, niveles de satisfacción, navegación intuitiva, estructura de menús y claridad en la navegación. Las calificaciones más bajas tienden a ser de 4, lo que aún es un buen resultado. En general, parece que la aplicación cumple con las expectativas de los usuarios en cuanto a la experiencia de usuario, sin aspectos particularmente confusos o difíciles de entender.

El análisis de los resultados de la encuesta revela una recepción generalmente positiva del diseño y la experiencia del usuario entre los encuestados. Se observa una cantidad mínima de sugerencias y comentarios negativos, lo que, junto con las altas calificaciones, indica un nivel general de satisfacción elevado. Se han identificado áreas potenciales de mejora, como el diseño visual general, la paleta de colores y la claridad en el acceso a algunas funciones. Es importante mencionar que estos aspectos serán abordados durante la próxima fase de desarrollo del software y la fase de documentación. Tomar en cuenta estas áreas de mejora garantiza una experiencia de usuario aún más sólida y con una mayor calidad para el producto final.

5. Conclusiones

El diseño realizado para la aplicación de generación de credenciales hotspot ha resultado exitoso, demostrando ser tanto fácil de usar como atractivo para los usuarios. A través del proceso de diseño centrado en el usuario (DCU) y la utilización del software Figma, se ha logrado crear una interfaz intuitiva que se adapta a las necesidades y expectativas de los usuarios. La aplicación ofrece una experiencia de usuario que facilita la navegación y la realización de tareas de manera efectiva.

El diseño se ha enfocado en la usabilidad y la estética, priorizando la creación de una interfaz amigable que permita a los usuarios interactuar de forma intuitiva con el sistema. Además, se ha tenido en cuenta la retroalimentación de los usuarios a lo largo del proceso de diseño, lo que ha contribuido a mejorar y refinar la experiencia de usuario final.

Si bien el diseño ha sido completado con éxito, es importante reconocer que el proceso de creación del software es un trabajo futuro que requerirá una implementación cuidadosa y meticulosa. Sin embargo, se tiene confianza en que el diseño establecido proporcionará una sólida base para el desarrollo del software, asegurando que el producto final cumpla con las expectativas de los usuarios y satisfaga sus necesidades.

6. Agradecimientos

Los autores ofrecen sus agradecimientos al Tecnológico Nacional de México/Instituto Tecnológico Superior de Huauchinango, Maestría en Tecnologías de la Información por el apoyo brindado en la realización de la presente investigación. Asimismo, extendemos nuestro agradecimiento a la Revista de Investigación en Tecnologías de la Información (RITI) por su invaluable contribución al publicar este artículo.

7. Referencias

[1] INEGI. (2022). Encuesta Nacional sobre Disponibilidad y Uso de Tecnologías de la Información en los Hogares (ENDUTIH) 2022. https://www.inegi.org.mx/programas/dutih/2022/#tabulados

[2] Pérez Quintero, J., Alonso Ramírez, L., Montané Jiménez, L. G., Díaz Preciado, J. C. (2023). VisCFDI: Aplicación web interactiva para visualización y análisis de datos de facturas electrónicas en México. Revista de Investigación en Tecnologías de la Información (RITI), 11 (23), 82–97. https://doi.org/10.36825/RITI.11.23.008

[3] Tlapa García, L. A., Escalante Vega, J. E., Alonso Ramírez, L. (2021). Aplicación interactiva para el aprendizaje con evaluaciones en el área de las matemáticas. Revista de Investigación en Tecnologías de la Información (RITI), 9 (19), 16–31. https://doi.org/10.36825/RITI.09.19.002

[4] Figma. (2021). What is Figma?. https://help.figma.com/hc/en-us/articles/14563969806359-What-is-Figma

[5] Gutiérrez Tiuso, A. R. (2020). La Importancia de las Aplicaciones Web y Móviles en el Éxito Empresarial. https://revistaempresarial.com/tecnologia/la-importancia-de-las-aplicaciones-web-y-moviles-en-el-exito-empresarial/

[6] Adobe. (2021). ¿Qué son las aplicaciones web y las páginas web dinámicas? Aspectos básicos de las aplicaciones web. https://helpx.adobe.com/mx/dreamweaver/using/web-applications.html

[7] GCFGlobal. (2022). Informática Básica: ¿Qué son las aplicaciones web? https://edu.gcfglobal.org/es/informatica-basica/que-son-las-aplicaciones-web/1/

[8] ICTEA. (2017). ¿Qué es una aplicación web? - Base de Conocimientos. https://www.ictea.com/cs/index.php?rp=/knowledgebase/4205/iQue-es-una-aplicacion-web.html

[9] Valarezo Pardo, M. R., Honores Tapia, J. A., Gómez Moreno, A. S., Vinces Sánchez, L. F. (2018). Comparación de tendencias tecnológicas en aplicaciones web. 3C Tecnología Glosas de innovación aplicadas a la pyme, 7 (3), 28–49. https://doi.org/10.17993/3ctecno.2018.v7n3e27.28-49/

[10] Cesce España. (2022). Gestión de clientes: Qué es y su importancia. https://www.cesce.es/es/w/asesores-de-pymes/gestion-de-clientes

[11] Administra Bien.com. (2017). Administración de relaciones con los clientes. https://www.administrabien.com/administracion-de-relaciones-con-los-clientes/

[12] López Díaz, J., Arias, A. A. (2018). Propuesta para implementar un software de gestión de clientes, como estrategia CRM en la empresa Pri5ma S.A.S [Tesis de Grado]. Universidad de La Salle, Bogotá D.C. https://ciencia.lasalle.edu.co/administracion_de_empresas/1356/

[13] Intel Corporation. (2017). ¿Qué es un punto de acceso? - Definiciones y detalles del punto de acceso WiFi. https://www.intel.com/content/www/us/en/tech-tips-and-tricks/what-is-a-hotspot.html

[14] CenturyLink. (2023). What is a WiFi hotspot? https://discover.centurylink.com/what-is-a-wifi-hotspot.html

[15] MikroTik. (2019). MikroTik Routers and Wireless. MikroTik. https://mikrotik.com/

[16] Hart, T. (2017). Networking With MikroTik: MTCNA Study Guide. Independently Published.

[17] Zarate Iguaran, E. D., Villero Contreras, S. L. (2020). El uso de los portales cautivos en redes WLAN a través de dispositivos MikroTik como la mejor herramienta para controlar el tráfico de datos. Revista Interdisciplinar de Estudios en Ciencias Básicas e Ingenierías, 7 (2), 9–17.

[18] MikroTik Documentation. (2020). Winbox—RouterOS. https://help.mikrotik.com/docs/display/ROS/Winbox

[19] MikroTik Documentation. (2020). Manual: User Manager. MikroTik Wiki. https://wiki.mikrotik.com/wiki/Manual:User_Manager

[20] Tauhid, A. (2020). The Userman. https://theuserman.blogspot.com/

[21] Laksa19. (2017). MIKHMON: Mikrotik Hotspot Monitor. https://laksa19.github.io/

[22] Hamid, H. A., Al Farizi, M. (2022). Peluang jaringan wireless pribadi untuk hotspot umum dengan sistem voucher. Jurnal Industri Kreatif Dan Informatika Series (JIKIS), 2 (1), 1–10.

[23] Syaputra, A., Stiadi, D. (2020). Pemanfaatan MikroTik untuk jaringan hotspot dengan sistem voucher pada Desa Ujanmas Kota Pagar Alam. JIRE (Jurnal Informatika & Rekayasa Elektronika), 3 (2), 176–186.

[24] Arta, I. K. J., Nugraha, N. B. S. (2020). Implementasi aplikasi user management hotspot Mikrotik berbasis PHP dengan Application Programing Interface (API) dan Framework Bootstrap. JURNAL RESISTOR, 3 (1), 66–71. https://doi.org/10.31598/jurnalresistor.v3il.466

[25] IONOS Inc. (2022). User centered design: Desarrollo de productos junto con los usuarios. https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/user-centered-design/

[26]de los Ríos, C. (2023). ¿Qué es el diseño centrado en el usuario? https://bootcampvirtual.udd.cl/blog/diseno-centrado-en-el-usuario/

[27] Hassan Montero, Y., Ortega Santamaría, S. (2009). Informe APEI sobre usabilidad. Asociación Profesional de Especialistas en Información.