Saltar navegación

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

Imágenes en 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 27 de septiembre de 2024 por Pedro Luis L.

15 visualizaciones

Más información Transcripción

Descargar la transcripción

Continuamos con nuestro cursillo, vamos a continuar con las imágenes. 00:00:00
Bueno, vamos a crear una nueva página web, que va a ser página 6. 00:00:05
Abro página 6 como editor de texto favorito, el que queráis. 00:00:16
Abro página 6. Bueno, creo mi página web. 00:00:23
Acordaos que se supone usar plantilla, voy a usar una, y esta va a ser imágenes. 00:00:27
¿De acuerdo? Bueno, pues para meter una imagen, lo tenéis aquí en los apuntes, ¿dónde están los apuntes? 00:00:31
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. 00:00:44
Siempre que abro una etiqueta la cierro, ¿vale? Aquí en src voy a indicar la imagen que quiero meter, ¿de acuerdo? 00:00:58
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. 00:01:05
Tengo imágenes vectoriales y tengo imágenes pixeladas, o mejor dicho basadas en píxeles. 00:01:16
Bueno, voy a meter aquí, para meter luego la imagen, me lo he preparado ya. 00:01:39
Bueno, aquí me falta meter la ruta de imagen. 00:01:47
Las imágenes vectoriales. 00:01:50
En las imágenes vectoriales, como esta que me he descargado aquí, 00:01:51
esto es un ejemplo de imagen vectorial, 00:01:55
esta si la abro, vais a ver, se pueden abrir. 00:01:56
Véis que para empezar las puedo abrir y no me encuentro cosas tan raras. 00:02:03
Lo que se guardó, ¿veis que esto que pone paz? 00:02:08
Estoy guardando las líneas que forman la imagen. 00:02:10
Esta imagen, si la abrimos, se puede abrir perfectamente. 00:02:12
Si la abrimos, ¿veis ahí el dibujito? 00:02:16
Es una especie de dibujito de un ratón. 00:02:21
Y lo divertido de las imágenes vectoriales es que no pierden calidad. 00:02:23
O sea, que yo cuando hago un zoom, ¿veis que no está perdiendo la calidad? 00:02:27
O sea, yo por mucho que amplíe esa línea de ahí, esa línea no pierde calidad. 00:02:32
Se usa muchísimo para los iconos de las aplicaciones, sobre todo para iconos. 00:02:38
Los iconos casi todos, o la gran mayoría, vais a ver que actualmente se hace con imágenes SVG. 00:02:42
¿Veis que tiene extensión? SVG. 00:02:48
si quiero descargar una imagen 00:02:50
SVG, mira aquí está la dirección 00:02:53
de la que me he descargado yo 00:02:56
¿de acuerdo? 00:02:58
me meto en esta página, OpenClipArt 00:02:59
¿de acuerdo? me voy al navegador 00:03:01
tecleo OpenClipArt 00:03:04
y me sale la lista de 00:03:06
imágenes, voy a meterme en OpenClipArt 00:03:08
me he metido en OpenClipArt 00:03:10
y fijaros la maravilla 00:03:12
que hace la gente, todos estos dibujitos 00:03:14
si lo descargáis vais a ver que están hechos por líneas 00:03:16
se puede ver 00:03:18
qué líneas han usado. Pues vais a ver que los dibujos 00:03:21
son... Esta línea va de aquí a allí, 00:03:24
esta línea va 00:03:26
de allá para acá. Fijaos qué 00:03:27
obras de arte hay. Hay gente que hace 00:03:29
maravillas. 00:03:31
Lo normal es que usemos imágenes en citas. 00:03:34
O sea, van a ser iconos simples. 00:03:37
Hay programas por ahí que te permiten a ti 00:03:39
editar la imagen. 00:03:41
Tenéis, por ejemplo, 00:03:43
el Inescape 00:03:44
para generar imágenes vectoriales 00:03:46
que no lo tengo instalado, me lo tenía que haber instalado 00:03:51
para enseñarlo, pero bueno 00:03:54
lo vemos aquí en internet 00:03:55
tenemos el InScape 00:03:58
el InScape es un programa 00:04:00
que te permite generar y editar 00:04:02
imágenes vectoriales 00:04:04
aquí lo tenemos, es un programa de software 00:04:06
libre y este programa pues te permite 00:04:08
hacer dibujos en imágenes vectoriales 00:04:10
dibujas 00:04:12
y demás, hay también editores 00:04:14
online 00:04:16
si sigue existiendo, el SBOG Edit 00:04:17
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, 00:04:24
Salvar. 00:04:56
Y la voy a guardar como imagen 2. 00:04:57
SVG. 00:05:02
Fijaos que tiene un rectángulo y un círculo. 00:05:03
O una circunferencia. 00:05:06
Si la guardáis bien, aquí veis mi imagen 2. 00:05:07
Si la abro, veis lo que guarda. 00:05:10
Dice, mira, aquí estoy guardando un rectángulo que tiene este color. 00:05:17
Y aquí estoy guardando una elixir que tiene este color. 00:05:21
Pretendía que fuese una circunferencia, pero mira, me ha salido el elixir. 00:05:25
¿Vale? 00:05:28
Pues así son las imágenes vectoriales. 00:05:29
se pueden poner en nuestra página web. 00:05:32
La podemos añadir a nuestra página web. 00:05:35
¿Dónde tengo yo mi editor? Aquí. 00:05:37
Vuelvo a mi página web. 00:05:40
Aquí está. 00:05:44
Bueno, pues para meter la imagen, 00:05:45
simplemente tengo que poner img y el nombre de la imagen. 00:05:47
Voy a meter la imagen 2, o la que queráis. 00:05:49
Me hace ilusión, ya que la he hecho, me hace ilusión. 00:05:54
La meto. 00:05:57
Recargo la... 00:06:01
Ah, no, tengo que abrir la página 6. 00:06:02
Esta es la 5. 00:06:04
La 6. 00:06:05
Ahora la página 6. 00:06:05
Fijaos, ahí está mi imagen metida. 00:06:06
Lo divertido de esta imagen es que por mucho que haga zoom, 00:06:09
veis que no pierde calidad. 00:06:13
Por mucho que haga zoom, no pierde calidad. 00:06:15
Y ocupa muy poquito. 00:06:19
Porque, fijaos, ¿qué guarda dentro? 00:06:21
Guarda la posición de un, bueno, de un elixir y de un rectángulo. 00:06:23
Esta imagen ocupa, no llega ni a un K, 483 bytes. 00:06:27
¿Vale? 00:06:33
Esa misma imagen en formato PNG o JP 00:06:33
vais a ver que ocupa muchísimo más de 400 bytes. 00:06:37
400 bytes, no cache, bytes. 00:06:41
Voy a cambiar a la otra imagen. 00:06:47
A veces la imagen puede ser muy grande o muy pequeña. 00:06:51
Voy a cambiar a la otra imagen. 00:06:55
La otra imagen es exageradamente grande. 00:06:56
Es exageradamente grande. 00:07:00
Es tan grande que aunque haga zoom, 00:07:01
¿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. 00:07:03
¿Por qué? Cuando la otra sí que lo cambiaba. ¿Por qué? Porque esta imagen es excesivamente grande. 00:07:17
Entonces, como esta imagen es excesivamente grande, puedo hacerlo con imágenes excesivamente grandes o excesivamente pequeñas. 00:07:21
con width le puedo cambiar el tamaño. Puedo decir que ocupa 00:07:28
100 píxeles. ¿De acuerdo? Puedo decir que ocupa 100 píxeles. 00:07:32
¿Lo veis? Ya me lo he adaptado. O puedo decirle también el porcentaje 00:07:38
de la pantalla o del elemento que ocupa. Puedo decirle que ocupe 00:07:42
el 50% del tamaño 00:07:45
del elemento que lo contiene. 00:07:50
Pues veis que es como el elemento que lo contiene a este img 00:07:54
es este body y el body 00:07:57
ocupa 00:07:59
el body va de aquí hasta aquí 00:08:00
todo el ancho de la página web, pues 00:08:03
el dibujito este del ratón es más o menos 00:08:05
el 50% 00:08:07
de la pantalla, ¿vale? 00:08:09
O le puedo poner el 25%, ¿vale? 00:08:11
Antiguamente usaban este truco 00:08:22
del 25-50 para centrar 00:08:24
cosas en la página web. Actualmente 00:08:26
no, actualmente usa diseño en columnas 00:08:27
o centrar por CSS, ¿vale? Vimos que 00:08:29
en CSS podías hacer diseño en columnas 00:08:31
pues puedes usar diseño en columnas 00:08:34
O usar CSS para que te coloque tu columna de texto en el centro. 00:08:36
No metas una imagen simplemente por hacer relleno. 00:08:41
Pero antiguamente se usaba. 00:08:43
Se ponía una imagen de un píxel y le cambiabas el tamaño. 00:08:44
Igual que cambio la altura, voy a hacerlo en píxeles, 00:08:47
le puedo cambiar la altura. 00:08:51
Que eso se hace con Height. 00:08:53
Voy a poner la altura de 25 píxeles. 00:08:57
Va a quedar extraordinariamente deformada la imagen. 00:09:01
Cuando recargo... 00:09:04
Ah, pues no se ha deformado. 00:09:07
No se ha deformado. 00:09:08
Claro, porque al ser vectorial, a esto lo vamos a ver mejor con el formato basado en píxel. 00:09:09
Fijaos que la imagen no se ha dejado de formar. 00:09:17
Pero vamos, la imagen se debería de formar. 00:09:20
Vamos a la basada en píxeles. 00:09:22
Las basadas en píxeles son las imágenes de toda la vida. 00:09:24
Vamos a descargarnos una imagen, o nos podemos hacer una. 00:09:28
De acuerdo. 00:09:33
A ver, esto tiene opción a descargar. 00:09:34
A exportar. 00:09:37
mira tiene opción exportar como png vale me vale voy a exportar como png mi famosa imagen o guardar 00:09:38
imagen como y la vamos a guardar como pixelada vale los formatos basados en píxeles tenemos el 00:09:46
png de png como este el jpeg bueno lo que veis imaginaos cuando hacéis las fotos habitualmente 00:10:01
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. 00:10:11
Vamos a meterlo en la imagen, en nuestra página web. 00:10:31
Vamos a meter ahí apixelada, PNG. 00:10:35
El PNG, formato PNG, se suele usar también para iconos. 00:10:41
Y para fotos usamos el JPEG, que tiene mejor calidad. 00:10:45
Ahí lo tenemos. 00:10:49
Si hago zoom, ¿ves que empieza? 00:10:50
No sé si en el vídeo se nota. 00:10:54
¿Ves que ya empieza a apixelar? 00:10:56
En la circunferencia se nota mucho, mira. 00:10:59
¿Veis que la circunferencia empieza a hacer como unos dientes de sierra? 00:11:01
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. 00:11:06
Es que luego también el ordenador usa algoritmos para evitar, intentar que no se note el pixelado. 00:11:11
Pero vais a ver que aparecen ahí una especie de dientes de sierra. 00:11:17
Eso es que se debe a una imagen pixelada. 00:11:21
¿Le puedo cambiar la altura y la altura? Mira, voy a copiar estos dos parámetros. 00:11:25
Los copio y los pego aquí. 00:11:31
He hecho un copia y pegar. 00:11:35
Lo recargo. 00:11:37
Bueno, veis que aquí sí que la deforma la imagen, ¿no? 00:11:40
Le ha puesto una altura de 100 y una altura de 25. 00:11:42
O sea, aquí no nos ha hecho caso, el VG no nos ha hecho caso, no ha deformado la imagen. 00:11:45
Pero aquí se ve muy claramente que sí deforma la imagen. 00:11:50
¿Vale? Si pongo una altura y una altura inadecuadas, se deforma la imagen. 00:11:53
Para no tener problemas, pongo solamente altura o pongo solamente altura y me quito de ese problema. 00:11:56
Ya automáticamente el navegador calcula cuál tiene que ser la anchura y la altura para que la imagen quede bien. 00:12:02
¿Veis? Ya la pone bien. 00:12:07
Hay otros formatos, algunos antiguos, que también son interesantes. 00:12:09
Tenemos el formato GIF animado, que antiguamente se usaba muchísimo. 00:12:14
Ahora también para alguna cosa. 00:12:23
El formato GIF animado son imágenes que se mueven. 00:12:24
A ver si vemos alguna. ¿Veis? Imágenes que se mueven. 00:12:30
Imágenes que se mueven. Lo veis ahí. 00:12:34
Bueno, pues el formato GIF, no voy a descargar ninguna, son imágenes que se mueven, las podéis descartar. 00:12:37
Y hay aplicaciones que te permiten hacer los GIFs animados, las imágenes animadas. 00:12:44
Estaréis hartados de verlos en el WhatsApp y en sitios así. 00:12:49
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, 00:12:53
o sea, cada imagen que le subas va a ser un fotograma y él te genera ya el GIF animado. 00:13:01
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, 00:13:05
más cosas sobre los apuntes. 00:13:32
Bueno, tenéis el atributo alt. 00:13:36
El atributo alt es un alternativo 00:13:39
para presentar si no se encuentra la imagen. 00:13:41
Esto se usaba mucho 00:13:47
para los ciegos y personas así. 00:13:48
Y luego useMap e isMap 00:13:52
se usa para mapas. 00:13:54
Se pueden hacer mapas de imagen. 00:13:56
¿Esto en qué consiste? 00:14:00
Pues mira, no sé si habéis entrado alguna vez 00:14:01
en el Instituto... 00:14:03
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, 00:14:05
y te vamos a dibujar aquí un mapita. 00:14:23
¿Veis este mapita? 00:14:26
Y este mapita, ¿veis qué pasa cuando yo elijo una comunidad? 00:14:27
Como que cambia de color. 00:14:31
¿Vale? 00:14:33
Bueno, pues esto es una imagen la cual han mapeado. 00:14:35
En la imagen mapeada, tú cargas la imagen. 00:14:40
Tú cargas la imagen normal y le añades este atributo, el useMap. 00:14:45
Con useMap, bueno, tienes que meterle el atributo isMap, 00:14:50
Para decirle que es una imagen interactiva. 00:14:54
Y un map, le tienes que indicar el map. 00:14:57
Y en el mapa, le tienes que poner un nombre. 00:14:59
Y tienes que, esto que pone área, tienes que definir tú las coordenadas de cada zona. 00:15:03
Esto que han hecho aquí es un trabajo de chinos. 00:15:08
Porque ya simplemente la Comunidad de Madrid, ya es, bueno, puede ser un triángulo, ¿no? 00:15:10
Puedes poner un triángulo aquí con cuatro puntas. 00:15:15
Con tres puntas, perdón, un triángulo tiene tres puntas. 00:15:17
Podrías definirlo con un triángulo, pero vamos, se ve que se lo han... 00:15:20
este es un trabajo de chinos han definido ahí línea a línea vale pero que tú puedes definir 00:15:22
la posición de cada parte del mapa a cada parte de la imagen y luego que cuando hagas clic cuando 00:15:30
hagas clic aquí en el h red te lleva a un sitio si yo me selecciono una comunidad por ejemplo 00:15:39
madrid y hago clic pues me lleva a esa comunidad eso es un mapa de acuerdo aquí tenéis una imagen 00:15:44
un ejemplo una vez se carga la imagen la que sea dice que vas a usar el mapa el mapa 1 la 00:15:54
puesto nombre y dice mira tengo un área que va a ser un círculo con estas coordenadas le llegó 00:16:00
el centro y el radio y cuando pulse en esa posición en ese círculo que me define este área pues voy a 00:16:04
saltar e inicia HTML. Y luego tengo 00:16:12
aquí un rectángulo con estas coordenadas 00:16:14
que cuando yo le pinche a ese 00:16:16
rectángulo, voy a saltar a ese enlace. 00:16:18
Lo dicho, que lo que han hecho ahí 00:16:20
la Agencia Estatal de Meteorología 00:16:21
pues es un trabajo de 00:16:24
chinos. Y con 00:16:26
esto acabo las imágenes. 00:16:28
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
15
Fecha:
27 de septiembre de 2024 - 10:04
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
16′ 32″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
33.19 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid