1
00:00:00,000 --> 00:00:03,600
Continuamos con nuestro cursillo, vamos a continuar con las imágenes.

2
00:00:05,809 --> 00:00:11,089
Bueno, vamos a crear una nueva página web, que va a ser página 6.

3
00:00:16,780 --> 00:00:22,039
Abro página 6 como editor de texto favorito, el que queráis.

4
00:00:23,179 --> 00:00:25,859
Abro página 6. Bueno, creo mi página web.

5
00:00:27,280 --> 00:00:31,059
Acordaos que se supone usar plantilla, voy a usar una, y esta va a ser imágenes.

6
00:00:31,059 --> 00:00:43,560
¿De acuerdo? Bueno, pues para meter una imagen, lo tenéis aquí en los apuntes, ¿dónde están los apuntes?

7
00:00:44,880 --> 00:00:57,399
Para meter una imagen, los hiperlaces ya los hemos visto, imágenes se meten con img, vamos a poner img, img, src, esto va a ser lo básico, bueno, cierro la imagen.

8
00:00:58,460 --> 00:01:05,379
Siempre que abro una etiqueta la cierro, ¿vale? Aquí en src voy a indicar la imagen que quiero meter, ¿de acuerdo?

9
00:01:05,379 --> 00:01:16,140
Voy a meter, me he descargado ya una, bueno que sepáis que hay dos tipos de imágenes, esto es importante, hay dos tipos de imágenes.

10
00:01:16,859 --> 00:01:31,969
Tengo imágenes vectoriales y tengo imágenes pixeladas, o mejor dicho basadas en píxeles.

11
00:01:39,430 --> 00:01:47,400
Bueno, voy a meter aquí, para meter luego la imagen, me lo he preparado ya.

12
00:01:47,400 --> 00:01:49,700
Bueno, aquí me falta meter la ruta de imagen.

13
00:01:50,540 --> 00:01:51,879
Las imágenes vectoriales.

14
00:01:51,980 --> 00:01:54,799
En las imágenes vectoriales, como esta que me he descargado aquí,

15
00:01:55,260 --> 00:01:56,480
esto es un ejemplo de imagen vectorial,

16
00:01:56,659 --> 00:02:03,340
esta si la abro, vais a ver, se pueden abrir.

17
00:02:03,540 --> 00:02:07,260
Véis que para empezar las puedo abrir y no me encuentro cosas tan raras.

18
00:02:08,060 --> 00:02:09,979
Lo que se guardó, ¿veis que esto que pone paz?

19
00:02:10,340 --> 00:02:12,620
Estoy guardando las líneas que forman la imagen.

20
00:02:12,860 --> 00:02:16,080
Esta imagen, si la abrimos, se puede abrir perfectamente.

21
00:02:16,860 --> 00:02:20,919
Si la abrimos, ¿veis ahí el dibujito?

22
00:02:21,419 --> 00:02:23,120
Es una especie de dibujito de un ratón.

23
00:02:23,379 --> 00:02:27,280
Y lo divertido de las imágenes vectoriales es que no pierden calidad.

24
00:02:27,780 --> 00:02:31,639
O sea, que yo cuando hago un zoom, ¿veis que no está perdiendo la calidad?

25
00:02:32,439 --> 00:02:36,699
O sea, yo por mucho que amplíe esa línea de ahí, esa línea no pierde calidad.

26
00:02:38,159 --> 00:02:42,580
Se usa muchísimo para los iconos de las aplicaciones, sobre todo para iconos.

27
00:02:42,580 --> 00:02:47,580
Los iconos casi todos, o la gran mayoría, vais a ver que actualmente se hace con imágenes SVG.

28
00:02:48,340 --> 00:02:50,599
¿Veis que tiene extensión? SVG.

29
00:02:50,599 --> 00:02:53,900
si quiero descargar una imagen

30
00:02:53,900 --> 00:02:56,240
SVG, mira aquí está la dirección

31
00:02:56,240 --> 00:02:58,159
de la que me he descargado yo

32
00:02:58,159 --> 00:02:59,860
¿de acuerdo?

33
00:02:59,919 --> 00:03:01,960
me meto en esta página, OpenClipArt

34
00:03:01,960 --> 00:03:04,319
¿de acuerdo? me voy al navegador

35
00:03:04,319 --> 00:03:06,099
tecleo OpenClipArt

36
00:03:06,099 --> 00:03:08,180
y me sale la lista de

37
00:03:08,180 --> 00:03:10,539
imágenes, voy a meterme en OpenClipArt

38
00:03:10,539 --> 00:03:12,120
me he metido en OpenClipArt

39
00:03:12,120 --> 00:03:14,379
y fijaros la maravilla

40
00:03:14,379 --> 00:03:16,000
que hace la gente, todos estos dibujitos

41
00:03:16,000 --> 00:03:18,379
si lo descargáis vais a ver que están hechos por líneas

42
00:03:18,379 --> 00:03:18,840
y

43
00:03:18,840 --> 00:03:21,780
se puede ver

44
00:03:21,780 --> 00:03:24,000
qué líneas han usado. Pues vais a ver que los dibujos

45
00:03:24,000 --> 00:03:25,800
son... Esta línea va de aquí a allí,

46
00:03:26,199 --> 00:03:27,099
esta línea va

47
00:03:27,099 --> 00:03:29,879
de allá para acá. Fijaos qué

48
00:03:29,879 --> 00:03:31,819
obras de arte hay. Hay gente que hace

49
00:03:31,819 --> 00:03:32,300
maravillas.

50
00:03:34,860 --> 00:03:37,080
Lo normal es que usemos imágenes en citas.

51
00:03:37,520 --> 00:03:38,759
O sea, van a ser iconos simples.

52
00:03:39,280 --> 00:03:41,300
Hay programas por ahí que te permiten a ti

53
00:03:41,300 --> 00:03:42,280
editar la imagen.

54
00:03:43,520 --> 00:03:44,460
Tenéis, por ejemplo,

55
00:03:44,460 --> 00:03:46,659
el Inescape

56
00:03:46,659 --> 00:03:51,740
para generar imágenes vectoriales

57
00:03:51,740 --> 00:03:54,439
que no lo tengo instalado, me lo tenía que haber instalado

58
00:03:54,439 --> 00:03:55,500
para enseñarlo, pero bueno

59
00:03:55,500 --> 00:03:58,560
lo vemos aquí en internet

60
00:03:58,560 --> 00:04:00,539
tenemos el InScape

61
00:04:00,539 --> 00:04:02,479
el InScape es un programa

62
00:04:02,479 --> 00:04:04,460
que te permite generar y editar

63
00:04:04,460 --> 00:04:06,539
imágenes vectoriales

64
00:04:06,539 --> 00:04:08,680
aquí lo tenemos, es un programa de software

65
00:04:08,680 --> 00:04:10,539
libre y este programa pues te permite

66
00:04:10,539 --> 00:04:12,639
hacer dibujos en imágenes vectoriales

67
00:04:12,639 --> 00:04:14,620
dibujas

68
00:04:14,620 --> 00:04:16,660
y demás, hay también editores

69
00:04:16,660 --> 00:04:17,980
online

70
00:04:17,980 --> 00:04:23,310
si sigue existiendo, el SBOG Edit

71
00:04:24,069 --> 00:04:53,689
svg edit era una página web que te permitía, aquí está, es una página web que te permite editar archivos svg online, o sea, tú le dices aquí quiero dibujar un rectángulo, dibujas el rectángulo, dibujas la circunferencia, bueno, que mal lo he dibujado, como son imágenes vectoriales, fijaos que puedo mover como si fuese un powerpoint o un dibujo parecido, le cambio el color y no, y luego cuando ya estoy, he hecho mi obra de arte, digo salvar,

72
00:04:56,269 --> 00:04:56,709
Salvar.

73
00:04:57,209 --> 00:04:59,689
Y la voy a guardar como imagen 2.

74
00:05:02,949 --> 00:05:03,430
SVG.

75
00:05:03,709 --> 00:05:05,410
Fijaos que tiene un rectángulo y un círculo.

76
00:05:06,069 --> 00:05:06,850
O una circunferencia.

77
00:05:07,730 --> 00:05:10,110
Si la guardáis bien, aquí veis mi imagen 2.

78
00:05:10,370 --> 00:05:17,550
Si la abro, veis lo que guarda.

79
00:05:17,689 --> 00:05:21,629
Dice, mira, aquí estoy guardando un rectángulo que tiene este color.

80
00:05:21,629 --> 00:05:25,209
Y aquí estoy guardando una elixir que tiene este color.

81
00:05:25,350 --> 00:05:27,490
Pretendía que fuese una circunferencia, pero mira, me ha salido el elixir.

82
00:05:28,110 --> 00:05:28,250
¿Vale?

83
00:05:29,329 --> 00:05:31,709
Pues así son las imágenes vectoriales.

84
00:05:32,550 --> 00:05:35,470
se pueden poner en nuestra página web.

85
00:05:35,990 --> 00:05:37,449
La podemos añadir a nuestra página web.

86
00:05:37,790 --> 00:05:39,269
¿Dónde tengo yo mi editor? Aquí.

87
00:05:40,370 --> 00:05:41,670
Vuelvo a mi página web.

88
00:05:44,600 --> 00:05:44,939
Aquí está.

89
00:05:45,379 --> 00:05:46,680
Bueno, pues para meter la imagen,

90
00:05:47,079 --> 00:05:49,860
simplemente tengo que poner img y el nombre de la imagen.

91
00:05:49,939 --> 00:05:51,699
Voy a meter la imagen 2, o la que queráis.

92
00:05:54,060 --> 00:05:56,740
Me hace ilusión, ya que la he hecho, me hace ilusión.

93
00:05:57,879 --> 00:05:58,680
La meto.

94
00:06:01,540 --> 00:06:02,480
Recargo la...

95
00:06:02,480 --> 00:06:03,879
Ah, no, tengo que abrir la página 6.

96
00:06:04,019 --> 00:06:04,519
Esta es la 5.

97
00:06:05,199 --> 00:06:05,680
La 6.

98
00:06:05,959 --> 00:06:06,660
Ahora la página 6.

99
00:06:06,980 --> 00:06:08,339
Fijaos, ahí está mi imagen metida.

100
00:06:09,040 --> 00:06:11,160
Lo divertido de esta imagen es que por mucho que haga zoom,

101
00:06:13,160 --> 00:06:14,540
veis que no pierde calidad.

102
00:06:15,720 --> 00:06:19,769
Por mucho que haga zoom, no pierde calidad.

103
00:06:19,990 --> 00:06:20,889
Y ocupa muy poquito.

104
00:06:21,689 --> 00:06:23,350
Porque, fijaos, ¿qué guarda dentro?

105
00:06:23,970 --> 00:06:27,589
Guarda la posición de un, bueno, de un elixir y de un rectángulo.

106
00:06:27,589 --> 00:06:32,769
Esta imagen ocupa, no llega ni a un K, 483 bytes.

107
00:06:33,529 --> 00:06:33,610
¿Vale?

108
00:06:33,610 --> 00:06:37,990
Esa misma imagen en formato PNG o JP

109
00:06:37,990 --> 00:06:40,810
vais a ver que ocupa muchísimo más de 400 bytes.

110
00:06:41,149 --> 00:06:43,889
400 bytes, no cache, bytes.

111
00:06:47,430 --> 00:06:51,350
Voy a cambiar a la otra imagen.

112
00:06:51,990 --> 00:06:54,250
A veces la imagen puede ser muy grande o muy pequeña.

113
00:06:55,029 --> 00:06:55,949
Voy a cambiar a la otra imagen.

114
00:06:56,550 --> 00:06:58,709
La otra imagen es exageradamente grande.

115
00:07:00,029 --> 00:07:01,709
Es exageradamente grande.

116
00:07:01,709 --> 00:07:03,389
Es tan grande que aunque haga zoom,

117
00:07:03,610 --> 00:07:16,930
¿Ves que no cambia el tamaño? Le estoy haciendo zoom a la página, estoy en un 400%, me voy a subir a un 400%, estoy a más de un 400% de tamaño de la página y no ha cambiado su imagen, su tamaño.

118
00:07:17,029 --> 00:07:21,050
¿Por qué? Cuando la otra sí que lo cambiaba. ¿Por qué? Porque esta imagen es excesivamente grande.

119
00:07:21,850 --> 00:07:28,430
Entonces, como esta imagen es excesivamente grande, puedo hacerlo con imágenes excesivamente grandes o excesivamente pequeñas.

120
00:07:28,430 --> 00:07:32,370
con width le puedo cambiar el tamaño. Puedo decir que ocupa

121
00:07:32,370 --> 00:07:38,329
100 píxeles. ¿De acuerdo? Puedo decir que ocupa 100 píxeles.

122
00:07:38,449 --> 00:07:42,209
¿Lo veis? Ya me lo he adaptado. O puedo decirle también el porcentaje

123
00:07:42,209 --> 00:07:45,990
de la pantalla o del elemento que ocupa. Puedo decirle que ocupe

124
00:07:45,990 --> 00:07:50,009
el 50% del tamaño

125
00:07:50,009 --> 00:07:51,910
del elemento que lo contiene.

126
00:07:54,290 --> 00:07:57,949
Pues veis que es como el elemento que lo contiene a este img

127
00:07:57,949 --> 00:07:59,870
es este body y el body

128
00:07:59,870 --> 00:08:00,189
ocupa

129
00:08:00,189 --> 00:08:03,730
el body va de aquí hasta aquí

130
00:08:03,730 --> 00:08:05,290
todo el ancho de la página web, pues

131
00:08:05,290 --> 00:08:07,670
el dibujito este del ratón es más o menos

132
00:08:07,670 --> 00:08:09,110
el 50%

133
00:08:09,110 --> 00:08:11,449
de la pantalla, ¿vale?

134
00:08:11,509 --> 00:08:21,850
O le puedo poner el 25%, ¿vale?

135
00:08:22,449 --> 00:08:24,089
Antiguamente usaban este truco

136
00:08:24,089 --> 00:08:26,029
del 25-50 para centrar

137
00:08:26,029 --> 00:08:27,949
cosas en la página web. Actualmente

138
00:08:27,949 --> 00:08:29,730
no, actualmente usa diseño en columnas

139
00:08:29,730 --> 00:08:31,829
o centrar por CSS, ¿vale? Vimos que

140
00:08:31,829 --> 00:08:34,009
en CSS podías hacer diseño en columnas

141
00:08:34,009 --> 00:08:36,070
pues puedes usar diseño en columnas

142
00:08:36,070 --> 00:08:41,029
O usar CSS para que te coloque tu columna de texto en el centro.

143
00:08:41,149 --> 00:08:43,429
No metas una imagen simplemente por hacer relleno.

144
00:08:43,730 --> 00:08:44,629
Pero antiguamente se usaba.

145
00:08:44,730 --> 00:08:46,830
Se ponía una imagen de un píxel y le cambiabas el tamaño.

146
00:08:47,370 --> 00:08:49,429
Igual que cambio la altura, voy a hacerlo en píxeles,

147
00:08:51,919 --> 00:08:52,980
le puedo cambiar la altura.

148
00:08:53,559 --> 00:08:54,440
Que eso se hace con Height.

149
00:08:57,299 --> 00:09:00,740
Voy a poner la altura de 25 píxeles.

150
00:09:01,240 --> 00:09:03,879
Va a quedar extraordinariamente deformada la imagen.

151
00:09:04,820 --> 00:09:05,779
Cuando recargo...

152
00:09:07,279 --> 00:09:08,240
Ah, pues no se ha deformado.

