Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 11

Estudar local e publicar

6 min de leitura 1.074 palavras 1 gravura

Até aqui a oficina mora na sua pasta. Este capítulo separa três lugares: o arquivo no disco, o teste em 127.0.0.1 e uma URL pública. Publicar é opcional. O volume segue sem conta e sem pagamento. O exemplo está em exemplos/11-publicar/.

127.0.0.1 é o endereço do próprio computador. O navegador pede a página a um programa pequeno que lê a pasta. Ninguém de fora entra.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

Três lugares, três barras

Abra index.html com dois cliques. A barra começa com file:. O navegador lê o disco. Caminhos quebrados e algumas regras de script aparecem diferente da web.

O segundo lugar é HTTP na própria máquina. A barra fica http://127.0.0.1:8769/exemplos/11-publicar/. Os arquivos são os mesmos. O jeito de pedi-los é o da web.

O terceiro lugar é uma URL pública, por exemplo https://USUARIO.github.io. Qualquer pessoa com o link pode abrir. Isso é publicação. Não acontece só de você estudar.

Três barras de endereço: arquivo no disco, 127.0.0.1 e URL pública

A figura resume os três casos. Use-a para nomear o que você vê no navegador.

Pare e experimente. Abra o exemplo pelo disco. Anote o começo da barra. Preveja file:. Depois sirva a pasta (capítulo 2) e compare.

Erro comum: achar que file: já é um site no ar. Só o seu usuário, nesta máquina, vê essa página.

Servidor de estudo neste computador

Python é um programa que muitos sistemas já trazem. Ele não faz parte do HTML. Serve só para o teste.

Abra o terminal na pasta curso. No Windows, clique com o botão direito e procure Abrir no Terminal. Digite:

python -m http.server 8769 --bind 127.0.0.1

Se python não existir, tente py com os mesmos argumentos. Em alguns sistemas o comando é python3.

Deixe a janela aberta. Visite http://127.0.0.1:8769/exemplos/11-publicar/. Clique nos links da oficina. Encerre com Ctrl+C.

--bind 127.0.0.1 prende o servidor a esta máquina. Não use 0.0.0.0. Não peça ao aluno do lado para “entrar no seu IP”.

Se a porta 8769 já estiver ocupada, o terminal avisa. Troque o número no comando e na URL, por exemplo 8770. O bind continua o mesmo.

Pare e experimente. Inicie o servidor, abra a oficina, depois encerre com Ctrl+C e recarregue. Preveja a página falhar. Confira e suba de novo se ainda estiver estudando.

Erro comum: abrir o terminal numa pasta sem index.html e achar que o site sumiu. A lista de arquivos no navegador denuncia o diretório errado.

Publicar não é obrigatório

Você conclui o volume sem colocar a oficina na internet. Conta paga não entra neste material. Hospedagem cara não é caminho único.

Publicar tem consequência. Texto, foto e formulário ficam visíveis. O pedido do capítulo 9 continua indo para obrigado.html. Hospedar HTML não cria atendimento de e-mail.

O exemplo desta pasta é um cartão de lembrete, não um botão que publica.

<main>
  <h1>Onde esta página está agora?</h1>
  <ol>
    <li>Disco: a barra começa com file:</li>
    <li>Teste local: a barra começa com http://127.0.0.1</li>
    <li>Público: a barra começa com https:// e outro domínio</li>
  </ol>
  <p>A Oficina do Farol é conteúdo fictício. Não publique dados reais.</p>
</main>

Leia a barra. Marque o item da lista que combina com o que você vê. Só o terceiro item é publicação.

Se um dia quiser um endereço público, escolha um serviço gratuito de páginas estáticas. Leia as regras atuais do site. Tire dados reais. Mantenha o texto fictício ou troque por texto seu que você pode mostrar.

Pare e experimente. Sirva o exemplo e copie a URL. Preveja 127.0.0.1 no começo. Essa cópia não abre na casa de outra pessoa.

Erro comum: anunciar o formulário da oficina como contato verdadeiro só porque a página ganhou uma URL. Sem servidor de mensagem, ninguém recebe o pedido.

GitHub Pages, se você quiser

GitHub é um site de pastas versionadas. A conta pessoal gratuita basta. Pages publica arquivos estáticos. Você não precisa deste passo para abrir o capítulo 12.

  1. Crie a conta em github.com se ainda não tiver.
  2. Baixe o GitHub Desktop atual e entre com a conta pelo navegador.
  3. Em github.com, crie um repositório público chamado USUARIO.github.io. Troque USUARIO pelo seu nome de usuário. Esse nome exato liga o site à URL https://USUARIO.github.io.
  4. Clone o repositório com o Desktop. Ele cria uma pasta no computador.
  5. Copie para essa pasta o index.html, o CSS e as imagens que você quer mostrar. A home precisa se chamar index.html.
  6. No Desktop, escreva um resumo curto e clique em Commit to main. A branch padrão hoje é main. Não procure o botão antigo “Commit to master”.
  7. Clique em Publish branch ou Push origin, conforme o rótulo da versão atual.
  8. Em Settings → Pages, confirme o ramo main e a pasta / (raiz). Espere alguns minutos e abra https://USUARIO.github.io.

Se o repositório tiver outro nome, a URL muda e este atalho do usuário não vale. Corrija o nome ou aceite o endereço de projeto que o GitHub mostrar.

Atualizar é o mesmo ciclo: edite na pasta, faça commit em main, envie com Push. Recarregue a URL pública. Às vezes o cache demora um minuto.

Pare e experimente. Sem criar conta, escreva em um papel os três endereços: file:, 127.0.0.1 e https://USUARIO.github.io. Preveja quem acessa cada um. Só abra o GitHub se quiser o passo extra.

Erro comum: commitar na branch master porque um tutorial antigo pediu. O Pages deste volume espera main.

Atividades

  1. Como a barra de endereço denuncia o arquivo no disco?
  2. Por que o comando usa --bind 127.0.0.1?
  3. Publicar a oficina é obrigatório para avançar?
  4. Qual deve ser o nome do repositório no caminho gratuito do GitHub Pages apresentado aqui?

Respostas comentadas

  1. Ela começa com file:. Não há porta nem http.
  2. O servidor responde só neste computador. Evita abrir a pasta para a rede local.
  3. Não. O teste em 127.0.0.1 e o arquivo no disco bastam para os capítulos seguintes.
  4. USUARIO.github.io, com o seu usuário no lugar de USUARIO, na branch main.

Referências

O arquivo completo

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

mapa.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<title>Mapa fictício</title>
<style>
      body { margin: 0; font-family: sans-serif; background: #2a6f7f; color: #fff; display: grid; place-items: center; min-height: 100vh; }
    </style>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<p>Olinda (mapa ilustrativo deste curso)</p>
</main></body>
</html>

simulacao.js

const f=document.querySelector("#simulacao");f.querySelector("button[type=submit]").disabled=false;f.addEventListener("submit",e=>{e.preventDefault();document.querySelector("#retorno").textContent="Pedido fictício conferido. Nada foi enviado ou guardado.";});