Captive Portal Personalizado: Guia de HTML e CSS

Resumo Executivo

Para espaços empresariais - que vão desde hotéis de luxo Hospitality e cadeias de retalho Retail a centros de transporte Transport e campus médicos modernos Healthcare - a splash page de WiFi para convidados é a porta de entrada digital. No entanto, mais de 90% dos logins de WiFi de convidados ocorrem em dispositivos móveis, onde a renderização é governada não por navegadores padrão como o Safari ou o Chrome, mas por webviews altamente restritos do Captive Network Assistant (CNA) [1]. Estes "mini-navegadores" impõem limitações severas de sandbox: bloqueiam CDNs externos, desativam cookies persistentes, ignoram fontes web externas e restringem severamente a execução de JavaScript para mitigar riscos de segurança e prevenir o desvio de sessões [2].

Quando um programador desenha uma splash page utilizando padrões web tradicionais, estas restrições resultam em layouts corrompidos, elementos de marca em falta e botões de login não funcionais, com impacto direto na satisfação do cliente e no envolvimento digital. Este guia fornece soluções para estes desafios, apresentando práticas de codificação defensivas - tais como CSS inline, codificação de ficheiros em Base64, conjuntos de fontes do sistema e handshakes de autenticação explícitos baseados em navegação - para garantir uma renderização multiplataforma perfeita. Além disso, analisamos como a utilização de uma solução gerida como o construtor de portais da Purple permite que os programadores mantenham o controlo criativo total do HTML/CSS ao mesmo tempo que delegam a autenticação RADIUS, o dimensionamento de bases de dados, a conformidade com o GDPR/PCI e as integrações de AP multi-fornecedor [3].

Análise Técnica Detalhada

Para construir um Captive Portal personalizado e resiliente, os programadores devem compreender a interceção ao nível da rede e a virtualização do navegador que ocorrem quando um convidado se associa a um Service Set Identifier (SSID) aberto.

O Ciclo de Vida do Captive Portal

Quando um dispositivo cliente se associa a um SSID cativo, a seguinte sequência é iniciada:

