 |
| madesweb |
Siguiendo con los conceptos básicos de CSS, vamos a estudiar lo que es llamado el Modelo de Caja Tradicional. Este modelo has sido implementado desde la primera versión de CSS y es actualmente soportado por cada navegador en el mercado, lo que lo ha convertido en un estándar para el diseño web.
Todo modelo, incluso aquellos aún en fase experimental, pueden ser aplicados a la misma estructura HTML, pero esta estructura debe ser preparada para ser afectada por estos estilos de forma adecuada. Nuestros documentos HTML deberán ser adaptados al modelo de caja seleccionado.
Modelo de caja tradicional
Todo comenzó con tablas. Las tablas fueron los elementos que sin intención se volvieron la herramienta ideal utilizada por desarrolladores para crear y organizar cajas de contenido en la pantalla. Este puede ser considerado el primer modelo de caja de la web. Las cajas eran creadas expandiendo celdas y combinando filas de celdas, columnas de celdas y tablas enteras, unas sobre otras o incluso anidadas.
Cuando los sitios webs crecieron y se volvieron más y más complejos esta práctica comenzó a presentar serios problemas relacionados con el tamaño y el mantenimiento del código necesario para crearlos.
Estos problemas iniciales hicieron necesario lo que ahora vemos como una práctica natural: la división entre estructura y presentación. Usando etiquetas <div> y estilos CSS fue posible reemplazar la función de tablas y efectivamente separar la estructura HTML de la presentación.
Con elementos <div> y CSS podemos crear cajas en la pantalla, posicionar estas cajas a un lado o a otro y darles un tamaño, color o borde específico entre otras características. CSS provee propiedades específicas que nos permiten organizar las cajas acorde a nuestros deseos. Estas propiedades son lo suficientemente poderosas como para crear un modelo de caja que se transformó en lo que hoy conocemos como Modelo de Caja Tradicional.
Algunas deficiencias en este modelo mantuvieron a las tablas vivas por algún tiempo, pero los principales desarrolladores, influenciados por el suceso de las complementaciones Ajax y una cantidad enorme de nuevas aplicaciones interactivas, gradualmente volvieron a las etiquetas <div> y estilos CSS en un estándar. Finalmente el Modelo de Caja Tradicional fue adoptado a gran escala.
En el articulo anterior creamos nuestra plantilla con las etiquetas HTML5. Esa sera la estructura necesario para nuestro documento.
Este modelo necesita agrupar cajas juntas para ordenarlas horizontalmente. Debido a que el contenido completo del cuerpo es creado a partir de cajas, debemos agregar un elemento <div> para agruparlas, centrarlas y darles un tamaño especifico.
A continuación se les proporcionara el código de nuestra nueva plantilla con el elemento <div> ya incluido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5+CSS3">
<meta name="keywords" content="HTML5, CSS3">
<title>EJEMPLO DE MODELO DE CAJA CON HTML5 Y CSS3</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>MAQUETACION Y DESARROLLO WEB</h1>
</header>
<nav id="menu">
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section id="seccion">
<article>
<header>
<hgroup>
<h1>APRENDE SOBRE CSS3</h1>
<h2>NUEVAS ETIQUETAS</h2>
</hgroup>
<time datetime="2017-10-05" pubdate>publicado 05-10-2017
</time>
</header>
En este articulo, te mostrare lo nuevo sonbre CSS3, y como puedes aplicarlo, en tus diseños.
<figure>
<img src="css.png">
<figcaption>
css3
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>APRENDE SOBRE CSS3</h1>
<h2>NUEVAS ETIQUETAS</h2>
</hgroup>
<time datetime="2017-10-05" pubdate>publicado 05-10-2017
</time>
</header>
En este articulo, te mostrare lo nuevo sonbre CSS3, y como puedes aplicarlo, en tus diseños.
<figure>
<img src="css.png">
<figcaption>
css3
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside id="columna">
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer id="pie">
Derechos Reservados MADESWEB.BLOGSPOT.COM © 2017
</footer>
</div>
</body>
</html>
Provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios importantes pueden distinguirse al comparar este código con el propuesto en el articulo Estructura de un articulo utilizando etiquetas html5
Lo primero en destacar serán las etiquetas id que están sombreadas y e negritas pues son las etiquetas agregadas para poder referenciar sus respectivas etiquetas en nuestro código CSS.
En segundo lugar, la adición del elemento <div> mencionado anteriormente. Este <div> fue identificado con el atributo id="agrupar", el cual es cerrado al final de cuerpo con la etiqueta de cierre </div>.
Este elemento se encarga de agrupar todos los demás elementos permitiéndonos aplicar el modelo de caja al cuerpo y designar su posición horizontal, como veremos mas adelante.
Deberá copiar esta plantilla en su editor de texto preferido, y guardarla con el nombre modelo_caja_tradicional.html, a la cual posteriormente le agregaremos nuestros estilo.
DEFINIENDO TÉRMINOS GENERALES DE CSS3.
Selector universal *
Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño:
* {
margin: 0px;
padding: 0px;
}
La primera regla en nuestro archivo CSS, nos asegura que todo elemento tendrá un margen interno y externo de 0 pixeles. De ahora en más solo necesitaremos modificar los márgenes de los elementos que queremos que sean mayores que cero.
Debemos escribir todas las reglas necesarias para otorgar estilo a nuestra plantilla en un archivo CSS. El archivo ya fue incluido dentro del código HTML por medio de la etiqueta <link>, por lo que lo único que tenemos que hacer es crear un archivo en su editor de texto preferido, guardarlo y con el nombre de misestilos.css y luego en su interior copiar todas las lineas de código que se irán describiendo a continuación, incluida la de selector universal.
Nueva jerarquía para cabeceras
En nuestra plantilla usamos elementos <h1> y <h2> para declarar títulos y subtítulos de diferentes secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy lejos de lo que queremos
h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
font: bold 14px verdana, sans-serif;
}
La propiedad font, asignada a los elementos <h1> y <h2>, nos permite declarar todos los estilos para el texto en una sola línea.
Las propiedades que pueden ser declaradas usando font son: font-style, font-variant, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los valores que deseamos.
Declarando nuevos elementos HTML5
Otra regla básica que debemos declarar desde el comienzo es la definición por defecto de elementos estructurales de HTML5.
Algunos navegadores aún no reconocen estos elementos o los tratan como elementos inline (en línea). Necesitamos declarar los nuevos elementos HTML5 como elementos block para asegurarnos de que serán tratados como regularmente se hace con elementos <div> y de este modo construir nuestro modelo de caja:
header, section, footer, aside, nav, article, figure, figcaption,
hgroup {
display: block;
}
Centrando el cuerpo
El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.
body {
text-align: center;
}
Con el código anterior todo lo que se encuentra dentro de <body> será centrado en la ventana, centrando de este modo toda la página web.
Creando la caja principal
Siguiendo con el diseño de nuestra plantilla, debemos especificar una tamaño o tamaño máximo para el contenido del cuerpo. Como seguramente recuerda, en el Listado 2-25 en este mismo capítulo agregamos un elemento <div> a la plantilla para agrupar todas las cajas dentro del cuerpo.
Este <div> será considerado la caja principal para la construcción de nuestro modelo de caja (este es el propósito por el que lo agregamos). De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:
#agrupar {
width: 960px;
margin: 15px auto;
text-align: left;
}
El código anterior está referenciando por primera vez un elemento a través del valor de su atributo id. El carácter # le está diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo id con el valor agrupar.
Dentro de esta regla hay tres estilos para la caja principal.
width: establece un valor fijo de 960pixeles, esto es un valor común para todos los sitios hoy en día este es el ancho de la caja que contiene los artículos y la barra lateral.
margin: Usado para este código puede tener cuatro valores: Superior, Derecho, Inferior, Izquierdo, en este orden. El primer valor declaro sera el asignada a la parte superior, sino se asignan mas valores la caja tomara este valor para los cuatro lados.
text-aling: Esta linea de código es para alinear el texto según queramos, los valores pueden ser: Center, Right, Left, Justify.
La cabecera
#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
padding: 20px;
}
<header>. Este elemento contiene el título principal de nuestra página web y estará ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue identificado con el atributo id y el valor cabecera.
Barra de navegación
Siguiendo al elemento <header> se encuentra el elemento <nav>, el cual tiene el propósito de proporcionar ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de nuestro sitio web.
#menu {
background: #CCCCCC;
padding: 5px 15px;
}
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
La propiedad padding trabaja exactamente como margin. Cuatro valores pueden ser especificados: superior, derecho, inferior, izquierdo, en este orden. Si solo declaramos un valor, el mismo será asignado para todos los espacios alrededor del contenido del elemento. Si en cambio especificamos dos valores, entonces el primero será asignado como margen interno de la parte superior e inferior del contenido y el segundo valor no será asignado al margen interno de los lados, izquierdo y derecho.
Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los ítems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opción del menú una al lado de la otra, referenciamos los elementos <li> dentro de este elemento <nav> en particular usando el selector #menu li, y luego asignamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline.
A diferencia de los elementos block, los elementos afectados por el parámetro inline-block estandarizado en CSS3 no generan ningún salto de línea pero nos permiten tratarlos como elementos block y así declarar un valor de ancho determinado. Este parámetro también ajusta el tamaño del elemento de acuerdo con su contenido cuando el valor del ancho no fue especificado.
En esta última regla también eliminamos el pequeño gráfico generado por defecto por los navegadores delante de cada opción del listado utilizando la propiedad list-style.
Section y aside
Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Modelo de Caja
Tradicional es construido sobre estilos CSS que nos permiten especificar la posición de cada caja.
Usando la propiedad
que utilizamos en nuestra plantilla HTML para crear estas cajas son <section> y <aside>, cada uno identificado con el
atributo id y los valores seccion y columna respectivamente.
#seccion {
float: left;
width: 660px;
margin: 20px;
}
#
columna {
float: left;
width: 150px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}
Float actúan como elementos block (con la diferencia de que son ubicados de acuerdo al valor de esta propiedad y no el flujo normal del documento). Los elementos son movidos a izquierda o derecha en el área disponible, tanto como sea posible,
respondiendo al valor de float.
Con las reglas del código anterior declaramos la posición de ambas cajas y sus respectivos tamaños, generando así las columnas visibles en la pantalla. La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, width asigna un tamaño horizontal y margin, por supuesto, declara el margen del elemento.
Afectado por estos valores, el contenido del elemento <section> estará situado a la izquierda de la pantalla con un tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho. La propiedad float del elemento <aside> también tiene el valor left (izquierda).
Esto significa que la caja generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento <section> fue también movida a la izquierda de la pantalla, ahora el espacio disponible será solo el que esta caja dejó libre. La nueva caja quedará ubicada en la misma línea que la primera pero a su derecha, ocupando el espacio restante en la línea, creando la segunda columna de nuestro diseño.
Footer
Para finalizar la aplicación del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado:
#pie {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
el código anterior declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding) de 20 pixeles, y centra el texto dentro del elemento. A sí mismo, restaura el normal flujo del documento con la propiedad clear.
Esta propiedad simplemente restaura las condiciones normales del área ocupada por el elemento, no permitiéndose posicionarse adyacente a una caja flotante.
El valor usualmente utilizado es both, el cual significa que ambos lados del elemento serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es flotante como los anteriores). Esto, para un elemento block, quiere decir que será posicionado debajo del último elemento, en una nueva línea.
La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no existieran y las cajas se superponen.
En la siguiente imagen, se muestra hasta ahora el avance con nuestro modelo de caja tradicional.
 |
| madesweb |
Últimos toques, configuraremos la etiqueta <article>
Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos configurar los pocos elementos HTML5 restantes:
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;
}
Este codigo referencia todos los elementos <article> y les otorga algunos estilos básicos (color de fondo, un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15 pixeles tiene el propósito de separar un elemento <article> del siguiente verticalmente.
Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de comentarios recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector article footer que significa “cada <footer> dentro de un <article> será afectado por los siguientes estilos”.
Esta técnica de referencia fue aplicada aquí para alinear a la derecha el texto dentro de los elementos <footer> de cada <article>.
Al final del código cambiamos el color de cada elemento <time> y diferenciamos la descripción de la imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra diferente.
Box-sizing
Existe una propiedad adicional incorporada en CSS3 relacionada con la estructura y el Modelo de Caja Tradicional. La propiedad box-sizing nos permite cambiar cómo el espacio total ocupado por un elemento en pantalla será calculado forzando a los navegadores a incluir en el ancho original los valores de las propiedades padding y border.
Como explicamos anteriormente, cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene el valor final por medio de la siguiente fórmula: tamaño + márgenes + márgenes internos + bordes.
Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 pixeles, padding en 10 pixeles y border en 1 pixel, el área horizontal total ocupada por el elemento será: 100+40+20+2= 162 pixeles (note que tuvimos que duplicar los valores de margin, padding y border en la fórmula porque consideramos que los mismos fueron asignados tanto para el lado derecho como el izquierdo).
Esto significa que cada vez que declare el ancho de un elemento con la propiedad width, deberá recordar que el área real para ubicar el elemento en pantalla será seguramente más grande. Dependiendo de sus costumbres, a veces podría resultar útil forzar al navegador a incluir los valores de padding y border en el tamaño del elemento. En este caso la nueva fórmula sería simplemente: tamaño + márgenes.
div {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-box, lo que significa que los navegadores agregarán los valores de padding y border al tamaño especificado por width y height.
Usando el valor border-box en su lugar, este comportamiento es cambiado de modo que padding y border son incluidos dentro del elemento.
Y de esta manera estaríamos terminando de aplicar los estilos a nuestra plantilla HTML, lo que sigue es revisar el resultado en varios navegadores para apreciar como se aplican cada estilo.
Sera obligación de cada uno jugar con las etiquetas y probar cambiando sus valores esto para ser totalmente cocientes de que tanto se puede alterar nuestro código.
A continuación se muestra el resultado de el modelo caja tradicional, solo agregue algunas cosas como la imagen de ejemplo, y algún que otro texto. Este es el resultado en CHROME, cada quien se encargara de probarlo en los demás exploradores.
 |
| madesweb |
Espero que este grupo de artículos que se están desarrollando, en verdad les ayude a entender un poco mejor la temática de HTML Y CSS, con ejemplos super sencillos.
En otra oportunidad se desarrollara nuevos efectos que dispone CSS3.
Hasta pronto.!!!
No hay comentarios:
Publicar un comentario