Teste por HTTP e prepare os arquivos essenciais

Neste capítulo você vai distinguir arquivo local, teste no próprio computador e publicação, e montar uma pasta de entrega limpa.

Seu ponto de partida

Continue depois do capítulo 11. Abra pacote de exemplos/12-teste-entrega. Copie inicio para uma pasta de prática. Abra index.html da cópia no navegador e no editor.

A raiz do exemplo é a referência pronta. Inicio fornece o HTML desta etapa e o CSS no estado anterior. Você modifica sua cópia e compara com a referência. Até o capítulo 11, dois cliques bastam; abrir no disco não publica a página.

Como praticar

Leia e confira as linhas indicadas. Mude uma coisa. Anote sua previsão, salve e recarregue. Compare com a explicação. Se não funcionar, investigue o erro antes de seguir. Pare e retome quando precisar; não é necessário decorar as propriedades.

Compare o arquivo com o teste local

Até aqui, os exemplos podem ser abertos com dois cliques. A barra de endereço começa com file:. Agora faremos uma conferência por HTTP, o protocolo usado para pedir arquivos a um servidor.

Um servidor local roda no seu computador e entrega os mesmos arquivos ao navegador. O endereço 127.0.0.1 aponta para o próprio computador. Esse teste não é uma publicação pública.

Python é uma opção para esse teste e só é necessário nesta etapa. Se já estiver instalado, abra um terminal dentro da pasta do projeto. Terminal é uma janela para digitar comandos; no Windows pode ser o PowerShell. Você pode clicar com o botão direito na pasta e procurar Abrir no Terminal.

Digite o comando abaixo e deixe a janela aberta. Depois visite http://127.0.0.1:8766/ no navegador. Se o comando python não existir no Windows, experimente py com os mesmos argumentos. Em sistemas que usam python3, troque somente o nome do comando.

Se Python não estiver instalado, seu estudo de CSS continua funcionando por arquivo. Consulte o link oficial de instalação antes de repetir o teste HTTP. Não instale Docker ou Nginx para executar esta etapa.

Faça no seu exemplo

Execute dentro da pasta do exemplo pronto, onde index.html está. O comando não entra em custom.css nem em index.html.

python -m http.server 8766 --bind 127.0.0.1

Mude uma coisa e preveja

Abra primeiro index.html com dois cliques e depois http://127.0.0.1:8766/.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Clique nos links, abra a imagem e teste o formulário por HTTP. Para encerrar, volte ao terminal e pressione Ctrl+C.

Resultado esperado neste teste: A página deve apresentar o mesmo conteúdo, mas a barra de endereço indicará dois modos diferentes de acesso.

Se não acontecer

Se a porta já estiver em uso, escolha 8767 no comando e no endereço. Preserve —bind 127.0.0.1. Uma lista de arquivos em vez da página pode indicar que abriu o terminal na pasta errada.

Separe o que o aluno precisa receber

Uma entrega de curso inclui capítulos, exemplos, imagens, manifesto e instruções. Fontes de preparação, scripts de geração e imagens de conferência ficam em .trabalho e não acompanham o zip.

Um futuro site teria um conjunto diferente: HTML, CSS, JavaScript necessário, imagens usadas e licenças. Não envie capítulos, notas privadas ou arquivos de configuração apenas porque estão perto do HTML.

Para este volume, não haverá publicação dos exercícios. A versão website já existente é uma referência complementar separada; ela não substitui os exemplos graduais nem faz parte da sequência obrigatória.

O zip final deve ser extraído antes de usar. Depois da extração, o aluno começa pelo README e abre a primeiro capítulo. As referências prontas permitem conferir cada etapa sem depender do acesso à internet.

Faça no seu exemplo

Compare o envelope do zip com esta lista. O site de referência existente acompanha esta edição; não precisa ser estudado para executar os exemplos.

CSS-curso/
  README.md
  curso/
    capítulos Word numeradas
    exemplos/
    imagens/
    MANIFESTO-DE-IMAGENS.csv
    LICENSE-SimpleCSS.txt
  website/

Mude uma coisa e preveja

Extraia uma cópia do pacote numa pasta de teste diferente da pasta em que você trabalhou.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Abra um exemplo, navegue para Prática e confira a imagem. Isso ajuda a encontrar caminhos que dependiam da pasta original.

