Dario BF | Blog personal de Darío Balbontín

Elementos Compartidos – 08/17/2010

17

ago

En Elementos compartidos

Oracle estaría intentando destruir el Open Source

08/16/2010

Oracle declara el fin de OpenSolaris

08/16/2010

17 años del nacimiento de Debian

08/14/2010

Wallsaver, o cómo integrar el protector de pantalla en el escritorio

08/10/2010

55 sitios inspirados en el blanco y el negro

Etiquetas: Elementos compartidos

Comenta ahora! »

Cambiando WP->Twitter por el servicio de Feedburner

9

ago

En Diseño y desarrollo web

Para quitar peso al blog y que cargue más rápido (aunque creo que no carga lento) he decidido quitar el plugin (por ahora está desactivado solamente) que twitteaba las nuevas entradas del blog.

Ahora lo hago desde Feedburner, aunque me queda probar que funciona con esta entrada para quedarme tranquilo.

Para activarlo basta con ir a Publicize -> Socialize dentro de feedburner y seguir los pasos.

Etiquetas: Logs, twitter

Comenta ahora! »

Como hacer un diseño web liquido o fluido

6

ago

En Diseño y desarrollo web

Para empezar esta entrada me gustaría lo primero diferenciar dos tipos de diseño web (aunque podríamos dar 3 o incluso más):

Diseño Fijo: Es aquél en el que se establecen como tamaño de la estructura unas medidas inalterables por el navegador. (por ejemplo este blog)
Diseño líquido: Son diseños creados para no tener un ancho fijo, permiten que el navegador lo adapte a su tamaño. Se diseñan usando porcentajes (%), por lo que los elementos que seleccionemos podrán tener un tamaño proporcionado al tamaño del navegador. Fueron creados para aprovechar al máximo los nuevos monitores (panorámicos).

En esta entrada vamos a ver cómo realizar un diseño web líquido sin morir en el intento o caer en errores.

Para empezar necesitamos una estructura, en este caso he escogido una de tres columnas, para jugar con dos sidebar laterales y un contenedor central dinámico.

La idea es la siguiente:

Como podeis ver, además del header y footer (cabecera y pié de página respectivamente), contaremos con tres columnas, dos laterales (una a cada lado) de ancho fijo y una central de ancho dinámico.

Para conseguir esto basta con este código HTML dentro del body de nuestro sitio:

<div id="contentRight">
	<h3>Menú derecho</h3>
</div><!-- /contentRight -->
<div id="contentLeft">
	<h3>Menú izquierdo</h3>
</div><!-- /contentLeft -->
<div id="contentCenter">
	<h2>Contenido</h2>
</div><!-- /contentCenter -->

Como CSS tendremos lo siguiente:

#contentRight, #contentLeft, #contentCenter {
	height: 100%;
	overflow: hidden;
}
#contentRight {
	float: right;
	width: 200px;
}
#contentLeft {
	float: left;
	width: 200px;
}