1
00:00:00,560 --> 00:00:07,679
Las imágenes tienen un capítulo aparte, porque es uno de los elementos que más aparecen dentro de una página HTML.

2
00:00:08,679 --> 00:00:14,800
Y en informática hay dos tipos de imágenes, las que son de mapa de bits o las imágenes vectoriales.

3
00:00:15,519 --> 00:00:25,760
Las imágenes de mapa de bits representan justamente los píxeles en que se va conformando cada una de las partes de la imagen.

4
00:00:25,760 --> 00:00:34,759
Las imágenes vectoriales lo que indican son las líneas o trazos que tiene esa imagen

5
00:00:34,759 --> 00:00:41,500
Entonces las imágenes vectoriales no cabe duda que tienen mucha importancia en un dibujo técnico

6
00:00:41,500 --> 00:00:45,259
Donde podamos definir claramente una línea donde empieza, donde acaba, que color tiene, etc

7
00:00:45,259 --> 00:00:51,619
Mientras que los mapas de bits en imágenes de tipo pictórico, etc, pues tienen muchísima importancia

8
00:00:51,619 --> 00:01:03,460
Bueno, una imagen de bits, de mapa de bits, ocupa muchísimo, porque debería ocupar por cada píxel todo el grado, todo el rango de colores que puede tomar.

9
00:01:04,540 --> 00:01:11,219
Entonces, imagínense una imagen de estas que hablamos de 800x600 píxeles, pues tendría montones y montones de información.

10
00:01:11,640 --> 00:01:16,540
Para ello, pues ha habido un montón de formatos que van pintando esas imágenes.

11
00:01:16,540 --> 00:01:33,579
Entonces tenemos, por ejemplo, muy conocidos JPEG o JPG, GIF, PNG, incluso GIF animados, BMP, que realmente era Bits, Map, etc, etc, etc. Tenemos montones de imágenes del tipo de mapa de Bits.

12
00:01:33,579 --> 00:01:37,219
Y en el formato de imágenes vectoriales hemos utilizado SVG, ¿de acuerdo?

13
00:01:38,620 --> 00:01:42,920
Actualmente se está implantando el WebP, porque Google lo está lanzando,

14
00:01:43,159 --> 00:01:48,219
y ya veremos en una serie de años qué formato va a ser el que funciona.

15
00:01:48,400 --> 00:01:50,739
Porque hay un montón de formatos que ha habido a lo largo de los años que no,

16
00:01:51,120 --> 00:01:53,519
que a día de hoy casi no tienen existencia.

17
00:01:55,780 --> 00:01:58,019
Entonces, bueno, ¿cuál elegir uno u otro?

18
00:01:58,140 --> 00:02:02,659
Pues esto un poco la experiencia te lo cuenta, en función de lo que se comprime la imagen,

19
00:02:02,659 --> 00:02:05,500
en función de su uso, en función de una serie de cuestiones

20
00:02:05,500 --> 00:02:09,199
y aquí pues hacemos un recorrido a lo largo de un montón de imágenes

21
00:02:09,199 --> 00:02:11,580
¿Cómo incluimos una imagen?

22
00:02:12,639 --> 00:02:18,639
Bueno, pues la manera de incluir una imagen es con la etiqueta IMG

23
00:02:18,639 --> 00:02:23,259
que es una etiqueta que no hay que cerrar, una etiqueta que tiene sus atributos

24
00:02:23,259 --> 00:02:29,400
uno de ellos es el Source, el SRC, donde se indica cuál es la dirección donde se encuentra la imagen

25
00:02:29,400 --> 00:02:43,780
Y tenemos como etiqueta que deberíamos incluir siempre, a pesar de que veamos montones de web donde no se hace, el texto alternativo en caso de que esta imagen no se pudiera cargar, que es esta información que hay aquí, alt.

26
00:02:43,780 --> 00:03:00,219
¿De acuerdo? Por supuesto podemos incluir otras etiquetas como style, title, etc. Por supuesto, ¿vale? También otras etiquetas típicas, típicas en cualquier imagen es incluir el ancho y el alto.

27
00:03:00,219 --> 00:03:15,000
Y además tiene unas características muy especiales este ancho y este alto, porque con incluir uno de ellos, el otro se adecua a ese formato, ¿de acuerdo? Con lo cual la imagen no modifica su correspondencia entre ancho y alto.

28
00:03:15,000 --> 00:03:17,979
Bueno, aquí estamos viendo

29
00:03:17,979 --> 00:03:19,099
Otro tipo de imágenes

30
00:03:19,099 --> 00:03:21,919
De acuerdo, tampoco aplica mucho más

31
00:03:21,919 --> 00:03:23,219
Y

32
00:03:23,219 --> 00:03:25,719
Más imágenes con su

33
00:03:25,719 --> 00:03:27,159
Alt correspondiente

34
00:03:27,159 --> 00:03:29,879
Más imágenes

35
00:03:29,879 --> 00:03:31,300
Y por ejemplo en esta imagen

36
00:03:31,300 --> 00:03:33,860
Tux2 que no existe, pues vemos que en este

37
00:03:33,860 --> 00:03:35,979
Navegador, el aspecto en que

38
00:03:35,979 --> 00:03:37,900
Aparece es así, indicando

39
00:03:37,900 --> 00:03:39,460
Este mensaje

40
00:03:39,460 --> 00:03:41,659
Por ejemplo en Firefox, quiero recordar

41
00:03:41,659 --> 00:03:43,319
Lo digo de cabeza, que no pone nada

42
00:03:43,319 --> 00:03:45,060
pone directamente el texto y ya está

43
00:03:45,060 --> 00:03:47,539
no pone que la imagen se haya roto ni nada por el estilo

44
00:03:47,539 --> 00:03:48,419
¿vale?

45
00:03:49,159 --> 00:03:51,520
el title es lo que estaba diciendo

46
00:03:51,520 --> 00:03:53,300
que efectivamente si yo pongo encima de la imagen

47
00:03:53,300 --> 00:03:55,379
pues aquí aparece el título

48
00:03:55,379 --> 00:03:56,580
y puede ser muy interesante

49
00:03:56,580 --> 00:03:59,159
en casos como estos, en que no aparece

50
00:03:59,159 --> 00:04:01,300
para darle más información aún si cabe

51
00:04:01,300 --> 00:04:02,939
bueno

52
00:04:02,939 --> 00:04:05,460
el width y el rate, que siempre es en píxeles

53
00:04:05,460 --> 00:04:09,180
vemos como las imágenes las vamos deformando

54
00:04:09,180 --> 00:04:11,159
voy a seguir

55
00:04:11,159 --> 00:04:12,979
y lo que decía

56
00:04:12,979 --> 00:04:15,400
proporcional, en el momento que ponemos uno de ellos

57
00:04:15,400 --> 00:04:17,199
es proporcional, con lo cual podemos dejarlos todos

58
00:04:17,199 --> 00:04:19,480
a la misma altura o al mismo ancho, como queramos

59
00:04:19,480 --> 00:04:21,220
bueno

60
00:04:21,220 --> 00:04:23,560
existe una etiqueta SVG

61
00:04:23,560 --> 00:04:25,579
pero realmente

62
00:04:25,579 --> 00:04:27,639
pues en la cual

63
00:04:27,639 --> 00:04:29,240
vamos definiendo todos los puntos

64
00:04:29,240 --> 00:04:31,199
que la conforman, de acuerdo

65
00:04:31,199 --> 00:04:32,540
es una manera de hacerlo

66
00:04:32,540 --> 00:04:33,819
y

67
00:04:33,819 --> 00:04:37,319
bien, con todo esto pues

68
00:04:37,319 --> 00:04:39,439
podemos montar imágenes

69
00:04:39,439 --> 00:04:41,279
además, podríamos

70
00:04:41,279 --> 00:04:43,319
utilizar una etiqueta que es imagen

71
00:04:43,319 --> 00:04:44,680
pero indicando que verde

72
00:04:44,680 --> 00:04:47,680
el fuente, indicando como está codificada

73
00:04:47,680 --> 00:04:49,480
con el base encode

74
00:04:49,480 --> 00:04:51,500
es algo muy complejo que solamente

75
00:04:51,500 --> 00:04:53,680
en caso de aplicaciones importantes se utiliza

76
00:04:53,680 --> 00:04:55,519
por supuesto las imágenes se pueden

77
00:04:55,519 --> 00:04:57,459
colocar en cualquier sitio, es importante

78
00:04:57,459 --> 00:04:59,480
la flotación de imágenes, ¿qué se refiere

79
00:04:59,480 --> 00:05:01,439
a la flotación de imágenes? bueno, aquí estoy

80
00:05:01,439 --> 00:05:03,139
buscando algún texto que pudiera ocurrir

81
00:05:03,139 --> 00:05:05,300
imagínense que este pingüino

82
00:05:05,300 --> 00:05:07,480
aquí quisiéramos poner texto, pues haríamos

83
00:05:07,480 --> 00:05:09,480
un float a la izquierda

84
00:05:10,220 --> 00:05:11,620
un float left para que aquí

85
00:05:11,620 --> 00:05:13,060
aparezca la información

86
00:05:13,060 --> 00:05:15,579
¿de acuerdo? entonces aparecería

87
00:05:15,579 --> 00:05:17,500
iría saltando a través de la imagen

88
00:05:17,500 --> 00:05:18,819
eso es algo muy habitual

89
00:05:18,819 --> 00:05:21,300
y en el tema que aparece aquí

90
00:05:21,300 --> 00:05:22,899
de posicionamiento flotante de imágenes

91
00:05:22,899 --> 00:05:24,279
se podría ver