153
00:09:08,240 --> 00:09:09,000
No se ha deformado.

154
00:09:09,000 --> 00:09:17,500
Claro, porque al ser vectorial, a esto lo vamos a ver mejor con el formato basado en píxel.

155
00:09:17,759 --> 00:09:19,360
Fijaos que la imagen no se ha dejado de formar.

156
00:09:20,019 --> 00:09:21,559
Pero vamos, la imagen se debería de formar.

157
00:09:22,240 --> 00:09:23,460
Vamos a la basada en píxeles.

158
00:09:24,039 --> 00:09:26,639
Las basadas en píxeles son las imágenes de toda la vida.

159
00:09:28,720 --> 00:09:31,919
Vamos a descargarnos una imagen, o nos podemos hacer una.

160
00:09:33,299 --> 00:09:33,679
De acuerdo.

161
00:09:34,399 --> 00:09:36,100
A ver, esto tiene opción a descargar.

162
00:09:37,360 --> 00:09:38,240
A exportar.

163
00:09:38,240 --> 00:09:46,740
mira tiene opción exportar como png vale me vale voy a exportar como png mi famosa imagen o guardar

164
00:09:46,740 --> 00:10:01,940
imagen como y la vamos a guardar como pixelada vale los formatos basados en píxeles tenemos el

165
00:10:01,940 --> 00:10:11,460
png de png como este el jpeg bueno lo que veis imaginaos cuando hacéis las fotos habitualmente

166
00:10:11,460 --> 00:10:31,779
El TIFF, el GIF, fijaos qué diferencia del SVG que ocupa 400 bytes al PNG que ocupa 38, que ocupa 38 Ks, o sea, la diferencia es casi de 10.000 veces más grande el PNG respecto al SVG y encima pierde calidad.

167
00:10:31,779 --> 00:10:34,139
Vamos a meterlo en la imagen, en nuestra página web.

168
00:10:35,539 --> 00:10:40,259
Vamos a meter ahí apixelada, PNG.

169
00:10:41,700 --> 00:10:44,740
El PNG, formato PNG, se suele usar también para iconos.

170
00:10:45,100 --> 00:10:48,559
Y para fotos usamos el JPEG, que tiene mejor calidad.

171
00:10:49,480 --> 00:10:49,960
Ahí lo tenemos.

172
00:10:50,720 --> 00:10:54,039
Si hago zoom, ¿ves que empieza?

173
00:10:54,820 --> 00:10:55,759
No sé si en el vídeo se nota.

174
00:10:56,759 --> 00:10:57,980
¿Ves que ya empieza a apixelar?

175
00:10:59,179 --> 00:11:00,879
En la circunferencia se nota mucho, mira.

176
00:11:01,639 --> 00:11:04,440
¿Veis que la circunferencia empieza a hacer como unos dientes de sierra?

177
00:11:06,159 --> 00:11:11,299
No sé si en el vídeo se apreciará, pero empieza a hacerlo en casa, vais a ver que se notan como unos dientes de sierra.

178
00:11:11,659 --> 00:11:16,740
Es que luego también el ordenador usa algoritmos para evitar, intentar que no se note el pixelado.

179
00:11:17,659 --> 00:11:20,580
Pero vais a ver que aparecen ahí una especie de dientes de sierra.

180
00:11:21,039 --> 00:11:23,220
Eso es que se debe a una imagen pixelada.

181
00:11:25,059 --> 00:11:27,840
¿Le puedo cambiar la altura y la altura? Mira, voy a copiar estos dos parámetros.

182
00:11:31,950 --> 00:11:32,929
Los copio y los pego aquí.

183
00:11:35,639 --> 00:11:36,519
He hecho un copia y pegar.

184
00:11:37,139 --> 00:11:37,799
Lo recargo.

185
00:11:40,289 --> 00:11:42,149
Bueno, veis que aquí sí que la deforma la imagen, ¿no?

186
00:11:42,149 --> 00:11:44,929
Le ha puesto una altura de 100 y una altura de 25.

187
00:11:45,590 --> 00:11:50,409
O sea, aquí no nos ha hecho caso, el VG no nos ha hecho caso, no ha deformado la imagen.

188
00:11:50,730 --> 00:11:52,789
Pero aquí se ve muy claramente que sí deforma la imagen.

189
00:11:53,590 --> 00:11:56,889
¿Vale? Si pongo una altura y una altura inadecuadas, se deforma la imagen.

190
00:11:56,889 --> 00:12:02,370
Para no tener problemas, pongo solamente altura o pongo solamente altura y me quito de ese problema.

191
00:12:02,370 --> 00:12:07,610
Ya automáticamente el navegador calcula cuál tiene que ser la anchura y la altura para que la imagen quede bien.

192
00:12:07,870 --> 00:12:09,370
¿Veis? Ya la pone bien.

193
00:12:09,909 --> 00:12:14,029
Hay otros formatos, algunos antiguos, que también son interesantes.

194
00:12:14,570 --> 00:12:20,960
Tenemos el formato GIF animado, que antiguamente se usaba muchísimo.

195
00:12:23,240 --> 00:12:24,539
Ahora también para alguna cosa.

196
00:12:24,840 --> 00:12:27,600
El formato GIF animado son imágenes que se mueven.

197
00:12:30,889 --> 00:12:33,070
A ver si vemos alguna. ¿Veis? Imágenes que se mueven.

198
00:12:34,590 --> 00:12:36,049
Imágenes que se mueven. Lo veis ahí.

199
00:12:37,549 --> 00:12:44,549
Bueno, pues el formato GIF, no voy a descargar ninguna, son imágenes que se mueven, las podéis descartar.

200
00:12:44,730 --> 00:12:48,990
Y hay aplicaciones que te permiten hacer los GIFs animados, las imágenes animadas.

201
00:12:49,909 --> 00:12:52,370
Estaréis hartados de verlos en el WhatsApp y en sitios así.

202
00:12:53,990 --> 00:13:01,730
Bueno, veis aquí hay un creador de GIF, lo que hace es que le subes las imágenes, le dices el tiempo entre imágenes, entre fotogramas,

203
00:13:01,789 --> 00:13:05,809
o sea, cada imagen que le subas va a ser un fotograma y él te genera ya el GIF animado.

204
00:13:05,809 --> 00:13:32,080
para nosotros sería como un vídeo actualmente, pero bueno, es un vídeo como de baja calidad, pensado para iconos y cosas así, para imágenes sencillas, a ver si se mueve, no se mueve, bueno, así más formatos interesantes, pues ahora mismo no se me ocurren, pero vamos, los típicos son el GIF, PNG y JPEG, JPEG se usa mucho para fotos, vale, pero bueno, ya estoy aquí divagando un poco,

205
00:13:32,080 --> 00:13:35,379
más cosas sobre los apuntes.

206
00:13:36,139 --> 00:13:37,600
Bueno, tenéis el atributo alt.

207
00:13:39,240 --> 00:13:41,940
El atributo alt es un alternativo

208
00:13:41,940 --> 00:13:43,600
para presentar si no se encuentra la imagen.

209
00:13:47,080 --> 00:13:48,379
Esto se usaba mucho

210
00:13:48,379 --> 00:13:50,600
para los ciegos y personas así.

211
00:13:52,830 --> 00:13:54,549
Y luego useMap e isMap

212
00:13:54,549 --> 00:13:55,610
se usa para mapas.

213
00:13:56,169 --> 00:13:57,549
Se pueden hacer mapas de imagen.

214
00:14:00,259 --> 00:14:01,279
¿Esto en qué consiste?

215
00:14:01,419 --> 00:14:03,200
Pues mira, no sé si habéis entrado alguna vez

216
00:14:03,200 --> 00:14:04,980
en el Instituto...

217
00:14:05,340 --> 00:14:23,100
bueno, antiguamente, la EMET, antiguamente era el Instituto Nacional de, me he metido una EDMAS, AEMET, estoy entrando en la EMET para ver el tiempo, yo voy a decir que quiero ver más municipios,

