Captive Portal personalizado: Guía de HTML y CSS

Resumen Ejecutivo

Para los recintos empresariales - que van desde hoteles de lujo Hospitality y cadenas de tiendas Retail hasta centros de tránsito Transport y campus médicos modernos Healthcare - la página de bienvenida de WiFi para invitados es la puerta de entrada digital. Sin embargo, más del 90% de los inicios de sesión de WiFi para invitados ocurren en dispositivos móviles, donde la visualización no está gobernada por navegadores estándar como Safari o Chrome, sino por webviews altamente restringidos de Captive Network Assistant (CNA) [1]. Estos "mini navegadores" imponen severas limitaciones de espacio de trabajo seguro (sandbox): bloquean CDN externas, desactivan cookies persistentes, ignoran fuentes web externas y restringen severamente la ejecución de JavaScript para mitigar riesgos de seguridad y prevenir el secuestro de sesiones [2].

Cuando un desarrollador diseña una página de bienvenida utilizando estándares web tradicionales, estas restricciones provocan diseños rotos, recursos de marca faltantes y botones de inicio de sesión que no funcionan, lo que afecta directamente la satisfacción del cliente y el compromiso digital. Esta guía proporciona soluciones a estos desafíos, presentando prácticas de codificación defensivas - como CSS en línea, codificación de recursos en Base64, conjuntos de fuentes del sistema y flujos de autenticación explícitos basados en navegación - para garantizar una visualización fluida en múltiples plataformas. Además, analizamos cómo el uso de una solución gestionada como el constructor de portales de Purple permite a los desarrolladores mantener un control creativo completo de HTML/CSS al tiempo que delegan la autenticación RADIUS, el escalado de bases de datos, el cumplimiento de GDPR/PCI y las integraciones de AP de múltiples proveedores [3].

Análisis Técnico Detallado

Para crear un Captive Portal personalizado y resistente, los desarrolladores deben comprender la intercepción a nivel de red y la virtualización del navegador que ocurren cuando un invitado se asocia con un Identificador de Conjunto de Servicios (SSID) abierto.

El Ciclo de Vida del Captive Portal

Cuando un dispositivo cliente se asocia con un SSID cautivo, se activa la siguiente secuencia:

1. Asociación de IP: El dispositivo completa un saludo de 3 vías (3-way handshake) y solicita una dirección IP a través de DHCP.
2. Prueba de Conectividad Activa: El administrador de red en segundo plano del sistema operativo envía inmediatamente una solicitud HTTP GET a una URL de prueba (canary URL) dedicada y neutral del proveedor (por ejemplo, http://captive.apple.com/hotspot-detect.html de Apple o http://connectivitycheck.gstatic.com/generate_204 de Google) [1].
3. Intercepción de DNS/HTTP: El Controlador de LAN Inalámbrica (WLC) local o el Punto de Acceso (AP) intercepta esta solicitud HTTP del puerto 80. En lugar de devolver el estado HTTP 200 o 204 esperado, la puerta de enlace redirige el tráfico del cliente a la URL de la página de destino del Captive Portal a través de una redirección HTTP 302 [2].
4. Generación del Webview: Al detectar la redirección, el sistema operativo genera su mini navegador nativo Captive Network Assistant (CNA) para mostrar la página de bienvenida redirigida, evitando que el usuario tenga que abrir manualmente un navegador completo.5. Autenticación y transición de estado: El usuario completa el formulario de inicio de sesión, enviando las credenciales de vuelta al servidor del portal, el cual instruye a la puerta de enlace (a menudo a través de un RADIUS Access-Accept o una llamada de API externa) para autorizar la dirección MAC.
5. Apretón de manos de salida de CNA: El mini-navegador CNA realiza otro HTTP GET a su URL canaria. Si recibe la respuesta 200/204 esperada, cambia su botón superior derecho de "Cancelar" a "Listo" y establece la conexión WiFi como la interfaz de red principal.

Restricciones del mini-navegador específicas de la plataforma

Cada sistema operativo maneja este ciclo de vida dentro de diferentes entornos de vista web, lo que resulta en un comportamiento altamente fragmentado. La siguiente tabla detalla estas restricciones críticas:

Cómo programar evitando la trampa del botón "Listo" de Apple CNA

Uno de los modos de fallo más frecuentes en el desarrollo de portales personalizados es la Trampa del botón "Listo" en dispositivos iOS. Cuando un usuario se autentica, la vista web iOS Websheet debe detectar que la red ya no es cautiva. Esto lo hace monitoreando el éxito de sus solicitudes canarias en segundo plano.

De manera fundamental, el CNA de iOS solo activará esta comprobación tras una navegación HTTP de página completa (redirección de ubicación). Si un desarrollador crea una Single Page Application (SPA) moderna que envía datos de formulario a través de una llamada AJAX asíncrona (por ejemplo, fetch() o Axios) y actualiza el DOM de forma dinámica sin cambiar la URL, el CNA nunca volverá a ejecutar su comprobación de conectividad. El usuario se autenticará a nivel de gateway, pero el botón del CNA en la esquina superior derecha seguirá apareciendo como "Cancelar". Si el usuario frustrado hace clic en "Cancelar", el dispositivo iOS se desasociará de inmediato del SSID, finalizando la sesión de WiFi [1].

Para evitar esto, el controlador de éxito de autenticación debe realizar una redirección de página completa a una página de destino física (por ejemplo, window.location.href = '/success') o enviar el formulario de inicio de sesión de forma nativa mediante una acción HTTP POST estándar.

Guía de implementación

Para garantizar un renderizado consistente en todas las plataformas, los desarrolladores deben hacer la transición de un diseño web moderno y pesado en recursos a un estilo de codificación altamente autocontenido y defensivo.

La regla de oro: Diseñar para cero conectividad a Internet

Durante el estado cautivo, el dispositivo cliente no tiene acceso a la red de internet en general. Solo puede resolver y acceder a direcciones IP y dominios explícitamente incluidos en la lista de permitidos (Walled Garden) del controlador inalámbrico (como la propia IP del servidor del Captive Portal). Por lo tanto, cualquier recurso externo referenciado en su HTML no se cargará, lo que provocará un diseño roto.

Para diseñar de forma defensiva, implemente la siguiente Lista de verificación de diseño de Captive Portal priorizando dispositivos móviles:

1. Configuración del Viewport

Para evitar que los dispositivos móviles reduzcan la escala del viewport al ancho de una pantalla de escritorio (normalmente 980px), el <head> del HTML debe incluir una etiqueta meta de viewport responsiva. Sin esto, el texto y los campos de entrada aparecerán microscópicos en los dispositivos móviles:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. Integración de CSS en línea y eliminación de dependencias externas

Nunca enlace a archivos CSS externos o CDNs (por ejemplo, Bootstrap, Tailwind o Google Fonts). Todo el CSS debe estar incrustado dentro de un bloque <style> en el <head> del HTML.

Para la tipografía, utilice una pila de fuentes del sistema que haga referencia a fuentes preinstaladas en el sistema operativo local. Esto evita por completo las peticiones HTTP y garantiza que la página se cargue de forma instantánea utilizando la tipografía sans-serif nativa y de alta calidad del dispositivo:

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #F5F1ED; /* Color de marca Pearl White */
    color: #011638; /* Color de marca Dark Blue */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

3. Codificación de recursos en Base64

No se debe hacer referencia a imágenes, logotipos ni iconos mediante URL HTTP externas a menos que el dominio de alojamiento esté en la lista de permitidos (walled garden) de la puerta de enlace. El método más confiable es codificar pequeños recursos visuales (como logotipos PNG o SVG) directamente en el HTML o CSS como Data URIs de Base64:

<!-- Inline Base64 Logo Example -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzc0NThGRCIvPjwvc3ZnPg==" alt="Purple Logo" class="brand-logo">

4. Optimización de campos de entrada y objetivos táctiles

Para cumplir con los estándares de usabilidad móvil (como las Directrices de interfaz humana de Apple), todos los elementos interactivos deben optimizarse para la entrada táctil:

• Tamaño de fuente de entrada: El tamaño de fuente del texto de entrada debe ser de al menos 16px. Si el tamaño de fuente es menor (por ejemplo, 14px), iOS Safari y la CNA ampliarán automáticamente el campo de entrada al enfocarlo, lo que distorsionará el diseño de la página [1].
• Objetivos táctiles: Los botones, las casillas de verificación y los enlaces deben tener un área de objetivo táctil mínima de 44px x 44px para evitar clics accidentales o la frustración del usuario.

5. Consentimiento legal y cumplimiento de GDPR

Al capturar datos de invitados (por ejemplo, correo electrónico, número de teléfono o perfiles sociales), la estructura HTML debe admitir el consentimiento legal explícito. Según el GDPR, las casillas de verificación preseleccionadas o las declaraciones de consentimiento implícito (por ejemplo, "Al iniciar sesión, acepta nuestros términos") no cumplen con la normativa [3].

• Proporcione una casilla de verificación desmarcada por defecto para los Términos y condiciones y las Políticas de privacidad.
• Envuelva el texto legal detallado en un contenedor de altura limitada y con desplazamiento (max-height: 120px; overflow-y: auto;) para mantener el formulario de inicio de sesión principal por encima del pliegue de la página.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        I explicitly agree to the <a href="#" onclick="showTerms()">Terms of Service</a> and consent to the processing of my data in accordance with the <a href="#" onclick="showPrivacy()">Privacy Policy</a>.
    </label>
</div>

Plantilla personalizada HTML/CSS de Captive Portal

A continuación, se muestra una plantilla completa de un solo archivo HTML/CSS, lista para producción, que incorpora todas las mejores prácticas adaptadas para dispositivos móviles y compatibles con CNA. Cuenta con un diseño adaptivo, un conjunto de fuentes del sistema, marcadores de posición de recursos listos para Base64, entradas optimizadas para el tacto y estructuras de consentimiento explícitas que cumplen con el GDPR:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Guest WiFi Login</title>
    <style>
        /* CSS Reset & Variable Declarations */
        :root {
            --color-primary: #7458FD; /* Purple Brand Colour */
            --color-dark: #011638; /* Dark Blue */
            --color-light: #F5F1ED; /* Pearl White */
            --color-white: #FFFFFF;
            --color-border: #D1D5DB;
            --radius-container: 12px;
            --radius-element: 6px;
        }
        
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--color-light);
            color: var(--color-dark);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* Diseño de Tarjeta Responsivo */
        .portal-card {
            background-color: var(--color-white);
            width: 100%;
            max-width: 420px;
            padding: 32px 24px;
            border-radius: var(--radius-container);
            box-shadow: 0 4px 20px rgba(1, 22, 56, 0.05);
            text-align: center;
        }
        
        .logo-container {
            margin-bottom: 24px;
        }
        
        /* Marcador de Posición para Logotipo Base64 Integrado */
        .logo {
            width: 120px;
            height: auto;
        }
        
        h1 {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 8px 0;
            color: var(--color-dark);
        }
        
        p {
            font-size: 14px;
            color: #4B5563;
            margin: 0 0 24px 0;
            line-height: 1.5;
        }
        
        /* Estilos de Formulario */
        .form-group {
            text-align: left;
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--color-dark);
        }
        
        /* Crítico: el tamaño de fuente debe ser de al menos 16px para evitar el zoom automático de iOS */
        input[type="email"],
        input[type="text"] {
            width: 100%;
            height: 48px;
            padding: 12px 16px;
            font-size: 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-element);
            background-color: var(--color-white);
            color: var(--color-dark);
            outline: none;
            transition: border-color 0.2s;
        }
        
        input[type="email"]:focus,
        input[type="text"]:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(116, 88, 253, 0.15);
        }
        
        /* Estilos de Consentimiento */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Tamaño de destino adaptado para pantallas táctiles */
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin: 2px 12px 0 0;
            flex-shrink: 0;
            cursor: pointer;
            accent-color: var(--color-primary);
        }
        
        .consent-label {
            font-size: 13px;
            line-height: 1.4;
            color: #4B5563;
            user-select: none;
        }
        
        .consent-label a {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
        }
        
        .consent-label a:hover {
            text-decoration: underline;
        }
        
        /* Touch-Friendly CTA Button (Minimum 44px height) */
        .btn-submit {
            width: 100%;
            height: 48px;
            background-color: var(--color-primary);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-element);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-submit:hover {
            background-color: #5B3EE3;
        }
        
        .btn-submit:active {
            background-color: #4A2FD4;
        }
        
        /* Legal Terms Scrollbox */
        .terms-scrollbox {
            display: none; /* Toggled via JS */
            text-align: left;
            font-size: 11px;
            color: #6B7280;
            background-color: var(--color-light);
            padding: 12px;
            border-radius: var(--radius-element);
            max-height: 100px;
            overflow-y: auto;
            margin-bottom: 16px;
            border: 1px solid var(--color-border);
        }
        
        .footer {
            margin-top: 24px;
            font-size: 11px;
            color: #9CA3AF;
        }
    </style>
</head>
<body>

    <div class="portal-card">
        <div class="logo-container">
            <!-- Replace src with your actual Base64-encoded SVG or PNG -->
            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30">
                <rect width="100" height="30" rx="6" fill="#7458FD"/>
                <text x="50" y="20" font-family="sans-serif" font-size="12" fill="#FFFFFF" font-weight="bold" text-anchor="middle">SU MARCA</text>
            </svg>
        </div>
        
        <h1>Bienvenido a la red WiFi de invitados</h1>
        <p>Por favor, ingrese sus datos a continuación para obtener acceso seguro a internet de alta velocidad.</p>
        
        <!-- Form must submit natively (full page navigation) to clear Apple CNA -->
        <form action="/login/submit" method="POST" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="guest_name">Nombre completo</label>
                <input type="text" id="guest_name" name="name" placeholder="Juan Pérez" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Correo electrónico</label>
                <input type="email" id="guest_email" name="email" placeholder="juan@ejemplo.com" required autocomplete="email">
            </div>
            
            <div class="consent-group">
                <input type="checkbox" id="terms_consent" name="terms_accepted" required>
                <label for="terms_consent" class="consent-label">
                    Acepto los <a href="#" onclick="toggleTerms(event)">Términos de servicio</a> y doy mi consentimiento para el procesamiento de datos de conformidad con las regulaciones de la GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Términos de servicio de WiFi:</strong><br>
                1. Este servicio se proporciona tal cual, sin garantías.<br>
                2. Los usuarios no deben participar en actividades ilegales que consuman mucho ancho de banda.<br>
                3. Los datos personales se recopilan únicamente con fines de autenticación y aceptación de marketing de conformidad con nuestra Política de privacidad.
            </div>
            
            <button type="submit" class="btn-submit">Conectarse a WiFi</button>
        </form>
        
        <div class="footer">
            Tecnología de Purple | Secure Guest WiFi
        </div>
    </div>

    <script>
        function toggleTerms(e) {
            e.preventDefault();
            var box = document.getElementById('terms_box');
            box.style.display = (box.style.display === 'block') ? 'none' : 'block';
        }
        
        function validateForm() {
            var consent = document.getElementById('terms_consent');
            if (!consent.checked) {
                alert('Debe aceptar los Términos de servicio para conectarse.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Solución de problemas y mitigación de riesgos

Al implementar portales cautivos con HTML/CSS codificados a la medida, los equipos de operaciones de TI suelen encontrarse con varios riesgos operativos graves:

1. El bucle de advertencia del certificado SSL/TLS

Debido a que los portales cautivos funcionan interceptando el tráfico, presentan un conflicto fundamental con la seguridad web HTTPS moderna. Cuando un usuario intenta visitar un sitio HTTPS (por ejemplo, https://www.google.com) y la puerta de enlace intenta redirigir ese tráfico a un portal cautivo HTTP, el navegador detecta una discrepancia en el certificado SSL y muestra una advertencia de seguridad crítica de "La conexión no es privada".

• Mitigación: Nunca intente interceptar el tráfico HTTPS directamente. Dependa por completo del asistente nativo CNA del sistema operativo (que realiza una solicitud HTTP no cifrada para activar la redirección). Asegúrese de que el dominio de su portal cautivo tenga un certificado SSL válido y de confianza pública (por ejemplo, Let's Encrypt o DigiCert) y se sirva a través de HTTPS solo después de que la redirección HTTP inicial haya dirigido correctamente al usuario al dominio de su portal [2].

2. Fallas en la resolución de DNS (La trampa del jardín amurallado o Walled Garden)

Si su página HTML personalizada hace referencia a recursos externos - como un endpoint de OAuth para inicio de sesión social (por ejemplo, Facebook, Google) o una pasarela de pago - las solicitudes de DNS para estos dominios fallarán a menos que se encuentren explícitamente en la lista de permitidos en el Walled Garden del controlador inalámbrico. Si falta un dominio en la lista de permitidos, el flujo de inicio de sesión se detendrá, mostrando una pantalla en blanco.

• Mitigación: Mantenga una lista de Walled Garden estricta y mínima. Si utiliza inicios de sesión sociales, agregue a la lista de permitidos los dominios con comodines específicos recomendados por los proveedores de identidad (por ejemplo, *.google.com, *.gstatic.com).

3. Vulnerabilidades de tiempo de espera de sesión y suplantación de MAC (MAC Spoofing)

Los portales cautivos estándar autentican los dispositivos según sus direcciones MAC. Sin embargo, los sistemas operativos móviles modernos (iOS 14+ y Android 10+) utilizan direcciones MAC aleatorias (direcciones privadas de WiFi) de forma predeterminada, rotándolas periódicamente. Esto puede provocar que se solicite repetidamente a los invitados que se vuelvan a autenticar, destruyendo la experiencia del usuario [1].

• Mitigación: Implemente tiempos de espera de sesión razonables (por ejemplo, 24 horas) en el servidor RADIUS para evitar sesiones inactivas, y utilice estándares de autenticación modernos como Passpoint (Hotspot 2.0) o WPA3-Enterprise para un onboarding fluido y seguro que evite por completo los portales cautivos basados en MAC.

Relevancia del producto Purple: Desarrollar frente a comprar

Aunque codificar una sola página HTML es sencillo, alojar, proteger y escalar una infraestructura de portal cautivo personalizada presenta enormes obstáculos técnicos y de cumplimiento. La siguiente tabla compara la realidad de ingeniería y operativa de autoalojar un portal personalizado frente a utilizar la plataforma gestionada para empresas de Purple:

La plataforma de Purple resuelve el dilema entre "Construir frente a Comprar". Proporciona a los desarrolladores la total libertad creativa de un espacio de trabajo de HTML/CSS personalizado, al mismo tiempo que elimina la compleja ingeniería de infraestructura de backend de alto riesgo requerida para soportar la autenticación RADIUS segura a escala.

ROI e impacto empresarial

Invertir en un portal cautivo personalizado, responsivo y diseñado profesionalmente ofrece retornos cuantificables en las operaciones de TI, el marketing y el cumplimiento legal.

1. Reducción de costos operativos (tickets de soporte de TI)

En despliegues a gran escala, como un estadio o una cadena minorista con múltiples ubicaciones, un portal cautivo que no funciona es una de las principales causas de escalamientos de soporte de TI. Cuando los invitados se encuentran con una "pantalla en blanco" o un botón de inicio de sesión que no responde, saturan al personal del lugar o envían tickets de soporte.

$$\text{Ahorro anual en soporte} = (\text{Total de visitas anuales de invitados} \times \text{Tasa de fallo del portal} \times \text{Tasa de contacto con soporte}) \times \text{Costo por ticket de soporte}$$

• Escenario: Un centro de convenciones con 1,000,000 de visitantes anuales. Un portal mal codificado tiene una tasa de fallo del 5% en dispositivos iOS más antiguos, lo que genera una tasa de contacto con soporte del 10%. Con un costo estándar de la industria de $15 por ticket de soporte, el costo operativo es: $$(1,000,000 \times 0.05 \times 0.10) \times $15 = $75,000 \text{ anuales en costos indirectos de soporte evitables}$$
• Resultado: La transición a una plantilla optimizada para CNA y diseñada principalmente para dispositivos móviles reduce la tasa de fallo del portal a <0.1%, eliminando prácticamente este gasto operativo.

2. Captura de datos de marketing y optimización de suscripciones

Para los sectores de comercio minorista y hotelería, el portal de WiFi para invitados es el mecanismo principal para capturar datos de clientes de primera fuente limpios. Una interfaz de usuario mal diseñada con texto microscópico o un diseño de formulario ineficiente provoca altas tasas de rebote: los usuarios abandonan el proceso de inicio de sesión por completo, lo que resulta en la pérdida de oportunidades de marketing.

• Caso de estudio (Comercio minorista): Una cadena minorista nacional implementó un portal cautivo optimizado para dispositivos móviles utilizando la plataforma de Purple. Al reemplazar un formulario de inicio de sesión de varios pasos con un campo único para ingresar el correo electrónico (tamaño de fuente: 16px) y un botón optimizado con un área de contacto de 48px, observaron un aumento del 42% en los registros completados y un incremento del 28% en las suscripciones a boletines de marketing dentro del primer trimestre [6].

3. Mitigación de riesgos legales y normativos

Bajo el GDPR y la CCPA, la recopilación de datos que no cumple con las normativas conlleva severas sanciones financieras (hasta el 4% de la facturación anual global bajo el GDPR). Confiar en casillas de verificación previamente marcadas o no proporcionar una Política de Privacidad clara y de fácil acceso en su splash page expone a la empresa a una inmensa responsabilidad legal.

• ROI de la mitigación: Implementar una casilla de consentimiento explícita y desmarcada, y alojar los términos dentro de un cuadro de desplazamiento optimizado garantiza el 100% de cumplimiento normativo, mitigando el riesgo de multas regulatorias multimillonarias y protegiendo la reputación de la marca.

Resumen de puntos clave

• El Sandbox de CNA es restrictivo: El Websheet de iOS de Apple y el CNA de macOS son entornos fuertemente aislados (sandboxed) que bloquean recursos externos, cookies y fuentes web. Todos los estilos y recursos deben ser autónomos (CSS en línea, imágenes en Base64, fuentes del sistema) [1].
• AJAX interrumpe el saludo de salida de iOS: Para realizar con éxito la transición del dispositivo iOS de "cautivo" a "conectado" (cambiando el botón superior derecho de "Cancelar" a "Listo"), debe activar una redirección HTTP de página completa. Las actualizaciones asíncronas del DOM dejarán al dispositivo en un bucle cautivo.
• El enfoque Mobile-First es obligatorio: Más del 90% de los inicios de sesión ocurren en dispositivos móviles. Diseñe un diseño de una sola columna (ancho máximo: 480px), utilice objetivos táctiles fáciles de presionar (mínimo 44px x 44px) y aplique un tamaño de fuente mínimo de 16px en todas las entradas de texto para evitar el zoom automático del navegador de iOS.
• Los Walled Gardens controlan el DNS: Cualquier dominio externo referenciado durante el inicio de sesión (por ejemplo, las API de inicio de sesión social) debe estar explícitamente en la lista blanca del walled garden del controlador inalámbrico, o la página no se cargará.
• Purple elimina la complejidad del backend: El uso del constructor de portales de Purple otorga a los desarrolladores un control total de HTML/CSS a través de un editor personalizado, al tiempo que delega las inmensas cargas de seguridad, escalabilidad y cumplimiento de RADIUS, integraciones de AP de múltiples proveedores y gestión de bases de datos que cumplen con el GDPR [3].

Referencias

• [1] Wireless Broadband Alliance: Captive Network Portal Behaviour
• [2] Android Open Source Project: Captive Portal Login Webview Integration
• [3] European Data Protection Board: Guidelines on Consent under Regulation 2016/679
• [4] Cómo implementar la autenticación 802.1X con Cloud RADIUS
• [5] Cisco Wireless APs: Guía 2026 de productos e implementación
• [6] Plataforma de WiFi Marketing y Analytics de Purple

-

Escuche el informe técnico

Escuche a un arquitecto de soluciones senior analizar las limitaciones técnicas y las estrategias de implementación para los portales cautivos personalizados: