1
00:00:00,750 --> 00:00:10,710
Un elemento que tenemos que tener en cuenta cuando estamos estableciendo o diseñando una página HTML es en qué unidades medimos los tamaños y las distancias.

2
00:00:11,689 --> 00:00:22,250
Hemos hablado mucho de la palabra píxel, que al fin y al cabo no significa más que un punto, pero hay un montón de unidades que se pueden trabajar además del píxel, que se indica con estas dos letras, P, X.

3
00:00:22,609 --> 00:00:25,710
Entonces, bueno, vamos a ir recorriendo aquí varias de ellas.

4
00:00:25,949 --> 00:00:30,050
Podemos hablar en porcentajes, tanto por ciento respecto a otro valor.

5
00:00:30,750 --> 00:00:38,250
Podemos hablar en píxel, podemos hablar en centímetros, en puntos, ¿de acuerdo?

6
00:00:38,570 --> 00:00:49,070
Entonces, bueno, pues hay también unidades relativas, como es EM, que es el tamaño del elemento que lo contiene,

7
00:00:49,490 --> 00:00:53,490
X, en función de la altura de la letra de la fuente del elemento que lo contiene,

8
00:00:54,369 --> 00:00:58,329
CH, que es la altura de la cifra cero en esta fuente,

9
00:00:58,329 --> 00:01:04,310
O últimamente más a menudo utilizado REM, que es el tamaño de la fuente del elemento raíz de la página

10
00:01:04,310 --> 00:01:06,269
Esta es la única diferencia con EM

11
00:01:06,269 --> 00:01:12,049
Las más utilizadas son EM y REM, está claro que estas dos son las más utilizadas

12
00:01:12,049 --> 00:01:17,609
Después algunas tienen que ver con la pantalla que estamos utilizando, son relativas a la pantalla

13
00:01:17,609 --> 00:01:20,750
Entonces pues tenemos VW, etc, etc

14
00:01:20,750 --> 00:01:24,349
No voy a entrar en todas ellas porque sería larguísimo entrar en esto

15
00:01:24,349 --> 00:01:44,209
Y realmente nosotros no somos diseñadores de páginas, nosotros somos desarrolladores de páginas. Entonces, tenemos por supuesto los píxeles, los centímetros, los milímetros, esta unidad en la vida ha utilizado, las pulgadas, las picas y los puntos.

16
00:01:44,209 --> 00:02:00,250
Bueno, pues tenemos muchísimas, aquí la más importante sin duda para una página web es pixel.pt, lo que pasa es que a veces hacemos por ejemplo una salida de impresión y nos hace falta hablar en centímetros, entonces pues por eso también la tenemos.

17
00:02:00,250 --> 00:02:15,310
Hay que establecer una cuestión muy importante. Algunas medidas son relativas y otras son absolutas. Cuando estamos con porcentajes, efectivamente estamos trabajando de unidades que son relativas a otras.

18
00:02:15,310 --> 00:02:38,289
Entonces, por ejemplo, definimos que un párrafo, su tamaño de fuente va a ser 200%, pues fíjense este tamaño, o el 75%, pues este tamaño de aquí, o que el ancho de esta línea que hay aquí va a ser el 50%, ya ven que está centradita pero que ocupa solamente el 50%, ¿de acuerdo?

19
00:02:38,289 --> 00:02:42,770
es decir, aquí cuando hablamos de porcentajes estamos hablando simplemente de algo relativo

20
00:02:42,770 --> 00:02:47,669
a lo que en ese momento estemos en el entorno que estemos en ese marco

21
00:02:47,669 --> 00:02:52,650
después tenemos unidades relativas respecto al tipo de letra

22
00:02:52,650 --> 00:02:57,610
entonces tenemos M que es respecto a la altura total del tipo de letra en que en ese momento estemos

23
00:02:57,610 --> 00:03:00,669
y las otras dos que prácticamente no se utilizan

24
00:03:00,669 --> 00:03:03,689
con lo cual voy a intentar saltármelas casi inmediatamente

25
00:03:03,689 --> 00:03:08,210
entonces por ejemplo aquí tenemos un borde que es de color rojo

26
00:03:08,210 --> 00:03:10,870
que tiene un tamaño

27
00:03:10,870 --> 00:03:12,270
de un EM

28
00:03:12,270 --> 00:03:14,469
sólido, es decir, esto

29
00:03:14,469 --> 00:03:16,530
este espacio, este tamaño de rojo

30
00:03:16,530 --> 00:03:19,050
ocupa exactamente lo que un carácter

31
00:03:19,050 --> 00:03:20,969
la altura total del tipo

32
00:03:20,969 --> 00:03:21,949
de letra, ¿de acuerdo?

33
00:03:22,530 --> 00:03:24,550
vosotros voy a obviarlos, ¿de acuerdo?

34
00:03:25,530 --> 00:03:27,030
entonces, esto va a depender

35
00:03:27,030 --> 00:03:29,210
del tipo de letra que yo esté en ese momento

36
00:03:29,210 --> 00:03:30,270
utilizando

37
00:03:30,270 --> 00:03:32,330
¿de acuerdo? o sea, que

38
00:03:32,330 --> 00:03:34,830
un EM es igual

39
00:03:34,830 --> 00:03:37,330
que el 100%, simplemente

40
00:03:37,330 --> 00:03:39,870
es idéntico al 100%

41
00:03:39,870 --> 00:03:41,229
dentro de la familia

42
00:03:41,229 --> 00:03:43,870
de caracteres que yo estoy utilizando

43
00:03:43,870 --> 00:03:45,629
aquí ya están apareciendo algunas familias

44
00:03:45,629 --> 00:03:47,509
serif, sans serif

45
00:03:47,509 --> 00:03:49,810
monospace, les sonarán

46
00:03:49,810 --> 00:03:50,650
ustedes arial

47
00:03:50,650 --> 00:03:52,969
times new roman, etc

48
00:03:52,969 --> 00:03:55,090
etc, etc, vale

49
00:03:55,090 --> 00:03:56,430
bueno

50
00:03:56,430 --> 00:03:59,629
entonces, si yo digo

51
00:03:59,629 --> 00:04:01,469
que algo tiene 1,5

52
00:04:01,469 --> 00:04:03,449
m, lo que estamos diciendo es que

53
00:04:03,449 --> 00:04:05,490
si este párrafo estaba

54
00:04:05,490 --> 00:04:07,650
aumentado, vemos aquí

55
00:04:07,650 --> 00:04:09,509
que aquí hay un párrafo a 1,5M

56
00:04:09,509 --> 00:04:11,729
esto es una vez y media

57
00:04:11,729 --> 00:04:12,949
más grande que lo habitual

58
00:04:12,949 --> 00:04:15,490
pero si además estoy dentro de

59
00:04:15,490 --> 00:04:17,170
div, tengo p

60
00:04:17,170 --> 00:04:19,490
pues está, si div era

61
00:04:19,490 --> 00:04:21,050
1,5M y p

62
00:04:21,050 --> 00:04:23,589
es 1,5M, pues este

63
00:04:23,589 --> 00:04:25,029
párrafo está aumentando

64
00:04:25,029 --> 00:04:27,430
1,5M a 1,5M

65
00:04:27,430 --> 00:04:29,610
es decir, está haciéndolo bastante

66
00:04:29,610 --> 00:04:30,769
más grande, ¿de acuerdo?

67
00:04:31,389 --> 00:04:33,370
en REM la cuestión no es eso

68
00:04:33,370 --> 00:04:36,050
la cuestión es que todo esto es respecto al elemento raíz

69
00:04:36,050 --> 00:04:37,550
por lo tanto si yo digo

70
00:04:37,550 --> 00:04:39,269
me da igual esta información

71
00:04:39,269 --> 00:04:40,990
no estoy aumentando nada

