Quenerapú » template http://quenerapu.com Sentado delante de un ordenador desde 1982. ¿De qué voy a hablar, si no? Mon, 12 Jul 2010 09:09:47 +0000 en hourly 1 http://wordpress.org/?v=3.0 El layout con columnas más simple del mundo (probablemente) http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/ http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/#comments Thu, 15 Oct 2009 16:19:54 +0000 Quenerapú http://quenerapu.com/?p=125 Hace mucho tiempo que deseaba dar definitivamente por cerrados mis quebraderos de cabeza al diseñar sitios web con columnas. Y creo que al fin lo he conseguido.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>TinyCSS</title>
<style type="text/css">
*{margin:0;padding:0;}
h1{font-size:1em;}
.header{border-bottom:1px solid #aaa;}
.container{overflow:hidden;height:100% !important;}
.main{width:500px;margin-bottom:-1000px;padding-bottom:1000px;float:left;}
.sideBar{margin-bottom:-1000px;padding-bottom:1000px;float:right;}
.s1{width:160px;border-left:1px solid #aaa;}
.s2{width:300px;border-left:1px solid #aaa;}
.footer{border-top:1px solid #aaa;}
</style>
</head>
<body>
<div class="header"><h1>Header</h1></div>
<div class="container">
	<div class="sideBar s2"><h1>Sidebar 2</h1></div>
	<div class="sideBar s1"><h1>Sidebar 1</h1></div>
	<div class="main"><h1>Main</h1></div>
</div>
<div class="footer"><h1>Footer</h1></div>
</body>
</html>

Si bien el resultado final es bastante feo (puedes ver una demo aquí) el peso de este documento es de menos de 1Kb. y es compatible con Internet Explorer (versión 6 incluída), Firefox, Chrome, Opera y Safari (Browsershots.org).

No será difícil para un diseñador hábil con las CSS partir de este esqueleto para crear algo mucho más agradable a la vista.

Lo que más me gusta es que los <div> de las columnas pueden crecer al alto tanto como quieras sin preocuparte por sus vecinas, que se prolongarán en lo vertical para que todas sean iguales (con unos ejemplos me explico mejor). Para ello no he usado ni javaScript ni el conocido método Faux Columns, sino un truco CSS que consiste en atribuir

margin-bottom:-1000px; padding-bottom:1000px;

a cada una de las columnas, y

overflow:hidden;

al <div> que las contiene.

Y para terminar, es importante recordar que en la línea

.container{overflow:hidden;height:100% !important;}

height:100% !important; son necesarios para que el sistema sea compatible con IE6. El glorioso día en que IE6 sea desterrado ya no será necesario incluir ese código.

Me ha ayudado mucho un viejo post de Ed Elliot. Gracias Ed!

]]> http://quenerapu.com/css/el-layout-con-columnas-mas-simple-del-mundo-probablemente/feed/ 5 El sistema de plantillas más simple del mundo (probablemente) http://quenerapu.com/php/el-sistema-de-plantillas-mas-simple-del-mundo-probablemente/ http://quenerapu.com/php/el-sistema-de-plantillas-mas-simple-del-mundo-probablemente/#comments Thu, 26 Feb 2009 04:23:11 +0000 Quenerapú http://quenerapu.local/?p=42 Supongamos que acabo de diseñar en HTML una ficha tipo (voy a hacer algo muy básico, sólo para ilustrar):

<html>
<head>[NOMBRE] [APELLIDO]</head>
<body>
	<h1>Ficha número    [ID]</h1>
	<p><b>Nombre:</b>   [NOMBRE] [APELLIDO]</p>
	<p><b>Edad:</b>     [EDAD] años</p>
	<p><b>Teléfono:</b> [TELÉFONO]</p>
	<p><b>eMail:</b>    <a href="mailto:[EMAIL]">[EMAIL]</a></p>
</body>
</html>

Y ahora convierto las variables a sintaxis PHP básica, manteniendo el HTML intacto:

<html>
<head><?=$nombre.' '.$apellido;?></head>
<body>
	<h1>Ficha número    <?=$id;?></h1>
	<p><b>Nombre:</b>   <?=$nombre.' '.$apellido;?></p>
	<p><b>Edad:</b>     <?=$edad;?> años</p>
	<p><b>Teléfono:</b> <?=$telefono;?></p>
	<p><b>eMail:</b>    <a href="mailto:<?=$eMail;?>"><?=$eMail;?></a></p>
</body>
</html>

LLamo a esta plantilla «ficha.php» y la guardo en una carpeta «plantillas», por ejemplo. A continuación, en un documento nuevo (que llamaré «index.php», para ser original) declaro la función que sirve para crear contenidos en base a plantillas.

<?php
function tpl($p,$d=array())
	{
	extract($d);
	ob_start();
	require('plantillas/'.$p.'.php');
	return ob_get_clean();
	}
?>

Y ya está: No tengo más que llamar a esa función con la info obtenida de la base de datos cada vez que quiera volcarla en pantalla utilizando esa plantilla.

<?php
echo tpl('ficha',
			array(
				'id'=>      123,
				'nombre'=>  'Juan',
				'apellido'=>'Gómez',
				'edad'=>    33,
				'telefono'=>'987654321',
				'eMail'=>   'foo@bar.es'
				)
		);
?>

Con ese PHP generamos este HTML:

<html>
<head>Juan Gómez</head>
<body>
	<h1>Ficha número    123</h1>
	<p><b>Nombre:</b>   Juan Gómez</p>
	<p><b>Edad:</b>     33 años</p>
	<p><b>Teléfono:</b> 987654321</p>
	<p><b>eMail:</b>    <a href="mailto:foo@bar.es">foo@bar.es</a></p>
</body>
</html>

La principal ventaja que presenta este método es que estoy separando en la medida de lo posible la forma del contenido. El documento «ficha.php» es fácilmente editable por un diseñador web sin conocimientos de programación PHP (Tan sólo ha de comprender la sintaxis <?=$variable;?>, que no es mucho pedir), mientras que el documento «index.php» sólo contiene programación PHP, sin una sola etiqueta HTML molestando por medio, de modo que el programador se centra exclusivamente en la programación.

]]> http://quenerapu.com/php/el-sistema-de-plantillas-mas-simple-del-mundo-probablemente/feed/ 6