Módulo 10 · Aula 10.7 · Publicar na web: GitHub Pages ou itch.io

Atenção, professor. A publicação na internet não foi testada na preparação desta versão do curso: exige conta no GitHub ou no itch.io e aceite dos termos, o que cabe à escola. Também não foi testada a exportação do Godot para web (Aula 8.10, os modelos de exportação não foram baixados). Foi testado: o portfólio modelo servido no computador com python -m http.server, e o Sementes do Sertão exportado do GDevelop (Módulo 3) abrindo pelo botão "Jogar no navegador" do portfólio. Faça uma publicação completa com a conta da escola antes da aula e anote o que mudar.

Objetivos de aprendizagem

1. Montar a pasta do portfólio com os jogos exportados dentro.
2. Testar tudo no próprio computador antes de publicar.
3. Publicar no GitHub Pages ou no itch.io.
4. Conferir o link publicado em outro aparelho.

Pré-requisitos

Aulas 3.11 (exportar no GDevelop), 8.10 (exportar no Godot), 10.5 e 10.6.

Materiais

Jogos exportados para HTML5; projetos/portfolio-modelo/; Python; conta definida pela escola.

Conceitos

Jogo para web. Exportar para HTML5 gera uma pasta com index.html e outros arquivos. Essa pasta inteira é o jogo.

Testar antes no computador. Abrir o index.html com dois cliques costuma não funcionar (Aula 3.11). Um servidor local imita a internet:

python -m http.server 8000

E no navegador: http://localhost:8000. Se funcionar aqui, quase sempre funciona publicado.

Caminhos relativos. No portfólio, o botão do Sementes aponta para jogos/sementes-do-sertao/index.html, um caminho relativo (a partir da pasta do portfólio). Caminhos como C:\Users\... funcionam só no seu computador e quebram na internet.

Duas formas de publicar.

O curso sugere: portfólio no GitHub Pages; jogos também no itch.io, se a escola quiser.

Link de quem? O endereço do GitHub Pages leva o nome da conta. Com conta da escola, o portfólio de cada aluno vira uma pasta dentro do site da escola.

Exemplos

O portfólio modelo, servido com python -m http.server 8000 na preparação do curso, com o Sementes do Sertão exportado do GDevelop copiado para jogos/sementes-do-sertao/:

• a página abriu com os seis cartões e as seis imagens carregadas;
• o botão "Jogar no navegador" abriu a tela de título do Sementes;
• na largura de celular (375 px) a página não teve rolagem para o lado.

Tutorial passo a passo

Parte A. Montar a pasta (100 min)

1. Copie projetos/portfolio-modelo/ para a sua pasta de trabalho com o nome meu-portfolio.
2. Para cada jogo exportado, crie uma pasta dentro de jogos/ (sem acento e sem espaço, por exemplo jogos/trilha-da-serra/) e copie para ela todo o conteúdo da exportação.
3. No index.html, troque o aviso "Versão web: falta exportar." pelo botão, no mesmo formato do Sementes:

<div class="acoes"><a class="botao" href="jogos/trilha-da-serra/index.html">Jogar no navegador</a></div>

Parte B. Testar no computador (80 min)

4. Abra o Git Bash dentro de meu-portfolio e rode python -m http.server 8000.
5. No navegador, http://localhost:8000. Clique em cada "Jogar". Teste também com a janela estreita, como um celular.
6. Pare o servidor com Ctrl+C.

Parte C. Publicar (140 min, com a conta da escola)

7. GitHub Pages: faça da pasta meu-portfolio um repositório (Aula 10.3), envie para o GitHub (Aula 10.5) e, nas configurações do repositório, na parte de Pages, escolha publicar a partir do ramo main. Espere alguns minutos e abra o endereço que o GitHub mostrar.
8. itch.io (opcional): compacte a pasta de um jogo exportado (o index.html precisa ficar na raiz do .zip), crie a página do projeto, envie o .zip e marque que ele roda no navegador.
9. Abra o link no celular de outra pessoa. Funcionou?

Imagens

• ../../../recursos/imagens/godot/portfolio-modelo-tela.jpg: o portfólio modelo aberto no navegador, servido no computador.

Indicação da interface

Nomes de botões do GitHub e do itch.io não foram conferidos (aula não testada nessa parte). O professor anota aqui os da tela no dia:

O código completo

Cartão de um jogo no index.html do portfólio modelo:

<article class="cartao">
  <img class="pixel" src="imagens/sementes-do-sertao.png" alt="Primeira versão do Sementes do Sertão, feita no GDevelop" width="1000" height="782">
  <div class="corpo">
    <h2>Sementes do Sertão</h2>
    <div class="etiquetas"><span>GDevelop</span><span>Coleta</span><span>Módulo 3</span></div>
    <p>O meu primeiro jogo completo: recolher sementes antes da seca e fugir do redemoinho.</p>
    <h3>O que eu fiz</h3>
    <p>Todos os eventos, o placar, o tempo e as telas de início e fim.</p>
    <h3>O que aprendi</h3>
    <p>Um jogo pequeno e terminado vale mais que um grande pela metade.</p>
    <div class="acoes"><a class="botao" href="jogos/sementes-do-sertao/index.html">Jogar no navegador</a></div>
  </div>
</article>

Explicação do código

• alt descreve a imagem para quem usa leitor de tela e aparece se a imagem não carregar.
• width e height reservam o espaço da imagem antes dela chegar, e a página não "pula".
• A classe pixel deixa os desenhos de pixel art nítidos ao aumentar.
• href com caminho relativo: funciona no computador e publicado.

Resultado esperado

Pasta do portfólio com os jogos dentro, testada em localhost e, onde a escola liberar, publicada com link que abre no celular.

Problemas comuns

Exercício guiado

Por que testar com python -m http.server antes de publicar? (Resposta: é o mesmo jeito que a internet entrega os arquivos; os erros de caminho e de arquivo faltando aparecem antes, sem depender de conta nem de esperar a publicação.)

Desafio individual

Teste o seu portfólio no celular pela rede da escola, se o professor permitir: com o servidor rodando, o endereço é http://IP-DO-COMPUTADOR:8000. (Não testado nesta versão do curso; a rede da escola pode bloquear.)

Desafio avançado (opcional)

Crie uma página do itch.io só para o seu melhor jogo, com descrição, GIF e controles.

Critérios de avaliação

• Portfólio com os jogos dentro, todos abrindo em localhost.
• Caminhos relativos e nomes sem acento.
• Link publicado (quando a escola liberar) testado em outro aparelho.

Checklist de conclusão

• Copiei o portfólio modelo
• Coloquei os jogos exportados em jogos/
• Testei tudo em localhost
• Testei na largura de celular
• Publiquei (ou a escola publicou) e abri o link no celular

Extensão

Escreva uma mensagem curta convidando a família para jogar o seu portfólio. O que você contaria em duas frases?