1
00:00:01,389 --> 00:00:09,089
Vamos a aprender a mapear una imagen con GIMP y a utilizarla dentro de un aula virtual de Duca Madrid, por ejemplo.

2
00:00:09,789 --> 00:00:12,630
¿De qué estamos hablando? Pues estamos hablando de lo siguiente.

3
00:00:14,089 --> 00:00:20,629
Aquí vemos que estamos dentro de un aula virtual y en este capítulo hay una imagen.

4
00:00:20,809 --> 00:00:26,410
En vez de tener enlaces a los distintos apartados que están ocultos para los alumnos,

5
00:00:26,410 --> 00:00:31,710
disponemos una imagen con distintas zonas mapeadas

6
00:00:31,710 --> 00:00:35,390
significa que el ratón al pasar por ellas cambia

7
00:00:35,390 --> 00:00:39,450
va cambiando en el punto 1, el 2, el 3 o cada tarea

8
00:00:39,450 --> 00:00:45,869
y si pinchamos en ella nos lleva al capítulo correspondiente

9
00:00:45,869 --> 00:00:49,969
volvemos y cada una nos lleva a su capítulo

10
00:00:49,969 --> 00:00:55,369
igual que a las tareas

11
00:00:55,369 --> 00:01:05,650
esta es una idea que he copiado de los cursos online

12
00:01:05,650 --> 00:01:08,609
de algún curso que he realizado en el CRIF Las Acacias

13
00:01:08,609 --> 00:01:14,109
que usan esta manera de mapear, no usan GIMP, lo hacen de otra manera

14
00:01:14,109 --> 00:01:18,530
pero yo voy a intentar utilizar GIMP que viene instalado en Max

15
00:01:18,530 --> 00:01:20,909
y los recursos de la plataforma EducaMadrid

16
00:01:20,909 --> 00:01:26,069
para empezar pues vamos a abrir GIMP

17
00:01:26,069 --> 00:01:30,709
y traer la imagen que queremos

18
00:01:30,709 --> 00:01:34,629
vamos primero a hacerla un poco más pequeña

19
00:01:34,629 --> 00:01:37,829
de que sea de unas medidas de 800 x 500 aproximadamente

20
00:01:37,829 --> 00:01:44,640
vamos a imagen, escalar imagen

21
00:01:44,640 --> 00:01:56,739
y rellenamos 800 x 400

22
00:01:56,739 --> 00:01:59,480
y escalamos

23
00:01:59,480 --> 00:02:05,480
Vale, ahí tenemos la imagen. Vamos a verla al 100%. Ahí está.

24
00:02:08,599 --> 00:02:15,900
La herramienta que vamos a utilizar se encuentra en Filtros, Web, Mapa de imagen.

25
00:02:18,539 --> 00:02:24,620
Ahí se nos abre una nueva pestaña y ahí vamos ahora a trabajar sobre ella.

26
00:02:25,680 --> 00:02:29,419
Lo que tenemos que hacer es determinar qué zonas queremos que sean interactivas.

27
00:02:29,419 --> 00:02:37,319
Para ello disponemos de la herramienta rectángulo, círculo y un área poligonal.

28
00:02:37,639 --> 00:02:43,439
Vamos a usar la herramienta rectángulo y seleccionamos huella digital.

29
00:02:45,909 --> 00:02:50,870
Se nos abre una ventana en la que nos va a pedir que ingresemos un sitio web,

30
00:02:51,949 --> 00:02:55,669
un enlace a un correo electrónico, a un archivo...

31
00:02:55,669 --> 00:02:59,590
Podemos definir qué queremos que ocurra en esa ventana.

32
00:02:59,590 --> 00:03:15,069
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.

33
00:03:17,199 --> 00:03:32,599
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.

34
00:03:32,599 --> 00:03:38,409
desvinculamos la pestaña enlace relativo

35
00:03:38,409 --> 00:03:39,469
ahí está

36
00:03:39,469 --> 00:03:41,629
damos a aplicar

37
00:03:41,629 --> 00:03:43,509
y aceptar

38
00:03:43,509 --> 00:03:47,289
vemos que a la derecha ya tenemos nuestro primer enlace

39
00:03:47,289 --> 00:03:50,150
con la dirección a la que nos lleva

40
00:03:50,150 --> 00:03:52,009
vamos con el segundo

41
00:03:52,009 --> 00:04:07,280
una vez marcadas todas las zonas interactivas

42
00:04:07,280 --> 00:04:09,180
vamos a archivo

43
00:04:09,180 --> 00:04:10,400
guardar como

44
00:04:10,400 --> 00:04:12,099
le cambiamos la extensión

45
00:04:12,099 --> 00:04:13,039
en vez de .map

46
00:04:13,039 --> 00:04:16,060
le ponemos .txt

47
00:04:16,060 --> 00:04:18,660
y guardamos

48
00:04:18,660 --> 00:04:22,069
cerramos

49
00:04:22,069 --> 00:04:26,000
y también vamos a guardar

50
00:04:26,000 --> 00:04:27,560
esta imagen que antes

51
00:04:27,560 --> 00:04:29,800
hemos reducido de tamaño

52
00:04:29,800 --> 00:04:32,500
archivo

53
00:04:32,500 --> 00:04:33,860
guardar para la web

54
00:04:33,860 --> 00:04:39,269
guardar

55
00:04:39,269 --> 00:04:42,050
y en la misma carpeta

56
00:04:42,050 --> 00:04:43,750
y la llamamos, por ejemplo

57
00:04:43,750 --> 00:04:46,209
ahí lo tenemos

58
00:04:46,209 --> 00:04:51,060
guardamos, vale, pues con GIMP

59
00:04:51,060 --> 00:04:52,459
ya hemos terminado

60
00:04:52,459 --> 00:04:55,300
hemos seleccionado una imagen

61
00:04:55,300 --> 00:04:59,740
la hemos reducido de tamaño y la hemos mapeado.

62
00:05:00,639 --> 00:05:05,220
Ahora, todo lo que tenemos que hacer ahora se haría ya en la plataforma de EducaMadrid.

63
00:05:05,600 --> 00:05:13,220
La siguiente parte del trabajo la tenemos que hacer en la plataforma de EducaMadrid.

64
00:05:14,120 --> 00:05:20,220
Lo primero es entrar en nuestra zona de EducaMadrid.

65
00:05:31,860 --> 00:05:35,459
Una vez dentro de EducaMadrid, vamos a ir a uno de nuestros sitios web

66
00:05:35,459 --> 00:05:42,269
y vamos a entrar en el directorio de ficheros

67
00:05:42,269 --> 00:05:47,610
ahí lo que vamos a hacer va a ser añadir el fichero

68
00:05:47,610 --> 00:05:50,449
que va a ser la imagen, la vamos a alojar en EducaMadrid

69
00:05:50,449 --> 00:05:52,110
añadir el fichero

70
00:05:52,110 --> 00:05:59,750
vamos al listado y ahí tenemos

71
00:05:59,750 --> 00:06:01,050
imagen mapeada de prueba

72
00:06:01,050 --> 00:06:02,870
le damos a abrir enlace en una pestaña nueva

73
00:06:02,870 --> 00:06:05,629
y ahí tenemos la imagen

74
00:06:05,629 --> 00:06:10,970
lo que nos interesa de esta página va a ser la URL

75
00:06:10,970 --> 00:06:12,550
donde está alojada

76
00:06:12,550 --> 00:06:14,689
ahí arriba tenemos la URL

77
00:06:14,689 --> 00:06:16,009
así que la vamos a dejar ahí abierta

78
00:06:16,009 --> 00:06:17,629
porque ahora nos va a hacer falta

79
00:06:17,629 --> 00:06:19,829
vamos a

80
00:06:19,829 --> 00:06:21,790
la imagen

81
00:06:21,790 --> 00:06:24,209
mapeada, la tenemos guardada

82
00:06:24,209 --> 00:06:25,350
en un archivo txt

83
00:06:25,350 --> 00:06:29,079
lo abrimos, aquí lo tenemos

84
00:06:29,079 --> 00:06:30,939
ahí tenemos todo lo que

85
00:06:30,939 --> 00:06:32,879
el mapeo de la imagen

86
00:06:32,879 --> 00:06:35,100
este es el archivo de texto

87
00:06:35,100 --> 00:06:37,959
que indica todo el mapeo de la imagen

88
00:06:37,959 --> 00:06:39,759
lo que tenemos que hacer ahora

89
00:06:39,759 --> 00:06:43,170
es modificar

90
00:06:43,170 --> 00:06:44,389
sustituir

91
00:06:44,389 --> 00:06:47,310
lo que hay ahí, entre comillas

92
00:06:47,310 --> 00:06:51,990
por la dirección web donde tenemos alojada la imagen en EducaMadrid

93
00:06:51,990 --> 00:06:55,810
por eso hemos dejado abierta aquí la imagen

94
00:06:55,810 --> 00:07:01,819
copiamos la URL, copiar

95
00:07:01,819 --> 00:07:08,089
y pegamos para sustituirla

96
00:07:08,089 --> 00:07:10,829
vale, ahí tenemos la dirección

97
00:07:10,829 --> 00:07:16,350
lo siguiente que tenemos que hacer es ponerle nombre a este mapa

98
00:07:16,350 --> 00:07:19,430
entonces aquí donde pone map vamos a ponerle un nombre

99
00:07:19,430 --> 00:07:22,769
Dadanía Digital, por ejemplo

100
00:07:22,769 --> 00:07:31,449
y aquí también tenemos que cambiarlo

101
00:07:31,449 --> 00:07:39,689
mientras que ponga lo mismo en uno y en otro

102
00:07:39,689 --> 00:07:43,230
y sea distinto a cualquier otro mapa de imagen

103
00:07:43,230 --> 00:07:45,029
que hayamos utilizado ya en esa plataforma

104
00:07:45,029 --> 00:07:47,350
va a funcionar de manera perfecta

105
00:07:47,350 --> 00:07:53,470
ya lo tenemos, así que ahora vamos a copiar todo el código

106
00:07:53,470 --> 00:07:59,149
copiamos y vamos a la plataforma

107
00:07:59,149 --> 00:08:06,870
En nuestra ola virtual vamos a, en esta sección, vamos a editar la sección, editar el tema.

108
00:08:10,699 --> 00:08:18,680
Con esta flecha desplegamos más herramientas y con esta el HTML para introducir aquí el código.

109
00:08:20,740 --> 00:08:21,300
Ahí lo tenemos.

110
00:08:22,939 --> 00:08:24,060
Vamos a guardar cambios.

111
00:08:25,819 --> 00:08:28,019
Y ahí tenemos la imagen mapeada.

112
00:08:28,019 --> 00:08:32,080
vemos que al pasar el ratón por cada una de las zonas

113
00:08:32,080 --> 00:08:37,019
si pinchamos nos lleva a los contenidos que hemos marcado

114
00:08:37,019 --> 00:08:41,720
ya que estamos accediendo a esos contenidos de esta manera

115
00:08:41,720 --> 00:08:45,679
no queremos que aparezcan, que el alumno los vea luego en el tema

116
00:08:45,679 --> 00:08:49,240
y los tenemos, por ejemplo, aquí los tenemos

117
00:08:49,240 --> 00:08:51,139
todos los seis contenidos

118
00:08:51,139 --> 00:08:54,200
tenemos que ocultarlos y tienen que ser disponibles

119
00:08:54,200 --> 00:08:56,000
pero no visibles en la página del curso

120
00:08:56,000 --> 00:08:59,039
Esto se puede hacer de dos maneras

121
00:08:59,039 --> 00:09:04,139
Por un lado se puede editar los ajustes del contenido

122
00:09:04,139 --> 00:09:10,639
Y en ajustes comunes del módulo

123
00:09:10,639 --> 00:09:14,809
Podemos mostrarlo en la página del curso

124
00:09:14,809 --> 00:09:16,169
Ocultarlo a los estudiantes

125
00:09:16,169 --> 00:09:19,330
Pero es que si lo ocultamos tampoco podrían ir mediante enlace

126
00:09:19,330 --> 00:09:22,730
O hacerlo disponible pero no mostrarlo en la página del curso

127
00:09:22,730 --> 00:09:24,190
Eso es lo que hemos elegido

128
00:09:24,190 --> 00:09:27,350
También se puede hacer de otra manera

129
00:09:27,350 --> 00:09:34,940
Ahora mismo seguridad en la red

130
00:09:34,940 --> 00:09:37,220
está visible para los alumnos

131
00:09:37,220 --> 00:09:39,139
si pincho en editar

132
00:09:39,139 --> 00:09:40,679
y en ocultar

133
00:09:40,679 --> 00:09:43,440
pasa a estar

134
00:09:43,440 --> 00:09:45,220
oculto para los alumnos

135
00:09:45,220 --> 00:09:47,639
y tampoco pueden acceder mediante el enlace

136
00:09:47,639 --> 00:09:49,419
así que lo siguiente

137
00:09:49,419 --> 00:09:52,139
es editar y hacer disponible

138
00:09:52,139 --> 00:09:54,600
de esta manera ya

139
00:09:54,600 --> 00:09:57,320
los alumnos no lo verán

140
00:09:57,320 --> 00:09:58,879
pero sí podrán acceder a él

141
00:09:58,879 --> 00:10:00,679
por ejemplo, si cambiamos

142
00:10:00,679 --> 00:10:09,179
el rol

143
00:10:09,179 --> 00:10:10,440
al de estudiante

144
00:10:10,440 --> 00:10:17,779
vemos que todos esos contenidos ya no son visibles por los alumnos

145
00:10:17,779 --> 00:10:21,159
aunque si pinchan, sí acceden a ellos

146
00:10:21,159 --> 00:10:25,100
bueno, esta es una manera de hacer un poco más atractivas

147
00:10:25,100 --> 00:10:28,419
las aulas virtuales de EducaMadrid

148
00:10:28,419 --> 00:10:29,860
espero que os sirva