0
00:00:00,000 --> 00:00:05,000
Hola, voy a intentar explicaros a cómo utilizar y cómo crear una imagen mapeada.

1
00:00:05,000 --> 00:00:10,000
Una imagen mapeada es aquella que en un sitio web, por ejemplo, puede ser esta imagen.

2
00:00:10,000 --> 00:00:16,000
Cuando yo paso el ratón justamente por encima de esta carita, me llevaría a una cierta página web.

3
00:00:16,000 --> 00:00:22,000
Si, por ejemplo, sitúe el ratón por encima de este botón rojo, me llevaría a otra página web distinta.

4
00:00:22,000 --> 00:00:26,000
Eso se llama una imagen mapeada, porque esto al final es una imagen.

5
00:00:26,000 --> 00:00:32,000
Bueno, hay varias etiquetas HTML para poder hacerla, pero yo voy a utilizar alguna herramienta.

6
00:00:32,000 --> 00:00:35,000
Voy a utilizar GIMP y Canva.

7
00:00:35,000 --> 00:00:40,000
Para ello, mirad, para hacer la imagen, yo recomiendo la página de Canva,

8
00:00:40,000 --> 00:00:43,000
que para hacer diseños está muy, muy bien.

9
00:00:43,000 --> 00:00:48,000
Tenéis una cuenta de profesor de educación, tenéis muchas más opciones.

10
00:00:48,000 --> 00:00:54,000
Entonces, mirad, por ejemplo, podéis ir a Canva, podéis meteros en plantillas, aquí tenéis un montón.

11
00:00:54,000 --> 00:01:00,000
Según queráis, presentaciones, pizarras, documentos, anuncios, historias de Instagram, etc.

12
00:01:00,000 --> 00:01:03,000
También podéis pinchar aquí en plantillas, tenéis un montón más.

13
00:01:03,000 --> 00:01:08,000
Lo veis, currículos, tarjetas, post, marketing, flyers, educación, etc.

14
00:01:08,000 --> 00:01:13,000
O también cuando queráis un diseño, también podéis elegir sobre qué va a ir dedicado ese diseño.

15
00:01:13,000 --> 00:01:16,000
Yo, para lo que voy a hacer, es una imagen mapeada tipo banner.

16
00:01:16,000 --> 00:01:20,000
Podría buscar un banner, pero en este caso voy a utilizar algo que me gusta mucho,

17
00:01:20,000 --> 00:01:24,000
que son los encabezados de Google Classroom.

18
00:01:24,000 --> 00:01:26,000
Lo veis aquí.

19
00:01:26,000 --> 00:01:28,000
Le voy a dar.

20
00:01:28,000 --> 00:01:36,000
O también podéis buscar aquí encabezados de Google Classroom, si no lo encontráis fácilmente.

21
00:01:36,000 --> 00:01:41,000
Bueno, mirad, dentro de los encabezados de Google Classroom, pues, como veis,

22
00:01:41,000 --> 00:01:45,000
lo que yo intentaba buscar más o menos es alargado y estrechito.

23
00:01:45,000 --> 00:01:54,000
Imaginaros que yo, por ejemplo, quiero utilizar este apartado de aquí.

24
00:01:54,000 --> 00:01:56,000
Entonces lo pincharía.

25
00:01:56,000 --> 00:02:00,000
Puedo cambiar el que a mí más me guste, por ejemplo, este.

26
00:02:00,000 --> 00:02:03,000
Y ya personalizaría la plantilla.

27
00:02:03,000 --> 00:02:10,000
Aquí fijaros que me da el diseño creado, pero yo podría meter elementos, añadir un texto.

28
00:02:10,000 --> 00:02:15,000
Imaginaros que la idea sería que a lo mejor cuando seleccione esta imagen vaya a un cierto sitio,

29
00:02:15,000 --> 00:02:19,000
cuando seleccione esta vaya a otro sitio, cuando seleccione las letras vaya a otro sitio.

30
00:02:19,000 --> 00:02:26,000
Por ejemplo, si me ocurre, podemos meter un texto, tipo subtítulo, que es lo que aparece aquí,

31
00:02:26,000 --> 00:02:30,000
en el que yo, por ejemplo, voy a poner apartado 1.

32
00:02:30,000 --> 00:02:32,000
Imaginaros que vayas apartados.

33
00:02:32,000 --> 00:02:37,000
Cuando yo tengo un texto, si yo lo cojo, ahí está, lo puedo duplicar.

34
00:02:37,000 --> 00:02:39,000
Voy a hacer 3.

35
00:02:39,000 --> 00:02:42,000
Fijaros.

36
00:02:42,000 --> 00:02:48,000
Y podría ser, por ejemplo, este el apartado 2 y el apartado 3.

37
00:02:48,000 --> 00:02:51,000
Bueno, se ha movido un poco.

38
00:02:51,000 --> 00:02:52,000
Apartado 3.

39
00:02:52,000 --> 00:03:00,000
Es decir, pues voy a añadir aquí un texto para que cada vez que vaya el ratón por encima de este apartado vaya a un cierto lugar.

40
00:03:00,000 --> 00:03:01,000
Fijaros lo que podríais hacer ahora.

41
00:03:01,000 --> 00:03:03,000
Imaginaros que esta es la imagen que ya os gusta.

42
00:03:03,000 --> 00:03:05,000
Podríais compartirla.

43
00:03:05,000 --> 00:03:07,000
Y yo lo que haría sería descargarlo.

44
00:03:07,000 --> 00:03:08,000
Lo veis aquí.

45
00:03:08,000 --> 00:03:09,000
Lo descargaría.

46
00:03:09,000 --> 00:03:18,000
PNG, si tenéis cosas transparentes, incluso si tenéis alguna animación, podéis utilizar, por ejemplo, GIF.

47
00:03:18,000 --> 00:03:22,000
Entonces, una vez que lo descarguéis, tendréis la foto.

48
00:03:22,000 --> 00:03:27,000
Yo, para ir más ágil, mirad que yo tengo más o menos...

49
00:03:27,000 --> 00:03:28,000
¿Dónde estaba?

50
00:03:28,000 --> 00:03:29,000
Aquí está.

51
00:03:29,000 --> 00:03:31,000
Imaginaros que yo tengo esta imagen mapeada.

52
00:03:31,000 --> 00:03:33,000
Lo veis aquí.

53
00:03:33,000 --> 00:03:35,000
Hecho tipo Google Plus.

54
00:03:36,000 --> 00:03:38,000
El nombre de la imagen.

55
00:03:38,000 --> 00:03:40,000
No me gusta poner espacios.

56
00:03:40,000 --> 00:03:41,000
Todo en minúscula.

57
00:03:41,000 --> 00:03:42,000
Que sea fácil.

58
00:03:42,000 --> 00:03:43,000
¿Lo veis?

59
00:03:43,000 --> 00:03:44,000
Imagen mapeada.

60
00:03:44,000 --> 00:03:45,000
800.jpg.

61
00:03:45,000 --> 00:03:46,000
Ahora os diré por qué.

62
00:03:46,000 --> 00:03:47,000
Bueno.

63
00:03:47,000 --> 00:03:52,000
Una vez que tengo ya esto, el siguiente paso va a ser utilizar una herramienta que es GIM.

64
00:03:52,000 --> 00:03:54,000
Que es de editor de imágenes.

65
00:03:54,000 --> 00:04:01,000
Para poder bajar la herramienta, es una herramienta típica de imágenes tipo Photoshop, pero de software libre,

66
00:04:01,000 --> 00:04:03,000
os podéis ir a la página de GIM.org.

67
00:04:04,000 --> 00:04:05,000
Aquí daréis a onload.

68
00:04:05,000 --> 00:04:08,000
La versión actualmente es la 2.10.32.

69
00:04:08,000 --> 00:04:09,000
Yo la tengo instalada.

70
00:04:09,000 --> 00:04:11,000
Entonces yo arranco GIM.

71
00:04:14,000 --> 00:04:18,000
Lo que voy a hacer es tratar esa imagen para poder mapearla de forma automática.

72
00:04:18,000 --> 00:04:21,000
Tengo que hacer yo el código HTML de forma automática.

73
00:04:21,000 --> 00:04:23,000
Pues mirad lo que voy a hacer aquí yo.

74
00:04:23,000 --> 00:04:25,000
Es archivo, abrir.

75
00:04:25,000 --> 00:04:26,000
Y cogería la foto.

76
00:04:26,000 --> 00:04:30,000
O, por ejemplo, podría arrastrar la foto donde la tenga.

77
00:04:30,000 --> 00:04:31,000
Como es esta de aquí.

78
00:04:32,000 --> 00:04:33,000
Y la arrastro.

79
00:04:34,000 --> 00:04:35,000
Ahí está.

80
00:04:35,000 --> 00:04:39,000
Bueno, y ahora tengo escalada, pero os voy a explicar cómo hacerla.

81
00:04:39,000 --> 00:04:41,000
Entonces, imaginaros que...

82
00:04:41,000 --> 00:04:43,000
Bueno, lo voy a hacer de cero.

83
00:04:48,000 --> 00:04:49,000
Lo voy a hacer de cero.

84
00:04:49,000 --> 00:04:50,000
¿Vale?

85
00:04:50,000 --> 00:04:51,000
Imaginaros...

86
00:04:51,000 --> 00:04:52,000
Vaya, ahora he salido del programa.

87
00:04:52,000 --> 00:04:57,000
Imaginaros que yo tengo la imagen que es más grande de lo normal.

88
00:04:58,000 --> 00:04:59,000
A ver...

89
00:05:00,000 --> 00:05:01,000
Vale.

90
00:05:02,000 --> 00:05:03,000
Entonces mirad.

91
00:05:03,000 --> 00:05:05,000
Creo que esta era más grande.

92
00:05:05,000 --> 00:05:09,000
Tenéis que tener mucho cuidado porque las imágenes en web debían ocupar poquito.

93
00:05:09,000 --> 00:05:10,000
¿Vale?

94
00:05:10,000 --> 00:05:11,000
Pero imaginaos esta.

95
00:05:11,000 --> 00:05:13,000
Voy a coger esta.

96
00:05:13,000 --> 00:05:15,000
La selecciono y la arrastro.

97
00:05:15,000 --> 00:05:17,000
Vale, mirad que es un poco grande, ¿vale?

98
00:05:17,000 --> 00:05:20,000
Entonces yo lo primero que haría sería escalarla.

99
00:05:20,000 --> 00:05:23,000
Para escalarla yo me iría a Imagen.

100
00:05:23,000 --> 00:05:26,000
Y aquí pone Escalar la imagen.

101
00:05:26,000 --> 00:05:30,000
Yo, por ejemplo, voy a poner 800.

102
00:05:31,000 --> 00:05:35,000
Mirad que me lo hace más o menos automático, pero voy a cambiar el tamaño.

103
00:05:35,000 --> 00:05:37,000
Y voy a decir Escalar.

104
00:05:37,000 --> 00:05:38,000
Fijaros que me la ha cambiado.

105
00:05:38,000 --> 00:05:39,000
¿Vale?

106
00:05:40,000 --> 00:05:42,000
Bueno, y ahora lo que voy a hacer es...

107
00:05:42,000 --> 00:05:43,000
¿Cómo mapear la imagen?

108
00:05:43,000 --> 00:05:45,000
Para ello mirad, me voy a ir a Filtros.

109
00:05:45,000 --> 00:05:49,000
Voy dentro de Web y voy al apartado de Mapa de Imágenes.

110
00:05:49,000 --> 00:05:50,000
Lo veis aquí.

111
00:05:50,000 --> 00:05:52,000
Filtros, Web, Mapa de Imágenes.

112
00:05:52,000 --> 00:05:54,000
Esto me va a crear todo el código.

113
00:05:55,000 --> 00:05:56,000
Ahí está.

114
00:05:56,000 --> 00:05:58,000
Vale, mirad, se me abre una pantallita.

115
00:05:58,000 --> 00:05:59,000
Ahí está.

116
00:06:00,000 --> 00:06:01,000
Vamos a hacer lo siguiente.

117
00:06:01,000 --> 00:06:02,000
Fijaros.

118
00:06:02,000 --> 00:06:04,000
Lo hago un poquito más grande.

119
00:06:04,000 --> 00:06:05,000
Y lo que quiero hacer yo es...

120
00:06:05,000 --> 00:06:07,000
Mirad, tengo varias herramientas.

121
00:06:07,000 --> 00:06:10,000
Cuadrado, círculo, un polígono.

122
00:06:10,000 --> 00:06:11,000
¿Vale?

123
00:06:11,000 --> 00:06:13,000
Y la flecha para poder, tipo ratón.

124
00:06:13,000 --> 00:06:16,000
Entonces mirad, lo que yo voy a hacer, por ejemplo, es cuando coja el logotipo del colegio.

125
00:06:16,000 --> 00:06:17,000
Voy a la página web del colegio.

126
00:06:17,000 --> 00:06:20,000
Entonces lo que hago es, cojo el rectángulo.

127
00:06:20,000 --> 00:06:22,000
Y voy a seleccionar la zona que yo quiero.

128
00:06:22,000 --> 00:06:25,000
En este caso, sería más o menos...

129
00:06:25,000 --> 00:06:26,000
Ahí, doy clic.

130
00:06:26,000 --> 00:06:27,000
¿Lo veis?

131
00:06:27,000 --> 00:06:28,000
Me aparece esta ventana.

132
00:06:28,000 --> 00:06:29,000
Aquí, por ejemplo, puede ser...

133
00:06:29,000 --> 00:06:30,000
¿Qué tipo de nace va a ser?

134
00:06:30,000 --> 00:06:31,000
¿Un sitio Web?

135
00:06:31,000 --> 00:06:32,000
¿Un archivo?

136
00:06:32,000 --> 00:06:33,000
¿Un sitio FTP?

137
00:06:33,000 --> 00:06:34,000
¿Un telnet?

138
00:06:34,000 --> 00:06:35,000
¿Un correo?

139
00:06:35,000 --> 00:06:39,000
Fijaros que el protocolo, dependiendo qué cojáis, va a cambiar.

140
00:06:39,000 --> 00:06:42,000
Yo, como lo voy a hacer a mano, voy a poner otro.

141
00:06:42,000 --> 00:06:43,000
¿De acuerdo?

142
00:06:43,000 --> 00:06:45,000
Entonces, como quiero que vaya a la página web del colegio, mirad.

143
00:06:45,000 --> 00:06:48,000
Yo ya tengo aquí la página del colegio.

144
00:06:48,000 --> 00:06:50,000
Cojo la URL.

145
00:06:50,000 --> 00:06:52,000
Control-C.

146
00:06:52,000 --> 00:06:54,000
Y vendría aquí y pegaría.

147
00:06:54,000 --> 00:06:56,000
Ahí está.

148
00:06:56,000 --> 00:06:57,000
¿Vale?

149
00:06:57,000 --> 00:06:59,000
Y voy a aplicar o aceptar.

150
00:06:59,000 --> 00:07:00,000
Ya está.

151
00:07:00,000 --> 00:07:02,000
Fijaros que aparece aquí ya en enlazo.

152
00:07:02,000 --> 00:07:03,000
¿Vale?

153
00:07:03,000 --> 00:07:04,000
Ahora voy a hacer otro apartado más.

154
00:07:04,000 --> 00:07:09,000
Por ejemplo, yo quiero que sobre mi foto vaya a mi Twitter.

155
00:07:09,000 --> 00:07:12,000
Pues, por ejemplo, cogería el círculo.

156
00:07:12,000 --> 00:07:16,000
Y voy a hacer, más o menos, así lo veis.

157
00:07:16,000 --> 00:07:17,000
Y hago clic.

158
00:07:17,000 --> 00:07:19,000
Cuando hago clic ya, me aparece eso.

159
00:07:19,000 --> 00:07:24,000
Entonces, lo que voy a hacer es irme directamente a mi Twitter, a mi URL de Twitter.

160
00:07:24,000 --> 00:07:26,000
Por ejemplo, es esa.

161
00:07:26,000 --> 00:07:27,000
Control-C.

162
00:07:27,000 --> 00:07:29,000
Me vendría aquí.

163
00:07:29,000 --> 00:07:32,000
Y voy a pegar la URL.

164
00:07:32,000 --> 00:07:35,000
En este caso, mirad, voy a quitar este enlace relativo para que veáis a ver qué pasa.

165
00:07:35,000 --> 00:07:36,000
¿Vale?

166
00:07:36,000 --> 00:07:38,000
Y voy a aceptar.

167
00:07:38,000 --> 00:07:41,000
Fijaros que ya tengo dos formas.

168
00:07:41,000 --> 00:07:44,000
Y ahora, para ya utilizar todas, voy a utilizar el polígono.

169
00:07:44,000 --> 00:07:47,000
Entonces, imaginaos que el polígono es en zonas un poco más raras.

170
00:07:47,000 --> 00:07:49,000
Yo voy a coger un poquito estas manos.

171
00:07:49,000 --> 00:07:51,000
No es la mejor forma, pero bueno.

172
00:07:51,000 --> 00:07:54,000
Mirad, yo voy a ir dibujando, ¿veis?

173
00:07:54,000 --> 00:07:56,000
Cuando veis que hago un clic, me deja seguir.

174
00:07:56,000 --> 00:07:58,000
¿Os dais cuenta?

175
00:07:58,000 --> 00:08:00,000
Imaginaos que yo hago así.

176
00:08:00,000 --> 00:08:02,000
Hago así.

177
00:08:02,000 --> 00:08:03,000
Hago así.

178
00:08:03,000 --> 00:08:05,000
Y voy bajando para abajo.

179
00:08:05,000 --> 00:08:06,000
Y ya tengo el polígono.

180
00:08:06,000 --> 00:08:07,000
Clic, clic.

181
00:08:07,000 --> 00:08:08,000
¿Lo veis?

182
00:08:08,000 --> 00:08:11,000
Por ejemplo, eso vaya, quiero que vaya a Duca Madrid.

183
00:08:11,000 --> 00:08:12,000
Selecciono.

184
00:08:12,000 --> 00:08:13,000
Control-C.

185
00:08:13,000 --> 00:08:14,000
Me voy al gym.

186
00:08:14,000 --> 00:08:16,000
Y pego.

187
00:08:16,000 --> 00:08:17,000
Control-V.

188
00:08:17,000 --> 00:08:19,000
Y voy a aceptar.

189
00:08:19,000 --> 00:08:20,000
Ya tengo las tres formas.

190
00:08:20,000 --> 00:08:24,000
A ver, si me equivocan algo, puedo coger el icono de la flecha.

191
00:08:24,000 --> 00:08:26,000
¿Lo veis?

192
00:08:26,000 --> 00:08:29,000
Poder seleccionar alguna y moverla de sitio.

193
00:08:29,000 --> 00:08:30,000
¿Lo veis?

194
00:08:30,000 --> 00:08:32,000
O incluso ajustar un poquito más el tamaño.

195
00:08:32,000 --> 00:08:34,000
¿Os dais cuenta?

196
00:08:34,000 --> 00:08:35,000
Más o menos por ahí.

197
00:08:35,000 --> 00:08:36,000
¿Vale?

198
00:08:36,000 --> 00:08:40,000
Si me equivoca por lo que sé, imaginaos que yo el tema 1.

199
00:08:40,000 --> 00:08:42,000
Pues mirad, tema 1.

200
00:08:42,000 --> 00:08:43,000
¿Vale?

201
00:08:43,000 --> 00:08:44,000
Claro, sería un apartado.

202
00:08:44,000 --> 00:08:45,000
Voy a aceptar.

203
00:08:45,000 --> 00:08:48,000
Si me equivoca por lo que sea, flechita.

204
00:08:48,000 --> 00:08:50,000
La cojo, la puedo mover a los demás.

205
00:08:50,000 --> 00:08:52,000
Si la quiero cortar, las tijeras.

206
00:08:52,000 --> 00:08:53,000
Lo voy eliminando.

207
00:08:53,000 --> 00:08:54,000
¿Vale?

208
00:08:54,000 --> 00:08:55,000
Esa es la idea.

209
00:08:55,000 --> 00:08:58,000
Bueno, lo importante es que ya tengo aquí los tres enlaces y las formas.

210
00:08:58,000 --> 00:08:59,000
¿Qué voy a hacer ahora?

211
00:08:59,000 --> 00:09:01,000
Lo que voy a hacer es archivo.

212
00:09:01,000 --> 00:09:03,000
Y lo voy a guardar.

213
00:09:03,000 --> 00:09:04,000
¿O guardar cómo?

214
00:09:04,000 --> 00:09:05,000
Como queráis.

215
00:09:05,000 --> 00:09:06,000
Venga, guardar como.

216
00:09:06,000 --> 00:09:07,000
¿Vale?

217
00:09:07,000 --> 00:09:08,000
Yo me vengo aquí.

218
00:09:08,000 --> 00:09:10,000
Fijaros qué nombre de archivo me pone.

219
00:09:10,000 --> 00:09:13,000
Me pone más o menos la imagen y un punto map.

220
00:09:13,000 --> 00:09:22,000
Yo voy a poner, por ejemplo, pues, prueba final 3.

221
00:09:22,000 --> 00:09:27,000
Y como va a ser un texto, en vez de poner map, yo voy a quitarlo y voy a poner un txt.

222
00:09:27,000 --> 00:09:28,000
¿Vale?

223
00:09:29,000 --> 00:09:30,000
¿Vale?

224
00:09:30,000 --> 00:09:32,000
Y voy a guardar aquí dentro, por ejemplo.

225
00:09:34,000 --> 00:09:35,000
Una carpeta.

226
00:09:36,000 --> 00:09:38,000
Prueba mapeada.

227
00:09:41,000 --> 00:09:42,000
Ahí está.

228
00:09:43,000 --> 00:09:44,000
Y lo voy a guardar.

229
00:09:45,000 --> 00:09:46,000
Ahí.

230
00:09:47,000 --> 00:09:48,000
¿Me he equivocado?

231
00:09:48,000 --> 00:09:49,000
Un segundito.

232
00:09:50,000 --> 00:09:51,000
Ahí está.

233
00:09:53,000 --> 00:09:54,000
Ahí está.

234
00:09:54,000 --> 00:09:56,000
Te lo voy a poner.

235
00:09:59,000 --> 00:10:02,000
Prueba mapeada final.

236
00:10:02,000 --> 00:10:04,000
Punto txt.

237
00:10:04,000 --> 00:10:05,000
¿Vale?

238
00:10:05,000 --> 00:10:06,000
Y lo voy a dar a guardar.

239
00:10:07,000 --> 00:10:08,000
Bueno.

240
00:10:08,000 --> 00:10:10,000
Y esto ya también lo podría cerrar.

241
00:10:10,000 --> 00:10:11,000
¿Vale?

242
00:10:11,000 --> 00:10:12,000
Sigo en el GIMP.

243
00:10:12,000 --> 00:10:14,000
Y ahora lo que voy a hacer es guardar esta imagen.

244
00:10:14,000 --> 00:10:17,000
Voy a guardar esta imagen al archivo.

245
00:10:17,000 --> 00:10:20,000
En vez de guardar como, lo que voy a hacer es exportarla.

246
00:10:20,000 --> 00:10:21,000
¿Vale?

247
00:10:21,000 --> 00:10:23,000
La voy a exportar como.

248
00:10:23,000 --> 00:10:26,000
Podría, por ejemplo, que sea jpg, etcétera, etcétera.

249
00:10:26,000 --> 00:10:27,000
Y voy a cambiar el sitio.

250
00:10:27,000 --> 00:10:30,000
En vez de ser coordinador, fijaros, prueba mapeada.

251
00:10:30,000 --> 00:10:32,000
Ahí la quiero guardar.

252
00:10:32,000 --> 00:10:33,000
¿Vale?

253
00:10:33,000 --> 00:10:34,000
Jpg.

254
00:10:34,000 --> 00:10:37,000
Voy a utilizar otro extension de archivo.

255
00:10:37,000 --> 00:10:39,000
Voy a dar a guardar.

256
00:10:40,000 --> 00:10:44,000
Y con qué calidad quiero guardar esa imagen, etcétera.

257
00:10:44,000 --> 00:10:45,000
Y exportar.

258
00:10:45,000 --> 00:10:47,000
Bueno, ya tengo la imagen.

259
00:10:47,000 --> 00:10:49,000
Pues mira, si ahora, por ejemplo, yo acudo.

260
00:10:49,000 --> 00:10:51,000
Ahora que tengo la prueba mapeada.

261
00:10:51,000 --> 00:10:53,000
Tengo una imagen.

262
00:10:55,000 --> 00:10:56,000
¿Vale?

263
00:10:56,000 --> 00:10:57,000
Lo veis ahí.

264
00:10:57,000 --> 00:11:01,000
Y tengo el código HTML que hace falta para mapear esa imagen.

265
00:11:01,000 --> 00:11:02,000
Bueno.

266
00:11:02,000 --> 00:11:06,000
Como a mí no me gustan nombres tan largos, ni espacios, ni demás.

267
00:11:06,000 --> 00:11:10,000
Voy a poner imagen mapeada 5.

268
00:11:11,000 --> 00:11:12,000
¿Vale?

269
00:11:12,000 --> 00:11:14,000
Bueno, ¿qué voy a hacer ahora?

270
00:11:14,000 --> 00:11:16,000
Voy a hacer un código HTML.

271
00:11:16,000 --> 00:11:18,000
Esto es de prueba, entonces.

272
00:11:18,000 --> 00:11:20,000
Lo que voy a hacer, mirad es.

273
00:11:20,000 --> 00:11:22,000
Voy a coger directamente.

274
00:11:22,000 --> 00:11:23,000
Aquí está.

275
00:11:26,000 --> 00:11:29,000
Esto ya tengo listo, más o menos, para no tardar demasiado.

276
00:11:29,000 --> 00:11:31,000
Imagina que tengo una página web.

277
00:11:31,000 --> 00:11:32,000
Voy a abrirla.

278
00:11:32,000 --> 00:11:35,000
Entonces, fijaros que tengo etiquetas básicas.

279
00:11:35,000 --> 00:11:39,000
Tengo HTML, el HEAD y el BODY.

280
00:11:39,000 --> 00:11:40,000
Hice el HTML.

281
00:11:40,000 --> 00:11:41,000
¿Vale?

282
00:11:41,000 --> 00:11:43,000
En title he puesto web imagen mapeada.

283
00:11:43,000 --> 00:11:45,000
Y aquí en el BODY he puesto un h1 imagen mapeada.

284
00:11:45,000 --> 00:11:46,000
¿Vale?

285
00:11:46,000 --> 00:11:48,000
Esto, si yo lo abro, pues no se va a ver gran cosa.

286
00:11:48,000 --> 00:11:50,000
Tengo la imagen mapeada y ya está.

287
00:11:50,000 --> 00:11:51,000
Entonces, mirad.

288
00:11:51,000 --> 00:11:53,000
Lo que voy a hacer es lo siguiente.

289
00:11:53,000 --> 00:11:57,000
Si yo abro este fichero HTML.

