Galeria de Imagens

Imagem solta não é galeria

A web moderna é visual, mas beleza sem estrutura vira ruído técnico. Galeria de imagens é um sistema de navegação visual onde cada imagem tem contexto, endereço, significado e fluxo.

Planejamento da galeria

Antes de codar, o Mestre define a arquitetura. A galeria precisa de uma página principal, uma pasta de imagens, nomes limpos e, quando necessário, páginas individuais para imagens ampliadas.

projeto-galeria/
  galeria.html
  paginas/
    detalhe.html
  imagens/
    galeria/
      projeto-dashboard-mini.webp
      projeto-dashboard-grande.webp

• Use nomes em minúsculas e com hifens.
• Evite espaços, acentos e maiúsculas.
• Use caminhos relativos para portabilidade.
• Separe miniaturas e imagens grandes.

figure, img e figcaption

O elemento figure representa uma peça visual independente. A tag img carrega a imagem. O figcaption fornece a legenda visível.

<section id="galeria-viagens">
  <h2>Minhas Aventuras</h2>

  <figure>
    <a href="montanhas.html">
      <img src="imagens/galeria/montanhas-nevadas.jpg"
           alt="Picos de montanhas cobertos de neve sob um céu azul"
           width="300"
           height="200">
    </a>
    <figcaption>Expedição aos Alpes Suíços - Inverno de 2023</figcaption>
  </figure>
</section>

Alt vs figcaption

• alt: descrição técnica e acessível, usada por leitores de tela e fallback.
• figcaption: legenda visível que dá contexto, autoria ou explicação.

Miniaturas e imagem ampliada

A miniatura deixa a página leve. A imagem ampliada entrega alta resolução quando o usuário quiser ver detalhes.

<a href="imagens/galeria/projeto-dashboard-grande.webp"
   target="_blank"
   rel="noopener noreferrer">
  <img src="imagens/galeria/projeto-dashboard-mini.webp"
       alt="Abrir imagem ampliada do dashboard de estudos"
       width="300"
       height="200">
</a>

Galeria por categorias

Galerias grandes precisam de navegação interna por categorias. Isso melhora UX, portfólio, organização e leitura por tecnologias assistivas.

<nav>
  <a href="#web-design">Web Design</a>
  <a href="#mobile">Mobile</a>
  <a href="#branding">Branding</a>
</nav>

Galeria profissional sem erro

• Use section para agrupar a galeria ou categorias.
• Use figure para cada item visual independente.
• Use figcaption com legenda útil e visível.
• Use alt descritivo em todas as imagens informativas.
• Use miniaturas otimizadas na página principal.
• Use imagens grandes apenas quando necessário.
• Teste todos os caminhos no navegador e no GitHub Pages.
• Não use caminhos locais como C:\Users\....
• Não abra tudo em nova aba sem necessidade.

15 perguntas para provar domínio

1. Principal benefício de pastas organizadas? Facilita manutenção e evita caminhos quebrados.
2. Como criar miniatura clicável? Envolvendo img com a.
3. Para que serve figure? Para envolver conteúdo autocontido.
4. Para que serve figcaption? Para fornecer legenda visível.
5. Por que alt é obrigatório mesmo com legenda? Porque alt é acessibilidade técnica e fallback.
6. O que é link de retorno? Link que leva da página ampliada para a galeria.
7. Risco de caminho local absoluto? Funciona só no computador e quebra na web.
8. Como abrir imagem em nova aba com segurança? target="_blank" e rel="noopener noreferrer".
9. Qual tag agrupa tematicamente a galeria? section.
10. Por que usar width e height? Para evitar saltos de layout.
11. Como nomear imagens? Minúsculas e hifens, sem espaços ou acentos.
12. O que é caminho relativo? Rota baseada na posição do arquivo atual.
13. Para que serve id na galeria? Para âncoras e categorias internas.
14. Pode haver mais de um header? Sim, em página e seções/artigos.
15. Qual elemento representa o conteúdo principal? main.

Registre sua galeria

git status
git add .
git commit -m "aula-19: cria galeria de portfolio html"
git push

• git status: verifica HTML e imagens criados.
• git add .: adiciona todos os recursos à área de preparação.
• git commit: registra a versão definitiva do desafio.
• git push: envia o projeto para o GitHub.