Documentação Técnica: Gerador de Assinaturas

Análise completa da aplicação "Gerador de Assinaturas", desenvolvida para as empresas GRUPO MMB e ALPHA PROTEÇÕES. Este documento detalha a arquitetura, stack tecnológica, funcionalidades, design e guias de uso da ferramenta.

1. Visão Geral e Informações do Projeto

1.1. Contexto e Propósito Estratégico

A aplicação "Gerador de Assinaturas" é uma ferramenta corporativa interna, criada para solucionar um desafio comum em grandes organizações: a falta de padronização nas assinaturas de e-mail. Comunicações inconsistentes podem diluir a força da marca e transmitir uma imagem de desorganização.

O propósito fundamental desta ferramenta é, portanto, a governança da identidade visual nas comunicações digitais. Ao fornecer um ponto centralizado e de uso obrigatório para a criação de assinaturas, a aplicação garante que cada e-mail enviado por um colaborador esteja em conformidade com as diretrizes de branding do GRUPO MMB e da ALPHA PROTEÇÕES. Isso reforça a profissionalismo, a coesão e a confiabilidade da marca perante clientes, parceiros e fornecedores.

1.2. Público-Alvo

O público-alvo é amplo e inclusivo, abrangendo todos os colaboradores, funcionários e prestadores de serviço de ambas as empresas que utilizam um endereço de e-mail corporativo. A interface foi projetada para ser intuitiva, não exigindo qualquer conhecimento técnico prévio, democratizando o acesso à ferramenta para todos os perfis de usuários, desde a diretoria executiva até as equipes de campo.

1.3. Informações Gerais

Atributo	Detalhe
URL de Produção	https://assinaturas.administradoramutual.com.br/
Status Atual	Ativo / Em Produção.
Modelo de Acesso	Acesso Público, sem necessidade de login ou autenticação.
Data da Revisão	24 de Fevereiro de 2026
Repositório de Código	Não disponível publicamente.

2. Arquitetura e Stack Tecnológica

A arquitetura da aplicação foi definida com base nos princípios de simplicidade, performance e manutenibilidade. Trata-se de uma aplicação puramente client-side, onde todo o processamento ocorre no navegador do usuário.

2.1. Arquitetura Client-Side

• Aplicação Estática: O site consiste em arquivos estáticos (HTML, CSS, JS, imagens) que são entregues a um CDN e servidos diretamente ao navegador do usuário. Não há um backend dinâmico ou banco de dados envolvido.
• Benefícios: Esta abordagem resulta em um carregamento extremamente rápido, custos de hospedagem reduzidos, segurança aprimorada (menor superfície de ataque) e escalabilidade infinita através do CDN.

2.2. Estrutura de Arquivos (Inferida)

Baseado na análise do site, a estrutura de arquivos do projeto provavelmente se assemelha a esta:

/project-root
├── index.html             # Arquivo principal com a estrutura da página
├── css/
│   └── style.css          # Folha de estilos principal
├── js/
│   ├── main.js            # Script principal com a lógica de geração
│   └── html2canvas.min.js # Biblioteca para captura de tela
└── assets/
    ├── logo-mmb.png
    ├── logo-alpha.png
    ├── rodape-mmb.png
    └── rodape-alpha.png

2.3. Stack Tecnológica Detalhada

| Componente | Tecnologia e Justificativa - | | Linguagem Base | HTML5, CSS3, JavaScript (ES6+). A trindade fundamental do desenvolvimento web, garantindo máxima compatibilidade e aderência aos padrões da W3C. - | | Framework JS | Vanilla JS (JavaScript Puro). A decisão de não adotar um framework como React, Vue ou Angular foi deliberada. Para uma aplicação com escopo tão definido e interatividade limitada, o Vanilla JS oferece a melhor performance com a menor complexidade. Isso evita a sobrecarga de dependências, acelera o tempo de carregamento e simplifica a manutenção a longo prazo. - | | Estilização | CSS3 Puro com Media Queries. A estilização é implementada através de uma folha de estilos externa. A responsividade é garantida pelo uso de Media Queries, que ajustam o layout (ex: transformando o grid de 2 colunas em 1) com base na largura da tela (viewport), garantindo uma boa experiência em desktops, tablets e smartphones. - | | Dependências | html2canvas.js. Esta é a única dependência externa significativa. É uma biblioteca poderosa que permite a renderização de elementos DOM em um <canvas> HTML5, sendo a tecnologia-chave por trás da funcionalidade de "Baixar PNG". - | | Hospedagem | Vercel. Plataforma de nuvem especializada em front-end, escolhida por sua integração nativa com Git, deploys automáticos, CDN global para baixa latência, e provisionamento automático de SSL, garantindo um site rápido e seguro com esforço mínimo de infraestrutura. - |

3. Design, Layout e Experiência do Usuário (UX)

O design da aplicação foi concebido para ser funcional, intuitivo e alinhado às identidades de marca.

• Fluxo de Usuário: O percurso do usuário é linear e autoexplicativo:

  1. O usuário chega à página.
  2. Identifica a seção de sua empresa.
  3. Preenche os campos do formulário.
  4. Visualiza o resultado em tempo real.
  5. Exporta a assinatura. Este fluxo simples minimiza a carga cognitiva e torna a ferramenta acessível a todos.

• Layout e Grid System: A página utiliza um layout de duas colunas em telas de desktop para a área de geração (formulário à esquerda, preview à direita). Este padrão é quebrado em telas menores (@media (max-width: 768px)), onde os elementos são empilhados verticalmente para otimizar o espaço e a legibilidade.

• Paleta de Cores e Tipografia:

  • Cores Primárias: O azul (#003366 para MMB, #007bff para Alpha) é usado para elementos de ação (botões) e identidade, guiando o olhar do usuário.
  • Cores de Suporte: Tons de cinza e branco são usados para fundos e textos, criando um ambiente limpo e focado no conteúdo.
  • Fonte: A escolha da fonte Arial como primária, seguida por sans-serif como fallback, é uma decisão de design defensivo. Garante consistência visual em 99% dos dispositivos sem o custo de performance de carregar uma fonte customizada (webfont).

4. Análise Detalhada das Funcionalidades

4.1. Geração de Assinatura (Core Feature)

O coração da aplicação é um conjunto de scripts que manipulam o DOM.

• Event Listeners: O JavaScript adiciona event listeners aos campos de input do formulário, escutando por eventos como keyup (a cada tecla pressionada) e input (qualquer alteração de valor).
• Atualização do DOM: Quando um evento é disparado, a função de callback associada lê o valor atual do campo (event.target.value) e o insere no local correspondente na estrutura HTML do preview, usando propriedades como .innerText para evitar a injeção de HTML malicioso.

4.2. Funcionalidade de Exportação

• 📥 Baixar PNG (Implementação com html2canvas):

  1. Um event listener no botão de download previne o comportamento padrão e chama a função de captura.
  2. A função html2canvas(document.querySelector("#preview-mmb")) é invocada. A biblioteca, então, analisa o elemento #preview-mmb e todos os seus descendentes, lendo seus estilos computados (cores, fontes, bordas, etc.).
  3. Esta análise é usada para desenhar uma réplica fiel do elemento em um <canvas> virtual.
  4. O método .toDataURL("image/png") do canvas converte o desenho em uma string de dados Base64.
  5. Um elemento <a> é criado dinamicamente (document.createElement("a")), seu href é definido com a string Base64, seu atributo download é definido como assinatura.png, e um .click() programático dispara o download.

• 📋 Copiar HTML (Implementação com Clipboard API):

  1. O código HTML da assinatura, com todos os estilos CSS aplicados de forma inline, está pré-renderizado dentro de uma <textarea> na página.
  2. O clique no botão seleciona o conteúdo desta <textarea>.
  3. A API navigator.clipboard.writeText() é chamada com o texto selecionado. Esta API moderna e assíncrona lida com a interação com a área de transferência do sistema operacional de forma segura, solicitando permissão ao usuário se necessário.

5. Guia de Uso Detalhado para Colaboradores

Objetivo: Gerar e instalar sua assinatura de e-mail oficial.

Passo 1: Acesso e Seleção

• Abra seu navegador (Chrome, Firefox, Edge) e navegue para: https://assinaturas.administradoramutual.com.br/
• Role a página para baixo até encontrar a seção com o logo da sua empresa: GRUPO MMB ou ALPHA PROTEÇÕES.

Passo 2: Preenchimento das Informações

• Nos campos do formulário, digite:
  • Seu Nome Completo.
  • Seu Departamento / Cargo (ex: "Diretor Comercial", "Analista Financeiro").
  • Seu E-mail corporativo completo.
  • Seu Telefone (opcional).
• Verifique em tempo real: À direita, a sua assinatura será montada. Confira se todas as informações estão corretas e sem erros de digitação.

Passo 3: Copiando o Código da Assinatura

• Clique no botão "Copiar HTML". O código completo da sua assinatura está agora salvo na memória do seu computador (área de transferência).

Passo 4: Instalação no Cliente de E-mail

• Para usuários do Gmail:

  1. No canto superior direito, clique no ícone de engrenagem (⚙️) e depois em "Ver todas as configurações".
  2. Na aba "Geral", role para baixo até a seção "Assinatura".
  3. Clique em "+ Criar nova", dê um nome para sua assinatura (ex: "Padrão") e clique em "Criar".
  4. Na caixa de texto à direita, cole o código que você copiou (use Ctrl+V ou Cmd+V). A assinatura deve aparecer formatada.
  5. Abaixo, em "Padrões de assinatura", selecione sua nova assinatura para "NOVOS E-MAILS" e "EM RESPOSTAS/ENCAMINHAMENTOS".
  6. Role até o final da página e clique em "Salvar alterações".

• Para usuários do Microsoft Outlook (Desktop):

  1. Com o Outlook aberto, clique em Arquivo > Opções.
  2. Na nova janela, vá para a seção Email e clique no botão Assinaturas....
  3. Na janela de Assinaturas, clique em Novo, digite um nome para a assinatura e clique em OK.
  4. Na caixa de edição abaixo, cole o código (Ctrl+V).
  5. No canto superior direito, em "Escolha a assinatura padrão", selecione a assinatura recém-criada para "Novas mensagens" e "Respostas/encaminhamentos".
  6. Clique em OK para fechar as janelas.

6. Solução de Problemas (Troubleshooting)

• Problema: A assinatura aparece desformatada ou quebrada no cliente de e-mail.

  • Causa Provável: Alguns clientes de e-mail (especialmente versões mais antigas do Outlook) têm um motor de renderização de HTML limitado. Outra causa pode ser a cópia de texto formatado em vez do código-fonte.
  • Solução: Certifique-se de que está colando o código em um editor que aceita HTML. No Outlook, às vezes é necessário colar e depois selecionar uma opção como "Manter Formatação Original". Se o problema persistir, usar a versão em imagem (PNG) pode ser uma alternativa, embora menos ideal.

• Problema: O botão "Copiar HTML" não funciona.

  • Causa Provável: O navegador pode estar bloqueando o acesso à área de transferência por razões de segurança.
  • Solução: Verifique se o navegador exibiu um pop-up pedindo permissão para acessar a área de transferência e autorize. Tente recarregar a página ou usar um navegador diferente (Chrome e Firefox são recomendados).

7. Recomendações e Próximos Passos

• Validação de Entradas: Implementar validação de formulário para o campo de e-mail usando uma expressão regular simples para verificar a presença de @ e ..
• Feedback de Usuário: Adicionar uma pequena notificação (toast) que aparece brevemente na tela após o usuário clicar em "Copiar HTML", confirmando que a ação foi bem-sucedida.
• Persistência de Dados: Utilizar localStorage para salvar os dados do usuário, para que eles não precisem ser digitados novamente em visitas futuras.
• Analytics: Integrar uma ferramenta de analytics focada em privacidade (como Plausible ou Fathom) para coletar dados anônimos de uso e medir a taxa de adoção da ferramenta.
• Internacionalização (i18n): Embora o público seja brasileiro, adicionar suporte para outros idiomas (como inglês e espanhol) pode ser útil para futuras expansões do grupo.
• Testes Automatizados: Implementar testes de unidade para as funções JavaScript e testes de regressão visual para garantir que futuras alterações não quebrem o layout.