Es posible inspeccionar códigos de páginas
disponibles en internet, en las cuales encontraremos falta de organización en algunas
de ellas, por el uso incorrecto de las técnicas de CSS. Debido a ello,
identificaremos el procedimiento de utilizar cuadrículas para organizar
elementos web de forma vertical y
horizontalmente.
Con el propósito de utilizar cuadrículas para la
organización de los elementos, diseñaremos páginas web con el modelo Grid, de
acuerdo a las recomendaciones oficiales del lenguaje CSS.
El modelo de CSS llamado Grid significa cuadrículas en español, permite
crear páginas web bajo una plantilla
con cuadros, llamada unidades. Éstas tienen medidas imprecisas, es decir, varían
en torno al tamaño de la pantalla.
061-01_0810_ilu01.
Funcionamiento del diseño Grid y Flex Box
En la ilustración anterior,
observamos el funcionamiento del diseño Flex,
mediante el cual dividimos la pantalla en un solo eje horizontal para las
etiquetas dentro de un contenedor. Sin embargo, mediante el diseño Grid existe la posibilidad de organizar los
elementos de forma horizontal y vertical, según las necesidades de proyecto.
Los siguientes conceptos básicos
son utilizados con frecuencia al trabajar con cuadrículas:
- Celda: es
cada unidad de la cuadrícula.
- Área: es
un cojunto de celdas o unidades de la cuadrícula.
- Fila: es
un conjunto de celdas lineales ubicadas horizontalmente.
- Columna:
es un conjunto de celdas ubicadas verticalmente.
En el ejemplo tenemos una fila
marcada con circulo rojo, la cual está conformada por cinco columnas.
061-01_0810_ilu02.
Partes de un diseño Grid
Al especificar una cuadricula se
toman como base los mismos elementos del modelo Flex Box. Es necesario un contenedor, etiqueta para envolver todos
los elementos que pasan a ser unidades de la cuadrícula, y los elementos son
todas las etiquetas hijas del contenedor. De igual forma, solo se toman en
cuenta los hijos para formar parte de una unidad, y se exceptúan las etiquetas
dentro de los mismos.
Para la creación de un diseño de
tipo cuadrícula es necesario:
- Agregar en
el contenedor la propiedad display
con valor grid.
- Establecer
con la propiedad grid-template-rows los
tamaños de cada fila.
- Definir
con la propiedad grid-template-columns los
de las columnas.
061-01_0810_ilu03.
Creación de un diseño Grid
En el ejemplo de la imagen anterior utilizamos
fr en las medidas de las celdas para
una cuadrícula con Fractional Unit, en
español unidad fraccional; cada una es una división y la suma total de todas es
el tamaño de la pantalla. Al ejecutar el código vemos la siguiente
presentación:
061-01_0810_fot01.
Vista de un diseño Grid
Como cada división tiene el mismo tamaño,
aunque minimicemos la ventana permanece igual en número. Este modelo es
complejo y efectivo, por lo tanto existen diversas propiedades en la
recomendación oficial de CSS, para especificarlo con mayor profesionalismo y
unirlo con otros tipos de diseños.
Keynotes
- El modelo llamado Grid de CSS, la cual significa cuadrículas en español, permite
crear páginas web bajo una plantilla
con cuadros, llamada unidades, con medidas imprecisas, es decir, varían en
torno al tamaño de la pantalla.
- Mediante el diseño Grid tenemos la posibilidad de organizar los elementos de forma
horizontal y vertical, según las necesidades de la proyecto.
- Los siguientes conceptos básicos son
utilizados con frecuencia al trabajar con cuadrículas: Celda: es cada unidad de
la cuadrícula. Área: es un conjunto de celdas o unidades de la cuadrícula. Fila:
es un conjunto de celdas lineales ubicadas horizontalmente. Columna: es un
conjunto de celdas ubicadas verticalmente.
- Al especificar una cuadricula se toman como
base los mismos elementos del modelo Flex
Box. Es necesario un contenedor, etiqueta para envolver todos los elementos
que pasan a ser unidades de la cuadrícula, y los elementos son todas las
etiquetas hijas del contenedor.
- Para la creación de un diseño de tipo
cuadrícula es necesario: Agregar en el contenedor la propiedad display con valor grid. Establecer con la propiedad grid-template-rows los tamaños de cada fila. Definir con la
propiedad grid-template-columns los
de las columnas.
- Utilizamos fr en las medidas de las celdas para una cuadrícula con Fractional Unit, en español unidad
fraccional; cada una es una división y la suma total de todas es el número para
dividir el tamaño de la pantalla.
Misión
Con el objetivo de utilizar con eficiencia las cuadrículas
para la organización de los elementos, diseña una página web básica con el modelo Grid,
de acuerdo a las recomendaciones oficiales del lenguaje CSS.
Pasos a seguir:
- Crea un
documento HTML o utiliza uno antiguo.
- Ubica el
estándar oficial de CSS y lee las recomendaciones sobre el modelo Grid.
- Crea una página web básica con el modelo Grid.
- Ubica un experto en la
materia mediante vPages y muéstrale
el código, más una explicación breve del mismo, a fin de tomar nota de sus
sugerencias.
Sabrás que has tenido éxito cuando
el navegador web muestre el código de
forma correcta.
Analiza el código luego de la
exposición, optimízalo y compártelo en tu vPages
y vKonntact.
Tiempo disponible: 3 horas.
CierreA través del diseño de páginas web con el modelo Grid, de
acuerdo a las recomendaciones oficiales del lenguaje CSS, organizamos con
pulcritud los elementos, mediante la unión correcta de las diferentes técnicas
de diseño. También, utilizamos eficientemente las cuadrículas para la
organización de la información web.
La paciencia y práctica constante son determinantes al momento de crear diseños
con el modelo Grid.