1. Associação de IP: O dispositivo conclui um handshake de 3 vias e solicita um endereço IP via DHCP.
2. Sonda de Conetividade Ativa: O gestor de rede em segundo plano do sistema operativo envia imediatamente um pedido HTTP GET para um URL canário dedicado e neutro em termos de fornecedor (por exemplo, http://captive.apple.com/hotspot-detect.html da Apple ou http://connectivitycheck.gstatic.com/generate_204 da Google) [1].
3. Interceção de DNS/HTTP: O Wireless LAN Controller (WLC) local ou o Access Point (AP) interceita este pedido HTTP na porta 80. Em vez de retornar o status HTTP 200 ou 204 esperado, o gateway redireciona o tráfego do cliente para o URL da página de destino do Captive Portal através de um redirecionamento HTTP 302 [2].
4. Abertura de Webview: Ao detetar o redirecionamento, o SO abre o seu mini-navegador nativo Captive Network Assistant (CNA) para exibir a splash page redirecionada, evitando a necessidade de o utilizador abrir manualmente um navegador completo.5. Autenticação e Transição de Estado: O utilizador preenche o formulário de início de sessão, enviando as credenciais de volta para o servidor do portal, o qual instrui o gateway (frequentemente através de um RADIUS Access-Accept ou chamada de API externa) a autorizar o endereço MAC.
5. Handshake de Saída do CNA: O mini-browser do CNA executa outro HTTP GET para o seu URL canário. Se receber a resposta 200/204 esperada, altera o seu botão superior direito de "Cancelar" para "Concluído" e estabelece a ligação WiFi como a interface de rede principal.

Restrições do Mini-Browser Específicas da Plataforma

Cada sistema operativo gere este ciclo de vida dentro de diferentes ambientes de webview, resultando num comportamento altamente fragmentado. A tabela abaixo detalha estas restrições críticas:

Programar Contornando a Armadilha do Botão "Concluído" do Apple CNA

Um dos modos de falha mais frequentes no desenvolvimento de portais personalizados é a Armadilha do Botão "Concluído" em dispositivos iOS. Quando um utilizador se autentica, a webview do iOS Websheet deve detetar que a rede já não é cativa. Faz isso monitorizando o sucesso dos seus pedidos canários em segundo plano.

Crucialmente, o CNA do iOS só acionará esta verificação após uma navegação HTTP de página inteira (redirecionamento de localização). Se um programador criar uma Single Page Application (SPA) moderna que envia dados de formulário através de uma chamada AJAX assíncrona (por exemplo, fetch() ou Axios) e atualiza o DOM dinamicamente sem alterar o URL, o CNA nunca executará novamente a sua verificação de conectividade. O utilizador será autenticado ao nível do gateway, mas o botão do CNA no canto superior direito continuará a ser "Cancelar". Se o utilizador frustrado clicar em "Cancelar", o dispositivo iOS irá imediatamente desassociar-se do SSID, terminando a sessão de WiFi [1].

Para evitar isto, o processador de sucesso de autenticação deve realizar um redirecionamento de página inteira para uma página de destino física (por exemplo, window.location.href = '/success') ou enviar o formulário de início de sessão nativamente através de uma ação HTTP POST padrão.

Guia de Implementação

Para garantir uma renderização consistente em todas as plataformas, os programadores devem fazer a transição de um web design moderno e rico em recursos para um estilo de codificação defensivo e altamente autónomo.

A Regra de Ouro: Projetar para Conectividade de Internet Zero

Durante o estado cativo, o dispositivo cliente não tem qualquer acesso à internet geral. Só consegue resolver e aceder a endereços IP e domínios explicitamente listados na Walled Garden do controlador sem fios (como o próprio IP do servidor do Captive Portal). Portanto, qualquer recurso externo referenciado no seu HTML falhará ao carregar, resultando num esquema desconfigurado.

Para projetar defensivamente, implemente a seguinte Lista de Verificação de Design de Captive Portal Mobile-First:

1. Configuração do Viewport

Para evitar que os dispositivos móveis reduzam a escala do viewport para uma largura de desktop (normalmente 980px), o <head> HTML deve incluir uma etiqueta meta de viewport responsiva. Sem isto, o texto e os campos de introdução de dados parecerão microscópicos nos dispositivos móveis:

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

2. Incorporação de CSS e Remoção de Dependências Externas

Nunca ligue a ficheiros CSS externos ou CDNs (por exemplo, Bootstrap, Tailwind ou Google Fonts). Todo o CSS deve ser incorporado dentro de um bloco <style> no <head> HTML.

Para a tipografia, utilize uma pilha de fontes do sistema que referencie fontes locais pré-instaladas no sistema operativo. Isto evita totalmente os pedidos HTTP e garante que a página seja carregada instantaneamente utilizando o tipo de letra sans-serif nativo e de alta qualidade do dispositivo:

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

3. Codificação de Ativos em Base64

Imagens, logótipos e ícones não devem ser referenciados através de URLs HTTP externos, a menos que o domínio de alojamento esteja incluído na lista de permissões (walled garden) do gateway. O método mais fiável é codificar pequenos ativos visuais (como logótipos PNG ou SVG) diretamente no HTML ou CSS como URIs de Dados Base64:

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

4. Otimização de Campos de Introdução de Dados e Alvos de Toque

Para cumprir as normas de usabilidade móvel (como as Diretrizes de Interface Humana da Apple), todos os elementos interativos têm de ser otimizados para toque:

• Tamanho de Letra do Campo de Introdução: Os tamanhos de letra do texto de introdução têm de ser de pelo menos 16px. Se o tamanho de letra for inferior (por exemplo, 14px), o Safari do iOS e o CNA farão zoom automático no campo de introdução quando este estiver focado, distorcendo o esquema da página [1].
• Alvos de Toque: Os botões, caixas de seleção e hiperligações têm de ter uma área mínima de alvo de toque de 44px x 44px para evitar cliques acidentais ou a frustração do utilizador.

5. Consentimento Legal e Conformidade com o GDPR

Ao recolher dados de convidados (por exemplo, e-mail, número de telefone ou perfis sociais), a estrutura HTML tem de suportar o consentimento legal explícito. Sob o GDPR, as caixas de seleção previamente marcadas ou declarações de consentimento implícito (por exemplo, "Ao iniciar sessão, aceita os nossos termos") não estão em conformidade [3].

• Disponibilize uma caixa de seleção desmarcada por predefinição para os Termos e Condições e Políticas de Privacidade.
• Envolva o texto legal detalhado num contentor com altura limitada e barra de rolagem (max-height: 120px; overflow-y: auto;) para manter o formulário de início de sessão principal visível sem necessidade de fazer scroll.

<div class="consent-container">
    <input type="checkbox" id="terms_consent" name="terms_consent" required>
    <label for="terms_consent">
        Aceito explicitamente os <a href="#" onclick="showTerms()">Termos de Serviço</a> e consinto o processamento dos meus dados de acordo com a <a href="#" onclick="showPrivacy()">Política de Privacidade</a>.
    </label>
</div>

Modelo de HTML/CSS Personalizado de Captive Portal

Abaixo encontra-se um modelo completo de ficheiro único HTML/CSS, pronto para produção, que incorpora todas as melhores práticas mobile-first e em conformidade com o CNA. Apresenta um esquema responsivo, um conjunto de tipos de letra do sistema, marcadores de posição para ativos prontos para Base64, campos de introdução otimizados para toque e estruturas de consentimento explícitas em conformidade com o GDPR:

<!DOCTYPE html>
<html lang="pt">
<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;
        }
        
        /* Layout do Card 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 Posição de Logótipo Base64 Incorporado */
        .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 do Formulário */
        .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: font-size deve ser de pelo menos 16px para evitar o zoom automático no 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 Consentimento */
        .consent-group {
            display: flex;
            align-items: flex-start;
            text-align: left;
            margin: 20px 0;
        }
        
        /* Tamanho de destino otimizado para ecrãs táteis */
        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">A SUA MARCA</text>
            </svg>
        </div>
        
        <h1>Bem-vindo ao WiFi de Convidados</h1>
        <p>Por favor, introduza os seus dados abaixo para obter um acesso seguro e de alta velocidade à internet.</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">Nome Completo</label>
                <input type="text" id="guest_name" name="name" placeholder="John Doe" required autocomplete="name">
            </div>
            
            <div class="form-group">
                <label for="guest_email">Endereço de Email</label>
                <input type="email" id="guest_email" name="email" placeholder="john@example.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">
                    Aceito os <a href="#" onclick="toggleTerms(event)">Termos de Serviço</a> e dou o meu consentimento para o processamento de dados em conformidade com os regulamentos do GDPR.
                </label>
            </div>
            
            <div id="terms_box" class="terms-scrollbox">
                <strong>Termos de Serviço de WiFi:</strong><br>
                1. Este serviço é fornecido "tal como está", sem garantias.<br>
                2. Os utilizadores não devem envolver-se em atividades ilegais de consumo intensivo de largura de banda.<br>
                3. Os dados pessoais são recolhidos exclusivamente para fins de autenticação e opções de marketing, em conformidade com a nossa Política de Privacidade.
            </div>
            
            <button type="submit" class="btn-submit">Ligar ao WiFi</button>
        </form>
        
        <div class="footer">
            Disponibilizado por 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('Tem de aceitar os Termos de Serviço para se ligar.');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Resolução de Problemas e Mitigação de Riscos

Ao implementar Captive Portals com codificação HTML/CSS personalizada, as equipas de operações de TI deparam-se frequentemente com vários riscos operacionais graves:

1. O Loop de Aviso de Certificado SSL/TLS

Como os Captive Portals funcionam intercetando o tráfego, estes apresentam um conflito fundamental com a segurança web HTTPS moderna. Quando um utilizador tenta aceder a um site HTTPS (por exemplo, https://www.google.com) e o gateway tenta redirecionar esse tráfego para um Captive Portal HTTP, o navegador deteta uma incompatibilidade no certificado SSL e apresenta um aviso crítico de segurança "A sua ligação não é privada".

• Mitigação: Nunca tente intercetar tráfego HTTPS diretamente. Confie inteiramente no assistente CNA nativo do sistema operativo (que faz um pedido HTTP não encriptado para acionar o redirecionamento). Certifique-se de que o domínio do seu Captive Portal tem um certificado SSL válido e publicamente fidedigno (por exemplo, Let's Encrypt ou DigiCert) e é disponibilizado através de HTTPS apenas após o redirecionamento HTTP inicial ter encaminhado com sucesso o utilizador para o domínio do seu portal [2].

2. Falhas de Resolução de DNS (A Armadilha do Jardim Vedado)

Se a sua página HTML personalizada fizer referência a recursos externos - como um endpoint OAuth de início de sessão social (por exemplo, Facebook, Google) ou um gateway de pagamento - os pedidos de DNS para estes domínios irão falhar, a menos que estejam explicitamente na lista de permissões no Walled Garden do controlador sem fios. Se um domínio estiver em falta na lista de permissões, o fluxo de início de sessão irá parar, apresentando um ecrã em branco.

• Mitigação: Mantenha uma lista de Walled Garden estrita e mínima. Se utilizar inícios de sessão sociais, adicione à lista de permissões os domínios wildcard específicos recomendados pelos fornecedores de identidade (por exemplo, *.google.com, *.gstatic.com).

3. Vulnerabilidades de Limite de Tempo de Sessão e Spoofing de MAC

Os Captive Portals padrão autenticam os dispositivos com base nos seus endereços MAC. No entanto, os sistemas operativos móveis modernos (iOS 14+ e Android 10+) utilizam endereços MAC aleatórios (endereços WiFi privados) por predefinição, rodando-os periodicamente. Isto pode fazer com que os convidados sejam repetidamente solicitados a reautenticar-se, destruindo a experiência do utilizador [1].

• Mitigação: Implemente limites de tempo de sessão razoáveis (por exemplo, 24 horas) no servidor RADIUS para evitar sessões obsoletas, e utilize padrões de autenticação modernos como Passpoint (Hotspot 2.0) ou WPA3-Enterprise para uma integração contínua e segura que contorna completamente os Captive Portals baseados em MAC.

Relevância dos Produtos Purple: Construir vs. Comprar

Embora programar uma única página HTML seja simples, alojar, proteger e dimensionar uma infraestrutura personalizada de Captive Portal apresenta enormes obstáculos técnicos e de conformidade. A tabela abaixo compara as realidades operacionais e de engenharia de alojar o seu próprio portal personalizado em comparação com a utilização da plataforma empresarial gerida da Purple:

A plataforma da Purple resolve o dilema entre "Construir vs. Comprar". Proporciona aos programadores a total liberdade criativa de um espaço de trabalho HTML/CSS personalizado, eliminando ao mesmo tempo a engenharia de infraestrutura de backend complexa e de alto risco necessária para suportar a autenticação RADIUS segura à escala.

ROI e Impacto no Negócio

O investimento num portal captivo personalizado, responsivo e projetado de forma profissional proporciona retornos quantificáveis nas operações de TI, marketing e conformidade legal.

1. Redução de Custos Operacionais (Pedidos de Suporte de TI)

Em implementações de grande escala, como um estádio ou uma cadeia de retalho com vários locais, um Captive Portal com falhas é um dos principais fatores para o aumento de pedidos de suporte de TI. Quando os convidados se deparam com um "ecrã em branco" ou com um botão de início de sessão que não responde, sobrecarregam o pessoal no local ou enviam pedidos de suporte.

$$\text{Poupança Anual de Suporte} = (\text{Total de Visitas Anuais de Convidados} \times \text{Taxa de Falha do Portal} \times \text{Taxa de Contacto com o Suporte}) \times \text{Custo por Pedido de Suporte}$$

• Cenário: Um centro de congressos com 1 000 000 de visitantes anuais. Um portal mal codificado tem uma taxa de falha de 5% em dispositivos iOS mais antigos, o que leva a uma taxa de contacto com o suporte de 10%. Com um custo padrão do setor de $15 por pedido de suporte, o custo operacional é: $$(1.000.000 \times 0,05 \times 0,10) \times $15 = $75.000 \text{ anuais em despesas de suporte evitáveis}$$
• Resultado: A transição para um modelo otimizado para CNA e prioritário para dispositivos móveis reduz a taxa de falha do portal para <0,1%, eliminando virtualmente este desgaste operacional.

2. Captura de Dados de Marketing e Otimização de Consentimento (Opt-in)

Para espaços de retalho e hotelaria, o portal de WiFi para convidados é o principal mecanismo para capturar dados limpos e primários dos clientes. Uma interface de utilizador mal concebida, com texto microscópico ou um esquema de formulário pouco prático, causa elevadas taxas de rejeição - os utilizadores abandonam completamente o processo de início de sessão, resultando na perda de oportunidades de marketing.

• Estudo de Caso (Retalho): Uma cadeia de retalho nacional implementou um Captive Portal otimizado para dispositivos móveis utilizando a plataforma da Purple. Ao substituir um formulário de início de sessão com várias etapas por um campo único de introdução de e-mail (tamanho de letra: 16px) e um botão otimizado com área de toque de 48px, registaram um aumento de 42% nas inscrições concluídas e um aumento de 28% nos consentimentos (opt-ins) para newsletters de marketing no primeiro trimestre [6].

3. Mitigação de Riscos Legais e Regulamentares

Ao abrigo do GDPR e do CCPA, a recolha de dados não conforme acarreta penalizações financeiras graves (até 4% do volume de negócios anual global ao abrigo do GDPR). Confiar em caixas de seleção pré-assinaladas ou não fornecer uma Política de Privacidade clara e de fácil acesso na sua splash page expõe a empresa a uma enorme responsabilidade legal.

• ROI de Mitigação: A implementação de uma caixa de seleção de consentimento explícita e não assinalada e o alojamento dos termos dentro de uma caixa de deslocamento otimizada garante 100% de conformidade regulamentar, mitigando o risco de multas regulamentares multimilionárias e protegendo a reputação da marca.

Resumo dos Principais Aspetos a Reter

• A Sandbox do CNA é Restritiva: O Websheet de iOS da Apple e o CNA de macOS são ambientes altamente isolados (sandboxed) que bloqueiam recursos externos, cookies e fontes web. Todo o estilo e recursos devem ser autónomos (CSS inline, imagens Base64, fontes do sistema) [1].
• O AJAX Quebra o Handshake de Saída do iOS: Para transferir com sucesso o dispositivo iOS de "cativo" para "ligado" (alterando o botão superior direito de "Cancelar" para "Concluído"), deve acionar um redirecionamento HTTP de página inteira. As atualizações assíncronas do DOM deixarão o dispositivo num ciclo cativo.
• O Mobile-First é Obrigatório: Mais de 90% dos inícios de sessão ocorrem em dispositivos móveis. Desenhe um esquema de coluna única (largura máxima: 480px), utilize alvos de toque adequados para dispositivos móveis (mínimo de 44px x 44px) e aplique um tamanho mínimo de fonte de 16px em todos os campos de introdução de texto para evitar o zoom automático do navegador iOS.
• Os Walled Gardens Controlam o DNS: Qualquer domínio externo referenciado durante o início de sessão (por exemplo, APIs de início de sessão social) deve ser explicitamente adicionado à lista de permissões (whitelist) no walled garden do controlador sem fios, caso contrário a página não será carregada.
• O Purple Elimina a Complexidade do Backend: A utilização do construtor de portais do Purple oferece aos programadores controlo total de HTML/CSS através de um editor personalizado, ao mesmo tempo que transfere os imensos encargos de segurança, escalabilidade e conformidade de RADIUS, integrações de AP multi-fornecedor e gestão de bases de dados em conformidade com o GDPR [3].

Referências

• [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] How to Implement 802.1X Authentication with Cloud RADIUS
• [5] Cisco Wireless APs: 2026 Guide to Products & Deployment
• [6] Purple WiFi Marketing & Analytics Platform

-

Ouça o Briefing Técnico

Ouça um arquiteto de soluções sénior a discutir as restrições técnicas e as estratégias de implementação para portais cativos personalizados: