Saltar navegación

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

CSS Unidades de distancia y tamaño - 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 28 de diciembre de 2020 por Amadeo M.

112 visualizaciones

Más información Transcripción

Descargar la transcripción

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. 00:00:00
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. 00:00:11
Entonces, bueno, vamos a ir recorriendo aquí varias de ellas. 00:00:22
Podemos hablar en porcentajes, tanto por ciento respecto a otro valor. 00:00:25
Podemos hablar en píxel, podemos hablar en centímetros, en puntos, ¿de acuerdo? 00:00:30
Entonces, bueno, pues hay también unidades relativas, como es EM, que es el tamaño del elemento que lo contiene, 00:00:38
X, en función de la altura de la letra de la fuente del elemento que lo contiene, 00:00:49
CH, que es la altura de la cifra cero en esta fuente, 00:00:54
O últimamente más a menudo utilizado REM, que es el tamaño de la fuente del elemento raíz de la página 00:00:58
Esta es la única diferencia con EM 00:01:04
Las más utilizadas son EM y REM, está claro que estas dos son las más utilizadas 00:01:06
Después algunas tienen que ver con la pantalla que estamos utilizando, son relativas a la pantalla 00:01:12
Entonces pues tenemos VW, etc, etc 00:01:17
No voy a entrar en todas ellas porque sería larguísimo entrar en esto 00:01:20
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. 00:01:24
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. 00:01:44
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. 00:02:00
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? 00:02:15
es decir, aquí cuando hablamos de porcentajes estamos hablando simplemente de algo relativo 00:02:38
a lo que en ese momento estemos en el entorno que estemos en ese marco 00:02:42
después tenemos unidades relativas respecto al tipo de letra 00:02:47
entonces tenemos M que es respecto a la altura total del tipo de letra en que en ese momento estemos 00:02:52
y las otras dos que prácticamente no se utilizan 00:02:57
con lo cual voy a intentar saltármelas casi inmediatamente 00:03:00
entonces por ejemplo aquí tenemos un borde que es de color rojo 00:03:03
que tiene un tamaño 00:03:08
de un EM 00:03:10
sólido, es decir, esto 00:03:12
este espacio, este tamaño de rojo 00:03:14
ocupa exactamente lo que un carácter 00:03:16
la altura total del tipo 00:03:19
de letra, ¿de acuerdo? 00:03:20
vosotros voy a obviarlos, ¿de acuerdo? 00:03:22
entonces, esto va a depender 00:03:25
del tipo de letra que yo esté en ese momento 00:03:27
utilizando 00:03:29
¿de acuerdo? o sea, que 00:03:30
un EM es igual 00:03:32
que el 100%, simplemente 00:03:34
es idéntico al 100% 00:03:37
dentro de la familia 00:03:39
de caracteres que yo estoy utilizando 00:03:41
aquí ya están apareciendo algunas familias 00:03:43
serif, sans serif 00:03:45
monospace, les sonarán 00:03:47
ustedes arial 00:03:49
times new roman, etc 00:03:50
etc, etc, vale 00:03:52
bueno 00:03:55
entonces, si yo digo 00:03:56
que algo tiene 1,5 00:03:59
m, lo que estamos diciendo es que 00:04:01
si este párrafo estaba 00:04:03
aumentado, vemos aquí 00:04:05
que aquí hay un párrafo a 1,5M 00:04:07
esto es una vez y media 00:04:09
más grande que lo habitual 00:04:11
pero si además estoy dentro de 00:04:12
div, tengo p 00:04:15
pues está, si div era 00:04:17
1,5M y p 00:04:19
es 1,5M, pues este 00:04:21
párrafo está aumentando 00:04:23
1,5M a 1,5M 00:04:25
es decir, está haciéndolo bastante 00:04:27
más grande, ¿de acuerdo? 00:04:29
en REM la cuestión no es eso 00:04:31
la cuestión es que todo esto es respecto al elemento raíz 00:04:33
por lo tanto si yo digo 00:04:36
me da igual esta información 00:04:37
no estoy aumentando nada 00:04:39
estoy siempre respecto a la raíz 00:04:40
del documento 00:04:43
se utiliza tanto REM como EM 00:04:44
muchísimo 00:04:47
de esta parte si me disculpan 00:04:48
no voy a hablar casi nada 00:04:51
y después tenemos unidades absolutas 00:04:52
en las cuales tenemos los píxeles, centímetros, etc 00:04:55
bueno 00:04:58
aquí tenemos 00:04:59
una información real, pero aumentada 00:05:01
efectivamente vemos aquí que hay un montón que casi 00:05:04
coinciden, entonces 00:05:06
realmente no hay cuestión 00:05:08
el píxel es un poco complejo 00:05:10
porque, claro, dependiendo del dispositivo 00:05:12
el píxel es más grande o más pequeño 00:05:14
y entonces, como se refería 00:05:16
al tamaño físico 00:05:18
del píxel en una pantalla 00:05:19
pues al principio se hablaba siempre del píxel 00:05:22
pero eso poco a poco ha ido cambiando 00:05:24
¿de acuerdo? así que más o menos 00:05:26
se habla de que 96 píxel 00:05:28
es una pulgada 00:05:30
y bueno 00:05:33
pues todo esto respecto 00:05:35
a los tamaños que podemos utilizar 00:05:36
para poner los tipos de letras 00:05:38
o las distancias entre diversos objetos 00:05:41
por otro lado 00:05:43
tenemos los colores 00:05:44
y los colores 00:05:46
se basan en el sistema 00:05:48
RGB, es decir 00:05:50
Red, Green, Blue 00:05:52
básicamente en este, aunque veamos aquí que hay más 00:05:54
pero básicamente todos los colores los tenemos 00:05:57
en este formato 00:05:58
entonces bueno, el formato RGB es muy simple 00:06:02
lo primero que se pone es el valor del rojo 00:06:05
lo segundo el valor del verde y el segundo el tercero en azul 00:06:08
se puede poner con este formato RGB 00:06:11
y apareciendo aquí los valores 00:06:14
o bien del 0 al 255 o estableciendo porcentajes 00:06:17
del 0 al 100%, esta prácticamente no lo veo casi nunca 00:06:21
en ninguna página 00:06:24
O bien RGB en hexadecimal, poniéndolos en estas posiciones 00:06:25
O en tres letras, en las cuales se repite el valor 00:06:30
Por ejemplo, si yo pongo aquí una F, pues es como FF aquí arriba 00:06:33
¿De acuerdo? 00:06:37
Con mucha diferencia, el primer valor y sobre todo este tercero es el que más se utiliza 00:06:40
¿De acuerdo? Con mucha diferencia 00:06:45
Entonces, bueno, pues podemos poner un párrafo cuyo color de fondo sea este 00:06:47
Y esto corresponde a este color 00:06:52
Muy bien, el negro pues es 0, 0, es el 0 completo 00:06:54
Y el blanco es el F, F, F, F, F, es decir, el que tiene todos los colores al máximo 00:06:59
Y bueno, tenéis generadores de código para ver colores en cualquier momento 00:07:05
Ver qué colores, cómo queremos que nos quede un color 00:07:11
Y ya vemos que vamos cambiándolo 00:07:13
Y aquí vamos a obtener sus códigos, decimal o que sea decimal 00:07:15
Hay montones de sistemas para obtener colores, ¿de acuerdo? 00:07:18
Este de la IMO es un ejemplito rápido para visualizarlo 00:07:21
No voy a entrar en los RGBA a pesar de que nos incluyen algo que es importante que es la transparencia 00:07:24
Ni en otros tipos de colores 00:07:30
Voy a echar una ojeada muy rápida 00:07:32
Porque también les puedo decir que hay un montón de colores que ya están definidos 00:07:34
De hecho hemos visto por ahí antes que decíamos el color black 00:07:37
Y directamente salía este 00:07:40
O el color white y directamente salía el blanco 00:07:43
Bueno, pues muchos de estos que hay aquí son colores ya definidos 00:07:45
Que podemos directamente poner su nombre sin tener que poner sus códigos 00:07:49
Antes hemos visto un light green, un light grey 00:07:53
Entonces hay montones de colores 00:07:57
Otro elemento muy importante es la opacidad 00:07:59
Si yo quiero poner dos, y voy a decir la palabra capas 00:08:02
Porque es algo que se utilizaba antiguamente, o divisiones 00:08:07
Y quiero que estén en las posiciones parecidas 00:08:10
Yo puedo remarcar una encima de otra 00:08:12
Entonces para ello le puedo dar una opacidad entre el 0 y el 1 00:08:16
El 0 es un valor completamente transparente y el 1 completamente opaco 00:08:21
Es más, en un programa yo puedo jugar con esta opacidad para ir simultaneando ambos valores 00:08:26
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
112
Fecha:
28 de diciembre de 2020 - 20:21
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
08′ 34″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
59.25 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid