Finalidade e Arquitetura
Desenvolvi este site com o objetivo de apresentar técnicas de mitigação para os três tipos de ataques cibernéticos mais prevalentes: phishing, ransomware e DDoS. A arquitetura do projeto é composta por cinco páginas HTML ( index.html (visão geral), phishing.html, ransomware.html, ddos.html e about.html (relatório) ), todas partilhando um menu de navegação idêntico com links relativos. Esta estrutura permite ao utilizador navegar coerentemente entre os conteúdos, assegurando consistência visual e funcional em todo o site.
Separação entre Conteúdo e Formatação
Todo o conteúdo semântico está contido nos ficheiros HTML5, recorrendo a tags como <header>, <nav>, <main>, <section>, <article>, <table> e <footer>. Nenhuma página contém estilos inline. A totalidade da formatação visual encontra-se no ficheiro externo style.css, onde utilizei variáveis CSS (:root) para definir cores, tipografia e sombras, facilitando a manutenção e a alternância de temas. O ficheiro script.js limita-se a manipular o DOM e o localStorage, sem gerar estilos inline.
Funcionalidades em JavaScript Puro
Implementei exatamente três funcionalidades em JavaScript puro (Vanilla JS), sem qualquer dependência externa:
- Saudação dinâmica e contador de visitas: A função
initSaudacao() lê a hora do sistema via new Date().getHours() e exibe uma saudação contextual ("Bom dia", "Boa tarde" ou "Boa noite"). O contador de visitas é incrementado e persistido no localStorage sob a chave efolio-visitas, mantendo-se entre sessões e páginas.
- Alternância de tema (Dark/Light): A função
initTema() adiciona ou remove a classe dark-mode no elemento <body>, ativando as variáveis CSS alternativas previamente definidas. A preferência é guardada no localStorage (efolio-tema), garantindo continuidade ao navegar entre as cinco páginas. O texto do botão atualiza-se automaticamente para refletir o tema ativo.
- Modal de imagem aumentada: A função
initModal() atribui eventos de clique a todas as imagens com a classe .img-conteudo. Ao clicar, a imagem é apresentada em tamanho ampliado dentro de um modal sobreposto (#modal-imagem). O modal fecha ao clicar na área exterior ou ao premir a tecla Escape, promovendo acessibilidade e usabilidade.
Todas as funções são inicializadas no evento DOMContentLoaded, assegurando que o DOM está completamente carregado antes de qualquer manipulação.