Una forma de maquetear

Durante 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 problema
Hay 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áficos
Primero, 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ón
La 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 bajo
A 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 IE6
IE6 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ón
Usar 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.

Autor
Antonio Kobashikawa Carrasco
akobashikawa@gmail.com