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, seguindo os exemplos do livro adotado na unidade curricular. Para evitar o colapso dos contentores com elementos em float, foi aplicado overflow: hidden. Tentei utilizar flexbox inicialmente mas optei por float por ser a abordagem coberta pelo livro.
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, baseado no exemplo de animação por temporizadores do livro. 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, conforme o padrão apresentado no livro.
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). As funções mysql_* do manual foram removidas a partir do PHP 7, pelo que se utilizou a extensão sucessora mysqli, mantendo a mesma abordagem procedimental do livro.
A base de dados db_2400134 é constituída por duas tabelas relacionadas, à semelhança do exemplo do manual (cap. 14):
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. As respostas são em formato JSON.
{"matricula":"AA-00-00","marca":"Ferrari","pais":"itália","fundacao":1939,"segmento":"desportivo"}{"matricula":"BB-11-11","marca":"Audi","pais":"alemanha","fundacao":1909,"segmento":"utilitario"}