IFG · Projeto de Games · Aula 2

Como a Web
Funciona

Da digitacao de um endereco no navegador ate o site aparecer na tela — entenda o caminho invisivel que a internet percorre e publique seu jogo para o mundo.

Internet, Navegadores e GitHub Pages

🌐

01 / 12

O que faremos hoje

Agenda

🌍

O que e a internet — uma rede mundial de computadores

De onde veio, como funciona por cima, por que voce consegue acessar sites do mundo todo.
🔄

Cliente e Servidor — quem pede e quem responde

O navegador (cliente) faz pedidos. O servidor entrega as paginas. Simples assim.
🗺️

DNS, HTTP e a jornada de um endereco no navegador

O que acontece nos bastidores quando voce digita um endereco e aperta Enter.
🏗️

HTML, CSS e JavaScript — a trindade da web

As tres linguagens que constroem tudo que voce ve no navegador.
🚀

GitHub Pages — transformar seu repositorio em um site

Ativar o GitHub Pages e acessar seu jogo por um link publico.
🔍

Inspecionar o codigo-fonte de qualquer site com F12

Ver o que esta por tras de qualquer pagina usando o DevTools do navegador.

🎯 Resultado desta aula

Ao final, seu jogo estara publicado na internet com um link publico que qualquer pessoa pode acessar pelo celular ou computador.

02 / 12

O que e a Internet?

Conceito

A internet e uma rede gigante de computadores conectados ao redor do mundo inteiro.

🔌

Cabos, fibra optica e ondas de radio

Existem cabos submarinos que cruzam oceanos conectando continentes. Dentro da sua cidade, a internet chega pela fibra optica ou pela antena do celular.
🌎

Bilhoes de dispositivos conectados

Celulares, notebooks, TVs, geladeiras, carros — tudo que se conecta a internet faz parte dessa rede. Cada dispositivo tem um endereco unico (IP).
📡

Nao existe um "computador central"

A internet e descentralizada: se um servidor cair, os outros continuam funcionando. E por isso que ela e tao resistente.
💡

Nasceu nos anos 60 como projeto militar (ARPANET)

O objetivo era criar uma rede que nao dependesse de um ponto central — se parte fosse destruida, o resto continuaria funcionando.

📊 Internet em numeros

+5 bilhoes de usuarios

+1.9 bilhao de sites

+500 cabos submarinos

Velocidade da luz na fibra

💡 Curiosidade

Quando voce assiste um video no YouTube, os dados viajam por cabos que cruzam o oceano a velocidade da luz. Tudo isso em milissegundos!

03 / 12

Cliente e Servidor

Conceito

A web funciona como um restaurante: voce (cliente) faz o pedido, e a cozinha (servidor) prepara e entrega.

💻

Cliente

Seu navegador
(Chrome, Firefox...)

Pedido (request)

Resposta (response)

🖥️

Servidor

Computador remoto
com os arquivos do site

📲

O cliente e quem pede

Quando voce digita um endereco ou clica num link, seu navegador envia uma mensagem pedindo a pagina ao servidor.
📦

O servidor e quem entrega

O servidor recebe o pedido, encontra os arquivos (HTML, CSS, JS, imagens) e manda de volta para o navegador exibir.
⚡

Tudo isso acontece em milissegundos

O pedido viaja ate o servidor e a resposta volta tao rapido que parece instantaneo — mas na verdade percorre milhares de quilometros.

🍔 Analogia: restaurante

Voce = cliente (navegador)

Cardapio = endereco do site (URL)

Cozinha = servidor

Prato pronto = pagina HTML que aparece na tela

04 / 12

O Caminho de um Endereco no Navegador

Conceito

Voce digita github.com e aperta Enter. O que acontece nos bastidores?

1

Voce digita o endereco (URL) e aperta Enter

O navegador recebe o nome do site que voce quer visitar. Ex: github.com

2

DNS traduz o nome para um endereco IP

O DNS funciona como uma agenda telefonica: transforma github.com em um numero tipo 140.82.121.3 — que e o endereco real do servidor.

3

O navegador envia um pedido HTTP ao servidor

HTTP (HyperText Transfer Protocol) e a "lingua" que cliente e servidor usam para conversar. O navegador diz: "me manda a pagina inicial, por favor".

4

O servidor responde com os arquivos

O servidor encontra o arquivo HTML, CSS e JS pedido e envia de volta pela internet. Junto vem um codigo de status: 200 OK (tudo certo) ou 404 Not Found (pagina nao existe).

5

O navegador monta e exibe a pagina

O navegador le o HTML (estrutura), aplica o CSS (visual) e executa o JavaScript (comportamento). Pronto: o site aparece na tela!

📖 Glossario

URL — endereco do site

DNS — "agenda telefonica" da internet

HTTP — lingua de comunicacao

IP — endereco numerico do servidor

⏱️ Tempo total

Todos esses 5 passos acontecem em menos de 1 segundo. A velocidade da internet faz tudo parecer instantaneo.

05 / 12

HTML, CSS e JavaScript

Conceito

Todo site que voce ja visitou foi construido com essas tres tecnologias. Sem excecao.

🧱

HTML

Estrutura

Define o que existe na pagina: titulos, paragrafos, botoes, imagens, campos de texto.

🎨

CSS

Aparencia

Define como os elementos aparecem: cores, tamanhos, fontes, posicoes, sombras.

⚡

JavaScript

Comportamento

Define o que acontece quando voce interage: clicar, digitar, arrastar, jogar.

🎮 No nosso jogo

HTML cria o titulo, o campo de numero e o botao. CSS deixa o jogo bonito com cores, bordas arredondadas e centralizacao. JavaScript gera o numero secreto, compara o palpite e exibe "maior", "menor" ou "acertou!".

📁 Arquivos do jogo

index.html

💡 Neste curso

Vamos escrever tudo em um unico arquivo index.html. O CSS e o JS ficam dentro dele. Simples e direto!

06 / 12

Analogia: Construindo uma Casa

Analogia

Imagine que um site e uma casa. Cada tecnologia cuida de uma parte diferente da construcao.

🏗️

HTML

Paredes, telhado e chao

A estrutura da casa. Sem ela, nao ha onde colocar nada. O HTML define os "comodos" da pagina.

🎨

CSS

Tinta, decoracao e moveis

Deixa a casa bonita. Cor das paredes, estilo dos moveis, iluminacao. O CSS cuida da aparencia.

💡

JavaScript

Portas, interruptores e luz

Faz as coisas funcionarem. Apertar o interruptor acende a luz. Girar a macaneta abre a porta.

Na pratica

So HTML

Pagina com texto e botoes, mas sem cor nenhuma — como uma casa no cimento bruto.

HTML + CSS

Pagina bonita, com cores e layout — mas nada acontece quando voce clica.

HTML + CSS + JS

Pagina bonita E interativa — clicar no botao faz algo acontecer. O jogo funciona!

07 / 12

O que e o GitHub Pages?

Conceito

O GitHub Pages transforma seu repositorio em um site acessivel por qualquer pessoa no mundo — de graca.

📁

Seu repositorio ja tem os arquivos do site

Na aula passada, voce criou o index.html no repositorio jogo-adivinhacao. Esses arquivos ja sao um site!
🌐

O GitHub Pages funciona como um servidor gratuito

Quando voce ativa o Pages, o GitHub passa a servir seus arquivos HTML pela internet — qualquer pessoa pode acessar.
🔗

Seu jogo ganha um link publico

O endereco sera: seu-usuario.github.io/jogo-adivinhacao
🔄

Atualiza automaticamente a cada commit

Fez um commit com mudanca no codigo? Em poucos segundos, o site ja reflete a alteracao. Sem precisar fazer nada a mais.

💡 Resumindo

Repositorio = pasta com arquivos. GitHub Pages = transforma essa pasta em um site. Commit = atualiza o site automaticamente.

⚡ Vantagens do Pages

100% gratuito

Sem propaganda

HTTPS (seguro)

Atualiza com cada commit

Link compartilhavel

🎮 Resultado

Seu jogo vai estar na internet! Qualquer pessoa com o link pode jogar — pelo celular, tablet ou computador.

08 / 12

Ativando o GitHub Pages

Pratica

🖥️ Abra seu repositorio jogo-adivinhacao no GitHub

1

Clique na aba Settings (engrenagem)

Fica no menu superior do repositorio, ao lado de "Insights".

2

No menu lateral, clique em Pages

Esta dentro da secao "Code and automation" no painel esquerdo.

3

Em "Source", selecione Deploy from a branch

Isso diz ao GitHub para publicar os arquivos que estao no seu repositorio.

4

Selecione o branch main e a pasta / (root)

Main e o branch principal. Root significa a pasta raiz — onde esta seu index.html.

5

Clique em Save

O GitHub vai comecar a publicar seu site. Aguarde 1–2 minutos.

6

Atualize a pagina — o link do seu site aparecera!

Copie o link e abra em uma nova aba. Teste tambem no celular!

🎯 Missao

Abra o link gerado no celular e mostre para o colega ao lado. Seu site esta no ar!

⚠️ Nao apareceu?

Aguarde 2 minutos e atualize a pagina. Verifique se o arquivo se chama exatamente index.html (tudo minusculo).

09 / 12

Inspecionando o Codigo-Fonte (F12)

Pratica

Todo site e feito de codigo. Com a tecla F12, voce pode ver o codigo de qualquer pagina da internet.

🔍

Aperte F12 em qualquer site

O painel DevTools abre na lateral ou embaixo da pagina. E a ferramenta do desenvolvedor embutida no navegador.
📄

Aba "Elements" — mostra o HTML da pagina

Voce consegue ver todas as tags, atributos e textos. Passe o mouse sobre o codigo e o elemento correspondente acende na pagina.
🎨

Painel lateral "Styles" — mostra o CSS

Ao clicar em um elemento, voce ve todas as regras CSS que estao sendo aplicadas: cores, tamanhos, margens.
🧪

Voce pode editar ao vivo!

Clique duas vezes em qualquer texto do HTML ou mude um valor de CSS — a pagina muda na hora. Nao se preocupe: as mudancas sao temporarias.
🖱️

Botao de selecao (seta no canto do DevTools)

Clique nele e depois clique em qualquer elemento da pagina — o DevTools mostra exatamente o codigo daquele elemento.

⌨️ Atalhos uteis

F12 — abrir DevTools

Ctrl+Shift+C — inspecionar

Ctrl+U — ver codigo-fonte

🎮 Desafio

Abra o Google, aperte F12 e tente mudar o texto do botao "Pesquisa Google" para "Jogar". As mudancas somem ao atualizar!

10 / 12

Atividade: Inspecione seu Site

Pratica

Abra o link do seu jogo publicado no GitHub Pages e explore o codigo com F12!

1

Abra seu site no navegador

Acesse seu-usuario.github.io/jogo-adivinhacao (o link que voce copiou).

2

Aperte F12 e encontre seu <h1>

Na aba Elements, procure o titulo "Meu Jogo de Adivinhacao" dentro da tag h1.

3

Mude o texto do seu titulo pelo DevTools

Clique duas vezes no texto e escreva algo diferente. Veja a pagina mudar na hora!

4

Atualize a pagina (F5) e veja o texto voltar ao original

O DevTools so muda temporariamente. O codigo real esta no repositorio — para mudar de verdade, edite no VS Code e faca um commit.

5

Inspecione o site de um colega

Troque links com alguem da turma e inspecione o site dele. O codigo e o mesmo? O titulo e diferente?

💡 O DevTools e uma ferramenta de aprendizado. Ele mostra exatamente como os sites sao feitos — e voce pode experimentar sem medo, porque nada e permanente.

11 / 12

Resumo da Aula

Resumo

🌍

Internet

Rede mundial de computadores conectados por cabos, fibra e ondas de radio. Descentralizada e resiliente.

🔄

Cliente e Servidor

O navegador pede (cliente), o servidor responde com os arquivos da pagina.

🗺️

DNS e HTTP

DNS traduz nomes em enderecos IP. HTTP e a lingua que cliente e servidor usam para conversar.

🏗️

HTML + CSS + JS

Estrutura + aparencia + comportamento. As tres tecnologias de todo site.

🚀

GitHub Pages

Transforma seu repositorio em um site publico e gratuito. Atualiza a cada commit.

🔍

DevTools (F12)

Permite ver e editar temporariamente o codigo de qualquer pagina no navegador.

✅ Entrega da Aula 2

GitHub Pages ativado no seu repositorio. Link publico do jogo funcionando e acessivel pelo celular. Envie o link para o professor!

Aula 2 · Concluida

Seu jogo esta
no ar!

Voce entendeu como a internet funciona, aprendeu a trindade da web (HTML + CSS + JS) e publicou seu site no GitHub Pages. Na proxima aula, vamos construir o esqueleto HTML do jogo de adivinhacao!

Proxima aula: Estrutura HTML do Jogo

🚀

Como a WebFunciona

Seu jogo estano ar!

Como a Web
Funciona

Seu jogo esta
no ar!