IFG · Projeto de Games · Aula 1

GitHub &
Repositórios

Da criação da conta ao primeiro commit — construindo sua identidade digital como desenvolvedor e preparando o ambiente para construir nosso jogo.

Ferramentas do Programador Moderno

🐙

01 / 16

O que faremos hoje

Agenda

🐙

O que é o GitHub — e por que todo programador usa

Portfólio, histórico de versões e colaboração: os três superpoderes do GitHub.
🎯

Criar sua conta gratuita em github.com

Escolha de username, configuração de e-mail e verificação da conta.
🖼️

Configurar nome e foto de perfil

Seu perfil GitHub é sua identidade profissional na área de tecnologia.
📁

Entender o que é um repositório

A "pasta inteligente" onde seu projeto vive na nuvem — com superpoderes.
✅

Criar o repositório do jogo e fazer o primeiro commit

Seu primeiro passo real como desenvolvedor: código vivo, na nuvem, com histórico.

🎯 Resultado desta aula

Ao final, você terá um repositório público chamado jogo-adivinhacao com seu primeiro arquivo HTML publicado na nuvem — e saberá exatamente o que isso significa.

02 / 16

Um Problema Familiar

Motivação

Você está construindo um jogo. Em algum momento, ele para de funcionar. O que você faz?

😰

"Funcionava ontem, mas agora quebrou…"

Você não sabe o que mudou. Apaga e reescreve tudo? Fica horas procurando o erro no código?
😬

"Perdi meu pen drive com o projeto"

Arquivo salvo só na máquina — um problema de hardware e o trabalho vai embora.
😤

"Meu colega e eu editamos o mesmo arquivo e agora é um caos"

Trabalho em grupo sem controle vira bagunça: quem mudou o quê? Qual versão é a certa?
🤷

"Como mostro meu jogo para alguém de outra cidade?"

Mandar o arquivo por WhatsApp? A outra pessoa precisa ter os mesmos programas instalados?

💡

Todos esses problemas — segurança, histórico, colaboração e publicação — têm a mesma solução. Seu nome é GitHub.

03 / 16

O que é o GitHub?

Conceito

🌐

Plataforma online para guardar e gerenciar código

Seus arquivos ficam na nuvem, acessíveis de qualquer computador, a qualquer hora — igual ao Google Drive, mas feito especialmente para código.
📸

Cada mudança fica registrada para sempre

O GitHub guarda um histórico completo de tudo que você escreveu. Você pode ver o estado do seu projeto em qualquer momento do passado.
👥

Feito para equipes trabalharem juntas

Várias pessoas podem trabalhar no mesmo projeto ao mesmo tempo, sem conflitos — o GitHub organiza tudo automaticamente.
🆓

Gratuito para projetos públicos

Você pode criar repositórios públicos ilimitados de graça. O VS Code, o Linux, o React — todos vivem no GitHub, publicamente acessíveis.

📌 Analogia

Pense no GitHub como o Google Drive do programador — mas com superpoderes: ele lembra de tudo que você mudou, quando mudou, e quem mudou.

📊 Em Números

+100 milhões de desenvolvedores

+372 milhões de repositórios

Fundado em 2008

Comprado pela Microsoft (2018)

Base do Git (criado por Linus Torvalds)

🎮 Projetos famosos no GitHub

VS Code (Microsoft)

Linux (kernel)

React (Meta)

Godot Engine

04 / 16

GitHub = Portfólio de Código

Superpoder 1

O GitHub é o currículo do programador.
Empregadores verificam seu perfil antes da entrevista.

👀

Tudo que você cria fica visível publicamente

Cada projeto, cada arquivo de código que você escreve pode ser visto por qualquer pessoa no mundo — incluindo quem vai te contratar no futuro.
📈

O gráfico de contribuições mostra sua dedicação

O GitHub exibe um calendário colorido com todos os dias que você fez commits. Quanto mais verde, mais ativo você é. Isso impressiona recrutadores.
🔗

Cada projeto tem um link único compartilhável

Ao invés de mandar um arquivo comprimido por e-mail, você manda o link: github.com/seu-usuario/jogo-adivinhacao
🌐

Projetos públicos podem ser publicados como sites

Com o GitHub Pages, seu jogo vira um site acessível por qualquer pessoa — de graça, em menos de 5 minutos.

💼 Na prática

Um designer tem portfólio de imagens.

Um fotógrafo tem portfólio de fotos.

Um programador tem portfólio de código no GitHub.

⭐ Neste curso

Ao final, você terá um jogo real publicado com link público — pronto para mostrar a qualquer pessoa.

05 / 16

GitHub = Histórico de Versões

Superpoder 2

📸

Cada "save" vira um commit

Um commit é uma foto do estado do seu código naquele momento. Você escreve uma mensagem descrevendo o que mudou — e esse registro fica para sempre.
⏪

Você pode voltar a qualquer commit anterior

Quebrou tudo? Sem pânico. O GitHub permite voltar ao estado exato em que o projeto estava ontem, na semana passada, ou em qualquer momento.
🎮

É como um checkpoint num videogame

Você não precisa ter medo de experimentar — se não funcionar, volta ao checkpoint. O GitHub é seu seguro de código.

Exemplo: histórico do nosso jogo

a1b2c3d · agora

Adicionando mensagem de fim de jogo

+12 linhas · JS finalizado

e4f5a6b · Aula 8

Implementando contador de tentativas

+18 linhas · lógica de derrota

c7d8e9f · Aula 5

Adicionando CSS: cores e layout

+35 linhas · página ficou bonita!

0a1b2c3 · Aula 1

Criando meu primeiro arquivo

+1 linha · começo de tudo!

🔄 Ctrl + Z turbinado

O Ctrl+Z desfaz a última ação. O commit permite voltar a qualquer momento específico do passado — com uma mensagem explicando o que era aquele estado.

💡 Boa prática

Commit frequente = mais pontos de segurança. Faça um commit sempre que algo novo funcionar.

06 / 16

GitHub = Colaboração

Superpoder 3

🤝

Várias pessoas no mesmo projeto, ao mesmo tempo

Você trabalha na tela de jogo, seu colega trabalha na lógica de pontos — o GitHub organiza as mudanças de cada um sem conflito.
🔀

Pull Request: proposta de mudança revisável

Antes de uma mudança entrar no projeto, ela pode ser revisada e aprovada por outros membros da equipe — igual a revisar uma redação antes de entregar.
🌎

Projetos de código aberto (open source)

Qualquer pessoa no mundo pode ver o código, sugerir melhorias ou corrigir erros. O VS Code tem mais de 1.500 colaboradores espalhados pelo mundo.
🔗

Compartilhar = enviar um link

Sem e-mail com arquivo, sem pen drive, sem "qual versão é a mais recente?". O link do repositório é sempre a versão atual e definitiva.

GitHub para 2 pessoas

GitHub para 10 pessoas

GitHub para 10.000 pessoas

🎮 Nesta disciplina

Você vai compartilhar o link do seu jogo com a turma e com o professor — em vez de mandar o arquivo, você manda um link que qualquer pessoa pode abrir diretamente no navegador.

⚠️ Sem GitHub

Sem controle de versão, trabalhar em equipe significa enviar arquivos por mensagem e torcer para ninguém sobrescrever o trabalho de ninguém.

07 / 16

Criando sua Conta no GitHub

Prática

🌐 Acesse: github.com → botão "Sign up"

1

Digite seu e-mail

Use um e-mail que você acessa com frequência — será necessário para verificar a conta.

2

Crie uma senha segura

Mínimo 8 caracteres com letras, números e símbolos. Anote em algum lugar seguro!

3

Escolha seu username — com cuidado!

Este nome aparecerá no link de todos os seus projetos: github.com/seu-username

4

Complete o captcha e clique em "Create account"

O GitHub pode pedir para resolver um desafio visual para confirmar que você é humano.

5

Verifique seu e-mail

Abra o e-mail recebido e clique no link ou copie o código de verificação.

⚠️ Username: escolha bem

O username é permanente e público. Ele aparece no link de todos os seus projetos. Pense como um e-mail profissional, não como um apelido de jogo.

✅ Bons exemplos

joao-silva

mariadev

x_darkgamer99_x

asd123qwerty

08 / 16

Configurando seu Perfil

Identidade

Clique na foto de perfil (canto superior direito) → Settings → Public profile

1

Name — seu nome completo

Diferente do username. Este é o nome legível que aparece em destaque no seu perfil. Ex: "Maria Fernanda Oliveira".

2

Bio — quem você é em uma frase

Ex: "Estudante de Projeto de Games · IFG Campus Cidade de Goiás". Seja profissional e direto.

3

Foto de perfil — clique em "Upload a photo"

