Con la finalidad de aplicar con excelencia valores
de especificación de tamaños para estilos, identificaremos las unidades de
medidas CSS en el diseño de páginas web. El
desconocimiento del acrónimo utilizado para especificar tamaños conlleva a
presentaciones de páginas web sin
coordinación de los elementos. Por lo tanto, señalaremos cómo se definen porcentaje,
píxel, pulgada y otras medidas, según las reglas del lenguaje CSS.
Cuando navegamos en internet
visualizamos diferencias de tamaño entre imágenes y letras, las cuales son
creadas con la finalidad de llamar la atención del usuario. Por lo tanto, si
aplicamos esta opción a los proyectos web,
resaltamos información relevante, o mostramos las imágenes con tamaños
específicos, acordes con el resto del proyecto.
061-01_0601_ilu01. Diferentes unidades de
medidas
Existe una diversidad de unidades
de medidas, las cuales son clasificadas en dos tipos:
- Unidad de
medida absoluta: se trata de las medidas aptas para especificar tamaños
similares al mundo real, es decir, son precisas. En este grupo se encuentran el
píxel, la pulgada, el punto, y las medidas del sistema métrico decimal, como el
centímetro y el milímetro.
- Unidades
de medida relativa: Son utilizadas para especificar tamaños variables,
dependientes del tamaño de la pantalla. En este grupo se encuentra el
porcentaje y las medidas relativas al tamaño de la letra.
061-01_0601_ilu02. Clasificación de unidades de medida
Todas las unidades de medida
tienen una abreviatura o un acrónimo, utilizada para ingresarla en un documento
CSS. Los más comunes son:
- Píxel: se
representa con px.
- Pulgada: se
representa con in, pues el término en
inglés es inches.
- Tamaños de
la letra: se representan con em,
donde m es el tamaño del caracter de
la fuente, es decir, en el ejemplo de la siguiente imagen, tres veces el tamaño
de la fuente.
- Porcentaje:
se representa con el símbolo correspondiente. Además, los acrónimos vw, vh, vmin o vmax, también son porcentajes; sin embargo, relativos a la pantalla
del dispositivo.
061-01_0601_ilu03. Abreviaturas de píxel,
pulgada y tamaños de letra
El porcentaje de CSS tiene varias
especificaciones, cuando se refiere a:
- Vw: es value width;
en español, valor del ancho.
- Vh: es values height;
en español, valor del alto.
- Vmin: es el valor más pequeño, indicados en vw y vh.
- Vmax: es el valor más alto,
indicados en vw y vh.
Las unidades de medidas se
encuentran especificadas en la recomendación oficial de CSS, elaborada por la
organización W3C, en su página web.
061-01_0601_ilu04. Tipos de pulgada
Keynotes
- Unidad de medida absoluta: se trata de las
medidas aptas para especificar tamaños similares al mundo real, es decir, son
precisas. En este grupo se encuentran el píxel, la pulgada, el punto, y las
medidas del sistema métrico decimal, como el centímetro y el milímetro.
- Unidades de medida relativa: Son utilizadas
para especificar tamaños variables, dependientes del tamaño de la pantalla. En
este grupo se encuentra el porcentaje y las medidas relativas al tamaño de la
letra.
- Todas las unidades de medida tienen una
abreviatura o un acrónimo, utilizada para ingresarla en un documento CSS.
- Las unidades de medidas se encuentran
especificadas en la recomendación oficial de CSS, elaborada por la organización
W3C, en su página web.
RetoRealiza un resumen escrito, donde se evidencie la identificación
de unidades de medidas CSS en el diseño de páginas web, según las reglas de este lenguaje.
¡Comparte el resultado final de tu reto en vKonnect y pide a un compañero comentar
tu resumen para debatir de ambos!
Tiempo disponible: entre 15 y 30 minutos.
Cierre
Con la identificación de medidas,
dominamos abreviaturas y acrónimos
utilizados para especificar tamaños, y los aplicamos con excelencia. Por lo
tanto, realizamos presentaciones de páginas web
con elementos coordinados entre sí. Con paciencia, determinación y
organización, obtendremos proyectos pulcros para internet.
