Bastidores da renovação do Besttein.pt

A primeira versão do Besttein.pt cumpria uma função básica: apresentar o nome e ligar a alguns projetos. Era um conjunto pequeno de páginas HTML, cada uma com estilos próprios incluídos no mesmo ficheiro. Essa abordagem permite publicar depressa, mas começa a criar problemas quando o site cresce.

A renovação não começou pela escolha de uma tecnologia nova. O site continuou estático, usando HTML, CSS e JavaScript. A decisão mais importante foi organizar melhor aquilo que já existia.

O diagnóstico inicial

As páginas repetiam o mesmo cabeçalho, rodapé e regras visuais. Existiam diferenças na navegação, caminhos inconsistentes e texto com problemas de codificação. O ficheiro CSS externo estava vazio, apesar de cada página conter centenas de linhas de estilos.

Também faltava uma estrutura editorial. O visitante conseguia perceber que existiam projetos, mas não encontrava informação suficiente para entender quem os criava, como se relacionavam ou que tipo de conteúdo seria publicado.

Por que foi mantido um site estático?

Um sistema de gestão de conteúdos ou uma framework teria acrescentado instalação, atualizações e dependências. Para um site com páginas informativas e artigos editados diretamente nos ficheiros, essa complexidade ainda não era necessária.

HTML estático tem vantagens claras: o servidor entrega documentos prontos, existe pouco JavaScript, a superfície de ataque é reduzida e o alojamento pode ser simples. A desvantagem é que componentes repetidos precisam de disciplina editorial ou de uma etapa de geração no futuro.

Uma linguagem visual partilhada

O CSS foi centralizado num único ficheiro. Cores, limites de largura, espaçamento, botões, cartões, formulários e estados de foco passaram a usar regras comuns. Isto reduz diferenças acidentais e torna uma alteração global muito mais simples.

A identidade escura foi mantida porque já fazia parte do site. Em vez de trocar completamente o estilo, foram melhorados contraste, hierarquia tipográfica, espaço em branco e comportamento em ecrãs pequenos.

O problema móvel que só apareceu no teste

Na primeira renderização em telemóvel, a grelha principal ultrapassava a largura do ecrã. O texto era cortado e o botão do menu desaparecia. A causa não estava no título, mas num elemento da grelha que recusava encolher por causa da sua largura mínima automática.

A correção combinou colunas com minmax(0, 1fr), min-width: 0 nos filhos da grelha e proteção contra deslocamento horizontal. Este exemplo mostra por que motivo “usar media queries” não chega: é necessário observar o resultado real.

Conteúdo e confiança

Foram criadas páginas de privacidade, cookies, termos, perguntas frequentes e contacto. Mais tarde, a identidade foi clarificada: Besttein é um projeto pessoal independente e Bendiro é o nome público do autor. Esta distinção evita apresentar o projeto como uma empresa que não existe.

O Build também passou a identificar portefólios como demonstrações, sem fingir clientes ou resultados. Transparência não é apenas uma exigência legal; é uma parte da qualidade do conteúdo.

SEO sem encher páginas de palavras-chave

Cada página recebeu um título e uma descrição próprios, URL canónica, idioma português de Portugal e informação de partilha. Foram ainda criados sitemap, robots.txt e dados estruturados adequados ao tipo de página.

Esses elementos ajudam os motores de pesquisa a interpretar o site, mas não substituem conteúdo útil. A parte mais trabalhosa foi criar artigos que respondem a perguntas e ligar esses artigos aos projetos correspondentes.

O que fica para melhorar

Um site nunca fica definitivamente terminado. A prioridade seguinte é acompanhar a indexação, rever artigos quando houver alterações técnicas e publicar novos casos práticos. Se a edição manual se tornar difícil, poderá ser criada uma etapa de geração estática sem alterar a experiência final do visitante.