Aula 08 - Planejamento Técnico: Do Site Estático ao Multi-Páginas

Ponto de partida

Abra estes materiais antes de começar:

descoberta.md da aula 07;
design.md e tokens.css da aula 06;
repositório do projeto no GitHub.

Hoje você usa essas decisões para montar o plano do MVP. Não precisa definir de novo o público, o objetivo, as cores ou as fontes.

Ao final, seu projeto terá:

arquitetura.md
componentes.md
tecnologia.md
GitHub Projects com as issues do MVP

Exemplo usado nesta página

Vamos usar o projeto fictício Maria da Padaria para preencher os exemplos.

Decisão já tomada	Registro da Maria
Público	Mães que usam o celular para encomendar bolo
Ação principal	Pedir pelo WhatsApp
Conteúdo essencial	Bolos, preços, encomenda e história da padaria
Estilo	Acolhedor, com terracota, bege e texto marrom
Limite do MVP	Sem blog e sem pagamento online agora

Use os dados do seu projeto no lugar dos exemplos.

Spec de arquitetura

O spec de arquitetura registra as páginas, a navegação e o caminho que leva até a ação principal.

1. Desenhar o mapa do site

Comece pela árvore de páginas. Cada nó da árvore vira uma linha na tabela de páginas.

Home (/)
├── Sobre (/sobre)
├── Catálogo (/catalogo)
│   └── Produto (/catalogo/[nome])
└── Contato (/contato)

Para o MVP, mantenha 3 ou 4 páginas. Uma página de promoções, um blog ou uma área de clientes pode entrar depois no Backlog.

2. Preencher a tabela de páginas

Página	URL	Objetivo	Conteúdo principal
Home	`/`	Mostrar o que a Maria vende	Apresentação, destaques e botão de pedido
Sobre	`/sobre`	Contar a história da padaria	História, modo de preparo e valores
Catálogo	`/catalogo`	Exibir bolos e preços	Cards com foto, descrição, preço e link
Contato	`/contato`	Receber pedidos	WhatsApp, horário e formulário simples

A coluna “Objetivo” impede páginas sem função. Se uma página não ajuda o visitante a entender, escolher ou entrar em contato, ela pode esperar.

3. Escrever o fluxo principal

Escreva o percurso mais importante do visitante.

Home → Catálogo → Produto → Encomenda pelo WhatsApp

Confira o caminho no seu mapa. Se a pessoa precisa clicar em muitos lugares para chegar à ação principal, reveja as páginas ou o menu.

4. Desenhar o wireframe low-fi da Home

O wireframe é o rascunho da página no papel. Ele organiza os blocos antes do código.

Elemento	Como marcar no papel
Título	Retângulo grande com linha grossa
Texto	Linhas finas
Imagem	Retângulo com X
Botão	Retângulo pequeno com texto
Menu	Barra no topo
Rodapé	Faixa na base

Para a Home da Maria, o desenho pode seguir esta ordem:

[LOGO]                    [HOME] [SOBRE] [CATÁLOGO]

[TÍTULO: Bolos para sua festa]
[Texto curto sobre encomendas]
[BOTÃO: Ver catálogo]

[Card de bolo] [Card de bolo] [Card de bolo]

[Depoimento de cliente]

[RODAPÉ: WhatsApp, horário e Instagram]

Use os 6 blocos da aula 06: identidade, CTA, conteúdo, prova social, navegação e rodapé. Tire uma foto do rascunho e guarde junto do spec.

A aula 13 volta ao wireframe para o trabalho coletivo do Portal e transforma o resultado em briefing.

Template: `arquitetura.md`

# Arquitetura do Site - [Nome do Projeto]

## Mapa do site
[cole ou desenhe a árvore de páginas]

## Wireframe Home
[cole a foto do rascunho ou descreva os blocos]

## Páginas
| Página | URL | Objetivo | Conteúdo principal |
| --- | --- | --- | --- |
| ... | ... | ... | ... |

## Navegação
- Menu principal: [links]
- Rodapé: [informações]
- CTA principal: [ação]

## Fluxo principal
Home → ... → [ação principal]

Spec de componentes

Compare as páginas do mapa. O que aparece em mais de uma página entra como componente global. O que só existe onde é necessário entra como componente de página.

Exemplo: `componentes.md` da Maria

# Componentes do Projeto - Maria da Padaria

## Componentes globais
| Componente | Onde aparece | O que muda |
| --- | --- | --- |
| Menu | Todas as páginas | Link ativo |
| Footer | Todas as páginas | Contato e redes |
| Botão de pedido | Home, Catálogo e Contato | Texto e link |

## Componentes de página
| Componente | Onde aparece | Conteúdo ou props |
| --- | --- | --- |
| Hero | Home e Sobre | título, texto, CTA |
| Card de bolo | Catálogo e destaques da Home | nome, imagem, preço, descrição, link |
| Depoimento | Home | fala e nome da cliente |
| Formulário | Contato | nome, telefone e mensagem |

Use o design.md e os tokens existentes ao construir esses componentes. Não crie uma nova paleta ou outro padrão de botão para cada página.

Spec de tecnologia

Registre o que o projeto precisa agora. Esta etapa não pede uma pesquisa de todas as ferramentas disponíveis.

Pergunta	Exemplo da Maria
Qual estrutura atende o MVP?	Astro, porque o catálogo terá mais de uma página
Com que frequência o conteúdo muda?	Uma vez por mês
Precisa pesquisar CMS?	Não agora. A Maria pode atualizar os arquivos com ajuda.
Onde será hospedado?	Cloudflare Pages, escolhida na aula 03
O que fica para depois?	Blog, pagamento online e área da cliente

Template: `tecnologia.md`

# Decisões Técnicas - [Nome do Projeto]

## Estrutura
- [ ] HTML/CSS/JavaScript
- [ ] Astro
- Motivo: [por que esta estrutura atende o MVP]

## Atualização de conteúdo
- Frequência: [raramente / mensalmente / semanalmente]
- CMS: [não precisa / pesquisar]

## Hospedagem
- Plataforma: [GitHub Pages / Vercel / Cloudflare Pages]
- Motivo: [por que esta escolha atende o projeto]

## Limites do MVP
- Entra agora: [...]
- Fica para depois: [...]

Se o projeto exige login, pagamento ou dados em tempo real, registre essa necessidade em “Fica para depois”. Ela será avaliada quando o projeto tiver uma versão inicial funcionando.

Specs virando issues

Transforme cada parte do plano em uma tarefa pequena. O GitHub Projects já foi apresentado nas aulas 03 e 07. Agora ele recebe as tarefas que saíram dos specs.

Item do spec	Issue
Página	Criar Home com hero, destaques e CTA
Página	Criar página Sobre com história e valores
Componente global	Criar Menu para as páginas do MVP
Componente de página	Criar Card para o catálogo
Decisão técnica	Configurar hospedagem escolhida

Exemplo: issue pronta para o GitHub

## Título
Criar Home com hero, destaques e CTA

## Contexto
A Home apresenta a Maria da Padaria e leva a pessoa ao catálogo.

## Critérios de conclusão
- [ ] Usa os tokens da aula 06
- [ ] Mostra três bolos em destaque
- [ ] Tem botão para o catálogo
- [ ] Funciona no celular
- [ ] Links do menu funcionam

Coloque no To Do somente as tarefas do MVP. Ideias como blog, cupom de desconto e pagamento online entram no Backlog.

Prática guiada

Abra descoberta.md, design.md e tokens.css.
Crie arquitetura.md com mapa do site, tabela de páginas, fluxo e wireframe da Home.
Crie componentes.md com componentes globais e de página.
Crie tecnologia.md com estrutura, atualização, hospedagem e limites.
Transforme os itens dos specs em issues.
Separe o MVP no To Do e as ideias futuras no Backlog.

Conferência da entrega

Entrega	Conferir
Mapa do site	Tem 3 ou 4 páginas do MVP
Wireframe da Home	Mostra os blocos em ordem e está guardado no spec
Fluxo principal	Leva até a ação que o visitante precisa fazer
Componentes	Separa global e página, com o que muda em cada um
Tecnologia	Registra estrutura, hospedagem e limites
Issues	São pequenas, específicas e ligadas aos specs
Backlog	Guarda o que não entra agora

Problemas comuns

Problema	Ajuste
Muitas páginas no mapa	Corte para o que sustenta a ação principal. O restante vai para o Backlog.
Wireframe confuso	Volte aos 6 blocos da aula 06 e reorganize a ordem.
Componente global usado só uma vez	Deixe como componente de página.
Spec com placeholders	Troque por informações reais do projeto.
Issue grande demais	Separe página, componente e configuração em tarefas diferentes.
Algo não cabe no MVP	Registre em “Fica para depois” e no Backlog.

Material de apoio

Recurso	Para que usar
GitHub Docs - Projects	Organizar issues no quadro
Nielsen Norman Group	Consultar exemplos de wireframe
Astro Docs	Consultar Astro, se essa for a estrutura escolhida