1
Laboratorio 3
Alejandra Stephania Letona López
Centro Cultural Sagrada Familia No. 1
23/08/2024
2
Laboratorio 3
Aula Virtual
¿Qué es?
Es un salón de clases, pero en línea. Es un espacio donde podemos entrar
desde cualquier lugar con internet y tomar clases, hacer tareas, y participar en
actividades, todo desde nuestra computadora o celular.
¿Para qué sirve?
Un aula virtual sirve para facilitar el aprendizaje en línea.
1. Tomar Clases Online: Puedes asistir a clases desde casa o cualquier
lugar con internet.
2. Acceder a Material de Estudio: Todos los documentos, videos y recursos
necesarios están disponibles para que los consultes en cualquier momento.
3. Hacer Tareas y Exámenes: Puedes enviar tus trabajos y hacer exámenes
en línea, sin necesidad de estar presente físicamente.
4. Interactuar con Compañeros y Profesores: Puedes participar en
discusiones, enviar mensajes y colaborar con tus compañeros, así como recibir
feedback de tus profesores.
5. Organizar tu Tiempo: Te da flexibilidad para gestionar tu propio ritmo de
estudio y adaptar el aprendizaje a tu horario.
CNB
3
¿Qué es?
El CNB, o Currículo Nacional Base, del Ministerio de Educación de Guatemala es
un documento que define qué deben aprender los estudiantes en cada grado y
nivel educativo. Es como una guía para los maestros que les dice los temas y
habilidades que deben enseñar en sus clases, así como los objetivos que los
estudiantes deben alcanzar.
¿Por qué es importante su implementación?
La implementación del CNB es importante por varias razones:
1. Uniformidad Educativa
2. Calidad de la Educación
3. Orientación para los Docentes
4. Desarrollo de Competencias
5. Adaptación a Necesidades
6. Evaluación y Mejora
¿Cómo puedo ayudar al sistema educativo creando plataformas virtuales de
este tipo?
1. Desarrolla Contenidos Educativos
2. Diseña una Plataforma de Aprendizaje
3. Implementa Herramientas de Comunicación
4. Ofrece Capacitación a Docentes
4
5. Integra Recursos Adaptativos
6. Fomenta la Participación Activa
7. Recoge Feedback
8. Asegura la Accesibilidad
9. Colabora con Instituciones Educativas
10. Promueve el Uso de Recursos Abiertos
Algoritmo de una Plataforma Educativa Web
1. Definir Requerimientos:
- Identificar usuarios (estudiantes, profesores, administradores).
- Determinar funcionalidades (cursos, materiales, interacción).
2. Diseñar la Plataforma:
- Crear interfaz y experiencia de usuario.
- Diseñar estructura de base de datos.
3. Desarrollar Funcionalidades:
- Registro y Login: Crear cuentas y autenticación.
- Gestión de Cursos: Crear, editar, y asignar cursos y materiales.
- Acceso a Contenidos: Proveer materiales educativos y ejercicios.
- Interacción: Foros, chats, y mensajería.
5
- Evaluación: Exámenes, seguimiento del progreso, y reportes.
4. Implementar y Probar:
- Realizar pruebas de funcionalidad y usabilidad.
5. Desplegar y Mantener:
- Publicar la plataforma y gestionar mantenimiento.
- Recopilar feedback y mejorar continuamente.
¿Cómo podemos ayudar al desarrollo del país creando plataformas digitales
educativas?
1. Acceso Ampliado: Llega a áreas remotas y mejora el acceso a la educación.
2. Calidad Educativa: Ofrece recursos actualizados y métodos innovadores.
3. Reducción de Brechas: Igualdad de oportunidades educativas para todos.
4. Aprendizaje Continuo: Facilita la educación a lo largo de la vida.
5. Desarrollo de Habilidades: Mejora las competencias digitales de estudiantes y
docentes.
6. Eficiencia Administrativa: Optimiza la gestión de cursos y evaluaciones.
7. Inclusión: Adapta recursos para estudiantes con necesidades especiales.
6
7
Código de Programación
Index
<!DOCTYPE html>
<html>
<head>
<title>Centro Cultural Sagrada Familia 1</title>
<meta charset="UTF-8">
<link rel="icon" href="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTufmOo2oqmeqptVBBNOnw5FQpErSaJF
Qu-RA&s">
</head>
<frameset cols="20%,80%" frameborder="0">
<frame src="Página 1.html">
<frame src="Página principal.html" name="ventanadinamica">
</frameset>
</frameset>
<noframes>
<p>Su navegador no soporta frames</p>
</noframes>
8
</html>
Menú Hamburguesa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Hamburguesa</title>
<link rel="stylesheet" href="Grados.css">
</head>
<body>
<div class="menu-container">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">☰</label>
<div class="menu">
<ul>
<li><a href="Materias 1ro Básico.html">1° primaria</a></li>
<li><a href="Materias 2do Primaria.html">2° primaria</a></li>
9
<li><a href="Materias 3ro Primaria.html">3° primaria</a></li>
<li><a href="Materias 4to Primaria.html">4° primaria</a></li>
<li><a href="Materias 5to Primaria.html">5° primaria</a></li>
<li><a href="Materias 6to Primaria.html">6° primaria</a></li>
</ul>
</div>
<div class="image-container">
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTufmOo2oqmeqptVBBNOnw5FQpErSaJF
Qu-RA&s" alt="Imagen pequeña">
</div>
</div>
</body>
</html>
Página Principal
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
10
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Principal</title>
<link rel="stylesheet" href="Página principal.css">
</head>
<body>
<header class="header">
<h1>Contactanos</h1>
<div class="social-media">
<a href="https://wa.me/50224484100" target="_blank"><img
src="https://cdn-icons-png.freepik.com/256/3536/3536445.png?semt=ais_hybrid"
alt="WhatsApp"></a>
<a
href="https://www.facebook.com/centro.cultural.sagrada.familia.1?mibextid=LQQJ4
d" target="_blank"><img
src="https://static.vecteezy.com/system/resources/previews/016/716/447/non_2x/fa
cebook-icon-free-png.png" alt="Facebook"></a>
<a
href="https://www.instagram.com/colsagradafamilia1?igsh=MmU1b2R4Y2RwNzJu
" target="_blank"><img
src="https://cdn.pixabay.com/photo/2021/06/15/12/14/instagram-
6338393_1280.png" alt="Instagram"></a>
11
<a href="https://www.tiktok.com/@colegiosagradafamilia1gt"
target="_blank"><img src="https://cdn.pixabay.com/photo/2021/06/15/12/28/tiktok-
6338429_640.png" alt="TikTok"></a>
</div>
<p><a
href="https://maps.app.goo.gl/eJPCoZvsWcrUiQGY6?g_st=com.google.maps.previ
ew.copy" target="_blank">Dirección del colegio</a></p>
</header>
<div class="image-section">
<img src= "C:\Users\Stephania Letona\Desktop\Imagenes - Laboratorio
3\Clases Virtuales.png" alt="Bienvenida">
</div>
<div class="image-section">
<img src="C:\Users\Stephania Letona\Desktop\Imagenes - Laboratorio
3\Visión.png" alt="Visión del Colegio">
</div>
<div class="image-section">
<img src="C:\Users\Stephania Letona\Desktop\Imagenes - Laboratorio
3\Misión.png" alt="Misión del Colegio">
</div>
12
<a href="Abecedario 1ro.html" target="mainframe"></a>
</body>
</html>
Materias
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flash Cards de Materias</title>
<link rel="stylesheet" href="Materias 1ro Básico.css">
</head>
<body>
<div class="flash-cards">
<div class="card comunicacion1">
<a href="Comunicación y Lenguaje 1ro.html">
<h3>Comunicación y Lenguaje</h3>
</a>
13
</div>
<div class="card comunicacion2">
<a href="comunicacion2.html">
<h3>Kaqchikel</h3>
</a>
</div>
<div class="card comunicacion3">
<a href="comunicacion3.html">
<h3>Inglés</h3>
</a>
</div>
<div class="card matematicas">
<a href="matematicas.html">
<h3>Matemáticas</h3>
</a>
</div>
<div class="card medio-social">
<a href="medio_social.html">
14
<h3>Medio Social y Natural</h3>
</a>
</div>
<div class="card expresion-artistica">
<a href="expresion_artistica.html">
<h3>Expresión Artística</h3>
</a>
</div>
<div class="card educacion-fisica">
<a href="educacion_fisica.html">
<h3>Educación Física</h3>
</a>
</div>
<div class="card formacion-ciudadana">
<a href="formacion_ciudadana.html">
<h3>Formación Ciudadana</h3>
</a>
</div>
15
</div>
</body>
</html>
Unidades
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unidades de Matemáticas</title>
<link rel="stylesheet" href="Comunicación y Lenguaje 1ro.css">
</head>
<body>
<div class="flash-cards">
<div class="card">
<a href="L1-1ro-1.html">
<h3>Unidad 1: Introducción al Lenguaje</h3>
</a>
16
</div>
<div class="card">
<a href="unidad2.html">
<h3>Unidad 2: Desarrollo de la Lectura</h3>
</a>
</div>
<div class="card">
<a href="unidad3.html">
<h3>Unidad 3: Expresión Escrita</h3>
</a>
</div>
<div class="card">
<a href="unidad4.html">
<h3>Unidad 4: Comunicación Oral</h3>
</a>
</div>
</div>
</body>
17
</html>
Temas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unidad 1</title>
<link rel="stylesheet" href="L1-1ro-1.css">
</head>
<body>
<div class="flash-cards">
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Abecedario 1ro.html" target="ventanadinamica">
<h3>El abecedario</h3>
</a>
</div>
18
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Sonido de las Letras 1ro.html" target="ventanadinamica">
<h3>Sonido de las letras</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Escritura de Letras 1ro.html" target="ventanadinamica">
<h3>Escritura de Números y Letras</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Palabras Simples 1ro.html" target="ventanadinamica">
<h3>Palabras Básicas</h3>
</a>
19
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Vocales y Consonantes 1ro.html" target="ventanadinamica">
<h3>Vocales y Consonantes</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Fonemas y Grafemas 1ro.html" target="ventanadinamica">
<h3>Fonemas y Grafemas</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Los Nombres Propios 1ro.html" target="ventanadinamica">
<h3>Los Nombres Propios</h3>
20
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="La Estructura de la Palabra 1ro.html" target="ventanadinamica">
<h3>La Estructura de la Palabra</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Uso de las Mayúsculas 1ro.html" target="ventanadinamica">
<h3>Uso de las Mayúsculas</h3>
</a>
</div>
<div class="card" style="background-image:
url('https://i.pinimg.com/564x/17/a1/c5/17a1c5f750f804ab3a493ceba17caffd.jpg');"
>
<a href="Palabras con Significado 1ro.html" target="ventanadinamica">
21
<h3>Palabras con Significado</h3>
</a>
</div>
</div>
</body>
</html>
Desarrollo del Tema
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abecedario</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
22
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #ffffff;
h1 {
color: #d0200f;
.video-container {
width: 80%;
max-width: 800px;
margin: 20px 0;
iframe {
width: 100%;
height: 450px;
23
border: none;
</style>
</head>
<body>
<h1>Abecedario</h1>
<div class="video-container">
<iframe src="C:\Users\Stephania Letona\Desktop\Videos - Laboratorio
3\Abecedario.mp4" allowfullscreen></iframe>
</div>
</body>
</html>
24
Conclusión
Las plataformas digitales educativas son clave para mejorar el acceso y la calidad
de la educación, promoviendo igualdad de oportunidades y contribuyendo al
desarrollo sostenible del país.
25
Comentario Personal
Las plataformas digitales educativas tienen el poder de transformar la manera en
que aprendemos y enseñamos. Son una herramienta increíble para cerrar brechas
de acceso, adaptarse a las necesidades individuales y preparar a las personas
para un futuro más tecnológico e inclusivo. Personalmente, me entusiasma ver
cómo pueden hacer que la educación sea más accesible y efectiva para todos, sin
importar dónde se encuentren.
