El último componente CSS de YUI es grids.css, una hoja de estilos sencilla que permite crear más de 1.000 layouts diferentes. Diseñar layouts con YUI es muy sencillo y tiene la ventaja de que todos los diseños se ven exactamente igual en cualquier versión de cualquier navegador.
5.5.1. Primeros pasos
YUI recomienda utilizar un DOCTYPE que asegure que el navegador muestra sus contenidos en el modo standards en vez del modo quirks. De hecho, Yahoo! utiliza el siguiente DOCTYPE en todos los sitios diseñados con YUI:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">No obstante, ten en cuenta que el DOCTYPE anterior corresponde a una página HTML y por tanto, no es válido si utilizas XHTML en tus páginas. Si se quiere emplear YUI en páginas XHTML puedes utilizar uno de los dos siguientes DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Antes de crear layouts con el componente grids.css, es necesario enlazar su hoja de estilos:
<link rel="stylesheet" type="text/css" href="css/grids-min.css">La hoja de estilos también se puede enlazar directamente desde los servidores de Yahoo!:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/grids/grids-min.css">El componente grids.css depende de los valores iniciales establecidos por el componente fonts.css, por lo que también es necesario enlazar este último. Como las páginas diseñadas con YUI también utilizan el componente reset.css, es habitual utilizar la hoja de estilos global que incluye estos tres componentes individuales:
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">Para obtener el máximo rendimiento también es posible enlazar esta hoja de estilos completa directamente desde los servidores de Yahoo!:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">5.5.2. Página, plantilla y rejilla
YUI recomienda utilizar la siguiente estructura general en las páginas:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd">
<!-- contenidos de la cabecera -->
</div>
<div id="bd">
<!-- contenidos principales de la página -->
</div>
<div id="ft">
<!-- contenidos del pie de página -->
</div>
</div>
</body>
</html>La página se divide en tres partes:
- Cabecera (
#hd): zona en la que se incluyen normalmente los elementos invariantes de la página tales como el logotipo, el buscador y el menú principal de navegación. - Cuerpo (
#bd): zona en la que se incluyen todos los contenidos específicos de la página. Se trata de la zona más importante y la que suele tener una estructura más compleja. - Pie (
#ft): zona en la que se incluyen otros elementos invariantes de la página que son de menor importancia, tales como el aviso de copyright, enlaces a las secciones de contacto, privacidad, términos y condiciones y otros elementos que dependen del tipo de página.
La división anterior es la más recomendada porque es la que YUI utiliza por defecto. Además, se trata de una división válida para la inmensa mayoría de sitios web y ayuda a estructurar los contenidos de la página de forma lógica. No obstante, dividir las páginas de esta forma no es obligatorio y YUI permite crear layouts sin utilizar esta estructura.
Los nombres utilizados como identificador de cada elemento (#hd de header o cabecera, #bd de body o cuerpo y #ft de footer o pie) también se pueden modificar, aunque los valores indicados anteriormente son los únicos que funcionan sin realizar ningún cambio. Además, como son valores muy cortos, permiten crear reglas CSS muy concisas.
Antes de diseñar layouts con YUI es necesario comprender las partes en las que YUI divide la estructura de una página:
Figura 5.1 Página, plantilla y rejilla en los layouts de YUI
YUI divide la estructura de una página en tres partes:
- Página: establece la anchura total de la página y su comportamiento (anchura fija o variable). Utiliza los selectores
#doc,#doc2,#doc3y#doc4. - Plantilla: establece la división en columnas del cuerpo de la página. Utiliza los selectores
.yui-b,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5y.yui-t6. - Rejilla: establece las divisiones internas de cada columna. Utiliza los selectores
.yui-u,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf.
5.5.3. Página
La primera parte de la estructura de la página es la propia página, concretamente su anchura y su comportamiento. YUI incluye por defecto cuatro tipos de páginas que corresponden a los diseños más utilizados hoy en día:
| Selector | Características de la página | Recomendada para |
|---|---|---|
#doc |
Centrada, anchura 750px |
Resolución de 800x600 o superior |
#doc2 |
Centrada, anchura 950px |
Resolución de 1024x768 o superior |
#doc3 |
Anchura 100% |
Cualquier resolución |
#doc4 |
Centrada, anchura 974px |
Resolución de 1024x768 o superior |
Nota El diseño #doc3 en realidad no ocupa el 100% de la página, ya que incluye 10px de margen izquierdo y otros 10px de margen derecho. De esta forma se evita que los contenidos de la página puedan llegar a invadir el espacio ocupado por el propio navegador. No obstante, si quieres eliminar estos márgenes laterales tan sólo debes añadir la siguiente regla CSS en la hoja de estilos propia de la página: #doc3 { margin: auto; }
Para utilizar una u otra página, sólo es necesario cambiar el atributo id del elemento <div> que encierra todos los contenidos. El ejemplo mostrado anteriormente utiliza el selector #doc, correspondiente a una página de anchura fija de 750px:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc"> <!-- 750px, centrada -->
...
</div>
</body>
</html>Si se quiere modificar la página anterior para que su anchura sea del 100%, sólo es necesario modificar ligeramente el selector del elemento <div> que encierra a todos los contenidos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc3"> <!-- 100% -->
...
</div>
</body>
</html>Aunque los cuatro tipos de página incluídos en YUI corresponden a los diseños más utilizados, también es posible crear una anchura de página completamente personalizada. Como las anchuras de página en YUI se establecen mediante la unidad de medida em, el proceso requiere realizar alguna operación matemática.
Para obtener la anchura en em, divide la anchura deseada en píxeles por 13. Para el navegador Internet Explorer es preciso dividir la anchura en píxeles por 13.3333. Si por ejemplo se quiere establecer una anchura de página de 1300px, el cálculo que se debe realizar es el siguiente:
- Navegador Internet Explorer:
1300/13.3333=97.50. Por tanto, la anchura de página es97.50em. - Resto de navegadores:
1300/13=100. Por tanto, la anchura de página es100em.
Una vez calculada la anchura en em, se utiliza la siguiente regla CSS para crear el tamaño de página propio:
#doc-propio {
text-align:left; /* obligatorio */
margin:auto; /* para centrar la página */
width: 100em; /* resto de navegadores */
*width: 97.50em; /* navegador Internet Explorer */
min-width: 1300px; /* opcional, pero recomendada */
}La propiedad text-align: left es obligatoria para mostrar el texto alineado a la izquierda, ya que en la hoja de estilos grids.css el elemento <body> establece la propiedad text-align: center;. La propiedad margin: auto sólo es necesaria si se quiere centrar la página respecto de la ventana del navegador.
La anchura de todos los navegadores menos Internet Explorer se establece directamente mediante la propiedad width. En el caso de Internet Explorer, su anchura se establece mediante un hack muy conocido que hace que sólo Internet Explorer interprete la propiedad *width. Esta propiedad *width siempre se debe incluir después de la propiedad width.
Por último, la propiedad min-width es opcional, pero se recomienda establecerla con el mismo valor de la anchura en píxeles. Su función es evitar que la estructura de la página se rompa cuando la ventana del navegador reduce su tamaño.
5.5.4. Plantilla
El siguiente nivel en el que divide YUI la estructura de una página es la plantilla, que está formada por las columnas de contenidos de la página. Normalmente, las páginas disponen de una zona central de contenidos y otra zona lateral con otros contenidos secundarios.
YUI permite crear estructuras de páginas con dos columnas de diferentes anchuras y en diferentes posiciones (izquierda o derecha). En primer lugar se definen las columnas de la página mediante lo que YUI llama bloques. Cada bloque se crea mediante un elemento <div> con la clase yui-b. En el siguiente ejemplo se supone que la página está formada por dos columnas, por lo que se crean dos bloques dentro del cuerpo de la página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd"><!-- cabecera --></div>
<div id="bd">
<!-- cuerpo -->
<div class="yui-b">...</div>
<div class="yui-b">...</div>
</div>
<div id="ft"><!-- pie --></div>
</div>
</body>
</html>Indicar que la página tiene dos bloques no es suficiente, ya que también es necesario indicar cuál de los dos bloques es el principal. Para ello, se encierra el bloque principal con otro elemento <div> cuyo id es yui-main:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc">
<div id="hd"><!-- cabecera --></div>
<div id="bd">
<!-- cuerpo -->
<div id="yui-main">
<div class="yui-b">
<!-- bloque principal -->
</div>
</div>
<div class="yui-b">
<!-- bloque secundario -->
</div>
</div>
<div id="ft"><!-- pie --></div>
</div>
</body>
</html>Nota La forma en la que está diseñado YUI permite que el orden en el que se definen sus bloques en el código HTML sea independiente a su visualización. Algunos diseñadores prefieren colocar el lateral secundario lo antes posible dentro del código HTML, ya que suele incluir el menú de navegación y por razones de accesibilidad y de SEO es recomendable que aparezca lo antes posible. Con YUI es posible incluir el bloque secundario en primer lugar en el código HTML con la seguridad de que se visualizará correctamente en la posición establecida.
Después de crear los bloques de la página y después de indicar cuál es el bloque principal, el siguiente paso consiste en utilizar la plantilla adecuada para establecer las anchuras de cada bloque y su posición. YUI incluye por defecto seis tipos de plantillas, que corresponden a los diseños más comunes y están preparados para mostrar los formatos publicitarios más utilizados:
| Selector | Características de los bloques |
|---|---|
.yui-t1 |
Lateral de 160px a la izquierda |
.yui-t2 |
Lateral de 180px a la izquierda |
.yui-t3 |
Lateral de 300px a la izquierda |
.yui-t4 |
Lateral de 180px a la derecha |
.yui-t5 |
Lateral de 240px a la derecha |
.yui-t6 |
Lateral de 300px a la derecha |
Nota Existe una séptima plantilla especial que utiliza el selector .yui-t7 y que se puede emplear en las páginas que no están divididas en columnas o bloques.
Si la página ya ha definido sus bloques, utilizar una plantilla u otra es tan sencillo como modificar el valor de la clase del elemento <div> que encierra a todos los contenidos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc" class="yui-t"> <!-- plantilla con el lateral izquierdo de 160px -->
<div id="hd"><!-- cabecera --></div>
<div id="bd">
<!-- cuerpo -->
<div id="yui-main">
<div class="yui-b">
<!-- bloque principal -->
</div>
</div>
<div class="yui-b">
<!-- bloque secundario -->
</div>
</div>
<div id="ft"><!-- pie --></div>
</div>
</body>
</html>A continuación se modifica la página anterior para utilizar la plantilla que muestra el lateral a la derecha y con una anchura de 300px:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc" class="yui-t6"> <!-- plantilla con el lateral derecho de 300px -->
<div id="hd"><!-- cabecera --></div>
<div id="bd">
<!-- cuerpo -->
<div id="yui-main">
<div class="yui-b">
<!-- bloque principal -->
</div>
</div>
<div class="yui-b">
<!-- bloque secundario -->
</div>
</div>
<div id="ft"><!-- pie --></div>
</div>
</body>
</html>Las plantillas ofrecidas por YUI son las más utilizadas en el diseño web, pero en muchas ocasiones las páginas presentan otras estructuras más complejas. Cuando la estructura está dividida en más columnas, no se utilizan las plantillas, sino que se define directamente una rejilla.
5.5.5. Rejilla
El tercer elemento que forma la estructura de las páginas en YUI es la rejilla, que permite realizar diseños mucho más complejos que los que se realizan úncamente con las plantillas. La estructura en rejilla se puede utilizar junto con las plantillas o de forma independiente.
Las rejillas permiten crear divisiones muy complejas y se definen mediante dos elementos:
- El contenedor de la rejilla establece el tipo de división.
- Las unidades son los elementos individuales en los que está dividida la rejilla.
La rejilla más utilizada y más sencilla es .yui.g, que divide un elemento en dos partes iguales. El código HTML necesario es el siguiente:
<div class="yui-g">
<div class="yui-u"></div>
<div class="yui-u"></div>
</div>El elemento <div class="yui-g"> crea una nueva división o rejilla. Como se trata de una división en dos partes iguales, en su interior se deben definir dos unidades mediante <div class="yui-u"></div>. Además, YUI obliga a indicar explícitamente cuál de las dos unidades es la primera mediante la clase first. De esta forma, el código correcto del ejemplo anterior se muestra a continuación:
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>La siguiente tabla muestra las seis rejillas incluidas por defecto en YUI y sus características:
| Selector | Tipo de división |
|---|---|
.yui.g |
2 unidades a partes iguales (1/2, 1/2) |
.yui.gb |
3 unidades a partes iguales (1/3, 1/3, 1/3) |
.yui.gc |
2 unidades (2/3, 1/3) |
.yui.gd |
2 unidades (1/3, 2/3) |
.yui.ge |
2 unidades (3/4, 1/4) |
.yui.gf |
2 unidades (1/4, 3/4) |
Utilizando varias de las rejillas predefinidas es posible crear estructuras de página muy complejas. El siguiente ejemplo muestra el código de una página cuyo cuerpo está dividido en dos columnas en su parte superior y en tres columnas en su parte inferior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Página diseñada con YUI</title>
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd"><!-- cabecera --></div>
<div id="bd">
<!-- cuerpo -->
<div id="yui-main">
<div class="yui-b"><!-- bloque principal -->
<!-- rejilla 1/2, 1/2 -->
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
<!-- rejilla 1/3, 1/3, 1/3 -->
<div class="yui-gb">
<div class="yui-u first"></div>
<div class="yui-u"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
<div class="yui-b"><!-- bloque secundario -->
</div>
</div>
<div id="ft"><!-- pie --></div>
</div>
</body>
</html>Combinando las rejillas básicas se pueden obtener otro tipo de rejillas muy utilizadas. La rejilla 1/4, 1/4, 1/4, 1/4 se puede obtener combinando dos rejillas 1/2, 1/2:
...
<div id="bd">
<!-- cuerpo -->
<div id="yui-main">
<div class="yui-b"><!-- bloque principal -->
<!-- rejilla 1/2, 1/2 -->
<div class="yui-g">
<div class="yui-u first">
<!-- rejilla 1/2, 1/2 -->
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
<div class="yui-u">
<!-- rejilla 1/2, 1/2 -->
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b"><!-- bloque secundario -->
</div>
</div>
...
</div>
...Crear estructuras complejas con YUI es realmente sencillo aunque requiere de un período de aprendizaje. Por ese motivo, para los diseñadores que están empezando puede ser de utilidad la herramienta YUI: CSS Grid Builder que permite configurar la estructura de la página de forma gráfica.