Ponte e ambiente local

Neste capítulo você vai organizar pastas, reconhecer Git local e subir um servidor só em 127.0.0.1. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Antes desta etapa

HTML, CSS e JavaScript básicos. Se faltar, use os cursos HTML/CSS/JS do arquivo Webdev Completo.

Seu ponto de partida

Use o exemplo 01-ponte-ambiente do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

O Ateliê começa no disco

O Ateliê Boa Viagem é um produto fictício: oficinas, encomendas e um catálogo público. Nesta etapa você só abre a página e confirma que arquivo, editor e navegador são papéis diferentes.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<h1>Ateliê Boa Viagem</h1>

Mude uma coisa e preveja

Troque o h1 por Ateliê em prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O título grande muda. O restante da página permanece.

Se não acontecer

Confira se salvou a cópia aberta no navegador.

HTTP local não é publicação

Abrir com dois cliques usa file://. Alguns recursos (JSON, módulos) pedem HTTP. O comando de estudo usa —bind 127.0.0.1. Não use 0.0.0.0.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

python -m http.server 8765 --bind 127.0.0.1

Mude uma coisa e preveja

Suba o servidor e abra http://127.0.0.1:8765/.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A página carrega pelo endereço local. Encerrar o terminal para o servidor.

Se não acontecer

Se a porta estiver ocupada, escolha outra acima de 1024.

Git local como histórico

Git grava versões no seu disco. Neste volume basta init, status, add e commit locais. Conta remota é opcional e fora do eixo deste capítulo.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

git status

Mude uma coisa e preveja

Rode git status na pasta de prática.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Você vê arquivos rastreados ou a mensagem de repositório ainda não inicializado.

Se não acontecer

Se git não existir, instale o cliente gratuito e reabra o terminal.

Atividades

Atividade 1

Explique a diferença entre abrir index.html pelo explorador e por http://127.0.0.1:8765/.

Atividade 2

Liste três pastas que você manteria separadas: prática, referência e zip de entrega.

Atividade 3

Por que o volume exige bind em 127.0.0.1?

Respostas comentadas

Resposta da atividade 1

file:// lê do disco; HTTP local simula um servidor sem publicar na internet.

Resposta da atividade 2

Prática (cópia editável), referência (intocada) e pacote essencial (README + curso).

Resposta da atividade 3

Limita o serviço à máquina local e evita exposição acidental na rede.

O arquivo completo

Referência do exemplo 01-ponte-ambiente, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ponte — Ateliê Boa Viagem</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>
<a class="skip" href="#conteudo">Ir para o conteúdo</a>
<header>
<p><strong>Ateliê Boa Viagem</strong></p>
<nav aria-label="Principal"><ul class="nav"><li><a href="index.html" aria-current="page">Início</a></li></ul></nav>
</header>
<main id="conteudo">
<h1>Ateliê Boa Viagem</h1>
<p>Atelier digital fictício em Boa Viagem, Recife. Oficinas, encomendas e catálogo.</p>
<p class="card">Abra esta pasta no editor. Use HTTP local quando o exemplo pedir JSON.</p>
<p><a href="sobre.html">Sobre o estudo</a></p>
</main>
<footer><p>Conteúdo fictício. Estudo em 127.0.0.1.</p></footer>

</body>
</html>

styles.css

:root{--ink:#1a1a1a;--bg:#f7f4ef;--brand:#1f3a5f;--accent:#c45c26;--line:#d9d2c5;--focus:#0b57d0}
*{box-sizing:border-box}html{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;line-height:1.5}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem}
header,footer{background:var(--brand);color:#fff;padding:1rem 1.25rem}header a,footer a{color:#fff}
main{max-width:52rem;margin:0 auto;padding:1.25rem}h1{color:var(--brand);margin-top:0}
.card{background:#fff;border:1px solid var(--line);padding:1rem;margin:.75rem 0}
button{background:var(--accent);color:#fff;border:0;padding:.55rem 1rem;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(3,4.5rem);gap:.4rem}
.square{width:4.5rem;height:4.5rem;font-size:1.5rem;background:#fff;border:2px solid var(--brand)}
label{display:block;margin:.5rem 0 .2rem;font-weight:600}
input,textarea{width:100%;max-width:28rem;padding:.45rem;border:1px solid var(--line)}
ul.nav{list-style:none;padding:0;display:flex;gap:1rem;flex-wrap:wrap;margin:0}
.status{font-weight:600;margin:.75rem 0}