-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
433 lines (416 loc) · 20 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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Curso de Django y React</title>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<style>
/* Estilos personalizados */
.presentation-container {
transition: all 0.3s ease;
}
.presentation-container:hover {
transform: translateY(-5px);
}
</style>
<!-- Agrega el script de importación de JavaScript -->
<script src="script.js" defer></script>
</head>
<body class="bg-gray-100">
<header class="bg-blue-500 py-4">
<div class="container mx-auto flex justify-between items-center px-4">
<h1 class="text-white text-3xl font-bold">
¡Bienvenido al Curso de Django y React!
</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="text-white">Inicio</a></li>
<li>
<a href="actividades.html" class="text-white">Actividades</a>
</li>
<li><a href="acerca.html" class="text-white">Acerca</a></li>
<li><a href="contacto.html" class="text-white">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto my-8">
<div class="text-gray-700 mb-8">
<h2
class="text-3xl font-bold mb-4 cursor-pointer"
onclick="toggleInfo()"
>
Curso de Django y React <span id="arrow" class="ml-2">▶</span>
</h2>
<div id="info" style="display: none">
<p style="text-align: justify">
El curso de Django y React te ofrece una experiencia educativa
única, diseñada para llevar tus habilidades al siguiente nivel. Con
un enfoque práctico y clases demostrativas, te sumergirás en el
mundo del desarrollo web utilizando tecnologías modernas como
Python, Django, React, Html5, Css3, JavaScript y mucho más.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">Metodología:</h3>
<ul class="list-disc pl-6 mb-6">
<li>Clases virtuales interactivas.</li>
<li>Prácticas con proyectos reales.</li>
<li>Acceso a código de proyectos demostrativos.</li>
</ul>
<h3 class="text-xl font-bold mt-6 mb-2">Objetivo Principal:</h3>
<p style="text-align: justify">
Capacitar a los participantes en el desarrollo web utilizando el
framework Django y la biblioteca React, proporcionando las
habilidades necesarias para construir aplicaciones web modernas y
escalables.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">Objetivos Secundarios:</h3>
<ul class="list-disc pl-6 mb-6">
<li>
Comprender los principios de la programación orientada a objetos
(POO).
</li>
<li>
Dominar el uso de Git y Github para el control de versiones.
</li>
<li>
Familiarizarse con Docker para la creación y gestión de entornos
de desarrollo.
</li>
<li>
Adquirir conocimientos sólidos sobre Django, desde la creación de
modelos hasta la implementación de vistas y plantillas.
</li>
<li>
Dominar el desarrollo de API REST con Django Rest Framework.
</li>
<li>
Obtener nociones básicas de Html5, Css3, JavaScript, Node y NPM
para aprender React
</li>
<li>
Desarrollar habilidades en la creación de aplicaciones web
interactivas utilizando React.
</li>
<li>Aprender a consumir API de Django Rest Framework con React.</li>
<li>
Aplicar todos los conocimientos adquiridos en la elaboración de un
proyecto final
</li>
</ul>
<h3 class="text-xl font-bold mt-6 mb-2">
¿Por qué seguir este curso?
</h3>
<p style="text-align: justify">
Este curso proporcionará a los participantes las habilidades
prácticas necesarias para desarrollar aplicaciones web completas
utilizando tecnologías modernas como Django y React. Estas
habilidades son altamente demandadas en la industria de desarrollo
web y permitirán a los participantes construir proyectos reales y
avanzar en sus carreras profesionales.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">
¿Qué aprenderé durante este curso?
</h3>
<ul class="list-disc pl-6 mb-6">
<li>Desarrollar aplicaciones web utilizando Django y React.</li>
<li>
Utilizar eficientemente Git y Github para el control de versiones.
</li>
<li>Crear y gestionar entornos virtuales con virtualenv.</li>
<li>
Comprender el uso y eficiencia de Docker en el desarrollo web.
</li>
<li>Diseñar y trabajar con modelos de bases de datos en Django.</li>
<li>Implementar vistas y plantillas en sus proyectos web.</li>
<li>Desarrollar API REST con Django Rest Framework.</li>
<li>Integrar React.js en proyectos web.</li>
<li>Consumir API de Django Rest Framework con React.</li>
<li>
Elaborar un proyecto final de una tienda virtual, aplicando todos
los conceptos aprendidos.
</li>
</ul>
<h3 class="text-xl font-bold mt-6 mb-2">Metodología:</h3>
<p>
La metodología del curso se basará en el enfoque "aprender
haciendo", con un énfasis práctico en la resolución de problemas y
la creación de proyectos reales. Se proporcionarán ejercicios
prácticos y proyectos que los participantes desarrollarán durante
las sesiones.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">Modalidad Virtual:</h3>
<p style="text-align: justify">
El curso se llevará a cabo de manera virtual a través de plataformas
de videoconferencia y un entorno de aprendizaje en línea.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">
Recursos Hardware y Software:
</h3>
<p style="text-align: justify">
Hardware: PC o laptop con capacidad suficiente para ejecutar
entornos de desarrollo Django y React. Software: Python, Node, NPM,
editor de código (por ejemplo, VSCode), Navegador Web, Git, Docker.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">Conocimientos Previos:</h3>
<p style="text-align: justify">
Conocimientos básicos de programación en Python y comprensión
general de Html5 y Css3.
</p>
<h3 class="text-xl font-bold mt-6 mb-2">Proyecto Final:</h3>
<p style="text-align: justify">
Desarrollo de una tienda virtual completa que incluya
funcionalidades como registro de usuarios, gestión de productos,
carrito de compras y pago en línea. El proyecto se evaluará en
función de su funcionalidad, diseño y buenas prácticas de
desarrollo.
</p>
</div>
<h2 class="text-3xl font-bold mb-4">Presentaciones</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Presentación General del Curso -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Bienvenida</h3>
<img
src="img/python-logo.png"
alt="Python"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4">
En esta presentación tendrá una explicación general de cada uno de
los temas que se tratarán en este curso
</p>
<a
href="presentations\00-bienvenida\index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 1: Python Básico -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Python Básico</h3>
<img
src="img/python-logo.png"
alt="Python"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4">
En esta presentación, cubriremos los conceptos básicos de Python,
incluyendo su sintaxis, variables, tipos de datos y estructuras de
control.
</p>
<a
href="presentations\01-introduccion-python\index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 2: Python Intermedio -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Python Intermedio</h3>
<img
src="img/python-logo.png"
alt="Python"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, profundizaremos en el uso de Python,
abordando temas como listas, tuplas, diccionarios y conjuntos.
</p>
<a
href="presentations\02-poo-python\index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 4: Git y Github-->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Git y Github</h3>
<table class="mx-auto mb-4">
<tr>
<td>
<img
src="img/github-logo.png"
alt="GitHub"
class="w-10 h-10"
/>
</td>
</tr>
</table>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, aprenderemos sobre el control de versiones
con Git y Github, así como el uso de contenedores con Docker para
el desarrollo de software.
</p>
<a
href="presentations\04-introduccion-git-github\index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 4: Docker -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Docker</h3>
<table class="mx-auto mb-4">
<tr>
<td>
<img
src="img/docker-logo.png"
alt="Docker"
class="w-10 h-10"
/>
</td>
</tr>
</table>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, exploraremos el uso de contenedores con
Docker para el desarrollo de software, volumenes para persistir los datos.
</p>
<a
href="presentations/05-docker/index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 5: Django - Fundamentos -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Django - Fundamentos</h3>
<img
src="img/django-logo.jpg"
alt="Django"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, nos sumergiremos en los fundamentos del
framework web Django, incluyendo entornos virtuales, la
configuración inicial del proyecto, apps, settings.
</p>
<a
href="presentations/06-django/index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 6: Html5 -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Html5</h3>
<img
src="img/html5.png"
alt="Html5"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, exploraremos los fundamentos de la creación
de páginas web, incluyendo HTML5.
</p>
<a
href="presentations/07-html/index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 6: Html5 -->
<div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Css3</h3>
<img
src="img/css.png"
alt="Css3"
class="mx-auto w-20 h-20 mb-4"
/>
<p class="text-gray-700 mb-4" style="text-align: justify">
En esta presentación, exploraremos los fundamentos de la creación
de páginas web, incluyendo CSS3.
</p>
<a
href="presentations/08-css/index.html"
target="_blank"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300"
>Ver presentación</a
>
</div>
<!-- Presentación Modulo 7: HTML5, CSS3, JavaScript -->
<!-- <div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">HTML5, CSS3, JavaScript</h3>
<img src="img/html-css-javascript-logo.png" alt="HTML5, CSS3, JavaScript" class="mx-auto w-20 h-20 mb-4">
<p class="text-gray-700 mb-4" style="text-align: justify;">En esta presentación, exploraremos los fundamentos
de la creación de páginas web, incluyendo HTML5 para la estructura, CSS3 para el diseño y JavaScript para la
interactividad.</p>
<a href="#"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300">Ver
presentación</a>
</div> -->
<!-- Presentación Modulo 8: Node.js y NPM -->
<!-- <div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Node.js y NPM</h3>
<table class="mx-auto mb-4">
<tr>
<td><img src="img/node-npm.png" alt="Node.js" class="mx-auto w-20 h-20 mb-4"></td>
<td><img src="img/npm-logo.svg" alt="NPM" class="mx-auto w-20 h-20 mb-4"></td>
</tr>
</table>
<p class="text-gray-700 mb-4" style="text-align: justify;">En esta presentación, nos introduciremos a Node.js
y NPM, dos herramientas fundamentales para el desarrollo de aplicaciones web en el entorno del lado del
servidor.</p>
<a href="#"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300">Ver
presentación</a>
</div> -->
<!-- Presentación Modulo 9: React - Fundamentos / Intermedio -->
<!-- <div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">React - Fundamentos/Intermedio</h3>
<img src="img/react-logo.png" alt="React" class="mx-auto w-20 h-20 mb-4">
<p class="text-gray-700 mb-4" style="text-align: justify;">En esta presentación, exploraremos los fundamentos
e intermedios de React.js, un framework de JavaScript para construir interfaces de usuario interactivas.</p>
<a href="#"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300">Ver
presentación</a>
</div> -->
<!-- Presentación Modulo 10: React - Desarrollo Avanzado -->
<!-- <div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">React - Desarrollo Avanzado</h3>
<img src="img/react-logo.png" alt="React" class="mx-auto w-20 h-20 mb-4">
<p class="text-gray-700 mb-4" style="text-align: justify;">En esta presentación, nos adentraremos en el
desarrollo avanzado de aplicaciones con React.js, incluyendo manejo avanzado de estado, navegación y otras
características avanzadas.</p>
<a href="#"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300">Ver
presentación</a>
</div> -->
<!-- Presentación Modulo 11: Proyecto Final Django -->
<!-- <div class="bg-white p-6 shadow-md rounded-lg text-center">
<h3 class="text-2xl font-semibold mb-4">Proyecto Final Django</h3>
<table class="mx-auto mb-4">
<tr>
<td><img src="img/django-logo.jpg" alt="Django" class="mx-auto w-20 h-20 mb-4"></td>
<td><img src="img/react-logo.png" alt="React" class="mx-auto w-20 h-20 mb-4"></td>
</tr>
</table>
<p class="text-gray-700 mb-4" style="text-align: justify;">En esta presentación, abordaremos el proyecto final
del curso, donde aplicaremos todos los conocimientos adquiridos en el desarrollo de una aplicación web
completa utilizando Django.</p>
<a href="#"
class="block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded hover:shadow-md transition duration-300">Ver
presentación</a>
</div> -->
</div>
</div>
</main>
<footer class="bg-gray-800 text-white py-4">
<div class="container mx-auto text-center">
<p class="text-sm">
© 2024 Curso de Django y React. Todos los derechos reservados.
</p>
</div>
</footer>
</body>
</html>