Relatório breve da implantação — MaxFinance Sinergias (Carla Lopes Unipessoal)

1) Enquadramento e objetivo

A implantação corresponde a um website estático (HTML/CSS/JavaScript), com várias páginas na raiz do projeto, orientado a simular uma presença digital de uma empresa de intermediação de crédito/consultoria financeira. O objetivo do JavaScript é dar comportamento e persistência a funcionalidades típicas de um site “real” (ex.: autenticação, área pessoal, histórico de interações), sem dependência de servidor/back-end.

A navegação e a coerência visual são transversais ao site: o cabeçalho é partilhado entre páginas e foi reforçado com ícones (Font Awesome) junto aos itens do menu e com um dropdown em “Serviços” que agrega conteúdos relacionados (Visão geral, Simulador, Tabelas e Formação). Esta alteração melhora a organização da informação, reduz a dispersão do menu e aproxima a experiência de um portal empresarial.

2) Arquitetura JavaScript (visão geral)

A lógica está organizada por responsabilidades, com scripts dedicados a áreas específicas e execução após DOMContentLoaded. A abordagem dominante é:

• Encapsulamento (IIFE + use strict) para evitar colisões no window e impor disciplina de código.
• Separação por componentes/módulos (classes e funções de inicialização) para manter o código sustentável, previsível e fácil de avaliar em contexto académico.
• Persistência no browser (localStorage/sessionStorage) para simular estado e histórico sem infra-estrutura de servidor.

3) Módulos/Componentes principais em JavaScript

3.1 Autenticação e proteção de páginas (auth.js)

O auth.js implementa um sistema de autenticação local com:

• Registo e login com validação e gestão de sessão por localStorage (persistente) ou sessionStorage (sessão), de acordo com “remember me”.
• Hash de password simples (adequado para contexto académico, insuficiente para produção).
• Proteção de páginas: valida se a página requer autenticação e redireciona para auth.html com parâmetro redirect, permitindo regressar ao destino após login.
• Persistência de dados do utilizador: após autenticação, garante acesso às estruturas de dados do utilizador (simulações, pedidos, orçamentos, artigos guardados), permitindo comportamento “tipo aplicação”.
• Logout controlado: guarda o estado atual no perfil e limpa chaves de sessão, reduzindo risco de “contaminação” entre utilizadores no mesmo browser.

Chaves relevantes (exemplos):

• mf_users (lista de utilizadores), mf_current_user (sessão)
• mf_simulations, mf_contacts, mf_budgets, mf_saved_posts, etc.

3.2 Área Pessoal (area-pessoal.js)

O area-pessoal.js funciona como painel de controlo do utilizador, com:

• Validação de sessão (inclui expiração) e redirecionamento automático para auth.html se não existir autenticação válida.
• Estatísticas e listagens: lê dados persistidos (mf_simulations, mf_contacts, mf_budgets, mf_saved_posts) e apresenta contadores e listas recentes, reforçando a perceção de histórico e continuidade.
• Ações de limpeza por categoria e logout com confirmação.
• Mitigação do “voltar atrás” do browser (bfcache), revalidando sessão no evento pageshow.

3.3 Navegação e UI global (cabeçalho com ícones e dropdown) (script.js + HTML/CSS)

As alterações recentes no cabeçalho exigem comportamento consistente e previsível:

• Ícones no menu: os itens do menu incluem símbolos (Font Awesome) para melhorar reconhecimento visual e reduzir esforço cognitivo.
• Dropdown em “Serviços”: o item “Serviços” passa a controlar um submenu com acesso direto a Visão geral, Simulador, Tabelas e Formação.
• A implementação usa atributos ARIA (ex.: aria-expanded, aria-haspopup, aria-controls) para acessibilidade e compatibilidade com navegação por teclado.
• A lógica de abertura/fecho evita comportamentos intrusivos: fecha ao clicar fora e por tecla ESC, e adapta-se em mobile (submenu em fluxo, não “a flutuar” por cima do layout).
• Consistência visual do cabeçalho: foi reforçada a legibilidade (texto do cabeçalho mais escuro), mantendo o rodapé inalterado.

4) Experiência do utilizador (UX) suportada por JavaScript

A implementação JavaScript está alinhada com uma experiência moderna, mesmo sem back-end:

• Fluxo de acesso controlado: páginas sensíveis protegidas e acessíveis após autenticação.
• Continuidade de sessão: opção de sessão persistente vs. sessão curta.
• Consolidação de histórico: simulações/pedidos/orçamentos registados e visíveis na área pessoal.
• Navegação mais limpa: o dropdown em “Serviços” reduz o ruído no menu principal e melhora a arquitetura de informação.
• Bilinguismo preparado no HTML (elementos txt-pt / txt-en) e interface preparada para interação (menu, botões, ações e feedback).

5) Considerações técnicas e limitações (honestas)

• Segurança: sem back-end, a autenticação é demonstrativa. Hash simples não é adequado para produção (seria necessário bcrypt/argon2, validação no servidor e políticas anti-abuso).
• Persistência local: os dados ficam no browser (localStorage), o que é prático para demonstração/avaliação, mas não é seguro nem multi-dispositivo.
• Dependência de ícones: o uso de Font Awesome implica que a biblioteca esteja corretamente carregada nas páginas; caso falhe, o site mantém funcionalidade, mas perde parte da sinalética visual.
• Dropdown e acessibilidade: a solução foi desenhada para ser utilizável por teclado e em mobile, mas uma validação adicional (testes de acessibilidade) seria recomendada para cenário real.

6) Evolução recomendada (configuração futura)

Para transformar o protótipo num sistema “real”:

1. Back-end (Node.js/Express ou similar) + base de dados (PostgreSQL/MySQL).
2. Autenticação robusta (argon2/bcrypt, tokens/JWT, refresh tokens, rate limiting).
3. API para simulações e pedidos com logging e auditoria.
4. RGPD operacional: consentimento explícito, retenção, exportação/apagamento de dados e evidências (não apenas texto legal).
5. Monitorização e testes (acessibilidade, performance, testes de regressão do UI — sobretudo cabeçalho/menu).

7) Conclusão

O projeto demonstra uma implementação coerente de JavaScript para um website estático com características típicas de um portal empresarial: autenticação, proteção de páginas, persistência de interações e área pessoal com indicadores e histórico. As alterações recentes no cabeçalho — introdução de ícones no menu e dropdown em “Serviços” (Simulador, Tabelas e Formação) — reforçam a organização e a usabilidade, mantendo consistência visual e funcional numa solução adequada a contexto académico.