Blog do Cláudio

Relatório Interativo: Blog do Cláudio

Esta é uma análise técnica e interativa do "Blog do Cláudio". Em vez de um documento estático, optei por transformar os dados do relatório numa experiência imersiva que explora a estrutura, tecnologia e funcionalidades do projeto original.

5

Páginas Principais

Estrutura modular e intuitiva.

3

Tecnologias Core

HTML5, CSS3, e Vanilla JS.

3+

Funcionalidades Interativas

Foco na experiência do utilizador.

100%

Responsivo

Adaptável a todos os ecrãs.

Distribuição de Funcionalidades

Uma análise visual dos tipos de funcionalidades desenvolvidas, com base no relatório.

Arquitetura do Site

O relatório descreve uma arquitetura de 5 páginas. A visualização abaixo representa essa estrutura. Passe o mouse sobre um bloco para ver uma breve descrição de sua função ou clique e vá para a pagina e analise os detalhes você mesmo.

Passe o mouse sobre um card para ver detalhes.

Funcionalidades Interativas em Ação

A melhor forma de compreender as funcionalidades descritas no relatório é vê-las a funcionar. Abaixo, estão algumas das principais interações do projeto "Blog do Cláudio" para demonstração.

1. Funcionalidade "Leia mais / Leia menos"

Esta funcionalidade permite que os artigos mostrem um resumo, economizando espaço e permitindo ao utilizador expandir apenas o que lhe interessa.

As novas fronteiras da Inteligência Artificial

Descubra como a IA está a moldar o futuro e a transformar indústrias de maneiras que nunca imaginamos...

2. Validação de Formulário em Tempo Real

O relatório destaca uma validação robusta de formulário via JavaScript. O formulário abaixo replica essa lógica.

3. Conceito: Rolagem "Infinita"

A funcionalidade mais complexa do projeto foi a rolagem infinita, que cria uma experiência de navegação contínua.

Página 1
Página 2
Página 3
Página 1

Como funciona:

  1. O JavaScript monitoriza a posição da rolagem da página.
  2. Quando o utilizador se aproxima do final, uma função é acionada.
  3. A função `fetch` busca o conteúdo HTML da página seguinte de forma assíncrona.
  4. O conteúdo recebido é adicionado dinamicamente ao final do `main` da página atual.
  5. O processo repete-se para as páginas subsequentes, criando uma experiência de navegação contínua.

Otimização (SEO)

O relatório confirma a aplicação de boas práticas de SEO para melhorar a visibilidade e acessibilidade, fundamentais para qualquer projeto Front-End de sucesso.

Conclusão

  • ✔
    Estrutura SPA

    Todo o conteúdo está dividido em ficheiros HTML, com navegação suave entre as páginas e secções, provida por JavaScript.

  • ✔
    Visualização de Dados

    O gráfico de "Distribuição de Funcionalidades" utiliza a biblioteca Chart.js para renderizar um gráfico doughnut dinâmico.

  • ✔
    Interatividade

    Elementos como o mapa de arquitetura interativo e as demos funcionais são controlados por JavaScript para responder às ações do utilizador.

  • ✔
    Estilização Avançada

    Classes de utilitários foram usadas para criar rapidamente um layout responsivo e moderno, mostrando a eficiência de frameworks de CSS.

  • ✔
    Meta Tags Descritivas

    Títulos e descrições únicos por página.

  • ✔
    HTML Semântico

    Uso correto de tags para estruturar o conteúdo.

  • ✔
    Atributos 'alt' em Imagens

    Melhora a acessibilidade e o SEO de imagens.