Tutorial Git - Programación Colaborativa

1El Equipo y el Proyecto

Tres desarrolladores van a construir juntos una página web para una cafetería usando HTML, CSS y JavaScript.

👨‍💻 Tú (Líder)

Estructura inicial y header

👩‍💻 Ana

Sección de menú y estilos

👨‍💻 Beto

Footer y JavaScript

2Visualización del Flujo de Trabajo

Líder (main)

Ana

Beto

Merge

3Línea de Tiempo del Desarrollo

🎬 Inicio - Líder crea el proyecto

git init
git add .
git commit -m "feat: estructura inicial del proyecto"
                        

Archivos creados: index.html, styles.css, script.js

🌿 Líder - Rama feature-header

git checkout -b feature-header
# Agrega header con navegación
git commit -m "feat: agregado header con navegación"
git commit -m "style: estilos básicos del header"
git push origin feature-header
                        

✅ Merge a main

🌸 Ana - Rama feature-menu

git checkout -b feature-menu
# Agrega sección de menú con productos
git commit -m "feat: agregada sección de menú"
git commit -m "style: estilos de la sección menú"
git push origin feature-menu
                        

✅ Merge a main

🔵 Beto - Rama feature-footer

git checkout -b feature-footer
# Agrega footer y JavaScript
git commit -m "feat: agregado footer"
git commit -m "feat: funcionalidad para mostrar teléfono"
git push origin feature-footer
                        

💥 ¡Conflicto de Merge!

⚠️ Beto intenta hacer merge con main

git checkout main
git pull origin main
git checkout feature-footer
git merge main
CONFLICT (content): Merge conflict in index.html
                            

📝 El archivo index.html muestra:

✅ Beto resuelve el conflicto:

# Beto edita el archivo manualmente, combinando ambas versiones
git add index.html
git commit -m "fix: resolver conflicto de merge con main"
git push origin feature-footer
                            

✅ Merge a main exitoso

🎨 Ana - Toques finales

git checkout main
git pull origin main
git checkout -b feature-mejoras-css
git commit -m "style: estilos del footer y títulos"
                        

✅ Merge a main - Proyecto completo!

4Resumen de Commits por Desarrollador

👨‍💻 Líder - 4 commits

✓ Estructura inicial

✓ Header HTML

✓ Estilos header

✓ Merge a main

👩‍💻 Ana - 3 commits

✓ Sección menú HTML

✓ Estilos menú

✓ Mejoras CSS finales

👨‍💻 Beto - 3 commits

✓ Footer HTML

✓ JavaScript teléfono

✓ Resolver conflicto merge

5Resultado Final - Página Web de la Cafetería

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Cafetería El Buen Sabor</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Cafetería El Buen Sabor</h1>
        <nav>
            <a href="#menu">Menú</a>
            <a href="#contacto">Contacto</a>
        </nav>
    </header>

    <section id="menu">
        <h2>Nuestro Menú</h2>
        <div class="menu-item">
            <h3>Café Americano</h3>
            <p>$2.50</p>
        </div>
        <div class="menu-item">
            <h3>Cappuccino</h3>
            <p>$3.50</p>
        </div>
    </section>

    <footer>
        <p>© 2026 Cafetería El Buen Sabor</p>
        <p>Teléfono: <span id="phone">Cargando...</span></p>
    </footer>

    <script src="script.js"></script>
</body>
</html>
                        

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

header {
    background-color: #6F4E37;
    color: white;
    padding: 20px;
    text-align: center;
}

#menu {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    color: #6F4E37;
    margin-bottom: 20px;
}

.menu-item {
    background: white;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
}

footer {
    background-color: #6F4E37;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
                        

document.addEventListener('DOMContentLoaded', function() {
    const phoneElement = document.getElementById('phone');
    phoneElement.textContent = '555-1234';
});
                        

6🎓 Lecciones Clave para Juniors

✅ Siempre hacer git pull antes de empezar

Evita conflictos innecesarios al tener la versión más reciente del código.

⚠️ Los conflictos no son errores

Son Git diciendo "dos personas tocaron lo mismo, ¿cuál versión quieres?"

🔧 Para resolver conflictos

Busca <<<<<<<, decide qué código mantener, borra las marcas de Git, y haz commit.

💬 Comunicación es clave

Si Ana y Beto hubieran hablado, podrían haber evitado tocar index.html al mismo tiempo.