-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
247 lines (226 loc) · 16.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GITTRIP</title>
<!-- Conexión con el archivo CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/buttons.scss">
</head>
<header>
<section class="layout">
<div class="grow1"><h1 style="color: black; text-align: center;"></h1></div>
<div class="grow1"><div class="flipswitch">
<input checked="" id="fs" class="flipswitch-cb" name="flipswitch" onclick="toggleDarkMode()" type="checkbox">
<label for="fs" class="flipswitch-label">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div></div>
</section>
</header>
<br>
<body>
<div class="container">
<div class="word">
<span>G</span>
<span>I</span>
<span>T</span>
</div>
<div >
<span>T</span>
<span>R</span>
<span>i</span>
<span>P</span>
</div>
</div>
<br>
<br><br>
<div class="container">
<div class="containerbash" >
<div class="container_terminal"></div>
<div class="terminal_toolbar">
<div class="butt">
<button class="btn btn-color"></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
<p class=</p>
</div>
<div class="terminal_body">
<div class="terminal_promt">
<span class="terminal_user">elingenierotrip@admin:</span>
<span class="terminal_location">~</span>
<span class="terminal_bling">$</span>
<span class="terminal_cursor"></span>
</div>
</div>
</div>
</div>
<br><br>
<div class="contenedor2">
<h1>¡Bienvenido a la webapp del taller introductorio de Git!</h1>
<p>Este sitio web contiene el contenido interactivo para el taller.
<br}+¿</p>
<h2>Introducción a Git</h2>
<p>En esta sección, exploraremos qué es Git, cómo funciona y las herramientas esenciales para su implementación en el desarrollo de proyectos.</p>
<ul>
<li><strong>¿Qué es Git y cómo funciona?</strong><br>
- Git es un sistema de control de versiones distribuido.<br>
- Gestiona eficientemente el historial de cambios en un proyecto.<br>
- Su naturaleza distribuida permite que cada colaborador tenga una copia completa del repositorio.</li>
<li><strong>Herramientas para el desarrollo con Git:</strong><br>
Antes de sumergirse en el uso práctico de Git, es esencial comprender las siguientes herramientas:
<ul>
<li><strong>Terminal:</strong> Si prefieres trabajar en la línea de comandos, puedes utilizar la terminal para ejecutar comandos Git directamente. Algunos comandos básicos incluyen git init, git clone, git add, git commit y git push.</li>
<li><strong>Servicios de alojamiento de Git:</strong> Plataformas como GitHub, GitLab, Bitbucket y SourceForge ofrecen servicios de alojamiento para tus repositorios Git. Puedes crear, colaborar y compartir proyectos con otros desarrolladores utilizando estas plataformas.</li>
<li><strong>Editores de texto:</strong> Aunque no es específico de Git, tener un buen editor de texto es crucial para escribir y editar código. Algunos editores populares son Visual Studio Code, Sublime Text, Atom y Vim.</li>
</ul>
Recuerda que elegir las herramientas adecuadas depende de tus preferencias personales y del flujo de trabajo de tu equipo. ¡Explora y encuentra las que mejor se adapten a ti!</li>
</ul>
<h2>Conceptos Fundamentales de Git</h2>
<p>Antes de sumergirse en el uso práctico de Git, es esencial comprender los siguientes conceptos:</p>
<ul>
<li><strong>Repositorios:</strong> Un repositorio es un almacén de código fuente que contiene todos los archivos y la historia de cambios de un proyecto. Puede ser local (en tu máquina) o remoto (en un servidor). Los repositorios remotos son comunes en plataformas como GitHub, GitLab o Bitbucket.</li>
<li><strong>Commits:</strong> Un commit representa un conjunto de cambios realizados en el código. Cada commit tiene un mensaje descriptivo que explica qué se modificó. Los commits forman el historial de cambios del proyecto.</li>
<li><strong>Ramas:</strong> Las ramas son líneas de desarrollo independientes dentro del repositorio. Permiten trabajar en nuevas funcionalidades o correcciones sin afectar la rama principal (generalmente llamada "master" o "main"). Por ejemplo, puedes crear una rama para desarrollar una nueva característica y luego fusionarla con la rama principal.</li>
<li><strong>Etiquetas:</strong> Las etiquetas son puntos específicos en la historia del repositorio. Se utilizan para marcar versiones estables o hitos importantes. A menudo se usan para identificar versiones de lanzamiento.</li>
<li><strong>Remotos:</strong> Los remotos son repositorios alojados en servidores externos (como GitHub o GitLab). Facilitan la colaboración y el intercambio de código entre desarrolladores. Puedes clonar, empujar y tirar cambios hacia y desde repositorios remotos.</li>
</ul>
<p>Recuerda que estos conceptos son esenciales para comprender cómo funciona Git y cómo aprovecharlo al máximo en tu flujo de trabajo.</p>
<h2>Comandos básicos de Git</h2>
<ul>
<li><code>git init</code>: Crea un nuevo repositorio local de Git. Puedes ejecutarlo en el directorio actual para iniciar un repositorio o especificar un nombre de proyecto para crear un repositorio en un directorio nuevo.</li>
<li><code>git clone</code>: Copia un repositorio existente. Si el repositorio está en un servidor remoto, utiliza la siguiente sintaxis: <code>git clone nombredeusuario@host:/path/to/repository</code>. Para clonar un repositorio local, simplemente usa: <code>git clone /path/to/repository</code>.</li>
<li><code>git add</code>: Agrega archivos al área de preparación (staging). Por ejemplo, para indexar el archivo <code>temp.txt</code>, ejecuta: <code>git add temp.txt</code>.</li>
<li><code>git commit</code>: Crea una instantánea de los cambios y los guarda en el directorio Git. Acompaña el commit con un mensaje descriptivo: <code>git commit -m "Mensaje del commit aquí"</code>.</li>
<li><code>git config</code>: Establece configuraciones específicas de usuario, como el correo electrónico y el nombre de usuario. Por ejemplo:
<ul>
<li>Configurar un email global: <code>git config --global user.email [email protected]</code>.</li>
<li>Configurar un email local para un repositorio específico: <code>git config --local user.email [email protected]</code>.</li>
</ul>
</li>
<li><code>git status</code>: Muestra la lista de archivos modificados, así como los archivos preparados o confirmados.</li>
</ul>
<h2>Flujo de trabajo con Git</h2>
<ol>
<li>
<strong>Creación de una Rama de Funcionalidad:</strong>
<p>Cada nueva funcionalidad o corrección de errores se desarrolla en una rama separada.</p>
<p>Ejemplo: <code>feature/nueva-funcionalidad</code>.</p>
</li>
<li>
<strong>Desarrollo y Confirmación:</strong>
<p>Realiza cambios en la rama de funcionalidad.</p>
<p>Confirma los cambios con mensajes descriptivos.</p>
</li>
<li>
<strong>Solicitud de Extracción (Pull Request):</strong>
<p>Abre una solicitud de extracción para fusionar la rama de funcionalidad con <code>main</code>.</p>
<p>Revisa los cambios y colabora con otros miembros del equipo.</p>
</li>
<li>
<strong>Revisión y Aprobación:</strong>
<p>Otros revisan el código y proporcionan comentarios.</p>
<p>Una vez aprobada, se fusiona la rama de funcionalidad con <code>main</code>.</p>
</li>
<li>
<strong>Despliegue:</strong>
<p>Los cambios confirmados en <code>main</code> se despliegan en producción.</p>
</li>
</ol>
<h2>Buenas prácticas con Git</h2>
<ol>
<li>
<strong>Escribe Mensajes de Commit Significativos:</strong>
<p>Usa el <strong>verbo imperativo</strong> en tus mensajes de commit (por ejemplo, "Add", "Change", "Fix", "Remove") si necesitas mas información puedes visitar este sitio https://www.conventionalcommits.org/en/v1.0.0/.</p>
<p>Limita el mensaje a <strong>50 caracteres</strong> para el título del commit.</p>
<p>Proporciona <strong>contexto adicional</strong> en el cuerpo del mensaje si es necesario.</p>
</li>
<li>
<strong>Crea Ramas para Cada Funcionalidad o Corrección:</strong>
<p>Desarrolla cada nueva funcionalidad o corrección en una <strong>rama separada</strong>.</p>
<p>Por ejemplo: <code>feature/nueva-funcionalidad</code>.</p>
</li>
<li>
<strong>Actualiza Constantemente tu Repositorio Local:</strong>
<p>Utiliza <code>git pull</code> para mantener tu repositorio local al día con los cambios remotos.</p>
</li>
<li>
<strong>Solicita Extracciones (Pull Requests):</strong>
<p>Abre una solicitud de extracción para fusionar tus cambios en la rama principal (<code>main</code>).</p>
<p>Colabora con otros miembros del equipo y revisa los cambios.</p>
</li>
<li>
<strong>Evita Commits que Hacen Demasiadas Cosas:</strong>
<p>Si un commit hace demasiadas cosas, considera dividirlo en varios commits más pequeños.</p>
</li>
<li>
<strong>Comparte el Contexto Necesario en el Cuerpo del Mensaje de Commit:</strong>
<p>Si un commit necesita más contexto, añádelo en el cuerpo del mensaje.</p>
</li>
</ol>
<h2>Herramientas y recursos adicionales con Git</h2>
<p>Extensiones de Git para Visual Studio Code</p>
<ul>
<li>
<strong>GitLens:</strong> Con más de 25 millones de instalaciones, GitLens es la extensión Git más popular para Visual Studio Code. Proporciona información valiosa sobre la autoría del código y desbloquea todo el poder de Git en VS Code. Te permite ver la historia de Git, la diferencia de archivos confirmados, la información de culpabilidad (blame) y más.
</li>
<li>
<strong>Git History Diff:</strong> Esta extensión te permite ver la historia de Git, los detalles de los commits, la diferencia de archivos confirmados y la información de culpabilidad (blame). Puedes comparar ramas, ver la historia de archivos o carpetas, y explorar cambios de línea. También puedes ver las diferencias entre ramas y comparar archivos no confirmados con un commit específico.
</li>
<li>
<strong>Git Graph:</strong> Git Graph te permite visualizar un gráfico de Git de tu repositorio y realizar acciones de Git directamente desde el gráfico. Puedes ver la historia de ramas, archivos, líneas y autores. También muestra detalles de commits, diferencias y stashes.
</li>
</ul>
<p>En resumen, estas extensiones te ayudarán a trabajar con Git de manera más eficiente dentro de Visual Studio Code. ¡Explóralas y elige las que mejor se adapten a tus necesidades! 😊</p>
</div>
<!-- Conexión con el archivo JavaScript -->
<script src="scripts/scripts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
<br><br><br>
<footer>
<div class="footer">
<div class="bubbles">
<div class="bubble" style="--size:5.17974976586988rem; --distance:7.866188997217349rem; --position:-3.2252348171421663%; --time:3.0966341486792546s; --delay:-2.4943787373789514s;"></div>
<div class="bubble" style="--size:2.431090192053894rem; --distance:7.090856255975796rem; --position:10.248274065232136%; --time:2.339182926132167s; --delay:-2.8239160490954394s;"></div>
<div class="bubble" style="--size:4.55807727886635rem; --distance:7.323872384583735rem; --position:-2.9677969549391148%; --time:2.8010807545254677s; --delay:-2.8868956749450185s;"></div>
<div class="bubble" style="--size:2.791937898168146rem; --distance:7.394818832037565rem; --position:41.004480173790334%; --time:2.0302699073652004s; --delay:-3.0323824704771574s;"></div>
<div class="bubble" style="--size:4.1016387967100165rem; --distance:8.485705669398827rem; --position:33.59907479377273%; --time:2.8265341958424637s; --delay:-2.3203389878607648s;"></div>
<div class="bubble" style="--size:3.631748752011484rem; --distance:8.461030894773428rem; --position:-1.2922014185748587%; --time:3.199443352087098s; --delay:-2.321788482448939s;"></div>
<div class="bubble" style="--size:4.452653013745401rem; --distance:9.304347229555308rem; --position:3.7115096367362774%; --time:3.9516547312521992s; --delay:-3.8487138759051644s;"></div>
<div class="bubble" style="--size:3.9875661923522365rem; --distance:9.411727089078953rem; --position:19.68403900680895%; --time:2.1895365672289095s; --delay:-3.461027765828751s;"></div>
<div class="bubble" style="--size:4.126051506617986rem; --distance:9.638501576721964rem; --position:45.66693414303552%; --time:2.025220779750784s; --delay:-3.400302594459304s;"></div>
<div class="bubble" style="--size:5.477780071238847rem; --distance:8.069148022231797rem; --position:88.80546394544612%; --time:3.916146914849813s; --delay:-2.186241441279202s;"></div>
<div class="bubble" style="--size:2.273143268960312rem; --distance:6.6849146736224325rem; --position:59.35243909051714%; --time:2.4531837739635467s; --delay:-3.443600676030905s;"></div>
<div class="bubble" style="--size:2.1528108324992976rem; --distance:6.59719829116081rem; --position:0.9434002258674106%; --time:3.096617378008543s; --delay:-3.2383680632759395s;"></div>
<div class="bubble" style="--size:4.562561852611205rem; --distance:6.934545996223171rem; --position:7.741235021854358%; --time:2.577398994398954s; --delay:-3.205021675881872s;"></div>
<div class="bubble" style="--size:5.6419287822438395rem; --distance:8.382898769648206rem; --position:66.72675878842594%; --time:3.9845246676447754s; --delay:-3.486135220912184s;"></div>
<div class="bubble" style="--size:4.197095775280953rem; --distance:7.247095341713584rem; --position:92.5188177227915%; --time:2.233766720455143s; --delay:-2.0357942539684664s;"></div>
<div class="bubble" style="--size:2.496416581312136rem; --distance:8.082539852897451rem; --position:58.39826153262726%; --time:2.643839184815148s; --delay:-2.677141330489282s;"></div>
<div class="bubble" style="--size:2.860323048737248rem; --distance:9.828300276086985rem; --position:14.772442748753335%; --time:2.273618452263016s; --delay:-2.161326432279517s;"></div>
<div class="bubble" style="--size:3.075457788013493rem; --distance:7.51141843346092rem; --position:8.074052920967409%; --time:2.52279644854066s; --delay:-3.212274498933195s;"></div>
<div class="bubble" style="--size:5.900551379454539rem; --distance:9.624331722940546rem; --position:53.28807188836148%; --time:3.281101170610266s; --delay:-3.479254865108679s;"></div>
</div>
<div class="content" style="display: flex; justify-content: center; align-items: center;">
<div >
<a class="image" href="https://github.com/JonnySC/Git-Trip" target="_blank" style="background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/happy.svg")"></a>
<p>©2024 Jonathan Salas</p>
</div>
</div>
</div>
<svg style="position: fixed; top: 100vh">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
<!--feComposite(in="SourceGraphic" in2="blob" operator="atop") //After reviewing this after years I can't remember why I added this but it isn't necessary for the blob effect-->
</filter>
</defs>
</svg>
</footer>
</html>