Documentos de Académico
Documentos de Profesional
Documentos de Cultura
PLATAFORMA EDUCATIVA
DEL MINISTERIO DE
EDUCACIÓN - EDUCACIÓN
REGULAR
USO DE LA PLATAFORMA
2
3.6.3 Barra Modo Colaborativo, Vista previa y Publicar (panel superior
derecha) 92
3.6.4 Configuración (esquina superior derecha) ............................................ 93
3.7. Crear una Presentación ............................................................................................ 94
3.8. Crear una Infografía con Genially ..................................................................... 102
Consignas para la elaboración de producto final ........................................................... 117
Glosario .............................................................................................................................................. 118
Bibliografía ........................................................................................................................................ 120
Presentación
2
Objetivo del curso
4
Tema 1: Matriculación de usuarios y
nociones de embebido
1.1 Estudiantes
Desde el inicio de la gestión actual, se han designado los cursos respectivos que
maestras y maestros regentan, dentro de la plataforma educativa del Ministerio
de Educación, junto con las cuentas de sus estudiantes.
5
Aquí tenemos la lista de estudiantes oficial, y podemos compararla con la lista
física que nos facilitan a principio de gestión.
En este punto, si por algún motivo, se desea incorporar a nuestro curso algún
estudiante que corresponda, realizamos los siguientes pasos:
6
Paso 3: Hacemos clic en el resultado deseado.
7
Finalmente tenemos el o los estudiantes matriculados. Observamos un pequeño
aviso en la parte superior.
8
Suspender a un estudiante, significa que, aunque esté matriculado, no puede
acceder al curso. Para ello seguir los siguientes pasos:
9
Con esta acción, la o el estudiante queda suspendido.
10
1.2 Contenido embebido
Embeber es un término ligado a la programación que se utiliza para hablar de la
acción de incrustar o insertar un contenido elaborado en un lenguaje de
programación, en otro lenguaje diferente. En el ámbito web, llamamos contenido
embebido, a aquel que está inscrustado o visible dentro de una página o espacio
web.
11
Así como este contenido dinámico, podemos insertar actividades interactivas,
videos, presentaciones, juegos, entre muchos otros contenidos embebidos.
1.2.1 HTML
HTML son las siglas en inglés para Hypertext Markup Language, que se traduce
como lenguaje de marcación de hipertexto.
HTML no es más que un lenguaje usado para crear páginas webs por medio de
marcadores (tags) y atributos, que definen cómo el contenido va a ser
presentado en un navegador web.
El lenguaje HTML está definido por lo que se llama etiquetas, cuyo nombre se
delimita usando los símbolos < y >, de la siguiente forma: <etiqueta>. La mayoría
de los tags deben ser cerradas, lo que se hace con una barra (/) entre el símbolo
< y el nombre de la etiqueta. Dichas etiquetas se utilizan para describir algo que
se quiere representar en una página web. Por ejemplo:
12
Elemento Etiqueta Descripción Ejemplo
Párrafo <p> Se usa para delimitar <p>Este es un párrafo
un párrafo. en HTML.</p>
Encabezado <h1>, Las etiquetas de <h1>Título
<h2>, cabecera, ayudan a principal</h1>
<h3>, crear una jerarquía <h2>1. Primer
<h4>, entre las partes del intertítulo</h2>
<h5>, <h6> texto, que lo separa
en secciones.
Imagen <img> Define la referencia <img src=“…” >
hacia una imagen. El
atributo “src” indica
la fuente de origen de
la imagen.
Ancla <a> El tag de anclaje <a href=“…”>Enlace al
define un enlace a curso</a>
otra página. El
atributo «href»
determina el destino
de este link.
Lista <ol> Se muestra una lista <ol>
ordenada ordenada con <li>SEO</li>
elementos <li>Links
numerados. Cada patrocinados</li>
13
elemento debe estar <li>Redes sociales</li>
etiquetado con el tag </ol>
<li> (elemento de la
lista).
Tabla <table> El tag de la tabla <table>
muestra información <tr>
en forma de filas y <th>Nombre</th>
columnas. Dentro del <th>Sobrenombre</th>
tag <table>, usamos </tr>
los tags <tr> para <tr>
representar las filas, <td>Jonah</td>
<th> para <td>Berger</td>
representar los </tr>
encabezados y <td> <tr>
para representar <td>Ann</td>
cada celda. <td>Handley</td>
</tr>
<tr>
<td>Neil</td>
<td>Patel</td>
</tr>
</table>
14
1.2.1.1 Etiqueta “IFRAME”
iFrame es la abreviatura de Inline Frame y es un elemento poderoso en el diseño
web. Probablemente hayas visto innumerables videos de YouTube insertados en
sitios distintos a YouTube. Un iFrame puede insertar todo tipo de medios.
Entonces si te preguntas cómo lo hicieron, lo más probable es que el diseñador
web haya puesto un elemento iFrame dentro de esa página.
Decíamos anteriormente que una etiqueta tiene también sus atributos. Veamos
un ejemplo para comprender la estructura de un IFRAME y sus atributos:
15
Un IFRAME(o marco interno) es definido desde donde se abre con su
etiqueta respectiva hasta donde se cierra con el agregado de la barra “/”.
Dentro un IFRAME básicamente tenemos el atributo SRC que define la
fuente de enlace web, es decir, que recurso o página web estoy
mostrando dentro del IFRAME.
El segundo atributo básico es el WIDTH, que significa el ancho que va a
tener este marco. Podemos variar estos valores hasta tener el ancho
deseado o colocar porcentajes.
El tercer atributo básico es el HEIGHT, que define la altura de este
marco. También podemos modificar sus valores hasta tener una altura
deseada.
Existen otros atributos que también enriquecen y especifican las
características de un marco, como por ejemplo en este caso,
ALLOWFULLSCREEN, que permite que el contenido del marco se
visualice en pantalla completa si este atributo es permitido por la fuente.
16
Un código de embebido HTML(también llamado código de inserción HTML)
tiene el siguiente aspecto:
17
1.2.3 Embebido en la plataforma educativa
Una vez teniendo nuestro código de embebido, debemos insertarlo en nuestro
curso en la plataforma educativa. Esto se realiza a través del recurso Etiqueta
comúnmente si se desea la inserción en la página principal del curso, o también a
través de cualquier recurso en el cual, al momento de llenar el formulario de
creación de ese recurso, tengamos la opción para insertar o editar código HTML.
También es una muy buena opción, usar el recurso “Página”.
Ejemplo 1.- Para embeber un video educativo en nuestro curso, seguimos los
siguientes pasos:
Paso 1.- Desde la página principal de nuestro curso, con la edición activada,
hacemos clic en “Añadir una actividad o un recurso” en la zona deseada.
18
Paso 2.- Para este ejemplo insertaremos un video educativo debajo del título de
un tema en nuestro curso. Usaremos el recurso “Etiqueta”.
19
Paso 3.- Presionamos el botón “Mostrar más botones”.
Paso 4.- Presionamos el botón “HTML” que permite mostrar la vista del
contenido en formato HTML.
20
Paso 6.- Ahora necesitamos copiar el código de inserción HTML. En este
ejemplo, este código lo obtenemos haciendo clic derecho sobre el video en
YouTube y escogiendo “Copiar código de inserción”.
21
Paso 7.- Utilizamos la combinación de teclas “CTRL + V” para pegar el código de
inserción HTML dentro de la etiqueta de párrafo.
Paso 8.- Hacemos clic en “Guardar cambios y regresar al curso” para crear el
recurso.
22
Con esto hemos generado un recurso de tipo embebido. Si deseamos mover este
recurso dentro de la página principal, hacemos clic en la parte superior izquierda
de este video, y jalamos hasta la zona deseada.
Ejemplo 2.- Para este ejemplo vamos a embeber un recurso interactivo acerca de
multiplicaciones, apoyándonos en la página web “Scratch” que contiene además
de un software para programación de historias, juegos y animaciones para niños,
un sinfín de proyectos abiertos que podemos usar. Seguimos los siguientes
pasos:
Paso 1.- Desde la página principal de nuestro curso, con la edición activada,
hacemos clic en “Añadir una actividad o un recurso” en la zona deseada.
23
Paso 2.- En este caso, ahora usaremos el recurso “Página”.
24
Paso 3.- Escribimos un título que se colocará encima del contenido embebido que
colocaremos.
Paso 4.- Nos desplazamos hacia abajo hasta encontrar la sección de “Contenido”
y presionamos el botón “Mas botones”.
Paso 5.- Presionamos el botón “HTML” que permite mostrar la vista del
contenido en formato HTML.
25
Paso 6.- Nos posicionamos entre la etiqueta de párrafo. Borramos la etiqueta
<br> para colocar allí el código de embebido.
26
Paso 7.- Ahora necesitamos copiar el código de embebido aquí. Para este
ejemplo, dentro de la página web de SCRATCH, en los proyectos abiertos,
tenemos este código a disposición.
Paso 9.- Finalmente hacemos clic en “Guardar cambios y mostrar” para visualizar
la creación de nuestro marco.
27
De esta forma, tenemos nuestro contenido embebido en el curso.
28
29
Tema 2: Creación de material
Audiovisual a través de Animaker
2.1 ¿Quién usa Animaker?
Las personas y las empresas que desean crear contenido visual asequible y
creativo por su cuenta y rápidamente.
www.animaker.es
30
Para poder ingresar podemos crear una cuenta en la opción registrase o
podemos enlazar nuestra cuenta de Gmail directamente con la plataforma
Animaker.
31
Podemos trabajar con una cuenta de Google o una cuenta de Facebook,
seleccionamos la primera opción.
32
Al culminar el proceso de autentificación cargará la siguiente ventana, un cuadro
de texto solicita un nombre para el equipo de trabajo.
Podemos rellenar este campo con el nombre que el usuario desee en este caso
escribimos UNEFCO y presionamos el botón crear.
Animaker sugiere trabajar con un equipo de trabajo para ello presenta una
opción de invitación de trabajo que se realiza directamente a los coreos
33
electrónicos, para ello se debe agregar los mismos en el siguiente formulario,
recordemos que este formulario es opcional por lo tanto presionamos el botón
saltar.
34
Podemos observar la primera ventana dentro de la plataforma Animaker.
35
Animaker trae consigo múltiples plantillas que trabajan con un formato pre
definido lo que conlleva una resolución dependiente de la plantilla al igual que
las animaciones.
Se sugiere trabajar con las plantillas como última opción ya que algunas pueden
contener elementos de paga.
36
Paso 2.- Seleccionamos un tamaño, debemos considerar el tipo de proyecto antes
de seleccionar un tamaño.
37
2.5 Estudio de animaciones
El estudio de animaciones cuenta con dos vistas principales “Ligera” y
“Completa” que podemos seleccionar dando clic en:
38
1.Escenas. -
Nos permite trabajar con múltiples clips que se denominan como escenas el
tiempo puede variar dependiendo de la configuración o el objetivo
2.Artículos. -
2.5.2 Completo
Esta opción de estudio es la más recomendable ya que trae consigo todas las
herramientas necesarias para poder producir material audiovisual.
39
1. Buscar
2. Artículos
3. Personajes
4. Objetos
5. Texto
40
6. Fondos
7. Imágenes
8. Videos
9. Música
10. Efectos
11. Archivos
41
2.6 Tipos de estilos para materia audiovisual
Existen múltiples tipos de estilos para material audiovisual en esta ocasión
mencionaremos los 9 más populares para definir el alcance de nuestro proyecto:
Acción en vivo:
Este estilo es el clásico y más “puro”, pues consiste en grabar objetos o personas
en ubicaciones reales, todo es “natural” y no hay nada creado digitalmente. Son
aquellos que puedes grabar con tu celular.
Animación:
Motion Graphics:
Videos de texto:
42
Dibujos en pizarrón blanco:
Este tipo de videos se hizo muy popular entre el 2013 y 2015 para explicar la vida
de personajes públicos. Consiste en dibujar en un pizarrón blanco la historia que
deseas contar, está acelerado para acortar su duración y tiene una voz en off que
es la que explica lo que ocurre en las ilustraciones.
Screencast:
Transmisión en vivo:
43
Transición de fotos:
44
Paso1.- Cargar las imágenes a la plataforma para ello me dirijo a la opción
archivos.
45
Paso 2.- agregar la imagen como fondo dentro de una escena, para ello
simplemente arrastramos la imagen a la escena o al lienzo blanco.
Paso 3.- cambiamos el tamaño de la imagen para que cubra todo el lienzo.
46
Observamos que podemos trabajar en el retoque da la imagen ya que trae
opciones como de contraste, filtros, animaciones y recorridos.
47
Recordemos que podemos escribir todo el texto en di referentes encabezados
esto para dar una mejor animación.
48
Múltiples efectos de animación surgirán, seleccionamos de izquierda a derecha.
49
La línea de tiempo determina el tiempo de animación transición o de efecto que
se realice, recordar esto es de vital importancia para cualquier objeto que se
desee animar.
Observamos la animación:
50
Paso 6.- Realizamos el mismo trabajo con el resto del texto
51
Colocamos la animación de manera consecutiva es decir una tras otra.
52
Alienaremos y cambiamos el tamaño y fuente de nuestro agrado, recordemos
que la animación deber pausada y clara.
53
Y podemos recorrer la línea de tiempo.
54
Paso 8.- Agregamos una nueva escena.
Ahora debemos realizar el mismo procedimiento que con la primera escena, pero
debemos considerar la transición de la primera escena y la segunda.
55
Paso 9.- Agregamos una imagen de fondo para luego trabajar a transición
Paso 10.- Agregamos el efecto de transición, para ello nos dirigimos a la opción:
Y seleccionamos el efecto que nos sugiera o sea más atrayente para el proyecto.
56
Ahora observamos que la animación se cargó correctamente para reproducir
todo el video y no solo una escena presionamos.
Muchas veces el texto pierde su impacto por las fotografías de fondo es por ello
que para esta escena que solo contiene un título agregaremos un fondo.
57
Paso 11.- En la herramienta objetos seleccionamos una figura.
58
Observamos los efectos.
59
Paso 14.- Seleccionamos el cuadro y nos surgirá la opción de agregar una entrada
como animación, debemos seleccionar una animación
60
Realizamos la misma acción con el texto y consecutivamente con nuestras
futuras escenas hasta culminar el proyecto como se observa en la siguiente
imagen.
61
2.8 Grabar videos y capturar pantalla
Para poder grabar un video o capturar la pantalla de nuestra computadora
debemos enlazarnos con una herramienta.
62
Seleccionamos el botón “Empiece a grabar Gratis”.
63
La interfaz de captura trabaja con las siguientes opciones:
Captura de pantalla
Cámara web
Captura de pantalla y cámara web
64
Pantalla
65
Cámara Web
Nos permite configurar la cámara en caso que trabajemos con una cámara
externa o un capturador.
66
Captura de pantalla y cámara web.
67
La resolución de captura al ser una cuenta gratuita nos permite una resolución
480 p.
Una vez grabado el video podemos proceder a la edición y descarga del mismo
observamos que nuestra ventana principal ya cuenta con un video al finalizar
nuestra captura.
68
Nos permitirá:
Eliminar
Editar
Descargar el archivo
69
Animaciones Estilo Cartoon
Este tipo de animaciones trabajan con imágenes que se basan en dibujos, por lo
tanto, las presentaciones se las realiza con avatars.
Nos dirigimos a:
70
Recordemos que algunos recursos de animaker son de paga por ello debemos
trabajar con recursos que no tengan la siguiente insignia.
71
Ahora lo ubicamos para dar un efecto de acercamiento.
72
Debemos poner una pequeña animación al texto para la introducción y recortar
la escena.
73
Creamos una nueva escena, el color de fondo se copiará por defecto esto permite
trabajar con una sola línea grafica o colores que serán propios de nuestro
proyecto.
74
En este caso con el mismo avatar plantearemos una pregunta introductoria o
problematizadora. Al igual que la anterior escena animaremos un texto con la
pregunta y cambiaremos la posición del avatar dar la impresión de una línea
grafica también podemos añadir más objetos como macetas mesas etc…
75
Podemos agregar ciertos objetos y animarlos a través de trayectorias.
Ahora agregamos una captura en una nueva escena, es decir que cargaremos la
captura de video que realizamos anteriormente.
76
Seleccionamos el video a cargar.
77
Ahora arrastramos sobre la escena a cargar.
El video cubrirá toda la escena por defecto, pero podemos reducir el tamaño del
video y ubicarlo según nuestras necesidades.
78
Por ultimo publicamos el proyecto, recordemos que podemos agregar música de
fondo a grabar nuestra propia introducción.
79
Por último, presionamos descargar, solo se puede descargar en resolución HD
ya que es una opción para cuentas gratuitas.
80
81
Tema 3: GENIALLY
3.1. ¿Qué es GENIALLY?
82
3.2. ¿Cómo funciona GENIALLY?
83
3.4. Ventajas
Dentro del plan gratuito podrá crear tantas imágenes como desee,
acceder a un sinfín de recursos (fondos, ilustraciones, iconos) y sin límite
de visualizaciones.
https://www.genial.ly/es
84
Dentro de la interfaz de Genially seleccione la opción “Crea ya tu cuenta gratis”,
para después registrar con una cuenta Gmail:
85
A continuación, seleccionamos el correo y la contraseña respectiva de la cuenta
Gmail:
86
Para finalizar la configuración de su perfil, seleccione el perfil o rol que tendrá en
Genial.ly:
87
Ahora ya puede comenzar a interactuar con la plataforma y crear
presentaciones, infografías, videos, etc. para complementar y dinamizar su clase:
88
3.6.1 Opciones de Página (zona inferior del editor)
CONTROL DESCRIPCIÓN
Añadir página: permite añadir más páginas a la
presentación, desde la propia plantilla, desde
otras plantillas o desde alguna de nuestras
creaciones.
Eliminar página: para eliminar la página actual
sobre la que estamos trabajando.
89
modificar los efectos y el modo de transición entre
páginas.
Navegación: para configurar el tipo de navegación
entre las páginas (que también se puede modificar
en la opción anterior).
Colores del documento: permite insertar color a la
página.
90
Recursos: dentro de esta pestaña podemos añadir iconos,
formas, líneas y flechas, ilustraciones, escenarios, mapas y
siluetas. Todas son editables en tamaño y color, a excepción de
las ilustraciones y escenarios, que solo lo son en tamaño.
91
podemos elegir entre eliminar, subir una imagen de nuestro
dispositivo, insertarla través de una URL, establecer un color
sólido o elegir una imagen de las galerías.
Páginas: desde esta sección podemos gestionar las páginas:
organizarlas, añadir más (de la misma plantilla, de otras
plantillas o de nuestras propias creaciones), eliminar, duplicar
y dar efectos.
92
3.6.4 Configuración (esquina superior derecha)
Dentro del apartado de configuración podemos gestionar diferentes aspectos:
93
3.7. Crear una Presentación
94
Para seleccionar una plantilla solo debe hacer clic sobre ella para realizar una pre
visualización de la presentación antes de iniciar la edición, haciendo clic sobre
“Usar esta plantilla”:
95
La edición de la presentación es simple, ya que al tener la plantilla base debemos
ir modificando los contenidos de acuerdo a la temática a desarrollar, haciendo
uso de las herramientas del panel izquierdo:
Para modificar el texto hacemos doble clic sobre el texto y comenzamos a escribir
el texto deseado, en la parte superior izquierda se habilita un menú
personalizado para modificar el estilo de la fuente, tamaño y posición como otras
opciones:
96
Para agregar algún elemento del panel izquierdo, ya sea imagen, video, recursos,
etc., solo debemos hacer clic sobre el elemento deseado y automáticamente pasa
a la plantilla de edición, dentro tiene la opción de usar los puntos de cada esquina
del elemento para modificar el tamaño del mismo, además en la parte superior
del elemento tiene dos opciones muy útiles para dinamizar su presentación:
97
Por ejemplo, si selecciona Mensaje, le visualizará un formulario para llenar la
información que sea mostrar:
98
Animación: Permite definir la animación, dirección y efecto del elemento.
99
Visualizará una ventana donde podrá ingresar el correo de la persona que le
colaborará en la edición:
10
0
Una vez se haya terminado la creación de la presentación está lista para
compartir el enlace o el código de embebido, para ello en la parte superior
derecha clic en “Listo”:
10
1
Se visualiza una ventana con varias opciones para compartir la presentación, ya
sea copiando el enlace o compartiéndolo directamente por alguna red social,
también está la opción de copiar el código HTML de embebido que puede usarse
en algunas plataformas como Moodle o Chamilo, entre otras.
Una infografía es la mejor forma de explicar algo de forma clara, concisa y visual.
Es muy adecuado para explicar de forma sencilla, conceptos o datos complejos.
También sirven para ayudar a contar una historia visualizada en imágenes o,
también, para hacer llegar información a los estudiantes rápidamente.
10
2
A continuación, buscamos la opción: Infografía Vertical:
10
3
Para que el programa busque plantillas gratuitas, desde la parte superior
marcamos solo: gratis.
10
4
Para que cargué la infografía, pulsamos la opción: Usar esta plantilla.
10
5
Se muestra el mismo editor del presentador, iniciamos con la edición del título de
la infografía:
Sustituimos el texto por la definición del tema que se está abordando en este
caso el Arte en la Historia. Al igual que un editor de texto, Genially permite
cambiar el color, tamaño y fuente del texto:
10
6
Con la tecla: delete o suprimir eliminamos la imagen y el cuadro de texto:
Una vez que se cambie el título del recuadro, usamos el smartblocks que se
encuentra en la barra lateral izquierda.
10
7
Elegimos el diagrama que puede acomodarse en nuestra infografía:
10
8
Con la opción Imagen insertamos una ilustración que acompañe al concepto del
Arte:
10
9
A continuación, colocamos un nombre que identifique a la infografía:
11
0
Ahora es momento de usar la infografía en el curso de Moodle, para ello
copiamos el enlace que se muestra en la figura anterior e ingresamos a nuestro
curso, por ejemplo:
11
1
Usando el recurso URL, pegamos el enlace de la infografía:
11
2
Si queremos incrustar(embeber) la infografía en código, debemos situarnos
antes sobre las propiedades de Genially y copiar dicho código desde la opción:
Insertar.
11
3
Después de colocar un nombre a la página nos situamos en la parte de contenido,
seleccionando la opción más botones:
11
4
Ahora procedemos a pegar el código de inserción de la infografía:
11
5
11
6
Consignas para la elaboración de producto final
Usted deberá explicar cada uno de estos puntos, a través de un documento Word
en el cual utilizará el formato que usted vea pertinente, adjuntando capturas de
imágenes para verificar lo trabajado.
11
7
Glosario
Plantilla: Una plantilla en el ámbito web se utiliza como base para crear varias
páginas con un diseño similar pero con distinto contenido. Un administrador de
la web puede diseñar las plantillas propias de su sitio web y luego distribuirlas
entre los contribuyentes para que las utilicen en el diseño de páginas HTML. De
esta forma se asegura cierta uniformidad en las páginas de un sitio web.
Tutor virtual: Un tutor virtual es una persona que enseña a otros en un ambiente
en el que tanto el tutor como los alumnos están separados físicamente. El tutor
guía a los estudiantes para que alcancen sus objetivos a través de la construcción
de aprendizaje, el trabajo autónomo y colaborativo y la auto reflexión.
11
8
Interfaz: Cuando se habla de sitios web, se denomina interfaz al conjunto de
elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio
Web que está visitando. Por lo mismo, se considera parte de la interfaz a sus
elementos de identificación, de navegación, de contenidos y de acción.
11
9
Bibliografía
Cebreiro Lopez, B., Fernández Morante, M. C., & Arribi Vilela, J. (2014). Moodle:
¿la navaja suiza? Revista de investigación en educación.
González Montoto, A., Domínguez Hernández, L., Fonseca González, Y., & Vidal
Larramendi, J. (2007). Mi Moodle en casa. Revista Cubana de Información en
Ciencias de la Salud.
12
0
Ortiz, A. M., Hernández, C. P., & Beñuelos, E. D. (2013). Utilización de moodle
como plataforma para la investigación educativa. Pixel-Bit: Revista de medios y
educación.
12
1