Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

24. Curso Moodle para tiempos de Crisis: Mapear imagen de navegación

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 21 de marzo de 2020 por Daniel E.

2157 visualizaciones

Vamos a aprender a mejorar la navegación y a hacer más atractivas las aulas virtuales mediante el mapeo de una imagen.

Más información Transcripción

Descargar la transcripción

Vamos a aprender a mejorar la navegación de nuestros alumnos por el aula virtual y a intentar que sea un poquito más atractiva. 00:00:00
La idea final será conseguir que los alumnos cuando entren vean esto, un calendario, y todos los días o todos los temas o todas las unidades didácticas de esta manera. 00:00:09
En nuestro caso, los días, ellos podrían bajar, ir al día que le corresponda, o la idea de introducir el calendario es que puedan pinchar en un día y les aparezca automáticamente los contenidos de ese día y ya puedan trabajar en ellos. 00:00:20
Vamos a ver cómo se hace esto. 00:00:36
Vamos a aprender a mapear esa imagen e incluirla aquí en el inicio de nuestra aula virtual. 00:00:40
esta es una aula virtual, como veis estamos logueados como estudiante 00:00:44
y el estudiante cuando entra, pues tiene que ir bajando 00:00:49
a encontrar su día, el día que corresponda 00:00:52
pinchar para ver todas las tareas 00:00:54
como van pasando muchos días, poco a poco va a haber muchas más tareas 00:00:56
en otro tutorial os proponíamos 00:01:01
comprimir 00:01:04
estas secciones, es decir, que en vez de que se vean 00:01:06
todas las secciones en una página, que se vea reducido 00:01:10
Os lo recuerdo muy rápido. Se trataba de ir a los ajustes de este aula, editar ajustes, y en formato de curso, en vez de mostrar todas las secciones en una página, decíamos mostrar una sección por página. 00:01:13
y así el alumno cuando entra puede navegar de una manera más sencilla 00:01:34
ahí lo vemos, puede navegar de esta manera y ya 00:01:40
ir al día que le corresponde, también puede navegar por el lateral 00:01:47
por este lateral, y vamos a ofreceros una tercera 00:01:52
manera de navegar, que bueno, puede ser más visual 00:01:56
y evita hacer todo este scroll, y vamos a añadir 00:01:59
una actividad, un recurso, que va a ser el recurso etiqueta 00:02:06
nos va a permitir introducir una imagen 00:02:10
sin tener que introducir texto, ni título, ni nada 00:02:14
agregamos 00:02:16
en el cuadro de texto 00:02:17
añadimos imagen 00:02:19
examinamos repositorios 00:02:21
examinamos 00:02:24
guardamos la imagen como calendario 00:02:26
y subimos el archivo 00:02:29
el tamaño 00:02:31
es interesante que sea 00:02:35
entre 640 y 420 00:02:38
más o menos 00:02:40
rondando ese tamaño. 00:02:41
Tendríamos que haberlo configurado antes para que se ciña eso 00:02:44
y se ajuste perfectamente a la página. 00:02:48
Vemos aquí abajo la imagen que vamos a subir, 00:02:50
que es un calendario de marzo, donde hemos incluido también un foro. 00:02:53
Ahí lo tenemos. 00:02:58
Guardamos cambios. 00:03:01
Y ahí tenemos el calendario. 00:03:05
Luego lo pondremos en el centro y podremos hacerlo más grande si queremos. 00:03:06
La idea es, como hemos visto en la introducción, 00:03:10
que al pulsar sobre cada día 00:03:13
le aparezca al alumno solo los contenidos de ese día 00:03:15
o al pulsar sobre el foro se les abra el foro de dudas 00:03:18
vamos a ver cómo podemos hacerlo 00:03:21
hay tres opciones 00:03:25
las dos primeras las podemos encontrar 00:03:27
si buscamos Tecnos Rurales 00:03:30
en la página del proyecto de innovación del colegio 00:03:32
en recursos, software libre, guía para migrar a Max 00:03:34
es una guía para migrar a un centro 00:03:38
o cualquier persona que quiera usar la distribución Max de EducaMadrid 00:03:43
puede usarla paso a paso. Y en ella hemos incluido también 00:03:48
tutoriales de edición de imágenes, por ejemplo. Y hay un capítulo 00:03:51
de mapear imágenes. Ahí explicamos 00:03:55
qué es mapear una imagen. Y ofrecemos 00:03:59
dos tutoriales. Uno para hacerlo con GIMP, software libre multiplataforma 00:04:04
muy sencillo. Y otro es, otra manera de hacerlo 00:04:07
sería usando el recurso H5P, una categoría que se llama Hotspots, puntos calientes dentro de una imagen. 00:04:11
Aquí disponéis de esos dos tutoriales. 00:04:20
Voy a explicar una tercera manera que es bastante rápida también. 00:04:23
Esta tercera opción consiste en ir a una página que se llama html-medio-map.com y realizar allí el mapeo. 00:04:27
Lo primero que nos pide es subir la URL de la imagen que queremos mapear. 00:04:35
Para eso tenemos que ir a nuestra aula virtual, situarnos encima de la imagen, pulsar el botón derecho y copiar la ruta de la imagen. 00:04:39
Volvemos a la página de HTML y pegamos. 00:04:52
Pinchamos en Start y ahí tenemos la imagen. 00:04:57
Ahora, el siguiente paso va a ser seleccionar áreas y enlaces. 00:05:02
Vamos a seleccionar esta zona donde pone Forum. 00:05:07
nos pide una url, pero no vamos a introducir aquí la url 00:05:09
solo vamos a poner foro 00:05:15
posteriormente veréis para saber a qué nos referimos 00:05:17
en esta casilla no escribimos nada 00:05:21
y aquí dejamos la opción que viene por defecto 00:05:23
ya hemos mapeado una zona 00:05:27
ahora vamos con la del día 23 00:05:30
seleccionamos la zona 00:05:33
día 23 00:05:35
ahora el 24, seleccionamos esa zona 00:05:38
una vez hemos mapeado todos los días 00:05:42
o todas las zonas que queremos hacer interactivas 00:05:54
pinchamos a finalizar y nos ofrece dos tipos de códigos 00:05:57
html o css, a nosotros nos interesa el html 00:06:03
copiamos el código y ahora vamos a nuestra aula virtual 00:06:06
vamos a abrir dos pestañas en la aula virtual 00:06:10
esta que tenemos aquí y 00:06:16
así tenemos las dos pestañas abiertas 00:06:19
vamos a ver qué hacemos con ese código HTML 00:06:22
vamos al contenido etiqueta que hemos creado antes 00:06:25
vamos a editar, editar ajustes 00:06:27
pinchamos en esta flecha para que nos aparezcan todas las herramientas 00:06:30
del editor de texto 00:06:34
vamos a trabajar a pantalla completa 00:06:35
y a ver el código HTML 00:06:39
este es el código de lo que hay ahora mismo 00:06:42
marcamos 00:06:46
lo borramos 00:06:49
y pegamos el que traemos de la otra página 00:06:51
con control V 00:06:54
ahí está 00:06:55
es un código que parece muy complicado 00:06:56
en realidad es muy sencillo 00:06:58
tenemos que ir buscando 00:07:00
los corchetes donde pone area 00:07:01
y separarlos 00:07:04
buscamos el siguiente 00:07:08
y los separamos 00:07:09
así con todos 00:07:12
de esta manera va a ser más fácil trabajar 00:07:13
recordáis que escribimos en las urls que nos pedía 00:07:22
foro, día 23, día 24 00:07:27
pues ahora vamos a ver para qué lo escribíamos así 00:07:30
esta fila nos dice que este área de coordenadas 00:07:33
si alguien pincha, irá al foro 00:07:37
pero tenemos que introducir una url 00:07:41
y cuál es la url de foro 00:07:45
para eso hemos abierto esta otra pestaña 00:07:46
vamos al curso, vamos al foro de dudas 00:07:49
pinchamos 00:07:52
y la URL que aparece 00:07:54
en la barra del navegador 00:07:58
la copiamos 00:08:00
copiar 00:08:02
volvemos a la otra pestaña 00:08:03
y donde pone foro 00:08:05
lo borramos 00:08:07
control V 00:08:10
y ahí ponemos 00:08:12
mantenemos las comillas, esa dirección 00:08:14
vamos ahora con el día 23 00:08:16
exactamente igual 00:08:18
vamos a la página, vamos a lunes 23 00:08:20
vemos que ha cambiado la URL 00:08:24
copiamos, volvemos a la otra pestaña 00:08:30
y donde pone día 23, pegamos esa URL 00:08:35
y así con todos los días, por ahora vamos a hacerlo solo hasta el día 00:08:38
26, una vez lo tenemos 00:08:43
pinchamos en los corchetes para ver como ha quedado 00:08:46
y a priori no se ha modificado nada 00:08:50
guardamos y regresamos al curso 00:08:54
vamos a entrar como estudiante a ver cómo lo vería el alumno 00:08:58
el estudiante al entrar vería los avisos, el foro de dudas 00:09:02
el muro de la relajación y el calendario 00:09:06
y todas las secciones colapsadas 00:09:09
podría bajar y si estamos en lunes 23 00:09:13
y pinchar directamente en la sección 00:09:16
podría navegar por el menú lateral 00:09:19
o podría directamente pinchar en el 23 00:09:22
como veréis ahí la flecha se convierte en una mano 00:09:27
y si pincha en el 23 se le abre solo 00:09:30
las tareas que haya para ese día 00:09:35
si pincha en el 24, para el 24 y es una manera más cómoda de navegar 00:09:37
si pincha en el foro, le llevaría al foro 00:09:43
que también está aquí arriba, vamos a aprovechar para conocer 00:09:47
unas de las opciones de visibilidad y disponibilidad de recursos. 00:09:52
Vamos a volver a nuestro rol normal, activar edición. 00:09:57
Los avisos los vamos a ocultar y el foro de dudas también lo vamos a ocultar. 00:10:02
Ahora mismo los alumnos no podrían acceder a esos contenidos, 00:10:09
pero en el foro vamos a ponerle que 00:10:14
aunque esté oculto, que esté disponible 00:10:19
es decir, ellos no lo van a ver directamente 00:10:22
pero si hay un link que les redirige a ese contenido 00:10:26
sí lo van a poder ver 00:10:30
vamos a comprobarlo 00:10:31
el foro ha desaparecido 00:10:34
pero nosotros habíamos configurado una zona caliente 00:10:36
que se llamaba foro 00:10:40
y que enlaza al foro 00:10:41
Y como está oculto, pero sí está disponible, si pinchamos ahí, nos lleva al foro. 00:10:43
A partir de este momento, que ya conocéis cómo mapear una imagen con zonas calientes 00:10:51
y cómo esas zonas os pueden llevar a una sección o al contenido concreto del aula virtual 00:10:56
o incluso a páginas externas, habrá vuestro trabajo diseñar imágenes mucho más atractivas que esta. 00:11:02
espero que esto os ayude a organizar mejor la navegación por las aulas virtuales 00:11:11
y hacerlas más atractivas para los alumnos 00:11:16
Idioma/s:
es
Materias:
Tecnologías de la Información
Autor/es:
Daniel Esteban Roque
Subido por:
Daniel E.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
2157
Fecha:
21 de marzo de 2020 - 19:29
Visibilidad:
Público
Centro:
CP INF-PRI C.R.A. LOS OLIVOS
Duración:
11′ 21″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
85.78 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid