Cómo leer las visualizaciones

Cada visualización funciona con un simulador de Git cuya salida se verifica con el Git real. Esto es lo que significa cada parte del escenario, y uno en vivo para probarlo.

Ejemplo en vivo: `git commit`

Pulsa ▶ y mira cómo un archivo viaja de tu disco al área de preparación y luego a un commit. Para escribir tus propios comandos, abre la zona de práctica.

0.0s / 66s

commitanillo = el commit donde está HEADinalcanzable (aún existe)rama = etiqueta que se mueveorigin/* = tu marcador del remotoHEAD = dónde estás

1 Tus archivos: un archivo, tres lugares

La tabla de la izquierda sigue cada archivo por los tres lugares donde Git lo guarda. Una etiqueta de versión (v1, v2…) cambia cuando cambia el contenido, y una celda parpadea cuando un comando la toca.

Directorio

El archivo en tu disco, lo que muestra tu editor. Los cambios llegan aquí primero.

Preparación

El borrador de tu próximo commit. git add copia una versión aquí.

HEAD

La versión del último commit de la rama en la que estás.

Línea de estado

Bajo cada nombre de archivo: unchanged, modified, staged, untracked, conflict… exactamente lo que diría git status.

2 El grafo de commits

La parte derecha dibuja tu repositorio. Todo lo que aparece sale del estado real tras cada comando: nada se coloca a mano.

Círculo

Un commit, con su hash corto y su mensaje. Los hashes son reales: se calculan a partir del contenido.

Línea

Va de un padre a su hijo. Un commit de merge tiene dos padres, así que se juntan dos líneas.

Etiqueta

Una rama es solo una etiqueta móvil sobre un commit (main, feature/login…).

HEAD

Dónde estás. Está junto a la rama en la que estás, o directamente sobre un commit cuando HEAD está desacoplado.

Etiqueta discontinua

origin/main y compañía: tu última copia conocida de las ramas del servidor, que actualizan fetch, pull y push.

Círculo discontinuo tenue

Un commit inalcanzable: ya no apunta ninguna rama a él, pero sigue existiendo (el reflog puede recuperarlo).

Zona ORIGIN

Aparece cuando una lección usa un remoto: el repositorio del servidor encima del tuyo, para que push y fetch muevan commits entre ellos a la vista.

3 La terminal

Cada lección es una lista de comandos de Git. Un simulador de Git integrado en el sitio los ejecuta en tu navegador; antes de cada versión, su salida se verifica línea a línea con el Git 2.48 real.

~/shop — bashgit add -p

$ git add -p app.js

diff --git a/app.js b/app.js index 4f29dbf..1cd9aa2 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ const cart = [] function add(item) { - cart.push(item) + if (item) cart.push(item) } function remove(item) { const i = cart.indexOf(item) (1/2) Stage this hunk [y,n,q,a,d,j,J,g,/,e,p,?]?

Preguntas

Los comandos interactivos (add -p, rebase -i) se detienen en cada pregunta para que puedas leerla antes de que se escriba la respuesta.

~/shop — bashgit commit

$ git commit

✎ .git/COMMIT_EDITMSGsaved ✓ — git continues

Add cart feature

# Please enter the commit message for your changes. Lines starting

# with '#' will be ignored, and an empty message aborts the commit.

# On branch main

# Changes to be committed:

# modified: app.js

# Untracked files:

# login.js

Vista de editor

Cuando Git abre un editor (mensaje de commit, lista de tareas del rebase, mensaje de etiqueta), el escenario muestra el archivo que se está editando.

$try any command… (help)✎ Edit a file

¿Atascado? Posibles siguientes comandos

cat index.html

Ver el conflicto: lo tuyo está entre <<<<<<< y =======, lo suyo debajo

code index.html

Resolverlo en el editor (conserva los dos lados, quita las marcas)

git add index.html

Tras resolver: le dice a Git «index.html está arreglado»

Zona de práctica

Las lecciones solo se miran. Para escribir tus propios comandos, abre la zona de práctica (enlace bajo cada visualización): el grafo reacciona igual que en las lecciones y las sugerencias proponen los siguientes comandos más probables cuando te atascas.

~/shop — bashgit fetch

# meanwhile… Sam pushes 7f94dc7 “Update README” to origin/main

$ git fetch

remote: Enumerating objects: 5, done. remote: Counting objects: 100% (5/5), done. remote: Compressing objects: 100% (1/1), done. remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0) Unpacking objects: 100% (3/3), 312 bytes | 312.00 KiB/s, done. From github.com:acme/shop 2e039ac..7f94dc7 main -> origin/main

Líneas de compañero

Una línea de narración como «un compañero sube…» significa que otra persona cambió el servidor: la razón de que un push o un pull posterior se comporte como lo hace.

4 Un mensaje cada vez

Un paso se divide en momentos. Cada momento cambia una sola cosa y la explica en un rótulo en la parte inferior del escenario; todo lo demás se atenúa.

~/shop — bash① se escribe el comando

$ echo "<p>Sale</p>" >> index.html

Primero la causa

El comando se escribe antes de que nada se mueva, y los paneles solo cambian cuando llega su efecto.

Nace un nuevo commit 2b4c917: una instantánea de todo lo que hay en el área de preparación. main avanza hasta él (HEAD lo acompaña: apunta a main)

Rótulo

Qué acaba de pasar y por qué, en una frase. El panel junto a la terminal lo repite con la explicación del paso.

1Echar un vistazogit log --oneline
2Editasecho "cart.push(item)" >> app.js
3Archivo nuevoecho "export function login() {}" > login.js
4Pregunta a Gitgit status
5Preparargit add app.js login.js

Capítulos

La lista numerada bajo la explicación. Haz clic en cualquier paso para saltar a él.

5 Controles

Reprodúcela como un vídeo o avanza paso a paso.

⏮◀▶▶|1× ▾

⏮ ◀ ▶ ▶|

Reiniciar, paso anterior, reproducir / pausa, paso siguiente.

⏮◀▶▶|1× ▾

Línea de tiempo

Arrastra para ir a cualquier momento de la lección.

⏮◀▶▶|1× ▾

Velocidad

De 0,5× a 2×.

Spacereproducir / pausa←→paso anterior / siguiente

Teclado

Haz clic en el escenario y luego Espacio = reproducir / pausa, ← / → = paso anterior / siguiente.

6 Páginas de comandos, opciones y escenarios

Dónde están las visualizaciones.

--force-with-leaseGit ≥ 1.8.5Recomendado

▷ Mostrar visualización

Página de comando

La visualización principal cubre el uso habitual del comando. Cada opción tiene su propia visualización breve: ábrela desde la lista de opciones.

RecomendadoMainstream, safe choiceCuando haga faltaUseful in specific casesNo recomendadoRisky or superseded

Recomendación

Cada opción lleva una insignia: Recomendado, Cuando haga falta o No recomendado, con un motivo de una línea.

git add --editGit ≥ 1.6.4

Abrir el diff en tu editor antes de preparar. Puedes elegir a mano qué cambios incluir.

$ git add -e app.js

Por qué no hay animación

git add -e abre todo el diff como un parche en tu editor; borras las líneas que no quieres preparar y git aplica lo que queda. Es un archivo editado a mano, no un cambio de estado del repositorio que la escena pueda animar: git add -p es el equivalente visual.

Cómo funciona

Algunas opciones dependen de cosas externas al repositorio (tu editor, los permisos de archivos, los finales de línea). Tienen una tarjeta explicativa en lugar de una animación.

1Empezar la funcionalidad

Ramificar

$ git switch -c feature/login

Página de login

$ echo "export function login() {}" > login.js && git add login.js && git commit -m "Add login page"

Conectarlo

$ echo "login()" >> app.js && git commit -am "Call login on load"

Escenarios

Recorridos del mundo real contados como una historia continua, divididos en secciones con título en las que puedes hacer clic.

Ajustes

El botón del engranaje en la cabecera reúne los ajustes: idioma, sitio claro u oscuro, tema de las visualizaciones, modo daltónico y tamaño del texto.

¿Listo para aprender?

Sigue un flujo de trabajo completo o elige un comando.

Escenario de rama de funcionalidad Ver comandos

Ejemplo en vivo: git commit

1 Tus archivos: un archivo, tres lugares

Directorio

Preparación

HEAD

Línea de estado

2 El grafo de commits

Círculo

Línea

Etiqueta

HEAD

Etiqueta discontinua

Círculo discontinuo tenue

Zona ORIGIN

3 La terminal

Preguntas

Vista de editor

Zona de práctica

Líneas de compañero

4 Un mensaje cada vez

Primero la causa

Rótulo

Capítulos

5 Controles

⏮ ◀ ▶ ▶|

Línea de tiempo

Velocidad

Teclado

6 Páginas de comandos, opciones y escenarios

Página de comando

Recomendación

git add --editGit ≥ 1.6.4

Por qué no hay animación

Cómo funciona

Escenarios

Ajustes

¿Listo para aprender?

Ejemplo en vivo: `git commit`