290
00:11:57,000 --> 00:11:59,000
Abro la prueba mapeada.

291
00:11:59,000 --> 00:12:01,000
Fijaos el código que me ha creado Jim.

292
00:12:01,000 --> 00:12:02,000
¿Vale?

293
00:12:02,000 --> 00:12:03,000
Entonces, ¿qué tengo que hacer?

294
00:12:03,000 --> 00:12:07,000
Primero, aquí tengo el código HTML para utilizar la imagen.

295
00:12:07,000 --> 00:12:08,000
Entonces, CTRL-C.

296
00:12:08,000 --> 00:12:12,000
Voy a venir aquí, porque después de poner imagen mapeada,

297
00:12:12,000 --> 00:12:14,000
quiero que ponga la foto.

298
00:12:14,000 --> 00:12:15,000
¿Vale?

299
00:12:15,000 --> 00:12:16,000
Importante.

300
00:12:16,000 --> 00:12:19,000
Esto de aquí, que sería la URL donde está guardada la foto,

301
00:12:19,000 --> 00:12:20,000
no va a estar ahí.

302
00:12:20,000 --> 00:12:21,000
Entonces, ¿cómo se llamaba?

303
00:12:21,000 --> 00:12:23,000
Imagen mapeada 5.

304
00:12:23,000 --> 00:12:24,000
¿Lo veis?

305
00:12:24,000 --> 00:12:27,000
Pues va a estar en la misma carpeta que va a estar la página web.

306
00:12:27,000 --> 00:12:29,000
Entonces, yo directamente me puedo hacerlo así.

307
00:12:29,000 --> 00:12:31,000
Cambiar nombre.

308
00:12:31,000 --> 00:12:32,000
Selecciono todo.

309
00:12:32,000 --> 00:12:34,000
CTRL-C.

310
00:12:34,000 --> 00:12:36,000
Vengo aquí.

311
00:12:36,000 --> 00:12:38,000
Y CTRL-V.

312
00:12:38,000 --> 00:12:39,000
¿Vale?

313
00:12:39,000 --> 00:12:40,000
Ahí lo tengo.

314
00:12:40,000 --> 00:12:41,000
¿Vale?

315
00:12:41,000 --> 00:12:42,000
¿Qué es lo siguiente que tengo que hacer?

316
00:12:42,000 --> 00:12:44,000
Pues mirad.

317
00:12:44,000 --> 00:12:45,000
Ahí.

318
00:12:45,000 --> 00:12:47,000
Lo siguiente que tengo que hacer es copiar esto de aquí.

319
00:12:47,000 --> 00:12:49,000
El HTML se llama map.

320
00:12:49,000 --> 00:12:50,000
¿Vale?

321
00:12:50,000 --> 00:12:52,000
Lo voy a poner justo abajo.

322
00:12:52,000 --> 00:12:53,000
Ahí está.

323
00:12:53,000 --> 00:12:54,000
Entonces, lo importante.

324
00:12:54,000 --> 00:12:56,000
Mirad, aquí me dice la imagen.

325
00:12:56,000 --> 00:12:58,000
Esta etiqueta me dice la imagen.

326
00:12:58,000 --> 00:12:59,000
Con su tamaño ancho y alto.

327
00:12:59,000 --> 00:13:00,000
El borde cero.

328
00:13:00,000 --> 00:13:02,000
Y que va a utilizar el mapa.

329
00:13:02,000 --> 00:13:03,000
Use map.

330
00:13:03,000 --> 00:13:04,000
Almohadilla map.

331
00:13:04,000 --> 00:13:07,000
Fijaros que luego yo aquí defino la etiqueta map.

332
00:13:07,000 --> 00:13:10,000
Que lo que va a decir es, ¿cómo se llama este mapa?

333
00:13:10,000 --> 00:13:11,000
Map.

334
00:13:11,000 --> 00:13:13,000
Si yo cambio este nombre, también debo cambiar este.

335
00:13:13,000 --> 00:13:17,000
Porque van a ser las referencias, las coordenadas de los enlaces.

336
00:13:17,000 --> 00:13:21,000
Por ejemplo, si yo pongo aquí mapa Martín.

337
00:13:22,000 --> 00:13:24,000
Aquí también debería poner mapa Martín.

338
00:13:26,000 --> 00:13:27,000
¿De acuerdo?

339
00:13:27,000 --> 00:13:28,000
Y ahí tenéis.

340
00:13:28,000 --> 00:13:29,000
Fijaros.

341
00:13:29,000 --> 00:13:32,000
Dentro de la etiqueta map, hay area shape.

342
00:13:32,000 --> 00:13:33,000
Hay tres áreas.

343
00:13:33,000 --> 00:13:36,000
Una rectangular, otra circular y otra un polígono.

344
00:13:36,000 --> 00:13:37,000
Y sus coordenadas.

345
00:13:37,000 --> 00:13:42,000
Y cuando la pinchen, ahí tenéis el enlace, la url, donde va a ir dirigida.

346
00:13:42,000 --> 00:13:43,000
¿De acuerdo?

347
00:13:43,000 --> 00:13:45,000
Bueno, pues yo voy a guardar esto.

348
00:13:46,000 --> 00:13:47,000
Vale.

349
00:13:47,000 --> 00:13:48,000
Importante.

350
00:13:48,000 --> 00:13:50,000
Fijaros que tiene extensión txt.

351
00:13:50,000 --> 00:13:52,000
Entonces, ¿qué es lo que voy a hacer?

352
00:13:52,000 --> 00:13:59,000
Pues lo que voy a hacer es cambiar el nombre y le voy a llamar html txt.

