Tutorial de Git para estudiantes Fundamentos, branches y submódulos

Escenario del Tutorial

Proyecto: Desarrollo de una aplicación web de gestión de tareas para el instituto

Repositorio del profesor: https://github.com/profesor-informatica/proyecto-tareas-clase

Objetivo: Los estudiantes colaborarán en el desarrollo, aprendiendo Git paso a paso.

Roles y Responsabilidades

Tareas del Profesor

✓ Crear y mantener el repositorio principal
✓ Configurar permisos y protecciones de ramas (branches)
✓ Revisar y aprobar Pull Requests
✓ Resolver conflictos complejos
✓ Gestionar releases y tags
✓ Supervisar el flujo de trabajo del equipo

Tareas del Alumno

Clonar el repositorio
Crear branches para sus características
Realizar commits con sus cambios
Crear y enviar Pull Requests
Resolver conflictos básicos
Mantener su fork actualizado

Módulo 1: Fundamentos de Git

¿Qué es Git?

Git es un sistema de control de versiones distribuido que permite:

Rastrear cambios en archivos
Colaborar con otros desarrolladores
Mantener un historial completo del proyecto
Trabajar en paralelo sin interferencias

Conceptos clave

Repositorio: Carpeta que contiene tu proyecto y su historial
Commit: Instantánea de tu proyecto en un momento específico
Branch: Línea independiente de desarrollo
Merge: Combinar cambios de diferentes branches
Remote: Repositorio en un servidor (como GitHub)

Módulo 2: Configuración inicial

Preparación del profesor

El profesor debe crear el repositorio base:

# Crear repositorio local
mkdir proyecto-tareas-clase
cd proyecto-tareas-clase
git init

# Configuración inicial
git config user.name "Profesor Informática"
git config user.email "profesor@instituto.edu"

# Crear estructura inicial del proyecto
mkdir src css js

echo "# Proyecto Tareas Clase" > README.md
echo "<!DOCTYPE html><html><head><title>Tareas</title></head><body><h1>Gestión de Tareas</h1></body></html>" > index.html

# Primer commit
git add .
git commit -m "Inicial: Estructura básica del proyecto"

# Conectar con GitHub y subir
git branch -M main
git remote add origin https://github.com/profesor-informatica/proyecto-tareas-clase.git
git push -u origin main

Configuración del alumno

Cada estudiante debe configurar Git en su máquina:

# Configuración global (hacer una sola vez)
git config --global user.name "Tu Nombre"
git config --global user.email "tu.email@estudiante.com"

# Verificar configuración
git config --list

# Configurar editor (opcional)
git config --global core.editor "code --wait"

Módulo 3: Primeros pasos con el repositorio

Clonar el repositorio

# Clonar el repositorio del profesor
git clone https://github.com/profesor-informatica/proyecto-tareas-clase.git

# Entrar al directorio
cd proyecto-tareas-clase

# Ver el estado actual
git status

# Ver el historial
git log --oneline

Explorando el repositorio

# Ver archivos en el repositorio
ls -la

# Ver información del repositorio remoto
git remote -v

# Ver todas las ramas
git branch -a

Módulo 4: Comandos básicos de Git

Ciclo básico: add, commit, push

# Ver estado de archivos
git status

# Agregar archivos específicos al staging area
git add archivo.html

# Agregar todos los archivos modificados
git add .

# Ver diferencias
git diff            # Cambios no staged
git diff --staged   # Cambios staged

# Crear commit
git commit -m "Descripción clara de los cambios"

# Ver historial
git log
git log --oneline --graph

Ejercicio práctico 1: primera contribución

# 1. Crear un archivo CSS básico
echo "body { font-family: Arial, sans-serif; }" > css/styles.css

# 2. Ver estado
git status

# 3. Agregar al staging area
git add css/styles.css

# 4. Crear commit
git commit -m "Agregar estilos básicos CSS"

# 5. Ver el historial
git log --oneline

Módulo 5: Trabajando con branches

Conceptos de branching

Los branches permiten trabajar en características diferentes sin afectar el código principal.

Crear y usar branches

# Ver branch actual
git branch

# Crear nueva branch
git branch feature/login-form

# Cambiar a la nueva branch
git checkout feature/login-form
# O en una sola línea:
git checkout -b feature/login-form

# Trabajar en la nueva branch
echo "<form><input type='text' placeholder='Usuario'><input type='password' placeholder='Contraseña'><button>Login</button></form>" >> index.html

# Hacer commit en la branch
git add index.html
git commit -m "Agregar formulario de login básico"

Cambiar entre branches

# Volver a main
git checkout main

# Ver diferencias entre branches
git diff main feature/login-form

# Ver archivos en main vs feature branch
cat index.html  # En main
git checkout feature/login-form
cat index.html  # En feature branch

Módulo 6: Trabajo con repositorios remotos

Push de branches

# Subir branch al repositorio remoto
git push origin feature/login-form

# Si es la primera vez
git push -u origin feature/login-form

Configuración de protecciones

El profesor debe configurar en GitHub:

Settings → Branches
Add rule para main
Require pull request reviews
Require status checks

Pull requests y code review

Crear Pull Request

Ir a GitHub
Comparar branches
Crear Pull Request con descripción detallada

## Descripción

Agregado formulario de login básico

## Cambios realizados

- Creado formulario HTML con campos usuario/contraseña
- Agregado botón de envío

## Pruebas

- [x] Formulario se muestra correctamente
- [ ] Pendiente: validación JavaScript

Revisar Pull Request

# Descargar la branch del alumno para revisar
git fetch origin
git checkout feature/login-form

# Probar los cambios
# Revisar código
# Aprobar o solicitar cambios en GitHub

Módulo 7: Merge y actualización

Merge de PR aprobadas

# Después de aprobar en GitHub, actualizar local
git checkout main
git pull origin main

# El merge se hace automáticamente en GitHub
# O manualmente:
git merge feature/login-form
git push origin main

Mantener tu branch actualizada

# Actualizar main local
git checkout main
git pull origin main

# Actualizar tu branch feature
git checkout feature/login-form
git merge main

# O usar rebase (más avanzado)
git rebase main

Módulo 8: Resolución de conflictos

Simulando un conflicto

Profesor crea cambio en main

git checkout main
echo "<h2>Bienvenido al Sistema de Tareas</h2>" >> index.html
git add index.html
git commit -m "Agregar mensaje de bienvenida"
git push origin main

Alumno trabaja en paralelo

git checkout feature/login-form
echo "<h2>Sistema de Login</h2>" >> index.html
git add index.html
git commit -m "Agregar título para login"

# Al intentar merge con main actualizado
git checkout main
git pull origin main
git checkout feature/login-form
git merge main
# ¡Conflicto!

Resolver el conflicto

# Git marca los conflictos en el archivo
cat index.html

# Editar manualmente el archivo
# Remover las marcas de conflicto <<<< ==== >>>>
# Mantener ambos cambios o elegir uno

# Después de resolver
git add index.html
git commit -m "Resolver conflicto: combinar mensajes de bienvenida y login"

Módulo 9: Comandos avanzados

Git stash - guardar trabajo temporal

# Guardar cambios sin commit
git stash

# Ver stashes guardados
git stash list

# Recuperar el stash
git stash pop

# Crear stash con mensaje
git stash save "WIP: trabajando en validación"

Git reset - deshacer cambios

# Deshacer último commit (mantener cambios)
git reset --soft HEAD~1

# Deshacer último commit (descartar cambios)
git reset --hard HEAD~1

# Deshacer cambios en archivo específico
git checkout -- archivo.html

Git cherry-pick

# Aplicar commit específico de otra branch
git cherry-pick <commit-hash>

Git rebase interactivo

# Reescribir historia de últimos 3 commitsgit rebase -i HEAD~3

# Opciones: pick, reword, edit, squash, drop

Módulo 10: Flujos de trabajo

GitHub Flow (recomendado para principiantes)

# 1. Actualizar main
git checkout main
git pull origin main

# 2. Crear branch para feature
git checkout -b feature/nueva-funcionalidad

# 3. Desarrollar y hacer commitsgit add .
git commit -m "Implementar nueva funcionalidad"

# 4. Push y crear PR
git push origin feature/nueva-funcionalidad

# 5. Code review y merge
# 6. Borrar branch después del merge
git branch -d feature/nueva-funcionalidad

Git Flow (para proyectos más complejos)

