Una forma de maquetearDurante mucho tiempo no tuve necesidad de maquetear porque hacía sitios web donde no era necesario ser exacto en el diseño. Raras veces me propusieron ajustar un diseño web a un diseño gráfico hecho en Photoshop. Y me veía en problemas para lograr que las cosas se dispusieran del modo en que ahí aparecían. Después de muchas horas, o varios días consultando en Internet, me parecía que lo lograba. Pero además tenía que resolver los problemas de compatibilidad, cuando no se ve igual en el otro navegador (principalmente Internet Explorer 6). No eran raros los casos donde demorara bastante en encontrar la forma de que se vieran del mismo modo tanto en Firefox como en IE6, o Chrome. Desde hace algunos meses trabajo en una agencia de publicidad donde he tenido que realizar ese tipo de trabajo varias veces. Gracias a Dios, para esta época ya he leido y experimentado algo sobre técnicas con CSS, y basado en ellas estoy mejorando en la tarea de maqueteo. Ahora puedo conseguir que el diseño web calce sobre el diseño gráfico que me pasan, de un modo más preciso y, principalmente, más rápido. Tengo archivados varios textos de diseño web que aún no he leido. Ojalá pueda ir mejorando esta técnica que describo a continuación.

El problemaHay un diseño gráfico con texto y fotos dispuestos en un rectángulo. Se desea hacer un diseño web que calce con él del modo más exacto que se pueda, con el código más eficiente que se pueda, en el menor tiempo que se pueda.

Cómo lo hago

GráficosPrimero, uso el diseño gráfico para obtener las imágenes que requiero. Generalmente lo hago con Photoshop. Aislo las figuras y piezas que necesitaré para armar la maqueta. Sigo las siguientes pautas:

● Si hay áreas rectangulares de color puro, es más económico colorear con HTML.● Si hay figuras irregulares sobre color puro, trato de aislar la figura en un trozo

rectangular que luego encajaré en un área coloreada con HTML.

● Si la figura está sola en un layer, duplico el layer, pero elijiendo que sea en un nuevo documento.

● Si hay más figuras en el layer, selecciono, copio y pego en otro layer, que luego puedo duplicar como en el caso anterior.

● Si quiero la combinacion de varios layers, les hago merge temporalmente, luego puedo proceder a duplicar ese layer en un nuevo documento. Después, retrocedo con CTRL+ALT+Z para dejar los layers como estaban.

● Todas las figuras las copio sobre un fondo transparente, siempre que sea posible.● Todas las figuras las copio en su tamaño y resolución original (que suele ser 300

dpi). Los escalamientos los hago al final.● Para obtener las imágenes finales uso File, Save for Web & Devices. Es de grán

ayuda para permitir elejir el tipo de formato, la calidad, transparencia, dimensiones, etc. Es aquí donde especifico las dimensiones finales.

○ Para los iconos, bullets y cosas donde es mejor que no haya pérdida de color, elijo GIF, o PNG. Si se requiere, indico transparencia. PNG24 permite tiene mejor manejo de la transparencia y el color que GIF (sin embargo, para que se aprecie eso en IE6 será necesario usar un poco de javascript; en los otros navegadores si se ve muy bien, felizmente)

○ Para las fotografías donde se puede admitir pérdida de color, elijo JPEG, buscando una calidad que se vea bien y ocupe poco espacio.

● Además, hago una “foto” del diseño completo en el tamaño que se desea. Aunque no se usará en la presentación final, en la fase de diseño la uso como fondo-guía, para posicionar las piezas y el texto.

PosiciónLa idea es usar la foto del diseño como fondo de un div. Y, sobre ese div, ir definiendo otros div que contengan los elementos que queremos colocar. La posición de esos div será siempre absoluta. Para lograr un calce preciso, temporalmente se puede aplicar transparencia al div que se desea encajar.

● Debido a las discrepancias que hay en los browsers sobre el margen de muchos elementos, uso una hoja de estilos reset para ponerlos en una base inicial común.

Ejemplo● El diseño en Photoshop:

● Extrayendo las piezas:

Copio cada pieza en un layer aparte y luego la duplico en un documento aparte (en layer, clic derecho, duplicate, destination: new document). También se puede hacer copiando y pegando en un nuevo documento las