353
00:13:59,000 --> 00:14:04,000
Muy importante aquí la opción, siempre en Windows que trabajáis, que sean las extensiones.

354
00:14:04,000 --> 00:14:05,000
¿Lo veis?

355
00:14:05,000 --> 00:14:07,000
Entonces yo muestro las extensiones.

356
00:14:07,000 --> 00:14:12,000
En vez de ser un txt, lo que voy a hacer es cambiar el nombre y quitar el txt por un html.

357
00:14:12,000 --> 00:14:14,000
Htm o html.

358
00:14:14,000 --> 00:14:16,000
Vaya, creo que me he equivocado.

359
00:14:18,000 --> 00:14:19,000
Ahí está.

360
00:14:19,000 --> 00:14:20,000
Ahí está.

361
00:14:21,000 --> 00:14:22,000
Html.

362
00:14:23,000 --> 00:14:24,000
¿Estáis seguros?

363
00:14:24,000 --> 00:14:25,000
Sí.

364
00:14:25,000 --> 00:14:27,000
Y ahora mirad, si yo, por ejemplo...

365
00:14:27,000 --> 00:14:28,000
He hecho bien, creo, ¿no?

366
00:14:28,000 --> 00:14:29,000
Sí.

367
00:14:29,000 --> 00:14:31,000
Si yo, por ejemplo, abro este fichero...

368
00:14:32,000 --> 00:14:33,000
Creo que está aquí, ¿lo veis?

369
00:14:33,000 --> 00:14:34,000
¿No?

370
00:14:34,000 --> 00:14:35,000
Tiene la imagen mapeada.

371
00:14:35,000 --> 00:14:36,000
La imagen.

372
00:14:36,000 --> 00:14:42,000
Y fijaros que cuando yo me voy a cierto sitio, por ejemplo, el icono del colegio,

373
00:14:42,000 --> 00:14:46,000
fijaos que en la parte inferior me va a aparecer dónde tiene que ir.

374
00:14:46,000 --> 00:14:53,000
Si yo, por ejemplo, selecciono mi foto en tipo circular, fijaros que en la parte inferior me dice dónde tiene que ir.

375
00:14:54,000 --> 00:14:55,000
¿De acuerdo?

376
00:14:55,000 --> 00:14:56,000
Bueno, aquí me he equivocado.

377
00:14:56,000 --> 00:14:57,000
Fijaros que aquí me he equivocado.

378
00:14:57,000 --> 00:14:58,000
He puesto un fichero.

379
00:15:00,000 --> 00:15:01,000
¿Lo veis?

380
00:15:01,000 --> 00:15:02,000
Aquí lo he puesto bien.

381
00:15:02,000 --> 00:15:06,000
Y aquí en las manos también me he equivocado porque me ha puesto un fichero.

382
00:15:06,000 --> 00:15:07,000
Lo he copiado mal.

383
00:15:08,000 --> 00:15:09,000
¿Vale?

384
00:15:09,000 --> 00:15:11,000
Entonces esto debería corregirlo.

385
00:15:11,000 --> 00:15:14,000
Mirad, si me tiene que volver a Jim, lo que podría hacer es lo siguiente.

386
00:15:15,000 --> 00:15:16,000
Es...

387
00:15:16,000 --> 00:15:17,000
Yo voy al código.

388
00:15:19,000 --> 00:15:20,000
Abrir con HTML.

389
00:15:20,000 --> 00:15:21,000
Bloque de notas, por ejemplo.

390
00:15:22,000 --> 00:15:23,000
Y lo que digo es que...

391
00:15:27,000 --> 00:15:30,000
Fijaros que no me ha copiado el HTTP delante.

392
00:15:30,000 --> 00:15:31,000
¿Lo veis?

393
00:15:32,000 --> 00:15:33,000
¿Vale?

394
00:15:33,000 --> 00:15:34,000
Perfecto.

395
00:15:34,000 --> 00:15:37,000
Entonces lo que voy a hacer es me voy a mi Twitter.

396
00:15:38,000 --> 00:15:39,000
Ojo.

397
00:15:39,000 --> 00:15:40,000
Control-C.

398
00:15:40,000 --> 00:15:41,000
Me voy aquí.

399
00:15:42,000 --> 00:15:43,000
Y ahora sí que lo pego.

400
00:15:45,000 --> 00:15:46,000
Control-V.

401
00:15:46,000 --> 00:15:48,000
Y ahora me voy, por ejemplo, a Duca Madrid.

402
00:15:48,000 --> 00:15:49,000
Cojo esto.

403
00:15:49,000 --> 00:15:50,000
Control-C.

404
00:15:51,000 --> 00:15:52,000
Me voy al código HTML.

405
00:15:54,000 --> 00:15:55,000
Y lo pego.

406
00:15:56,000 --> 00:15:57,000
Ahora sí.

407
00:15:57,000 --> 00:15:58,000
¿Lo veis?

408
00:15:58,000 --> 00:15:59,000
Voy a guardar.

409
00:16:01,000 --> 00:16:02,000
Y voy a actualizar la página.

410
00:16:04,000 --> 00:16:05,000
Ahí está.

411
00:16:05,000 --> 00:16:06,000
Entonces vamos a ver si funciona.

412
00:16:06,000 --> 00:16:08,000
Mirad, si yo le pincho a Salesianos...

413
00:16:08,000 --> 00:16:09,000
Perfecto.

414
00:16:09,000 --> 00:16:10,000
Si le pincho a Martín...

