Saltar navegación

Mapas Sensibles con HTML - Contenido educativo

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 15 de junio de 2023 por Manuel D.

12 visualizaciones

Más información Transcripción

Descargar la transcripción

Hola chicos, os voy a explicar muy rápidamente cómo abrir una imagen en GIMP y cómo obtener los puntos de los píxeles en los que nosotros podemos, por ejemplo, hacer un mapa sensible, que es otro de los objetivos de este vídeo. 00:00:05
Enseñaros a obtener el punto para luego poder hacer un mapa sensible en HTML, que es una de las cosas que me estáis demandando y preguntando más, y de esta manera, bueno, pues, como se suele decir, me quito dos pájaros de un tiro. 00:00:21
bueno, si yo le doy aquí a archivo 00:00:31
y le doy a abrir 00:00:34
me voy a tener que seleccionar 00:00:35
la imagen que yo quiero poner 00:00:38
si no está aquí 00:00:40
me tendría que ir a la localización de la imagen 00:00:41
y abrirla, yo por ejemplo la tengo aquí 00:00:45
entonces la abro 00:00:47
y veis que en este caso 00:00:49
se trata de una imagen pequeña 00:00:51
es una imagen pequeña 00:00:52
y yo puedo hacer 00:00:54
lo siguiente, yo puedo dar a la tecla más 00:00:57
de mi teclado 00:00:59
Y le estoy aplicando el zoom 00:01:01
Y le doy a la tecla menos 00:01:03
Y le doy aplicando el zoom 00:01:04
¿Vale? 00:01:06
Bueno, si me sitúo con el puntero del ratón 00:01:07
En cualquier punto de aquí 00:01:10
¿Vale? 00:01:11
Veis que aquí abajo 00:01:13
En esta parte de aquí 00:01:14
¿Vale? Ahora mismo no, pero 00:01:16
Veis que ahí, por ejemplo, estoy en el punto 18, 171 00:01:18
¿Vale? Si me voy aquí a Madrid 00:01:23
Pues estaría como en el 133, 175 00:01:24
Bueno, etcétera, etcétera 00:01:27
¿Vale? 00:01:28
Yo, por ejemplo, he creado 00:01:29
este mapa, dentro de lo que es 00:01:31
esta imagen, vale 00:01:33
fijaos, he cogido 00:01:35
un título, lo que sea, vale 00:01:37
le he puesto el nombre mapa, le podéis 00:01:41
dar el nombre que queráis, y he hecho 00:01:43
un área circular en las coordenadas 00:01:45
134, 74, es decir 00:01:47
por aquí por Madrid, vale 00:01:49
serían, bueno pues por aquí casi 00:01:51
casi, vale, con el ratón 00:01:53
ahora me cuesta un poquito, pero bueno 00:01:55
ahí, vale, y le he dicho 00:01:57
que tenga un radio de 10 00:01:59
y de esta manera en ese área, que va a ser un área circular aquí en la zona esta de Madrid 00:02:01
pinchando en ella me voy a hacer una referencia al Madrid.org 00:02:05
Luego he hecho una coordenada rectangular 00:02:09
desde la 5048 hasta la 70143 00:02:14
eso más o menos es este área de aquí 00:02:18
un área rectangular, que en este caso me lo voy a portugal.com 00:02:21
y por último he hecho un área poligonal 00:02:25
Un área poligonal que hace un dibujo aquí sobre Extremadura 00:02:27
Así un poquito, bueno, pues parecido a lo que es en este caso la provincia de Extremadura 00:02:31
¿Vale? Siempre en los mapas sensibles hay que intentar jugar con esto de polígono 00:02:36
Porque es como realmente mejor nos va a salir 00:02:41
¿Vale? Pero realmente importante, fijaos, ahora mismo estoy en el 94-93 00:02:44
¿Por qué estoy en el 94-93? Porque aquí abajo me lo pone 00:02:48
¿Vale? Ahora donde estoy, en el 95-40 00:02:51
Entonces esto es lo que tenéis que ir apuntando 00:02:54
bueno, si yo guardo 00:02:56
esto como mapa 00:02:59
y lo ejecuto 00:03:00
pues fijaos, me aparece esto 00:03:01
en mi página web 00:03:05
de tal manera que si yo pincho 00:03:06
aquí en la zona de Madrid, fijaos 00:03:09
me sale ese círculo 00:03:10
y pincho, y donde me lleva, pues a lo que había dicho 00:03:11
a madrid.org 00:03:15
si pincho aquí en la zona de Portugal 00:03:16
que es otra de las que había marcado 00:03:19
pues ahí tengo el rectángulo 00:03:20
y donde me lleva, pues era a 00:03:22
Y por último, era una opción poligonal. 00:03:25
Bueno, pues fijaos, hay más o menos ese polígono. 00:03:30
Cada uno, esto simplemente para que veáis cómo se hace, no es suficiente. 00:03:32
Y me lleva a Extremadura.com. 00:03:37
Bueno, esta es la forma de hacer más fácilmente los mapas sensibles. 00:03:40
Os vuelvo a poner cómo sería el código de este. 00:03:47
si yo me voy aquí a archivo 00:03:50
y me voy a herramientas 00:03:53
le puedo aquí a dar 00:03:56
guardar la página 00:03:58
si le doy aquí a 00:03:59
marcadores 00:04:02
me gustan otros marcadores 00:04:03
etc, etc, etc 00:04:05
y para ver el código fuente, pues fijaos 00:04:06
botón derecho, ver código fuente de la página 00:04:08
y aquí os dejo como sería 00:04:11
en este caso 00:04:13
el ejemplo del mapa que acabo de poner 00:04:13
espero que haya sido de ayuda 00:04:17
si cualquier cosa que no hayáis entendido en ánimo que tenéis que 00:04:20
terminar en la página web 00:04:26
Idioma/s:
es
Autor/es:
Manuel de la Fuente Otero
Subido por:
Manuel D.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
12
Fecha:
15 de junio de 2023 - 18:16
Visibilidad:
Clave
Centro:
CPR INF-PRI-SEC SAN JOSÉ (28014065)
Duración:
04′ 36″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
23.02 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid