Intervalo: instalar um servidor local
HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.
Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.
O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.
Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um servidor web local é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.
Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.
URLs relativas e URLs absolutas
Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe .. para “subir” um nível e achar a página de destino.
Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o nível mais alto é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.
<a href="/">Go to the homepage</a>A barra representa o nível mais alto (eu também poderia ter escrito /index.html, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página about.html, faria assim.
<a href="/about.html">Go to the About page</a>O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.
<!-- imagine we are currently on a blog page /blog/my-post.html-->
<h1>My blog post</h1>
<!-- instead of this, which *does* work -->
<a href="../about.html">About</a>
<!-- we can do this -->
<a href="/about.html">About</a>A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do computador inteiro. Com certeza não era isso que a gente queria.
Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.
Opções de servidor web
Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.
Visual Studio Code (multiplataforma)
A Microsoft publica uma extensão do VS Code chamada Live Preview. Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.
Depois de instalar, você vai notar a opção Show Preview quando clicar com o botão direito num arquivo.
Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em Open in Browser no menu da barra de endereço.
macOS
Eu uso Mac, então posso recomendar de coração o ótimo aplicativo WorldWideWeb. É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.
O funcionamento é assim: você aponta a pasta do site e clica no botão de play.
Quando você clica no play, o site fica disponível em algum endereço. Clique em Open Browser para abrir essa URL no navegador padrão.
E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.
Windows e multiplataforma
Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.
Caso contrário, experimente o Simple Web Server. Depois de instalar, clique no botão para criar um servidor novo.
Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.
Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.
Python e PHP (multiplataforma)
Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.
Python
Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à página de downloads do Python e baixe o instalador do seu sistema (pegue a versão 3).
Abra uma janela do terminal e use cd para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.
python3 -m http.serverIsso deixa o site disponível em localhost, na porta que ele indicar (em geral 8000). Então o endereço do site fica http://localhost:8000.
PHP
Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, o PHP é útil para reutilizar pedaços de HTML (tipo o menu de navegação) em várias páginas.
Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.
php -S localhost:8000Isso deixa o site disponível em http://localhost:8000.
A seguir
Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!