selecciones deseadas. Luego se puede hacer trim (Image, Trim) para eliminar el espacio sobrante.Si se desea un margen, luego del trim se puede ampliar el tamaño del canvas (Image, Canvas size...).

● Plantilla HTML inicial:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/

html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Lorem Ipsum</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />

<style type="text/css">

#container {

background: url(foto.png) no-repeat;

width: 550px;

height: 400px;

position: relative;

}

</style>

</head>

<body>

<div id="container"></div>

</body>

</html>

Es importante que el container tenga position: relative o position:absolute para que los elementos que contengan se puedan posicionar de modo absoluto luego.

● Coloco los textos:

<div id="container">

<div id="titulo">

Lorem <strong>ipsum</strong>

</div>

<div id="principal">

Lorem ipsum ignota scripta<br />

debitis ad has.<br />

Wisi forensibus et vis,<br />

eam ad eruditi blandit<br />

appetere.

</div>

<div id="pie">

Libris sanctus in vix, te pro magna semper facilisis.<br />

Eligendi vulputate te mei. Appareat erroribus<br />

assentior ne est.

</div>

</div>

Cuando se desea que el texto esté cortado de manera específica, como en el caso de este aviso, uso <br/> para asegurar eso.Uso <strong> y <em> para señalar las negritas o cursivas que hubiera.

● Posiciono los textos.

Por ejemplo, para posicionar el div #titulo: #titulo {

position: absolute;

top: 34px;

left: 50px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 48px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#principal {

display: none;

position: absolute;

top: 0;

left: 0;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#pie {

display: none;

position: absolute;

top: 0;

left: 0;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

La idea es simple. Usar posicionamiento absoluto (respecto al div #container) para colocar cada pieza en su sitio. Ayuda bastante colorear el fondo del bloque (con #0f0, por ejemplo) y aplicarle transparencia mientras se juega con los números top y left para calzarlo exactamente en la posición requerida. Incluso se puede hacer CTRL++ para que el browser haga zoom de la página y podamos apreciar mejor los detalles. Mientras se trabaja con un div, los otros están temporalmente invisibles con display:none.

Cuando todos textos están posicionados:

Como hay diferencias entre el sistema de tipografía de Photoshop y el del browser, es posible que el calce no sea perfecto, pero es importante tratar de aproximarse all tipo de fuente, el tamaño de la fuente, la altura de la línea y la separación entre caracteres. En general, es aceptable que no todo el texto calce. Lo importante es que lo haga la parte más representativa. Tal vez haya un modo de configurar Photoshop para que produzca texto que se pueda calzar exactamente con el navegador.

#titulo {

1display: none;

position: absolute;

top: 34px;

left: 50px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 48px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#principal {

1display: none;

position: absolute;

top: 105px;

left: 54px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 24px;

line-height: 28px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#pie {

1display: none;

position: absolute;

top: 287px;

left: 52px;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

line-height: 12.6px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

Para comentar una línea CSS es útil el truco de anteponerle un número. Todos los navegadores ignorarán esa línea. Yo suelo dejarlas disponibles durante la etapa de desarrollo. Es en la versión final donde ya hago una poda de lo que no es necesario.

● Los elementos gráficos se posicionan de modo similar. #corner_bottom {

1display: none;

background: url(images/corner_bottom.gif) no-repeat;

position: absolute;

top: 344px;

left: 0;

width: 56px;

height: 56px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#corner_top {

1display: none;

background: url(images/corner_top.gif) no-repeat;

position: absolute;

top: 0;

right: 0;

width: 56px;

height: 64px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

#bola8{

1display: none;

background: url(images/bola8.png) no-repeat;

position: absolute;

top: 229px;

right: 34px;

width: 169px;

height: 150px;

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

}

Aunque Dreamweaver permite mover con facilidad los elementos posicionados absolutamente, no presenta la transparencia. Con un poco de práctica se hace llevadero hacerlo a mano.

● Para crear el marco, podemos usar HTML. #redbox {

background-color: #f00;

width: 550px;

height: 400px;

position: absolute;

}

#whitebox {

background-color: #fff;

width: 530px;

height: 380px;

position: absolute;

top: 10px;

left: 10px;

}

...

<div id="container">

<div id="redbox">

<div id="whitebox"></div>

</div>

<div id="titulo">

Lorem <strong>ipsum</strong>

</div>

<div id="principal">

...

Quizás pudimos haber hecho el marco primero, para que dentro quedaran el texto y la bola. En ese caso, los valores de posición de esos elementos serían ligeramente diferentes, pues serían relativos a la esquina superior izquierda del cuadrado blanco.

Compatibilidad

El truco del guión bajoA veces hay estilos que requieren valores diferentes para producir el efecto deseado en IE6. Para esos casos, es útil el truco de usar un guión bajo al comienzo de la propiedad CSS. Por ejemplo, _margin: 10px; será ignorada por todos los navegadores, excepto por IE6, que la tomará del mismo modo que margin: 10px; De ese modo, se pueden combinar ambas reglas para que en cada navegador produzcan el mismo resultado: #elemento {

background-color: #fff;

margin: 10px 20px;

_margin: 13px 23px;

}

IE6 lo tomará como: #elemento {

background-color: #fff;

margin: 13px 23px;

}

Y el resto de navegadores como:#elemento {

background-color: #fff;

margin: 10px 20px;

}

Puede usar esa técnica para hacer al final los ajustes que necesite.

PNGs en IE6IE6 no maneja bien la transparencia de un PNG. Para que lo haga podemos usar pngFix, que es un plugin para jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/

html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Lorem Ipsum</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" media="all" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery.pngFix.js"></script>

<style type="text/css">

#container {

1background: url(foto.png) no-repeat;

width: 550px;

height: 400px;

position: relative;

}

#redbox {

background-color: #f00;

width: 550px;

height: 400px;

position: absolute;

}

#whitebox {

background-color: #fff;

width: 530px;

height: 380px;

position: absolute;

top: 10px;

left: 10px;

}

#titulo {

1display: none;

color: #f00;

position: absolute;

top: 34px;

left: 50px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 48px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

#principal {

1display: none;

position: absolute;

top: 105px;

left: 54px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 24px;

line-height: 28px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

#pie {

1display: none;

position: absolute;

top: 287px;

left: 52px;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

line-height: 12.6px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

#corner_bottom {

1display: none;

background: url(images/corner_bottom.gif) no-repeat;

position: absolute;

top: 344px;

left: 0;

width: 56px;

height: 56px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

#corner_top {

1display: none;

background: url(images/corner_top.gif) no-repeat;

position: absolute;

top: 0;

right: 0;

width: 56px;

height: 64px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

#bola8{

1display: none;

1background: url(images/bola8.png) no-repeat;

position: absolute;

top: 229px;

right: 34px;

width: 169px;

height: 150px;

/*

background-color: #0f0;

filter:alpha(opacity=50);

opacity: 0.5;

-moz-opacity:0.5;

*/

}

</style>

<script type="text/javascript">

$(document).ready(function() {

$('#bola8').pngFix();

});

</script>

</head>

<body>

<div id="container">

<div id="redbox">

<div id="whitebox"></div>

</div>

<div id="titulo">

Lorem <strong>ipsum</strong>

</div>

<div id="principal">

Lorem ipsum ignota scripta<br />

debitis ad has.<br />

Wisi forensibus et vis,<br />

eam ad eruditi blandit<br />

appetere.

</div>

<div id="pie">

Libris sanctus in vix, te pro magna semper facilisis.<br />

Eligendi vulputate te mei. Appareat erroribus<br />

assentior ne est.

</div>

<div id="corner_bottom"></div>

<div id="corner_top"></div>

<div id="bola8"><img src="images/bola8.png" alt="bola8" width="169"

height="150" /></div>

</div>

</body>

</html>

Pero pngFix no logra corregir el bug de IE6 para imágenes que son background, así que hay que colocarla como img dentro del div correspondiente, indicando explícitamente sus dimensiones.

ConclusiónUsar un elemento posicionado absolutamente dentro de otro posicionado ya sea relativamente o absolutamente es el patrón base de la técnica que describo. El uso de una imagen guía de fondo y la aplicación de transparencia a los elementos que queremos calzar es de mucha ayuda posicionarlos con precisión. Ojalá le sirva de ayuda en este tipo de tareas. Se agradecen comentarios y sugerencias.

AutorAntonio Kobashikawa Carrascoakobashikawa@gmail.com