-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (310 loc) · 21.5 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
<!DOCTYPE html>
<html lang="es">
<!-- COMIENZO DEL HEAD -->
<head>
<title>Inicio | Comunidad REEL</title>
<!-- Metadatos -->
<meta charset="UTF-8">
<meta name="keywords" content="Comunidad REEL, Educación en línea, E-learning, Educación a distancia, Educación híbrida, TIC, Diseño Didáctico Instruccional, Herramientas digitales, Recursos para la enseñanza virtual">
<meta name="description" content="Comunidad REEL o Recursos y Estrategias para la Educación en Línea es un proyecto abierto y sin fines de lucro, orientado a fomentar el uso responsable y significativo de las TIC en los distintos niveles educativos">
<meta name="author" content="Matías Álvarez Lutereau">
<meta name="copyright" content="REEL S.A.">
<meta name="robots" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Fin de Metadatos -->
<link rel="shortcut icon" href="./img/Favicon.webp" type="Favicon">
<link rel="stylesheet" href="./CSS/style.css">
</head>
<!-- FIN DEL HEAD -->
<!-- COMIENZO DEL BODY -->
<body>
<!-- COMIENZO DEL HEADER -->
<header>
<nav class="navbar navbar-expand-lg custom-header">
<!-- Contenedor header -->
<div class="container-fluid">
<!-- Logo header -->
<a href="index.html"><img class="logo" src="./img/Logo.webp" alt="Logo REEL"></a>
<!-- Fin de Logo header -->
<!-- Navbar-toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Fin de Navbar-toggler -->
<!-- Enlaces header -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/nosotros.html">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/recursos.html">Recursos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/estrategias.html">Estrategias</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./pages/contacto.html">Contacto</a>
</li>
</ul>
</div>
<!-- Fin de Enlaces header -->
</div>
<!-- Fin de Contenedor header -->
</nav>
</header>
<!-- FIN DEL HEADER -->
<!-- COMIENZO DEL MAIN -->
<main>
<!-- Carrusel -->
<div>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<!-- Item 1 del carrusel -->
<div class="carousel-item active">
<img src="./img/Im1.webp" class="d-block w-100" alt="Grupo de estudiantes en una cafeería">
<div class="carousel-caption d-none d-md-block">
<h5 class="alert alert-light" role="alert">Capacitación 2023</h5>
<p class="alert alert-light leyenda-slider" role="alert"><span class="position-absolute top-0 start-100 translate-middle badge text-bg-success">Próximamente</span>Talleres de Innovación Docente</p>
</div>
</div>
<!-- Fin de Item 1 del carrusel -->
<!-- Item 2 del carrusel -->
<div class="carousel-item">
<img src="./img/Im2.webp" class="d-block w-100" alt="Docente dictando clase presencial ante un grupo de alumnos">
<div class="carousel-caption d-none d-md-block">
<h5 class="alert alert-light" role="alert">Newsletter</h5>
<p class="alert alert-light leyenda-slider" role="alert"><span class="position-absolute top-0 start-100 translate-middle badge text-bg-primary">Octubre 2023</span>Monográfico: Técnicas de Investigación en TIC</p>
</div>
</div>
<!-- Fin de Item 2 del carrusel -->
<!-- Item 3 del carrusel -->
<div class="carousel-item">
<img src="./img/Im3.webp" class="d-block w-100" alt="Hombre joven en un bar trabajando con su PC">
<div class="carousel-caption d-none d-md-block">
<h5 class="alert alert-light" role="alert">18 de octubre, 16 horas, Argentina</h5>
<p class="alert alert-light leyenda-slider" role="alert"><span class="position-absolute top-0 start-100 translate-middle badge text-bg-danger">Vivo en Ig</span>Entrevista exclusiva a Federico Ponce</p>
</div>
</div>
<!-- Fin de Item 3 del carrusel -->
</div>
<!-- Controles carrusel -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- Fin de Controles carrusel -->
</div>
</div>
<!-- Fin de Carrusel -->
<!-- Banner página Inicio -->
<div>
<img class="banner inicio img-fluid" src="./img/Bannerinicio.webp" alt="Grupo de estudiantes frente a una computadora">
</div>
<!-- Fin de Banner página Inicio -->
<!-- Contenedor general página Inicio -->
<div class="container">
<!-- Sección principal -->
<div class="container seccion-principal">
<div class="row gx-5">
<!-- Video embebido -->
<div class="col-lg-6">
<div class="p-3">
<div>
<iframe class="video inicio" src="https://www.youtube.com/embed/IDR1TXEh4fA?si=20MljQyE5uLpcOyu" title="Educación a distancia" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Fin de Video embebido -->
<!-- Artículo sección principal -->
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="p-3">
<article class="articulo1">
<!-- Título artículo sección principal -->
<div>
<h1 class="titulo-articulo inicio">
¿Qué es la educación en línea o a distancia?
</h1>
</div>
<!-- Fin de Título artículo sección principal -->
<!-- Párrafo artículo sección principal -->
<div>
<p>
La educación en línea revolucionó el formato de enseñanza y aprendizaje que, por años, se ha utilizado en el mundo. Abrió las puertas a un sistema más dinámico, accesible y adaptado a las necesidades de la sociedad. Si hace una década te hubieran dicho que tendrías la oportunidad de desarrollar una profesión sin tener que moverte de casa, quizás no lo habrías creído. Hoy, este modelo llegó para quedarse y apunta a seguir escalando posiciones.
</p>
</div>
<!-- Fin de Párrafo artículo sección principal -->
<!-- Botón "Leer Más" artículo sección principal -->
<div class="leer-mas">
<a class="leer-mas" href="https://hotmart.com/es/blog/educacion-en-linea" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#76aa8f" class="plus-read bi bi-plus-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
</svg>Leer más</a>
</div>
<!-- Fin de Botón "Leer Más" artículo sección principal -->
</article>
</div>
</div>
<!-- Fin de Artículo sección principal -->
</div>
</div>
<!-- Fin de Sección principal -->
<!-- Título sección recursos para la educación en línea -->
<div>
<h2 class="titulo-seccion rel fw-bold">
Recursos para la Educación en Línea
</h2>
</div>
<!-- Fin de Título sección recursos para la educación en línea -->
<!-- Sección Recursos para la educación en línea -->
<div class="container">
<!-- Artículos sección recursos para la educación en línea -->
<div class="row gx-5">
<!-- Artículo 1 sección recursos para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://geekflare.com/es/best-note-taking-apps/" target="_blank"><img src="./img/A.webp" alt="Hombre joven escribiendo notas de colores sobre una pizarra"></a>
<span class="position-absolute badge inicio text-bg-success">Estudiantes</span>
<a class="enlace-titulo" href="https://geekflare.com/es/best-note-taking-apps/" target="_blank"><h3 class="h5">Apps para tomar notas</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 1 sección recursos para la educación en línea -->
<!-- Artículo 2 sección recursos para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://forwardteacher.com/2018/01/netflix-como-herramienta-educativa/" target="_blank"><img src="./img/B.webp" alt="Logo de Netflix en una PC de escritorio"></a>
<span class="position-absolute badge inicio text-bg-danger">Docentes</span>
<a class="enlace-titulo" href="https://forwardteacher.com/2018/01/netflix-como-herramienta-educativa/" target="_blank"><h3 class="h5">Usar Netflix en la EeL</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 2 sección recursos para la educación en línea -->
<!-- Artículo 3 sección recursos para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://unesdoc.unesco.org/ark:/48223/pf0000158068" target="_blank"><img src="./img/C.webp" alt="Notas escritas a mano colgadas en un panel de corcho"></a>
<span class="position-absolute badge inicio text-bg-success">Estudiantes</span>
<a class="enlace-titulo" href="https://unesdoc.unesco.org/ark:/48223/pf0000158068" target="_blank"><h3 class="h5">Gestión de proyectos</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 3 sección recursos para la educación en línea -->
</div>
<!-- Fin de Artículos sección recursos para la educación en línea -->
</div>
<!-- Fin de Sección recursos para la educación en línea -->
<!-- Título sección estrategias para la educación en línea -->
<div>
<h3 class="titulo-seccion rel2 fw-bold">
Estrategias para la Educación en Línea
</h3>
</div>
<!-- Fin de Título sección estrategias para la educación en línea -->
<!-- Sección Estrategias para la educación en línea -->
<div class="container">
<!-- Artículos sección estrategias para la educación en línea -->
<div class="row gx-5">
<!-- Artículo 1 sección estrategias para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://www.nodoka.co/apc-aa-files/319472351219cf3b9d1edf5344d3c7c8/manual-de-buenas-prcticas-para-la-educacin-virtual-itdupm.pdf" target="_blank"><img src="./img/A1.webp" alt="Mujer joven dando una clase virtual frente a una notebook"></a>
<span class="position-absolute badge inicio text-bg-danger">Docentes</span>
<a class="enlace-titulo" href="https://www.nodoka.co/apc-aa-files/319472351219cf3b9d1edf5344d3c7c8/manual-de-buenas-prcticas-para-la-educacin-virtual-itdupm.pdf" target="_blank"><h3 class="h5">Buenas prácticas en EeL</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 1 sección estrategias para la educación en línea -->
<!-- Artículo 2 sección estrategias para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://grupogeard.com/blog/trabajo-equipo-educacion-virtual-fomentarlo/" target="_blank"><img src="./img/A2.webp" alt="Grupo de niños frente a una notebook acompañados por una docente joven"></a>
<span class="position-absolute badge inicio text-bg-success">Estudiantes</span>
<a class="enlace-titulo" href="https://grupogeard.com/blog/trabajo-equipo-educacion-virtual-fomentarlo/" target="_blank"><h3 class="h5">EeL y trabajo en grupo</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 2 sección estrategias para la educación en línea -->
<!-- Artículo 3 sección estrategias para la educación en línea -->
<div class="col-sm-12 col-md-12 col-lg-4">
<div class="p-3">
<div class="elemento-seccion">
<a class="img-fluid imgseccion position relative" href="https://www.educativa.com/blog-articulos/que-es-la-gamificacion-y-cual-es-su-uso-en-e-learning/" target="_blank"><img src="./img/A3.webp" alt="Tablero con dados y fichas de colores"></a>
<span class="position-absolute badge inicio text-bg-danger">Docentes</span>
<a class="enlace-titulo" href="https://www.educativa.com/blog-articulos/que-es-la-gamificacion-y-cual-es-su-uso-en-e-learning/" target="_blank"><h3 class="h5">Gamificación, ¿sí o no?</h3></a>
</div>
</div>
</div>
<!-- Fin de Artículo 3 sección estrategias para la educación en línea -->
</div>
<!-- Fin de Artículos sección estrategias para la educación en línea -->
</div>
<!-- Fin de Sección estrategias para la educación en línea -->
</div>
<!-- Fin de Contenedor general página Inicio -->
<main>
<!-- FIN DEL MAIN -->
<!-- COMIENZO DEL FOOTER -->
<footer class="footer">
<div class="container-fluid">
<div class="row p-5 pb-4 text-white">
<!-- Logo y textos footer -->
<div class="col-xs-12 col sm-12 col-md-4 col-lg-4 text-center align-items-center">
<a href="index.html">
<img class="logo-footer" src="./img/Logo.webp" alt="Logo REEL">
</a>
<p class="h1">REEL</p>
<p class="text-white text-center">Copyright © 2023</p>
</div>
<!-- Fin de Logo y textos footer -->
<!-- Sección Sitio footer -->
<ul class="col-xs-12 col sm-12 col-md-4 col-lg-4 text-center">
<p class="h5 mt-5 mb-3">Sitio</p>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="index.html">Inicio</a>
</li>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="./pages/nosotros.html">Nosotros</a>
</li>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="./pages/contacto.html">Contacto</a>
</li>
</ul>
<!-- Fin de Sección Sitio footer -->
<!-- Sección Redes footer -->
<ul class="col-xs-12 col sm-12 col-md-4 col-lg-4 text-center">
<p class="h5 mt-5 mb-3">Redes</p>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="https://www.facebook.com/" target="_blank">Facebook</a>
</li>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="https://www.instagram.com/" target="_blank">Instagram</a>
</li>
<li class="mb-3 enlace-footer">
<a class="text-white text-decoration-none" href="https://twitter.com/?lang=es" target="_blank">Twitter/X</a>
</li>
</ul>
<!-- Fin de Sección Redes footer -->
</div>
</div>
</footer>
<!-- FIN DEL FOOTER -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
<!-- FIN DEL BODY -->
</html>