Saltar navegación

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

26. Curso de Moodle para tiempos de crisis: Mapear una imagen con GIMP para usarla en el Aula Virtual

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 9 de diciembre de 2018 por Cra losolivos valdaracete

1751 visualizaciones

Mapeamos una imagen con GIMP para definir zonas interactivas que nos lleven a distintos lugares WEB. La utilizaremos en el Aula Virtual para hacer más atractivas las secciones de contenidos.

Más información Transcripción

Descargar la transcripción

Vamos a aprender a mapear una imagen con GIMP y a utilizarla dentro de un aula virtual de Duca Madrid, por ejemplo. 00:00:01
¿De qué estamos hablando? Pues estamos hablando de lo siguiente. 00:00:09
Aquí vemos que estamos dentro de un aula virtual y en este capítulo hay una imagen. 00:00:14
En vez de tener enlaces a los distintos apartados que están ocultos para los alumnos, 00:00:20
disponemos una imagen con distintas zonas mapeadas 00:00:26
significa que el ratón al pasar por ellas cambia 00:00:31
va cambiando en el punto 1, el 2, el 3 o cada tarea 00:00:35
y si pinchamos en ella nos lleva al capítulo correspondiente 00:00:39
volvemos y cada una nos lleva a su capítulo 00:00:45
igual que a las tareas 00:00:49
esta es una idea que he copiado de los cursos online 00:00:55
de algún curso que he realizado en el CRIF Las Acacias 00:01:05
que usan esta manera de mapear, no usan GIMP, lo hacen de otra manera 00:01:08
pero yo voy a intentar utilizar GIMP que viene instalado en Max 00:01:14
y los recursos de la plataforma EducaMadrid 00:01:18
para empezar pues vamos a abrir GIMP 00:01:20
y traer la imagen que queremos 00:01:26
vamos primero a hacerla un poco más pequeña 00:01:30
de que sea de unas medidas de 800 x 500 aproximadamente 00:01:34
vamos a imagen, escalar imagen 00:01:37
y rellenamos 800 x 400 00:01:44
y escalamos 00:01:56
Vale, ahí tenemos la imagen. Vamos a verla al 100%. Ahí está. 00:01:59
La herramienta que vamos a utilizar se encuentra en Filtros, Web, Mapa de imagen. 00:02:08
Ahí se nos abre una nueva pestaña y ahí vamos ahora a trabajar sobre ella. 00:02:18
Lo que tenemos que hacer es determinar qué zonas queremos que sean interactivas. 00:02:25
Para ello disponemos de la herramienta rectángulo, círculo y un área poligonal. 00:02:29
Vamos a usar la herramienta rectángulo y seleccionamos huella digital. 00:02:37
Se nos abre una ventana en la que nos va a pedir que ingresemos un sitio web, 00:02:45
un enlace a un correo electrónico, a un archivo... 00:02:51
Podemos definir qué queremos que ocurra en esa ventana. 00:02:55
Al definir sitio web, por defecto ya rellena el http://, pero como los enlaces que vamos a poner son https, vamos a tener que elegir la opción otro. 00:02:59
Vamos a ir a nuestra página, y en huella digital hemos creado un capítulo, lo abrimos, y el enlace lo marcamos, copiamos y pegamos. 00:03:17
desvinculamos la pestaña enlace relativo 00:03:32
ahí está 00:03:38
damos a aplicar 00:03:39
y aceptar 00:03:41
vemos que a la derecha ya tenemos nuestro primer enlace 00:03:43
con la dirección a la que nos lleva 00:03:47
vamos con el segundo 00:03:50
una vez marcadas todas las zonas interactivas 00:03:52
vamos a archivo 00:04:07
guardar como 00:04:09
le cambiamos la extensión 00:04:10
en vez de .map 00:04:12
le ponemos .txt 00:04:13
y guardamos 00:04:16
cerramos 00:04:18
y también vamos a guardar 00:04:22
esta imagen que antes 00:04:26
hemos reducido de tamaño 00:04:27
archivo 00:04:29
guardar para la web 00:04:32
guardar 00:04:33
y en la misma carpeta 00:04:39
y la llamamos, por ejemplo 00:04:42
ahí lo tenemos 00:04:43
guardamos, vale, pues con GIMP 00:04:46
ya hemos terminado 00:04:51
hemos seleccionado una imagen 00:04:52
la hemos reducido de tamaño y la hemos mapeado. 00:04:55
Ahora, todo lo que tenemos que hacer ahora se haría ya en la plataforma de EducaMadrid. 00:05:00
La siguiente parte del trabajo la tenemos que hacer en la plataforma de EducaMadrid. 00:05:05
Lo primero es entrar en nuestra zona de EducaMadrid. 00:05:14
Una vez dentro de EducaMadrid, vamos a ir a uno de nuestros sitios web 00:05:31
y vamos a entrar en el directorio de ficheros 00:05:35
ahí lo que vamos a hacer va a ser añadir el fichero 00:05:42
que va a ser la imagen, la vamos a alojar en EducaMadrid 00:05:47
añadir el fichero 00:05:50
vamos al listado y ahí tenemos 00:05:52
imagen mapeada de prueba 00:05:59
le damos a abrir enlace en una pestaña nueva 00:06:01
y ahí tenemos la imagen 00:06:02
lo que nos interesa de esta página va a ser la URL 00:06:05
donde está alojada 00:06:10
ahí arriba tenemos la URL 00:06:12
así que la vamos a dejar ahí abierta 00:06:14
porque ahora nos va a hacer falta 00:06:16
vamos a 00:06:17
la imagen 00:06:19
mapeada, la tenemos guardada 00:06:21
en un archivo txt 00:06:24
lo abrimos, aquí lo tenemos 00:06:25
ahí tenemos todo lo que 00:06:29
el mapeo de la imagen 00:06:30
este es el archivo de texto 00:06:32
que indica todo el mapeo de la imagen 00:06:35
lo que tenemos que hacer ahora 00:06:37
es modificar 00:06:39
sustituir 00:06:43
lo que hay ahí, entre comillas 00:06:44
por la dirección web donde tenemos alojada la imagen en EducaMadrid 00:06:47
por eso hemos dejado abierta aquí la imagen 00:06:51
copiamos la URL, copiar 00:06:55
y pegamos para sustituirla 00:07:01
vale, ahí tenemos la dirección 00:07:08
lo siguiente que tenemos que hacer es ponerle nombre a este mapa 00:07:10
entonces aquí donde pone map vamos a ponerle un nombre 00:07:16
Dadanía Digital, por ejemplo 00:07:19
y aquí también tenemos que cambiarlo 00:07:22
mientras que ponga lo mismo en uno y en otro 00:07:31
y sea distinto a cualquier otro mapa de imagen 00:07:39
que hayamos utilizado ya en esa plataforma 00:07:43
va a funcionar de manera perfecta 00:07:45
ya lo tenemos, así que ahora vamos a copiar todo el código 00:07:47
copiamos y vamos a la plataforma 00:07:53
En nuestra ola virtual vamos a, en esta sección, vamos a editar la sección, editar el tema. 00:07:59
Con esta flecha desplegamos más herramientas y con esta el HTML para introducir aquí el código. 00:08:10
Ahí lo tenemos. 00:08:20
Vamos a guardar cambios. 00:08:22
Y ahí tenemos la imagen mapeada. 00:08:25
vemos que al pasar el ratón por cada una de las zonas 00:08:28
si pinchamos nos lleva a los contenidos que hemos marcado 00:08:32
ya que estamos accediendo a esos contenidos de esta manera 00:08:37
no queremos que aparezcan, que el alumno los vea luego en el tema 00:08:41
y los tenemos, por ejemplo, aquí los tenemos 00:08:45
todos los seis contenidos 00:08:49
tenemos que ocultarlos y tienen que ser disponibles 00:08:51
pero no visibles en la página del curso 00:08:54
Esto se puede hacer de dos maneras 00:08:56
Por un lado se puede editar los ajustes del contenido 00:08:59
Y en ajustes comunes del módulo 00:09:04
Podemos mostrarlo en la página del curso 00:09:10
Ocultarlo a los estudiantes 00:09:14
Pero es que si lo ocultamos tampoco podrían ir mediante enlace 00:09:16
O hacerlo disponible pero no mostrarlo en la página del curso 00:09:19
Eso es lo que hemos elegido 00:09:22
También se puede hacer de otra manera 00:09:24
Ahora mismo seguridad en la red 00:09:27
está visible para los alumnos 00:09:34
si pincho en editar 00:09:37
y en ocultar 00:09:39
pasa a estar 00:09:40
oculto para los alumnos 00:09:43
y tampoco pueden acceder mediante el enlace 00:09:45
así que lo siguiente 00:09:47
es editar y hacer disponible 00:09:49
de esta manera ya 00:09:52
los alumnos no lo verán 00:09:54
pero sí podrán acceder a él 00:09:57
por ejemplo, si cambiamos 00:09:58
el rol 00:10:00
al de estudiante 00:10:09
vemos que todos esos contenidos ya no son visibles por los alumnos 00:10:10
aunque si pinchan, sí acceden a ellos 00:10:17
bueno, esta es una manera de hacer un poco más atractivas 00:10:21
las aulas virtuales de EducaMadrid 00:10:25
espero que os sirva 00:10:28
Idioma/s:
es
Materias:
Tecnologías de la Información
Autor/es:
Daniel Esteban Roque
Subido por:
Cra losolivos valdaracete
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
1751
Fecha:
9 de diciembre de 2018 - 22:00
Visibilidad:
Público
Centro:
CP INF-PRI C.R.A. LOS OLIVOS
Duración:
10′ 32″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
53.93 MBytes

Del mismo autor…

Ver más del mismo centro

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid