Portfólio local do Laboratório

Uma página índice liga as etapas visuais fortes. Estudo local — sem publicar dados reais.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• Links relativos?
• Quando usar servidor?
• O que não entra no zip público de aluno?

Navegar

Abra os links do mural, mar, A*, ray e shader.

Erro comum: caminho quebrado se mover pastas — mantenha a estrutura exemplos/.

Personalizar

No início, acrescente um link para sua etapa favorita.

<li><a href="./23-mar-recife/index.html">Mar de Recife</a></li>

Pare e experimente. Preveja o novo item na lista.

Entrega de estudo

README do volume explica a ordem dos capítulos.

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne index.html, styles.css. Abra o resultado pronto, localize o trecho que produz portfolio local do laboratorio e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

1. Portfolio precisa da internet?
2. Faixa SVG é?
3. Dados pessoais?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Não, só arquivos locais (e 127.0.0.1 se preciso).

Atividade 2. Identidade visual leve.

Atividade 3. Proibidos.

Exemplo deste capítulo: pacote de exemplos/35-portfolio/.