Use uma foto com rosto visível. Empregadores e recrutadores vão ver isso. Evite fotos de personagem ou imagens aleatórias.

4

Location — cidade e estado

Ex: "Cidade de Goiás, GO". Ajuda na descoberta por empresas e oportunidades locais.

5

Clique em "Save" e confira seu perfil

Acesse github.com/seu-username e veja como ele aparece para o mundo.

💼 Por que isso importa?

Seu perfil GitHub é como um LinkedIn da tecnologia. Quanto mais completo e profissional, melhor a impressão que você passa — desde o primeiro projeto.

🎯 Missão desta aula

Antes de continuar:
✅ Conta criada
✅ Nome real preenchido
✅ Bio escrita
✅ Foto carregada

09 / 16

O que é um Repositório?

Conceito

📁

É a "pasta" do seu projeto na nuvem

Um repositório contém todos os arquivos do projeto: HTML, CSS, JavaScript, imagens, documentação — tudo junto, organizado e versionado.
🕰️

Guarda o histórico completo de mudanças

Cada commit que você faz fica registrado no repositório. Você pode navegar pela linha do tempo do projeto e ver exatamente o que mudou em cada etapa.
🔓

Pode ser público ou privado

Público: qualquer pessoa pode ver (perfeito para portfólio e para publicar o jogo). Privado: apenas você (ou quem você convidar) pode acessar.
📝

Tem um README — a descrição do projeto

O arquivo README.md é a "capa" do repositório. É a primeira coisa que aparece quando alguém visita seu projeto — uma boa prática é sempre ter um.

Pasta comum

📂

Só guarda arquivos. Sem histórico. Sem link. Se o HD queimar, perdeu tudo.

→

Repositório GitHub

🗂️

Guarda arquivos + histórico + link público + publicação automática na web.

📌 Estrutura típica

index.html — página principal

style.css — estilos visuais

script.js — lógica do jogo

README.md — descrição

🎯 Nosso repositório

Nome: jogo-adivinhacao
Visibilidade: Público
Usado para: portfólio + publicação

10 / 16

Criando o Repositório do Jogo

Prática

1

Clique no "+" no canto superior direito → "New repository"

Ou acesse diretamente: github.com/new

2

Repository name: jogo-adivinhacao

Use letras minúsculas e hífen. Sem espaços, sem acentos — o nome vira parte do link do seu site.

3

Description: "Meu primeiro jogo em HTML, CSS e JavaScript"

Aparece no seu perfil abaixo do nome do repositório. Seja descritivo e profissional.

4

Marque Public (não Private)

Repositórios públicos são necessários para publicar com GitHub Pages gratuitamente.

5

✅ Marque "Add a README file"

Isso cria automaticamente o arquivo README.md e já faz o primeiro commit por você.

✓

Clique em "Create repository"

Pronto! Seu repositório está criado em github.com/seu-usuario/jogo-adivinhacao

⚠️ Regra de nomes: nunca use espaços ou acentos no nome do repositório. Use hífen (-) em vez de espaço. Ex: jogo-adivinhacao ✅ Jogo de Adivinhação ❌

🔗 Seu link será

github.com/seu-usuario/jogo-adivinhacao

📌 Sobre o README

O arquivo README.md usa a linguagem Markdown para formatar texto. É a "capa" do projeto — o que aparece quando alguém visita seu repositório.

11 / 16

VS Code Direto no Navegador

Ferramentas

Com o repositório aberto no GitHub, pressione a tecla . (ponto) no teclado. O VS Code abre no navegador!

🖥️

VS Code é o editor de código mais usado no mundo

Criado pela Microsoft, é gratuito e open source. A maioria dos desenvolvedores profissionais o usa diariamente. Você vai usá-lo neste curso sem instalar nada.
🌐

O github.dev é o VS Code no navegador

Troque github.com por github.dev no endereço — o editor abre com seu repositório conectado.
📂

Barra lateral esquerda: seus arquivos

Explorer (ícone de pasta): crie, renomeie e organize arquivos. Source Control (ícone de ramificação): faça commits para o GitHub.
⌨️

Atalhos úteis

Ctrl + S → salvar arquivo · Ctrl + Shift + E → Explorer · Ctrl + ` → terminal

🔄 Dois caminhos

Tecla . no repositório

Mudar URL para github.dev

Ambos abrem o mesmo editor

✅ Vantagem

Zero instalação. Funciona em qualquer computador com navegador — inclusive os da escola. Seus arquivos são salvos direto no GitHub.

12 / 16

Criando o Primeiro Arquivo

Prática

1

No Explorer (barra lateral), clique no ícone de "New File"

É o ícone de página com um "+" ao passar o mouse sobre o nome do repositório.

2

Nomeie o arquivo: index.html

O arquivo index.html é sempre o ponto de entrada de um site. O servidor web o serve automaticamente quando alguém acessa o link.

3

Digite o conteúdo abaixo

Apenas uma linha por enquanto — vamos expandir isso nas próximas aulas.

<h1>Meu Jogo de Adivinhação</h1>

4

Salve o arquivo: Ctrl + S

Um ponto aparece na aba do arquivo indicando que há mudanças não salvas. Após salvar, o ponto some.

💡 Por que index.html? Quando alguém acessa seu site (usuario.github.io/jogo-adivinhacao), o servidor procura automaticamente por um arquivo chamado index.html para exibir.

🏷️ O que é h1?

<h1> é a tag HTML para o título principal de uma página — o maior e mais importante. Aprenderemos muito mais sobre HTML na próxima aula.

📌 Resultado

Ao abrir o arquivo no navegador, você verá um texto grande e em negrito com "Meu Jogo de Adivinhação". É o seu primeiro HTML!

13 / 16

Fazendo o Primeiro Commit

Prática

Commit = salvar uma versão do trabalho. É o "checkpoint" do seu código.

1

Clique no ícone de "Source Control" na barra lateral

É o ícone que parece uma ramificação (três bolinhas conectadas). Um número aparece indicando quantos arquivos foram modificados.

2

Confira os arquivos na seção "Changes"

Você verá index.html listado com um "U" (Untracked — arquivo novo que o Git ainda não conhece).

3

Clique no "+" ao lado do arquivo para prepará-lo

Isso adiciona o arquivo à área de preparação (staging). Só arquivos preparados entram no commit.

4

Escreva a mensagem do commit

No campo de texto, escreva: Criando meu primeiro arquivo HTML. Seja descritivo — você vai agradecer no futuro!

✓

Clique em "Commit & Push" ou pressione Ctrl + Enter

O arquivo sobe para o GitHub. Acesse github.com/seu-usuario/jogo-adivinhacao e veja seu arquivo lá!

📌 Regra de ouro dos commits

Mensagens de commit devem descrever o que foi feito, não o que vai ser feito. Ex: "Adicionando botão de adivinhar" ✅ — não: "vou adicionar o botão" ❌

🎮 Analogia perfeita

Em um videogame, você salva no checkpoint para não perder progresso. No GitHub, cada commit é um checkpoint — você pode sempre voltar aqui se algo der errado.

⚠️ Não esqueça

Arquivo salvo (Ctrl+S) ≠ Commit. Você pode salvar o arquivo mil vezes localmente — só o commit envia para o GitHub.

14 / 16

O que aprendemos hoje

Síntese

🐙

GitHub

Portfólio de código, histórico de versões e ferramenta de colaboração. O endereço onde seu código vive na nuvem.

👤

Conta e Perfil

Username profissional, nome real, bio e foto. Sua identidade no mundo do desenvolvimento de software.

📁

Repositório

Pasta do projeto na nuvem com histórico completo. Público ou privado, com link único e compartilhável.

📸

Commit

Checkpoint do código. Cada commit guarda uma versão com mensagem descritiva — você pode sempre voltar atrás.

✅ Entrega desta aula

Repositório jogo-adivinhacao criado e público, com um arquivo index.html contendo <h1>Meu Jogo de Adivinhação</h1> e pelo menos um commit com mensagem descritiva.

📅 Próxima aula

Como a Internet Funciona + Ativando o GitHub Pages

Clientes, servidores, HTTP e como o seu arquivo HTML se transforma em um site acessível por qualquer pessoa no mundo.

Aula 1 — Concluída

Parabéns!
Você é um desenvolvedor

Você criou sua conta, configurou seu perfil, criou um repositório e fez seu primeiro commit. Isso é código real, na nuvem, com histórico. Isso é desenvolvimento de software.

✉️ ciro.macedo@ifg.edu.br

🏛️ IFG — Campus Cidade de Goiás

🐙 github.com/ciromacedo

🎯

GitHub &Repositórios

Parabéns!Você é um desenvolvedor

GitHub &
Repositórios

Parabéns!
Você é um desenvolvedor