Junio 2009
Tutorial: Estilizando las cajas
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: El Modelo de Cajas para leer este otro.
En la entrada anterior lo último que se explicó fue a utilizar el modelo de cajas para crear una página a dos columnas. Era algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div#cabecera { margin:5px; text-align:center; padding:10px; height:20px; width:375px; border:1px solid gray; float:left }^n div#barra {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n div#contenido {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Bienvenidos a mi sitio web</div>^n <div id="barra">^n <ul>^n <li><a href="#">Inicio</a></li>^n <li><a href="#">Blog</a></li>^n <li><a href="#">Fotos</a></li>^n <li><a href="#">Contacto</a></li>^n </ul>^n </div>^n <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espíritu de <strong>colaboración</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n </body>^n</html>
Cambiando solo el estilo podemos conseguir cosas muy bonitas, vamos con unos ejemplos simples. Algunas de las instrucciones nuevas que vamos a usar son: background:url(ruta_de_la_imagen); para poner imágenes de fondo,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style>^n body { background:url(images/tree.gif) no-repeat #c0dbbc; font-size:12px; font-family:Verdana,Arial }^n div#cabecera { margin:5px; font-size:16px; color:#41500d; font-weight:bold; text-align:right; padding:10px; height:20px; width:375px; float:left }^n div#barra {width:150px; height:150px; margin:5px; background:url(/images/leaves.gif) no-repeat; float:right;}^n div#barra a {color:#8c4317; font-weight:bold;}^n div#barra ul {padding-left:30px;}^n div#barra li {list-style:none; background:url(/images/item.gif) no-repeat; padding-left:22px;}^n div#contenido {margin:25px 0 0 20px; padding:5px; width:240px; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Bienvenidos a mi sitio web</div>^n <div id="barra">^n <ul>^n <li><a href="#">Inicio</a></li>^n <li><a href="#">Blog</a></li>^n <li><a href="#">Fotos</a></li>^n <li><a href="#">Contacto</a></li>^n </ul>^n </div>^n <div id="contenido"><p><strong>Bienvenidos</strong> a la portada de mi sitio web, queremos demostrarte como con un espiritu de <strong>colaboracion</strong> y <strong>buenas ideas</strong> se pueden construir grandes cosas</p></div>^n </body>^n</html>
Una muy poderosa herramienta para comprender y realizar CSS es Firebug para el navegador Firefox. Utilizando la opción Inspeccionar puede verse desde el navegador el código HTML y CSS y como se comportan entre si. No tengas miedo de explorarlo a fondo.
Espacio de pruebas
El miedo al cambio
El Sultan Abdul Hamid II que estuvo en el trono de Turquia desde 1876 a 1909 respondió a los ingenieros que le plantearon la instalación de una red electrica en la capital Constantinopla que no quería saber nada con la electricidad ya que para generarla necesitaban dínamos. A este inculto sultan la palabra dínamo le sonaba a dinamita y según sus palabras, le temía a sus explosiones.
El miedo al cambio suele llevar al no querer saber, al no querer ahondar en el problema para saber si lo que uno está haciendo está mal, bien o puede ser mejor. Incluso este instinto del miedo es tan poderoso que se ha tornado verso popular: "Mejor malo y conocido que bueno y por conocer"
En el mundo de hoy, mas aun en lo que tenga que ver con tecnología, mas aun en lo que tenga que ver con internet, esta actitud lleva sin lugar a dudas a la ruina.
A veces incluso entre ingenieros y profesionales se presenta esta actitud, es algo inherente a la humanidad, un miedo de conservación. No depende del conocimiento, ni los estudios, ni la capacidad intelectual: es una cuestion de actitud el enfrentar las dudas y miedos y ver que hay mas alla. Es una cuestión de inteligencia aprovechar esa actitud de algunos para contagiarla a los otros para que se sientan mas seguros, es una cuestión de sabiduría hacer grandes cosas con un grupo de gente motivada para mejorar y aprender.
En SiteUp queremos ofrecerte las vias, la comunicación, la seguridad, para que estes pronto al cambio, para que tu sitio web refleje esta filosofía: no hablamos por hablar, realmente lo sentimos asi, por que nos apasiona aprender y mejorar, y mas aun, poner eso a disposición de los demás para poder construir algo que nos sirva a todos. Entonces, estás listo para no volvera quedarte atrás nunca?
Tutorial: Modelo de Cajas
Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: Introducción al CSS para leer este otro.
Una forma muy extendida de maquetar es utilizar el modelo de cajas y hacerlas flotar. El modelo de cajar permite tratar elementos como rectángulos que se van acomodando a su entorno. Para ello debemos darles la propiedad display:block aunque algunos elementos ya la tienen por defecto, por ejemplo <div>. Vamos a utilizar dos propiedades nuevas: border y background para poder visualizar las cajas.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Aqui estamos armando cinco cajas con tamaños y colores de fondos distintos, quedarán una debajo de la otra.
La W3C propone entonces un modelo de cajas para definir tamaños, márgenes y comportamientos:
Vamos a probar entonces el comportamiento de Flotar. Esto es darle a las cajas una especie de "fuerza de gravedad" para que se acomoden segun entren en la página. Por ejemplo, para que las cajas se acomoden en la punta superior izquierda pondremos float:left y para que lo hagan en la esquina superior derecha usaremos float:right.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div { border:1px solid black; float:left; }^n div#uno {background-color:red; height:100px; width:200px;}^n div#dos {background-color:blue; height:50px; width:50px;}^n div#tres {background-color:green; height:150px; width:150px;}^n div#cuatro {background-color:yellow; height:20px; width:200px;}^n div#cinco {background-color:black; height:200px; width:85px;}^n </style>^n </head>^n <body>^n <div id="uno">caja uno</div>^n <div id="dos">caja dos</div>^n <div id="tres">caja tres</div>^n <div id="cuatro">caja cuatro</div>^n <div id="cinco">caja cinco</div>^n </body>^n</html>
Haz la prueba de cambiar el float:left; por float:right;
Para determinar el orden en el que caerán los elementos es importante el orden en el que estan puestos en el html. Vamos a ver un ejemplo donde se utiliza con mas claridad, también utilizaremos márgenes (margin) que es la distancia que debe dejar el elemento con los demás y rellenos (padding) que es la distancia entre el borde y el contenido:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">^n<html>^n <head>^n <title>Mi primer sitio web</title>^n <style> ^n div#cabecera { margin:5px; text-align:center; padding:10px; height:20px; width:375px; border:1px solid gray; float:left }^n div#columna_uno {margin:5px; padding:5px; width:140px; border:1px solid gray; float:left;}^n div#columna_dos {margin:5px; padding:5px; width:223px; border:1px solid gray; float:left;}^n </style>^n </head>^n <body>^n <div id="cabecera">Cabecera de la pagina</div>^n <div id="columna_uno"> Primera columna del sitio Primera columna del sitio Primera columna del sitio</div>^n <div id="columna_dos"> Segunda columna del sitio Segunda columna del sitio Segunda columna del sitio </div>^n </body>^n</html>
Expliquemos un poco los tamaños. En la cabecera hemos dejado 5px de margen, 5px de relleno, 1px de borde (todo esto de cada lado) y un ancho de 375px.
La cuenta da: 5+1+10+375+10+1+5 = 407px.
En las cajas de abajo, en la primera tenemos: 5px de margen, 1px de borde, 5px de relleno (esto de cada lado) y 140px de ancho: 5+1+5+140+5+1+5 = 162px
La segunda caja de abajo es lo mismo pero con 223px de ancho, entonces: 5+1+5+223+5+1+5 = 245px
y 152px + 245px = 407px. Que es lo mismo que mide la caja de la cabecera, asi es como quedan alineadas nuestras columnas