415
00:16:10,000 --> 00:16:12,000
Ahora sí que pone el TPS.

416
00:16:13,000 --> 00:16:14,000
A ver si me aparece.

417
00:16:14,000 --> 00:16:15,000
Ahí está.

418
00:16:15,000 --> 00:16:16,000
¿Lo veis?

419
00:16:16,000 --> 00:16:17,000
Me aparece.

420
00:16:17,000 --> 00:16:21,000
Y si cojo las manos, ya no pone protocolo file, sino HTTP.

421
00:16:22,000 --> 00:16:23,000
A ver qué tengo que bajar.

422
00:16:23,000 --> 00:16:24,000
Ahí está.

423
00:16:24,000 --> 00:16:25,000
TPS.

424
00:16:25,000 --> 00:16:26,000
¿Vale?

425
00:16:26,000 --> 00:16:27,000
Vamos a probarlo.

426
00:16:27,000 --> 00:16:28,000
¿Lo veis?

427
00:16:28,000 --> 00:16:30,000
Me ha abierto la página del colegio.

428
00:16:31,000 --> 00:16:32,000
¿Vale?

429
00:16:32,000 --> 00:16:33,000
Si pincho sobre mí...

430
00:16:36,000 --> 00:16:37,000
Me ha abierto mi Twitter.

431
00:16:39,000 --> 00:16:40,000
Y si pincho sobre las manos...

432
00:16:41,000 --> 00:16:42,000
Había la página de EducaMadrid.

433
00:16:43,000 --> 00:16:46,000
Bueno, pues ahí tenéis un ejemplo de imagen mapeada.

434
00:16:46,000 --> 00:16:51,000
Cómo hacerlo con diversas herramientas, porque es muy difícil a mano poder saber las coordenadas reales.

435
00:16:51,000 --> 00:16:56,000
Entonces, utilizando Jim, utilizando Canva para hacer la imagen, pues cómo hemos podido completarla.

436
00:16:57,000 --> 00:16:58,000
Bueno, pues nada.

437
00:16:58,000 --> 00:16:59,000
Espero os sirva.

438
00:16:59,000 --> 00:17:00,000
Una última cosa.

439
00:17:00,000 --> 00:17:03,000
Esto lo he hecho en un fichero que está en mi ordenador.

440
00:17:03,000 --> 00:17:04,000
Pero ¿qué tengo que hacer?

441
00:17:04,000 --> 00:17:05,000
Si lo hago...

442
00:17:05,000 --> 00:17:07,000
Si lo hago cierre a mano, hay que subirlo a un hosting, ya sabéis.

443
00:17:07,000 --> 00:17:13,000
Pero también podría hacerlo, por ejemplo, en un blog, en Blogger, en WordPress, en un aula virtual, etc.

444
00:17:13,000 --> 00:17:16,000
La única dificultad que vais a tener ahí es dónde guardar esta imagen.

445
00:17:16,000 --> 00:17:17,000
¿Vale?

446
00:17:17,000 --> 00:17:19,000
Porque ya no va a ser referencia a una misma carpeta.

447
00:17:19,000 --> 00:17:22,000
Si no, a lo mejor podéis tenerla en el blog como una entrada.

448
00:17:22,000 --> 00:17:24,000
Podéis tenerla dentro del cloud.

449
00:17:24,000 --> 00:17:27,000
Podéis tenerla de varias formas.

450
00:17:27,000 --> 00:17:28,000
¿Vale?

451
00:17:29,000 --> 00:17:30,000
También otra opción podría ser esta.

452
00:17:31,000 --> 00:17:32,000
Bueno.

453
00:17:33,000 --> 00:17:34,000
Alojarla, por ejemplo.

454
00:17:34,000 --> 00:17:39,000
Si estoy en Blogger, una idea sería tener una entrada.

455
00:17:40,000 --> 00:17:42,000
Ahí la tenéis, como había hecho antes, ¿no?

456
00:17:42,000 --> 00:17:44,000
Dónde he insertado la imagen.

457
00:17:44,000 --> 00:17:49,000
Y para tener la URL de esa imagen, botón derecho, copiar dirección de imagen.

458
00:17:49,000 --> 00:17:50,000
¿Lo veis aquí?

459
00:17:50,000 --> 00:17:53,000
Así siempre estaría disponible esa imagen.

460
00:17:53,000 --> 00:17:56,000
Luego, por ejemplo, lo que podéis hacer es que esté emborrada esta entrada.

461
00:17:58,000 --> 00:18:01,000
Otra opción, por ejemplo, a lo mejor utilizar el drive o...

462
00:18:01,000 --> 00:18:04,000
...el cloud de Ducamadrid para guardar la imagen y luego coger la URL.

463
00:18:04,000 --> 00:18:06,000
O sea, tenéis varias formas de poder hacerlo.

464
00:18:07,000 --> 00:18:08,000
Bueno, pues nada.

465
00:18:08,000 --> 00:18:10,000
Mucho ánimo y espero que os sirva.

466
00:18:10,000 --> 00:18:14,000
Fijaros que aquí en el blog lo he hecho de prueba.

467
00:18:17,000 --> 00:18:18,000
¿Lo veis?

468
00:18:18,000 --> 00:18:22,000
Cuando pinche en Salesianos, mira páginas salesianos, mi Twitter...

469
00:18:26,000 --> 00:18:27,000
...y las manos.

470
00:18:28,000 --> 00:18:29,000
Pues nada.

471
00:18:29,000 --> 00:18:31,000
Hasta luego y espero os sirva.

472
00:18:31,000 --> 00:18:32,000
Chao.