Hugging Face's logo

Spaces:
JairoDanielMT
/
slide-testing
Running

App Files Community
11
JairoDanielMT commited on
Commit
b1afa62
路
verified 路
1 Parent(s): 0d5080f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +487 -18
index.html CHANGED
@@ -1,19 +1,488 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>An谩lisis de Herramientas de Desarrollo - Grupo 5</title>
7
+ <!-- Carga de Tailwind CSS -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Fuente Inter -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
13
+ <style>
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ background-color: #1a202c; /* gris oscuro para el fondo */
17
+ }
18
+
19
+ /* Contenedor principal con relaci贸n de aspecto 4:3 */
20
+ #presentation-container {
21
+ width: 100%;
22
+ max-width: 1024px; /* Un tama帽o m谩ximo razonable para 4:3 */
23
+ margin: auto;
24
+ aspect-ratio: 4 / 3;
25
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
26
+ }
27
+
28
+ /* Estilo base de cada slide */
29
+ .slide {
30
+ transition: opacity 0.4s ease-in-out;
31
+ }
32
+
33
+ /* Marcador de posici贸n para GIFs */
34
+ .gif-placeholder {
35
+ border: 4px dashed #4a5568; /* gris-600 */
36
+ border-radius: 0.75rem; /* rounded-xl */
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ width: 100%;
41
+ height: 100%;
42
+ background-color: #2d3748; /* gris-800 */
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="flex items-center justify-center min-h-screen p-4">
47
+
48
+ <!-- Contenedor 4:3 -->
49
+ <div id="presentation-container" class="bg-gray-900 text-white rounded-lg overflow-hidden relative">
50
+
51
+ <!-- Slide 1: Portada -->
52
+ <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center bg-gray-800">
53
+ <h1 class="text-6xl font-bold text-cyan-400 mb-6">An谩lisis Comparativo</h1>
54
+ <h2 class="text-4xl font-semibold text-white">Herramientas de Desarrollo y Gesti贸n</h2>
55
+ <p class="text-3xl text-gray-400 mt-16">Curso: Testing y calidad de software</p>
56
+ <p class="text-3xl text-gray-400 mt-4">Grupo 5</p>
57
+ </div>
58
+
59
+ <!-- Slide 2: Introducci贸n -->
60
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
61
+ <div class="flex w-full space-x-8">
62
+ <!-- Contenido -->
63
+ <div class="w-1/2 flex flex-col justify-center">
64
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Introducci贸n</h2>
65
+ <ul class="list-disc list-inside text-xl space-y-3 text-gray-300">
66
+ <li>An谩lisis de herramientas clave del SDLC.</li>
67
+ <li>Foco en Clientes de API (Postman) y Gesti贸n 脕gil (Jira).</li>
68
+ <li>Investigaci贸n de alternativas modernas.</li>
69
+ <li>Comparativa de filosof铆a, funcionalidad y costos.</li>
70
+ </ul>
71
+ </div>
72
+ <!-- Placeholder GIF -->
73
+ <div class="w-1/2">
74
+ <div class="gif-placeholder aspect-video">
75
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Slide 3: T铆tulo Parte I -->
82
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
83
+ <div class="flex w-full space-x-8">
84
+ <!-- Contenido -->
85
+ <div class="w-1/2 flex flex-col justify-center">
86
+ <h2 class="text-5xl font-bold text-cyan-400">Parte I</h2>
87
+ <h3 class="text-4xl text-white mt-4">Clientes de API</h3>
88
+ <p class="text-2xl text-gray-400 mt-6">Validaci贸n y Pruebas de Interfaces</p>
89
+ </div>
90
+ <!-- Placeholder GIF -->
91
+ <div class="w-1/2">
92
+ <div class="gif-placeholder aspect-video">
93
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Slide 4: Herramienta Central: Postman -->
100
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
101
+ <div class="flex w-full space-x-8">
102
+ <!-- Contenido -->
103
+ <div class="w-1/2 flex flex-col justify-center">
104
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Herramienta Central: Postman</h2>
105
+ <p class="text-xl text-gray-300 mb-4">Plataforma est谩ndar *de facto* para el ciclo de vida de APIs.</p>
106
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
107
+ <li>Rol: Dise帽o, prueba, documentaci贸n y monitoreo.</li>
108
+ <li>Evoluci贸n: De cliente REST simple a plataforma integral en la nube.</li>
109
+ <li>Modelo: *Cloud-first*, centrado en *workspaces* colaborativos.</li>
110
+ </ul>
111
+ </div>
112
+ <!-- Placeholder GIF -->
113
+ <div class="w-1/2">
114
+ <div class="gif-placeholder aspect-video">
115
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Slide 5: La Cr铆tica a Postman -->
122
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
123
+ <div class="flex w-full space-x-8">
124
+ <!-- Contenido -->
125
+ <div class="w-1/2 flex flex-col justify-center">
126
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">La Cr铆tica: "Bloat" y Nube</h2>
127
+ <p class="text-xl text-gray-300 mb-4">La evoluci贸n de Postman abri贸 el mercado a alternativas.</p>
128
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
129
+ <li><b>Rendimiento:</b> Percepci贸n de lentitud y alto consumo de recursos (*bloat*).</li>
130
+ <li><b>Dependencia:</b> El modelo *cloud-first* obligatorio genera fricci贸n.</li>
131
+ <li><b>Privacidad:</b> Preocupaciones sobre d贸nde residen los datos sensibles (tokens, secretos).</li>
132
+ </ul>
133
+ </div>
134
+ <!-- Placeholder GIF -->
135
+ <div class="w-1/2">
136
+ <div class="gif-placeholder aspect-video">
137
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Slide 6: Alternativa: Insomnia -->
144
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
145
+ <div class="flex w-full space-x-8">
146
+ <!-- Contenido -->
147
+ <div class="w-1/2 flex flex-col justify-center">
148
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Alternativa: Insomnia</h2>
149
+ <p class="text-xl text-gray-300 mb-4">Cliente de API Open-Source (propiedad de Kong) enfocado en dise帽o.</p>
150
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
151
+ <li>Soporta REST, GraphQL, gRPC.</li>
152
+ <li><b>Filosof铆a H铆brida:</b> Permite "Scratch Pad" 100% local o sincronizaci贸n opcional (Nube o Git).</li>
153
+ <li>Potente para dise帽o (OpenAPI) y *plugins*.</li>
154
+ </ul>
155
+ </div>
156
+ <!-- Placeholder GIF -->
157
+ <div class="w-1/2">
158
+ <div class="gif-placeholder aspect-video">
159
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Slide 7: Alternativa: Yaak -->
166
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
167
+ <div class="flex w-full space-x-8">
168
+ <!-- Contenido -->
169
+ <div class="w-1/2 flex flex-col justify-center">
170
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Alternativa: Yaak</h2>
171
+ <p class="text-xl text-gray-300 mb-4">Cliente moderno enfocado en velocidad y privacidad (*local-first*).</p>
172
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
173
+ <li><b>Privacidad Total:</b> 100% offline por defecto. Cero telemetr铆a.</li>
174
+ <li><b>Nativo de Git:</b> Colaboraci贸n as铆ncrona tratando APIs como c贸digo.</li>
175
+ <li><b>Rendimiento:</b> Extremadamente r谩pido y ligero (Nativo Rust/Tauri).</li>
176
+ </ul>
177
+ </div>
178
+ <!-- Placeholder GIF -->
179
+ <div class="w-1/2">
180
+ <div class="gif-placeholder aspect-video">
181
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- Slide 8: Tabla Comparativa API (Full Width) -->
188
+ <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center hidden opacity-0 bg-gray-800">
189
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6 text-center">Comparativa: Clientes de API</h2>
190
+ <table class="w-full text-left text-lg">
191
+ <thead class="bg-gray-700">
192
+ <tr>
193
+ <th class="p-3">Caracter铆stica</th>
194
+ <th class="p-3">Postman</th>
195
+ <th class="p-3">Insomnia</th>
196
+ <th class="p-3">Yaak</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody class="text-gray-300">
200
+ <tr class="bg-gray-800 border-b border-gray-700">
201
+ <td class="p-3 font-semibold">Filosof铆a</td>
202
+ <td class="p-3">Plataforma Nube</td>
203
+ <td class="p-3">H铆brido (Dise帽o)</td>
204
+ <td class="p-3">Local-First (Git)</td>
205
+ </tr>
206
+ <tr class="bg-gray-800 border-b border-gray-700">
207
+ <td class="p-3 font-semibold">Rendimiento</td>
208
+ <td class="p-3">Lento / Pesado</td>
209
+ <td class="p-3">R谩pido</td>
210
+ <td class="p-3">Instant谩neo</td>
211
+ </tr>
212
+ <tr class="bg-gray-800 border-b border-gray-700">
213
+ <td class="p-3 font-semibold">Privacidad</td>
214
+ <td class="p-3">Baja (Nube)</td>
215
+ <td class="p-3">Media</td>
216
+ <td class="p-3">Total (Offline)</td>
217
+ </tr>
218
+ <tr class="bg-gray-800">
219
+ <td class="p-3 font-semibold">Ideal Para</td>
220
+ <td class="p-3">Gobernanza</td>
221
+ <td class="p-3">Dise帽o API</td>
222
+ <td class="p-3">Desarrolladores</td>
223
+ </tr>
224
+ </tbody>
225
+ </table>
226
+ </div>
227
+
228
+ <!-- Slide 9: T铆tulo Parte II -->
229
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
230
+ <div class="flex w-full space-x-8">
231
+ <!-- Contenido -->
232
+ <div class="w-1/2 flex flex-col justify-center">
233
+ <h2 class="text-5xl font-bold text-cyan-400">Parte II</h2>
234
+ <h3 class="text-4xl text-white mt-4">Gesti贸n de Proyectos 脕giles</h3>
235
+ <p class="text-2xl text-gray-400 mt-6">Proceso Estricto vs. Flexibilidad Visual</p>
236
+ </div>
237
+ <!-- Placeholder GIF -->
238
+ <div class="w-1/2">
239
+ <div class="gif-placeholder aspect-video">
240
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Slide 10: Herramienta Central: Jira -->
247
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
248
+ <div class="flex w-full space-x-8">
249
+ <!-- Contenido -->
250
+ <div class="w-1/2 flex flex-col justify-center">
251
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Sistema Central: Jira</h2>
252
+ <p class="text-xl text-gray-300 mb-4">Est谩ndar (Atlassian) para gesti贸n 谩gil a escala y seguimiento de incidencias.</p>
253
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
254
+ <li><b>Rol:</b> Imposici贸n de procesos y auditor铆a.</li>
255
+ <li><b>Conceptos:</b> Incidencias (Tickets), Flujos de Trabajo (Workflows), Tableros (Scrum/Kanban).</li>
256
+ <li><b>Cr铆tica:</b> Complejidad, rigidez y curva de aprendizaje pronunciada.</li>
257
+ </ul>
258
+ </div>
259
+ <!-- Placeholder GIF -->
260
+ <div class="w-1/2">
261
+ <div class="gif-placeholder aspect-video">
262
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Slide 11: Alternativa: Trello -->
269
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
270
+ <div class="flex w-full space-x-8">
271
+ <!-- Contenido -->
272
+ <div class="w-1/2 flex flex-col justify-center">
273
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Alternativa: Trello</h2>
274
+ <p class="text-xl text-gray-300 mb-4">Simplicidad visual radical (tambi茅n de Atlassian).</p>
275
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
276
+ <li><b>Paradigma:</b> Kanban puro (Tableros, Listas, Tarjetas).</li>
277
+ <li><b>Fortaleza:</b> Curva de aprendizaje nula. Extremadamente intuitivo.</li>
278
+ <li><b>Debilidad:</b> D茅bil para m茅tricas 谩giles complejas (Scrum).</li>
279
+ <li><b>Ideal para:</b> Equipos peque帽os, tareas simples, no-t茅cnicos.</li>
280
+ </ul>
281
+ </div>
282
+ <!-- Placeholder GIF -->
283
+ <div class="w-1/2">
284
+ <div class="gif-placeholder aspect-video">
285
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Slide 12: Alternativa: Asana -->
292
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
293
+ <div class="flex w-full space-x-8">
294
+ <!-- Contenido -->
295
+ <div class="w-1/2 flex flex-col justify-center">
296
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Alternativa: Asana</h2>
297
+ <p class="text-xl text-gray-300 mb-4">Busca el equilibrio entre la potencia (Jira) y la usabilidad (Trello).</p>
298
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-2">
299
+ <li><b>Fortaleza:</b> M煤ltiples Vistas (Lista, Tablero, Cronograma/Gantt, Calendario).</li>
300
+ <li><b>UX Superior:</b> Fomenta la adopci贸n.</li>
301
+ <li><b>Ideal para:</b> Equipos interdisciplinarios (Marketing, Ops, Devs) que necesitan ver datos de formas distintas.</li>
302
+ </ul>
303
+ </div>
304
+ <!-- Placeholder GIF -->
305
+ <div class="w-1/2">
306
+ <div class="gif-placeholder aspect-video">
307
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Slide 13: Tabla Comparativa Gesti贸n (Full Width) -->
314
+ <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center hidden opacity-0 bg-gray-800">
315
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6 text-center">Comparativa: Gesti贸n de Proyectos</h2>
316
+ <table class="w-full text-left text-lg">
317
+ <thead class="bg-gray-700">
318
+ <tr>
319
+ <th class="p-3">Caracter铆stica</th>
320
+ <th class="p-3">Jira</th>
321
+ <th class="p-3">Trello</th>
322
+ <th class="p-3">Asana</th>
323
+ </tr>
324
+ </thead>
325
+ <tbody class="text-gray-300">
326
+ <tr class="bg-gray-800 border-b border-gray-700">
327
+ <td class="p-3 font-semibold">Filosof铆a</td>
328
+ <td class="p-3">Imposici贸n Proceso</td>
329
+ <td class="p-3">Simplicidad Visual</td>
330
+ <td class="p-3">Equilibrio (UX)</td>
331
+ </tr>
332
+ <tr class="bg-gray-800 border-b border-gray-700">
333
+ <td class="p-3 font-semibold">Curva Aprendizaje</td>
334
+ <td class="p-3">Muy Alta</td>
335
+ <td class="p-3">Nula</td>
336
+ <td class="p-3">Moderada</td>
337
+ </tr>
338
+ <tr class="bg-gray-800 border-b border-gray-700">
339
+ <td class="p-3 font-semibold">Fortaleza</td>
340
+ <td class="p-3">Trazabilidad</td>
341
+ <td class="p-3">Facilidad de Uso</td>
342
+ <td class="p-3">M煤ltiples Vistas</td>
343
+ </tr>
344
+ <tr class="bg-gray-800">
345
+ <td class="p-3 font-semibold">Equipo Ideal</td>
346
+ <td class="p-3">T茅cnico (Devs)</td>
347
+ <td class="p-3">No-T茅cnicos</td>
348
+ <td class="p-3">Interdisciplinario</td>
349
+ </tr>
350
+ </tbody>
351
+ </table>
352
+ </div>
353
+
354
+ <!-- Slide 14: Conclusi贸n API -->
355
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
356
+ <div class="flex w-full space-x-8">
357
+ <!-- Contenido -->
358
+ <div class="w-1/2 flex flex-col justify-center">
359
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Conclusi贸n (APIs)</h2>
360
+ <p class="text-xl text-gray-300">La elecci贸n depende del contexto:</p>
361
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-3 mt-4">
362
+ <li><b>Postman:</b> Necesario para gobernanza corporativa y colaboraci贸n en nube s铆ncrona obligatoria.</li>
363
+ <li><b>Insomnia:</b> Ideal para dise帽o de APIs (GraphQL/OpenAPI) y un flujo h铆brido (Git/Nube).</li>
364
+ <li><b>Yaak:</b> Superior para el desarrollador individual que valora velocidad, privacidad y flujo *local-first* nativo de Git.</li>
365
+ </ul>
366
+ </div>
367
+ <!-- Placeholder GIF -->
368
+ <div class="w-1/2">
369
+ <div class="gif-placeholder aspect-video">
370
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Slide 15: Conclusi贸n Gesti贸n -->
377
+ <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0 bg-gray-800">
378
+ <div class="flex w-full space-x-8">
379
+ <!-- Contenido -->
380
+ <div class="w-1/2 flex flex-col justify-center">
381
+ <h2 class="text-4xl font-bold text-cyan-400 mb-6">Conclusi贸n (Gesti贸n)</h2>
382
+ <p class="text-xl text-gray-300">No hay "mejor", hay "adecuado":</p>
383
+ <ul class="list-disc list-inside text-lg text-gray-300 space-y-3 mt-4">
384
+ <li><b>Jira:</b> Requerido para procesos 谩giles estrictos, auditables y a gran escala (equipos t茅cnicos maduros).</li>
385
+ <li><b>Trello:</b> Imbatible en simplicidad y adopci贸n r谩pida para tareas visuales o equipos no-t茅cnicos.</li>
386
+ <li><b>Asana:</b> El punto medio para equipos mixtos que necesitan potencia sin sacrificar la usabilidad.</li>
387
+ </ul>
388
+ </div>
389
+ <!-- Placeholder GIF -->
390
+ <div class="w-1/2">
391
+ <div class="gif-placeholder aspect-video">
392
+ <span class="text-gray-500 text-2xl font-semibold">Espacio para GIF</span>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Slide 16: Fin -->
399
+ <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center hidden opacity-0 bg-gray-800">
400
+ <h1 class="text-6xl font-bold text-cyan-400">Preguntas</h1>
401
+ <h2 class="text-4xl text-white mt-10">Grupo 5</h2>
402
+ </div>
403
+
404
+ <!-- Controles de Navegaci贸n -->
405
+ <button id="prev-slide" class="absolute bottom-6 left-6 bg-cyan-600 hover:bg-cyan-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed z-10">
406
+ Anterior
407
+ </button>
408
+ <button id="next-slide" class="absolute bottom-6 right-6 bg-cyan-600 hover:bg-cyan-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed z-10">
409
+ Siguiente
410
+ </button>
411
+ <div id="slide-counter" class="absolute bottom-7 left-1/2 -translate-x-1/2 text-gray-400 text-lg z-10">
412
+ 1 / 16
413
+ </div>
414
+ </div>
415
+
416
+ <script>
417
+ document.addEventListener('DOMContentLoaded', () => {
418
+ const slides = document.querySelectorAll('.slide');
419
+ const prevBtn = document.getElementById('prev-slide');
420
+ const nextBtn = document.getElementById('next-slide');
421
+ const counter = document.getElementById('slide-counter');
422
+ let currentSlide = 0;
423
+ const totalSlides = slides.length;
424
+
425
+ function showSlide(n) {
426
+ // Ocultar slide actual
427
+ slides[currentSlide].classList.add('opacity-0');
428
+
429
+ setTimeout(() => {
430
+ slides[currentSlide].classList.add('hidden');
431
+
432
+ // Mostrar nuevo slide
433
+ currentSlide = n;
434
+ slides[currentSlide].classList.remove('hidden');
435
+
436
+ // Peque帽o retraso para que 'hidden' se quite antes de la transici贸n
437
+ setTimeout(() => {
438
+ slides[currentSlide].classList.remove('opacity-0');
439
+ }, 20);
440
+
441
+ // Actualizar contador
442
+ counter.textContent = `${currentSlide + 1} / ${totalSlides}`;
443
+
444
+ // Actualizar estado de botones
445
+ prevBtn.disabled = currentSlide === 0;
446
+ nextBtn.disabled = currentSlide === totalSlides - 1;
447
+
448
+ }, 400); // Coincide con la duraci贸n de la transici贸n (0.4s)
449
+ }
450
+
451
+ // Event Listeners para botones
452
+ nextBtn.addEventListener('click', () => {
453
+ if (currentSlide < totalSlides - 1) {
454
+ showSlide(currentSlide + 1);
455
+ }
456
+ });
457
+
458
+ prevBtn.addEventListener('click', () => {
459
+ if (currentSlide > 0) {
460
+ showSlide(currentSlide - 1);
461
+ }
462
+ });
463
+
464
+ // Event Listeners para teclado
465
+ document.addEventListener('keydown', (e) => {
466
+ if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
467
+ if (currentSlide < totalSlides - 1) {
468
+ e.preventDefault();
469
+ showSlide(currentSlide + 1);
470
+ }
471
+ } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
472
+ if (currentSlide > 0) {
473
+ e.preventDefault();
474
+ showSlide(currentSlide - 1);
475
+ }
476
+ }
477
+ });
478
+
479
+ // Inicializar (asegura que el primer slide sea visible)
480
+ slides[0].classList.remove('hidden');
481
+ slides[0].classList.remove('opacity-0');
482
+ prevBtn.disabled = true;
483
+ counter.textContent = `1 / ${totalSlides}`;
484
+ });
485
+ </script>
486
+
487
+ </body>
488
  </html>