218
00:14:23,100 --> 00:14:25,340
y te vamos a dibujar aquí un mapita.

219
00:14:26,039 --> 00:14:26,659
¿Veis este mapita?

220
00:14:27,000 --> 00:14:30,840
Y este mapita, ¿veis qué pasa cuando yo elijo una comunidad?

221
00:14:31,500 --> 00:14:32,679
Como que cambia de color.

222
00:14:33,480 --> 00:14:33,659
¿Vale?

223
00:14:35,019 --> 00:14:38,480
Bueno, pues esto es una imagen la cual han mapeado.

224
00:14:40,980 --> 00:14:43,460
En la imagen mapeada, tú cargas la imagen.

225
00:14:45,139 --> 00:14:49,620
Tú cargas la imagen normal y le añades este atributo, el useMap.

226
00:14:50,639 --> 00:14:54,720
Con useMap, bueno, tienes que meterle el atributo isMap,

227
00:14:54,860 --> 00:14:56,759
Para decirle que es una imagen interactiva.

228
00:14:57,159 --> 00:14:58,659
Y un map, le tienes que indicar el map.

229
00:14:59,340 --> 00:15:03,340
Y en el mapa, le tienes que poner un nombre.

230
00:15:03,840 --> 00:15:08,440
Y tienes que, esto que pone área, tienes que definir tú las coordenadas de cada zona.

231
00:15:08,639 --> 00:15:10,940
Esto que han hecho aquí es un trabajo de chinos.

232
00:15:10,940 --> 00:15:15,080
Porque ya simplemente la Comunidad de Madrid, ya es, bueno, puede ser un triángulo, ¿no?

233
00:15:15,159 --> 00:15:17,039
Puedes poner un triángulo aquí con cuatro puntas.

234
00:15:17,419 --> 00:15:19,320
Con tres puntas, perdón, un triángulo tiene tres puntas.

235
00:15:20,019 --> 00:15:22,940
Podrías definirlo con un triángulo, pero vamos, se ve que se lo han...

236
00:15:22,940 --> 00:15:30,320
este es un trabajo de chinos han definido ahí línea a línea vale pero que tú puedes definir

237
00:15:30,320 --> 00:15:39,259
la posición de cada parte del mapa a cada parte de la imagen y luego que cuando hagas clic cuando

238
00:15:39,259 --> 00:15:44,720
hagas clic aquí en el h red te lleva a un sitio si yo me selecciono una comunidad por ejemplo

239
00:15:44,720 --> 00:15:54,259
madrid y hago clic pues me lleva a esa comunidad eso es un mapa de acuerdo aquí tenéis una imagen

240
00:15:54,259 --> 00:16:00,720
un ejemplo una vez se carga la imagen la que sea dice que vas a usar el mapa el mapa 1 la

241
00:16:00,720 --> 00:16:04,600
puesto nombre y dice mira tengo un área que va a ser un círculo con estas coordenadas le llegó

242
00:16:04,600 --> 00:16:12,539
el centro y el radio y cuando pulse en esa posición en ese círculo que me define este área pues voy a

243
00:16:12,539 --> 00:16:14,419
saltar e inicia HTML. Y luego tengo

244
00:16:14,419 --> 00:16:16,419
aquí un rectángulo con estas coordenadas

245
00:16:16,419 --> 00:16:18,480
que cuando yo le pinche a ese

246
00:16:18,480 --> 00:16:20,399
rectángulo, voy a saltar a ese enlace.

247
00:16:20,639 --> 00:16:21,679
Lo dicho, que lo que han hecho ahí

248
00:16:21,679 --> 00:16:24,399
la Agencia Estatal de Meteorología

249
00:16:24,399 --> 00:16:26,360
pues es un trabajo de

250
00:16:26,360 --> 00:16:28,399
chinos. Y con

251
00:16:28,399 --> 00:16:30,320
esto acabo las imágenes.