Resultado esperado neste teste: Os capítulos, imagens e exemplos devem funcionar a partir dessa nova localização.

Se não acontecer

Não use caminhos como B:/minha-pasta/imagem.png no HTML. A entrega precisa usar caminhos relativos aos arquivos distribuídos.

Reconheça o que ainda não é publicação

Publicação pública significa colocar arquivos num serviço que possa ser acessado por outras pessoas. Isso tem consequências diferentes de abrir file: ou usar 127.0.0.1. Concluir o volume não exige uma conta de hospedagem nem publicar o exemplo.

Quando quiser publicar um projeto próprio, faça uma revisão de conteúdo e escolha uma hospedagem adequada a arquivos estáticos. Confira as condições atuais do serviço e preserve a licença da base redistribuída. Use conteúdo que você pode publicar e retire as notas de preparação.

O formulário desta edição continuará demonstrativo mesmo num servidor público. Hospedar HTML não cria um sistema de envio. Não o anuncie como contato real sem construir o serviço correspondente.

Docker, Nginx e administração Linux foram retirados do percurso de CSS. O material anterior está preservado internamente para revisão posterior. Essas ferramentas podem ser estudadas em outro curso, com tempo para seus próprios conceitos.

Você conclui esta etapa quando distingue os três ambientes e consegue abrir a entrega extraída. O resultado esperado é uma base de CSS que você sabe modificar e conferir.

Faça no seu exemplo

Leia a barra de endereço no navegador. Não há comando de publicação neste capítulo.

Mude uma coisa e preveja

Escreva três notas: arquivo no disco, teste em 127.0.0.1 e publicação pública.

Antes de recarregar, anote o que você acha que vai mudar e o que deve permanecer igual. Só depois avance para a conferência.

Recarregue e confira

Explique com suas palavras por que o teste HTTP local não criou um site público.

Resultado esperado neste teste: Cada nota deve identificar quem pode acessar e de onde vêm os arquivos.

Se não acontecer

Não remova a restrição de endereço do servidor para experimentar publicação. O servidor de estudo continua restrito ao próprio computador.

A captura mostra um trecho da referência concluída. Role a página do exemplo para conferir o restante. Os testes temporários podem apresentar outra aparência; restaure os valores indicados antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia do exemplo. Estas atividades são para aplicar o que aprendeu; tente antes de ler o comentário.

1. Inicie e encerre o teste local, se Python estiver disponível.
2. Monte uma lista de arquivos essenciais para um curso e outra para um site próprio.
3. Explique por que o formulário não passou a enviar mensagens ao abrir por HTTP.

Respostas comentadas

Compare seu resultado e sua explicação. Um ajuste diferente pode funcionar, desde que cumpra a tarefa sem cortar conteúdo nem retirar acesso.

1. Execute o comando com —bind 127.0.0.1, visite o endereço correspondente e encerre com Ctrl+C. Não deixe um processo que você não sabe localizar.

2. Curso inclui capítulos, exemplos, imagens, manifesto e README. Site próprio usa só os arquivos públicos necessários e licenças; .trabalho fica fora.

3. O comportamento continua local. App.js bloqueia o envio e mostra uma mensagem; não há serviço de recebimento.

Quando seguir

Você abre a entrega extraída, distingue os ambientes e sabe encerrar o servidor de teste. Se ainda precisa de ajuda para isso, repita o teste pequeno antes de avançar.

Consulta opcional

Os links abaixo aprofundam este assunto. Você não precisa lê-los para realizar a prática com os arquivos locais. Créditos da origem e licenças ficam no README.

• Referência 1
• Referência 2

O arquivo completo

Referência do exemplo 12-teste-entrega, reproduzida aqui para que você possa conferir sem sair da página.

app.js

const form = document.querySelector("#form-estudo");
const resultado = document.querySelector("#resultado");
const conferir = document.querySelector("#conferir");
if (form && resultado && conferir) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    resultado.textContent =
      "Preenchimento válido no navegador. Nenhum dado foi enviado.";
  });
  form.addEventListener("reset", () => {
    resultado.textContent = "";
  });
  conferir.disabled = false;
}