# Inicializar Git Flow
git flow init

# Crear feature
git flow feature start nueva-funcionalidad

# Finalizar feature
git flow feature finish nueva-funcionalidad

# Crear release
git flow release start v1.0.0
git flow release finish v1.0.0

Módulo 11: Herramientas y alias útiles

Configurar alias

# Alias útiles
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.visual '!gitk'
git config --global alias.lg "log --oneline --decorate --all --graph"

Comandos de información

# Ver diferencias visuales
git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

# Ver archivos modificados
git diff --name-only

# Ver estadísticas de commits
git shortlog -sn

# Ver quién modificó cada línea
git blame archivo.html

Módulo 12: Ejercicios prácticos completos

Ejercicio 1: Implementar sistema de usuarios

# 1. Crear branch
git checkout main
git pull origin main
git checkout -b feature/user-system

# 2. Crear archivos necesarios
mkdir js
echo "class User { constructor(name, email) { this.name = name; this.email = email; } }" > js/user.js

# 3. Modificar HTML
echo "<div id='user-info'></div>" >> index.html

# 4. Commits incrementales
git add js/user.js
git commit -m "Crear clase User básica"

git add index.html
git commit -m "Agregar contenedor para información de usuario"

# 5. Push y PR
git push origin feature/user-system

Ejercicio 2: Manejo de conflictos complejos

# Simular trabajo en paralelo con otros compañeros
# Cada alumno trabaja en diferentes archivos del mismo componente

Módulo 13: Mejores prácticas

Mensajes de commit

Buenos ejemplos:

git commit -m "Agregar validación de email en formulario registro"
git commit -m "Corregir bug: botón login no funcionaba en IE11"
git commit -m "Refactorizar: extraer lógica de validación a clase separada"

Convención de commits:

# Formato: tipo(alcance): descripción
git commit -m "feat(auth): agregar login con Google"
git commit -m "fix(ui): corregir espaciado en botones"
git commit -m "docs: actualizar README con instrucciones de instalación"

Estructura de branches

main
|-- develop
|-- feature/user-authentication
|-- feature/task-management
|-- bugfix/login-error
`-- hotfix/security-patch

.gitignore

# Crear archivo .gitignore
cat > .gitignore << EOF
# Dependencies
node_modules/
vendor/

# IDE
.vscode/
.idea/
*.swp

# OS
.DS_Store
Thumbs.db

# Logs
*.log
logs/

# Environment
.env
.env.local
EOF

git add .gitignore
git commit -m "Agregar archivo .gitignore"

Módulo 14: Solución de problemas comunes

Problema 1: “Your branch is ahead/behind”

# Solución: Sincronizar con remoto
git fetch origin
git status
git pull origin main

Problema 2: Commit accidental

# Deshacer último commit sin perder cambios
git reset --soft HEAD~1

# Deshacer y descartar cambios
git reset --hard HEAD~1

Problema 3: Cambié archivo incorrecto

# Descartar cambios en archivo específico
git checkout -- archivo.html

# Si ya está en staging
git reset HEAD archivo.html
git checkout -- archivo.html

Problema 4: Push rechazado

# Error: Updates were rejected
git pull origin main
# Resolver conflictos si los hay
git push origin main

Módulo 15: Lista de verificación

Checklist diario del alumno

Antes de empezar a trabajar:

git status - verificar estado
git pull origin main - actualizar main
git checkout mi-branch - cambiar a mi branch
git merge main - actualizar mi branch con main

Antes de hacer push:

git status - verificar cambios
git diff - revisar diferencias
Commit con mensaje descriptivo
git push origin mi-branch

Checklist del profesor

Configuración inicial:

Repositorio creado en GitHub
Branch protection configurada en main
Colaboradores agregados
Issues/Project board configurado

Revisión de PRs:

Módulo 16: Evaluación y proyecto final

Sistema de evaluación

Criterios de evaluación:

Uso correcto de comandos Git (30%)
Calidad de commits y mensajes (20%)
Manejo de branches y merges (25%)
Resolución de conflictos (15%)
Colaboración y code review (10%)

Proyecto final

Objetivo: Cada equipo de 3-4 estudiantes desarrollará una característica completa del sistema de tareas.

Equipos sugeridos:

Equipo Frontend: Interfaz de usuario
Equipo Backend: API y base de datos
Equipo Testing: Pruebas automatizadas
Equipo DevOps: Deployment y CI/CD

Flujo de trabajo:

# 1. Cada equipo crea su branch principal
git checkout -b team/frontend-ui

# 2. Miembros del equipo crean sub-branches
git checkout -b feature/responsive-design

# 3. Trabajo colaborativo con PRs internas
git checkout -b fix/mobile-navigation

# 4. Integración con main a través de PR del equipo

Recursos adicionales

Comandos de referencia rápida

# Configuración
git config --global user.name "Tu Nombre"
git config --global user.email "email@ejemplo.com"

# Repositorio
git init                     # Inicializar repo
git clone <url>             # Clonar repo
git status                  # Estado actual
git log                     # Historial

# Staging y commits
git add <archivo>           # Agregar a staging
git add .                   # Agregar todos
git commit -m "mensaje"     # Crear commit
git commit -am "mensaje"    # Add + commit

# Branches
git branch                  # Listar branches
git branch <nombre>         # Crear branch
git checkout <nombre>       # Cambiar branch
git checkout -b <nombre>    # Crear y cambiar
git merge <branch>          # Merge branch
git branch -d <nombre>      # Borrar branch

# Remoto
git remote -v               # Ver remotos
git fetch                   # Descargar cambios
git pull                    # Fetch + merge
git push                    # Subir cambios
git push -u origin <branch> # Primera vez

# Deshacer
git reset --soft HEAD~1     # Deshacer commit
git reset --hard HEAD~1     # Deshacer + descartar
git checkout -- <archivo>   # Descartar cambios
git stash                   # Guardar temporal
git stash pop               # Recuperar temporal

Enlaces útiles

Git Documentation: https://git-scm.com/doc
GitHub Guides: https://guides.github.com/
Interactive Git Tutorial: https://learngitbranching.js.org/
Git Cheat Sheet: https://training.github.com/downloads/github-git-cheat-sheet/
Conventional Commits: https://www.conventionalcommits.org/

Herramientas recomendadas

VS Code: Editor con excelente integración Git
GitKraken: Cliente visual Git
GitHub Desktop: Cliente oficial GitHub
SourceTree: Cliente visual gratuito
Git Extensions: Para Windows

Notas finales

Este tutorial está diseñado para ser progresivo. No intentes aprender todo de una vez. La práctica constante es clave para dominar Git.

Recomendaciones:

Practica cada comando varias veces
No tengas miedo de experimentar
Lee los mensajes de error cuidadosamente
Usa git help <comando> cuando tengas dudas
Haz commits frecuentes con mensajes descriptivos

Recordatorio importante: Git es una herramienta poderosa pero compleja. Es normal cometer errores al principio. La mayoría de errores se pueden deshacer, así que experimenta con confianza.

Tutorial creado para el curso de Informática - Actualizado Octubre 2025

Submódulos

Añadir submódulo a nuestro proyecto

Cómo incluir un repositorio dentro del nuestro. Al crear un submódulo se “copian” los archivos dentro de nuestro proyecto y se crean unos archivos para indicar que esos archivos están asociados a otro repositorio:

Añadimos el nuevo submódulo: git submodule add https://github.com/twbs/bootstrap vendor/bootstrap Utilizamos la carpeta vendor para incluir código que no es nuestro.
Se han creado:

ls vendor/bootstrap

git status
    new file: .gitmodules     # archivo que asocia la ruta con la URL de github
    new file: vendor/bootstrap    # Trata a esta carpeta como un fichero

git add .

git commit -m "Nuevo submódulo"

¿Cómo actualizar si el submódulo tiene alguna actualización?

Opción 1: entrar en la carpeta del submódulo (por ejemplo vendor/bootstrap) y hacer:

git pull

Opción 2: si tenemos muchos submódulos:

git submodule update --remote --recursive

Opción 3: la más sencilla, pull + fetch + actualización de submódulos, lo deja todo al día:

git pull --recurse-submodules

Inicializar repositorio que tenga un submódulo

Clonar el repositorio principal
Se crean las carpetas (dentro de vendor) pero están vacías
Inicializar los submódulos:

git submodule init
git submodule update