Este site foi desenvolvido no âmbito da unidade curricular de Laboratório de Sistemas e Serviços Web. O tema escolhido foi o mundo automóvel, com o objetivo de apresentar informação sobre marcas, tecnologia e permitir a pesquisa de viaturas por matrícula.
O site é composto por seis páginas: a página inicial apresenta o site e serve de ponto de entrada; a página de Marcas lista construtores automóveis com país de origem, ano de fundação e segmento; a página de Tecnologia descreve os principais conceitos técnicos do setor; a página de Pesquisa permite localizar um veículo por matrícula; a página de Galeria apresenta imagens em carrossel; e esta página descreve as decisões tomadas durante o desenvolvimento.
Toda a formatação foi colocada em ficheiros CSS externos, sem recorrer a estilos inline. O ficheiro style.css define o layout base, tipografia e comportamento dos elementos comuns. A funcionalidade de modo dia/noite foi implementada com dois ficheiros CSS adicionais, tema-dia.css e tema-noite.css, sendo o ficheiro ativo trocado dinamicamente via JavaScript, alterando o atributo href do elemento link. Esta abordagem torna explícita a separação entre conteúdo e apresentação.
Um problema encontrado foi a invisibilidade de ícones escuros sobre fundo escuro no tema noite. A solução passou pela propriedade filter: invert(1) aplicada no CSS do tema noite, que inverte as cores das imagens sem necessidade de duplicar ficheiros.
O layout do menu e das secções de tecnologia foi construído com float. Para evitar o colapso dos contentores com elementos em float, foi aplicado overflow: hidden.
Foram implementadas quatro funcionalidades dinâmicas. O modo dia/noite troca o ficheiro CSS ativo por JavaScript. A mudança de idioma entre português e inglês foi implementada com dois ficheiros de objeto JavaScript, lang-pt.js e lang-en.js, cujas strings são aplicadas aos elementos da página pela função aplicarLingua(), que verifica sempre se o elemento existe antes de escrever, evitando erros em páginas onde determinados elementos estão ausentes. O carrossel da galeria usa setTimeout com duas funções recursivas. A pesquisa por matrícula valida o formato português através de uma expressão regular que cobre os três formatos em vigor, AA-00-00, 00-AA-00 e 00-00-AA, sendo a conversão para maiúsculas feita automaticamente com toUpperCase() para evitar erros de introdução. A submissão do formulário é tratada pelo evento onsubmit com return false para evitar o recarregamento da página.
Os textos da página de Tecnologia e algumas traduções foram gerados com apoio de inteligência artificial, tendo sido depois revistos e adaptados ao contexto do site.
No e-fólio B foi acrescentada uma componente do lado do servidor, em PHP, com persistência de dados numa base de dados MariaDB (compatível com MySQL), através da extensão mysqli.
A base de dados db_2400134 é constituída por duas tabelas relacionadas:
A página marcas.php exibe dinamicamente o conteúdo da tabela marca, e a página de Pesquisa consulta a API por matrícula.
A inserção de novas viaturas faz-se na página de back office, através de formulário:
Foi criado um serviço web (api.php) com dois métodos (GET e PUT). As respostas são em formato JSON. A página de Pesquisa consome esta API através de XMLHttpRequest, consultando o endpoint de pesquisa por matrícula.
[{"marca":"Ferrari","pais":"Italia","fundacao":1939,"segmento":"desportivo"}, ...]{"matricula":"AA-00-00","marca":"Ferrari","pais":"Italia","fundacao":1939,"segmento":"desportivo"}{"matricula":"BB-11-11","marca":"Audi","pais":"Alemanha","fundacao":1909,"segmento":"utilitario"}As funções mysql_* apresentadas no livro da unidade curricular (Linguagens Web, de Alexandre Pereira e Carlos Poupa) foram removidas a partir do PHP 7, pelo que se utilizou a extensão sucessora mysqli, mantendo a mesma abordagem procedimental.
A API REST responde em JSON e é consumida no cliente com XMLHttpRequest.
Todas as consultas que recebem dados externos usam prepared statements (com mysqli_prepare e mysqli_stmt_bind_param), e a saída em HTML é filtrada com htmlspecialchars, para evitar injeção de SQL e XSS.
As imagens de bandeiras e segmentos usam nomes sem acentos (por exemplo, Italia.png), para evitar problemas de normalização Unicode e de sensibilidade a maiúsculas e minúsculas entre sistemas operativos.