72
00:04:40,990 --> 00:04:43,589
estoy siempre respecto a la raíz

73
00:04:43,589 --> 00:04:44,810
del documento

74
00:04:44,810 --> 00:04:47,850
se utiliza tanto REM como EM

75
00:04:47,850 --> 00:04:48,790
muchísimo

76
00:04:48,790 --> 00:04:51,250
de esta parte si me disculpan

77
00:04:51,250 --> 00:04:52,730
no voy a hablar casi nada

78
00:04:52,730 --> 00:04:55,790
y después tenemos unidades absolutas

79
00:04:55,790 --> 00:04:58,290
en las cuales tenemos los píxeles, centímetros, etc

80
00:04:58,290 --> 00:04:59,509
bueno

81
00:04:59,509 --> 00:05:01,449
aquí tenemos

82
00:05:01,449 --> 00:05:04,290
una información real, pero aumentada

83
00:05:04,290 --> 00:05:06,329
efectivamente vemos aquí que hay un montón que casi

84
00:05:06,329 --> 00:05:08,050
coinciden, entonces

85
00:05:08,050 --> 00:05:10,410
realmente no hay cuestión

86
00:05:10,410 --> 00:05:12,290
el píxel es un poco complejo

87
00:05:12,290 --> 00:05:14,889
porque, claro, dependiendo del dispositivo

88
00:05:14,889 --> 00:05:16,949
el píxel es más grande o más pequeño

89
00:05:16,949 --> 00:05:18,790
y entonces, como se refería

90
00:05:18,790 --> 00:05:19,790
al tamaño físico

91
00:05:19,790 --> 00:05:22,129
del píxel en una pantalla

92
00:05:22,129 --> 00:05:24,889
pues al principio se hablaba siempre del píxel

93
00:05:24,889 --> 00:05:26,910
pero eso poco a poco ha ido cambiando

94
00:05:26,910 --> 00:05:28,949
¿de acuerdo? así que más o menos

95
00:05:28,949 --> 00:05:30,790
se habla de que 96 píxel

96
00:05:30,790 --> 00:05:33,009
es una pulgada

97
00:05:33,009 --> 00:05:35,069
y bueno

98
00:05:35,069 --> 00:05:36,509
pues todo esto respecto

99
00:05:36,509 --> 00:05:38,829
a los tamaños que podemos utilizar

100
00:05:38,829 --> 00:05:41,029
para poner los tipos de letras

101
00:05:41,029 --> 00:05:43,310
o las distancias entre diversos objetos

102
00:05:43,310 --> 00:05:44,910
por otro lado

103
00:05:44,910 --> 00:05:46,310
tenemos los colores

104
00:05:46,310 --> 00:05:48,009
y los colores

105
00:05:48,009 --> 00:05:50,629
se basan en el sistema

106
00:05:50,629 --> 00:05:52,449
RGB, es decir

107
00:05:52,449 --> 00:05:54,589
Red, Green, Blue

108
00:05:54,589 --> 00:05:57,029
básicamente en este, aunque veamos aquí que hay más

109
00:05:57,029 --> 00:05:58,810
pero básicamente todos los colores los tenemos

110
00:05:58,810 --> 00:06:02,370
en este formato

111
00:06:02,370 --> 00:06:05,829
entonces bueno, el formato RGB es muy simple

112
00:06:05,829 --> 00:06:08,069
lo primero que se pone es el valor del rojo

113
00:06:08,069 --> 00:06:11,449
lo segundo el valor del verde y el segundo el tercero en azul

114
00:06:11,449 --> 00:06:14,350
se puede poner con este formato RGB

115
00:06:14,350 --> 00:06:17,350
y apareciendo aquí los valores

116
00:06:17,350 --> 00:06:21,089
o bien del 0 al 255 o estableciendo porcentajes

117
00:06:21,089 --> 00:06:24,389
del 0 al 100%, esta prácticamente no lo veo casi nunca

118
00:06:24,389 --> 00:06:25,750
en ninguna página

119
00:06:25,750 --> 00:06:30,829
O bien RGB en hexadecimal, poniéndolos en estas posiciones

120
00:06:30,829 --> 00:06:33,629
O en tres letras, en las cuales se repite el valor

121
00:06:33,629 --> 00:06:37,709
Por ejemplo, si yo pongo aquí una F, pues es como FF aquí arriba

122
00:06:37,709 --> 00:06:38,269
¿De acuerdo?

123
00:06:40,370 --> 00:06:45,490
Con mucha diferencia, el primer valor y sobre todo este tercero es el que más se utiliza

124
00:06:45,490 --> 00:06:47,129
¿De acuerdo? Con mucha diferencia

125
00:06:47,129 --> 00:06:52,490
Entonces, bueno, pues podemos poner un párrafo cuyo color de fondo sea este

126
00:06:52,490 --> 00:06:54,569
Y esto corresponde a este color

127
00:06:54,569 --> 00:06:59,769
Muy bien, el negro pues es 0, 0, es el 0 completo

128
00:06:59,769 --> 00:07:05,930
Y el blanco es el F, F, F, F, F, es decir, el que tiene todos los colores al máximo

129
00:07:05,930 --> 00:07:11,050
Y bueno, tenéis generadores de código para ver colores en cualquier momento

130
00:07:11,050 --> 00:07:13,829
Ver qué colores, cómo queremos que nos quede un color

131
00:07:13,829 --> 00:07:15,430
Y ya vemos que vamos cambiándolo

132
00:07:15,430 --> 00:07:18,490
Y aquí vamos a obtener sus códigos, decimal o que sea decimal

133
00:07:18,490 --> 00:07:21,050
Hay montones de sistemas para obtener colores, ¿de acuerdo?

134
00:07:21,329 --> 00:07:24,250
Este de la IMO es un ejemplito rápido para visualizarlo

135
00:07:24,250 --> 00:07:30,790
No voy a entrar en los RGBA a pesar de que nos incluyen algo que es importante que es la transparencia

136
00:07:30,790 --> 00:07:32,569
Ni en otros tipos de colores

137
00:07:32,569 --> 00:07:34,069
Voy a echar una ojeada muy rápida

138
00:07:34,069 --> 00:07:37,949
Porque también les puedo decir que hay un montón de colores que ya están definidos

139
00:07:37,949 --> 00:07:40,629
De hecho hemos visto por ahí antes que decíamos el color black

140
00:07:40,629 --> 00:07:43,209
Y directamente salía este

141
00:07:43,209 --> 00:07:45,629
O el color white y directamente salía el blanco

142
00:07:45,629 --> 00:07:49,389
Bueno, pues muchos de estos que hay aquí son colores ya definidos

143
00:07:49,389 --> 00:07:53,610
Que podemos directamente poner su nombre sin tener que poner sus códigos

144
00:07:53,610 --> 00:07:57,129
Antes hemos visto un light green, un light grey

145
00:07:57,129 --> 00:07:59,689
Entonces hay montones de colores

146
00:07:59,689 --> 00:08:02,550
Otro elemento muy importante es la opacidad

147
00:08:02,550 --> 00:08:07,310
Si yo quiero poner dos, y voy a decir la palabra capas

148
00:08:07,310 --> 00:08:10,410
Porque es algo que se utilizaba antiguamente, o divisiones

149
00:08:10,410 --> 00:08:12,949
Y quiero que estén en las posiciones parecidas

150
00:08:12,949 --> 00:08:16,149
Yo puedo remarcar una encima de otra

151
00:08:16,149 --> 00:08:21,689
Entonces para ello le puedo dar una opacidad entre el 0 y el 1

152
00:08:21,689 --> 00:08:26,709
El 0 es un valor completamente transparente y el 1 completamente opaco

153
00:08:26,709 --> 00:08:32,830
Es más, en un programa yo puedo jugar con esta opacidad para ir simultaneando ambos valores