MIGRACIÓN SIN DOLOR - PARTE II
Un ejemplo práctico
Índice de contenidos [tecla acceso: 0]
- 1.- INTRODUCCIÓN [tecla acceso: 1]
- 2.- PASO A PASO [tecla acceso: 2]
- 3.- RESULTADO FINAL [tecla acceso: 3]
1.- INTRODUCCIÓN
Hola de nuevo. En esta segunda parte de la pequeña "Guía de Migración sin Dolor", vamos a pasar directamente a poner en práctica los conceptos que vimos en la primera parte, con un ejemplo real de transformación de un diseño con tablas y algo de CSS incrustado en el propio documento, a un diseño con XHTML y CSS, un documento válido, bien formado y con una hoja de estilo externa enlazada.
Esto no va a ser un manual de buenas prácticas de diseño moderno, ya que para eso tendríamos que tener en cuenta un montón de factores antes de empezar, que quizá veamos en la parte III de esta guía; va a ser únicamente un ejemplo de cómo transformar un diseño real con tablas en otro más eficiente sin ellas.
Como siempre, el asunto parte de la consulta de un usuario en forosdelweb, que quería saber cómo eliminar unos molestos espacios de separación entre las celdas de las tablas de su página. Al comprobar que el diseño estaba completamente hecho con tablas, y que en realidad ese mismo diseño se podía conseguir de forma mucho más sencilla con XHTML y CSS, se le sugirió que por qué no dar el paso y transformar ese código. El usuario se declaró completamente novato con CSS, por lo que sería complicado llevarlo a cabo.
Tras algunas sugerencias que el usuario intentó aplicar sin éxito, y varias intentonas por parte de otros usuarios, finalmente se dió por satisfecho con una supuesta solución a su problema inicial (que no lo era en realidad). Cuando yo me encontré ese hilo, vi que el problema era tan sencillo de resolver que decidí, y para no admitir excusas ( :-) ), escribir y publicar en el hilo el código exacto que necesitaba para la transformación citada, de manera que el usuario sólo tendría que copiar y pegar, y comprometerse a estudiarlo para comprenderlo y ser capaz de llevarlo adelante en sus siguientes páginas.
Finalmente, pedí permiso al usuario para utilizar su código inicial y las imágenes como ejemplo en este documento, y hace poco me contestó autorizándome a utilizarlo, con la salvedad de que aunque el diseño era efectivamente suyo, la web en sí no lo es, ya que la estaba desarrollando para un desplacho, así que si de repente véis desaparecer la guía por un tiempo, será que me conminaron a no utilizarlo de ejemplo y estaré escribiendo lo mismo con otro caso (espero que no ocurra, je, je, pero el propietario en cuestión es abogado, como veréis).
Bueno, y sin más preámbulos vamos a pasar a presentar los elementos y desarrollar el ejemplo.
Volver al índice1.1.- El original
Para que os hagáis una idea de qué estamos hablando, esta es una captura de la página original hecha con tablas:
[D]Enlace a la página real
(Este enlace es externo y lleva a otra página)
Ahí podemos ver la estructura de qué es lo que se pretende bien definida. Es una página de ancho fijo, que tendrá una cabecera, un menú central, el texto de presentación, un submenú apoyado por otra imagen en la línea de la temática de la página, y finalmente un pie con los datos de contacto.
El código que se había utilizado para esto era el siguiente:
<!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=iso-8859-1" />
<title>Abogado-Malaga</title>
<style type="text/css">
<!--
body {
background-color: #002142;
margin-left: 0px;
margin-top: 0px;
}
.Estilo87 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
}
.Estilo34 {
font-family: "Times New Roman", Times, serif;
color: #FFFFFF;
}
.Estilo35 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
}
.Estilo89 {font-size: 12px}
.Estilo5 {color: #FFFFFF; font-family: "Century Gothic"; font-weight: bold; }
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.Estilo108 {color: #000033; font-family: "Century Gothic"; font-weight: bold; font-size: 13px; }
.Estilo111 {color: #009933; font-family: "Century Gothic"; font-weight: bold; font-size: 13px; }
.Estilo113 {color: #000033}
.Estilo115 {color: #003366; font-family: "Century Gothic"; font-weight: bold; font-size: 13px; }
.Estilo117 {color: #000066; font-family: "Century Gothic"; font-weight: bold; font-size: 13px; }
.Estilo118 {color: #000066}
-->
</style></head>
<body>
<br />
<table width="846" border="0" align="center">
<tr>
<td colspan="4"><img src="imagenes/cabecera.jpg" width="840" height="107" /></td>
</tr>
<tr>
<td colspan="4"><img src="imagenes/panoramica.jpg" width="840" height="110" /></td>
</tr>
<tr>
<td width="186" height="34" align="center" valign="middle" bgcolor="#333333"><span class="Estilo5"><a href="inicio.html">INICIO</a></span></td>
<td width="208" align="center" valign="middle" bgcolor="#333333"><span class="Estilo5"><a href="areas.html">AREAS DE ACTUACIÓN</a></span></td>
<td width="205" align="center" valign="middle" bgcolor="#333333"><span class="Estilo5"><a href="situacion.html">SITUACIÓN</a></span></td>
<td width="229" align="center" valign="middle" bgcolor="#333333"><span class="Estilo5"><a href="contacto.html">CONTACTO</a></span></td>
</tr>
</table>
<table width="846" border="0" align="center">
<tr>
<td width="45%" height="288" align="center" bgcolor="#F0F0F0"><table width="95%" border="0">
<tr>
<td width="58%" align="left" valign="middle"><img src="imagenes/ubicacion.jpg" width="188" height="250" /></td>
<td width="42%" align="left" valign="top"><span class="Estilo87">Los servicios de asesoramiento que presta el despacho, ubicado en Málaga capital, abarca la totalidad de España, contando, si fuera preciso, con la colaboración de los mejores profesionales para el supuesto de que así lo requiriese la situación o el propio cliente y siempre bajo los criterios de competencia, iimplicación, responsabilidad y transparencia.</span></td>
</tr>
</table></td>
<td width="55%" align="left" valign="middle" bgcolor="#F0F0F0"><table width="94%" border="0" align="center">
<tr>
<td width="52%"><span class="Estilo111"><a href="civil.html"><span class="Estilo113"><span class="Estilo118">-Derecho civil </span></span></a></span></td>
<td width="48%"><div align="right" class="Estilo108"><a href="familia.html"><span class="Estilo118">-Derecho de familia</span></a> </div></td>
</tr>
<tr>
<td><span class="Estilo115"><a href="mercantil.html"><span class="Estilo113"><span class="Estilo118"> -Derecho mercantil </span></span></a></span></td>
<td><div align="right" class="Estilo108"><a href="laboral.html"><span class="Estilo118">-Derecho labora</span><span class="Estilo113">l</span> </a></div></td>
</tr>
<tr>
<td><span class="Estilo117"><a href="administrativo.html"> <span class="Estilo118">-Derecho administrativo </span></a></span></td>
<td align="left"><div align="right" class="Estilo108"><a href="accidentes.html"><span class="Estilo118">-Accidentes</span></a></div></td>
</tr>
<tr>
<td><span class="Estilo108"><a href="penal.html"><span class="Estilo118">-Derecho Penal</span></a></span></td>
<td> </td>
</tr>
<tr>
<td colspan="2"><img src="imagenes/libros.jpg" width="426" height="160" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="846" height="106" border="0" align="center" bordercolor="#191919" bgcolor="#191919">
<tr>
<td width="390" height="102" bgcolor="#191919"> </td>
<td width="324" bgcolor="#191919"><div align="right"><span class="Estilo34"><span class="Estilo89">Teléfono: *********<br />
Fax: *******<br />
Dirección: ***********************</span><br />
<span class="Estilo35"><u><a href="formulario.html">CONSULTA PREVIA CITA</a> </u></span></span></div></td>
<td width="119" align="center" bgcolor="#191919"><img src="imagenes/telefono.jpg" width="96" height="95" /></td>
</tr>
</table>
</body>
</html>
En ese código ya podemos encontrar algunos problemas serios:
- no existe un título en el contenido de la página, siendo el encabezamiento una imagen, por lo que no cumplirá su función y desaparecerá en caso de que éstas estén desativadas
- la semántica brilla por su ausencia, ordenando los elementos en base a la popular cuadrícula y sin ningún tipo de orden lógico
- las etiquetas HTML están llenas de estilos, algo completamente desaconsejado en un diseño actual que intente respetar los estándares
- ...y unas cuantas cosas más
En definitiva, y sin querer aludir en ningún momento al creador, ya que como hemos dicho se declaraba un novato absoluto con XHTML y CSS, el código arrastra muchos problemas que restan eficacia, velocidad, limpieza y orden a la página, lo que le perjudica seriamente tanto a la hora de ser interpretada por personas como por robots y artilugios automáticos de los buscadores.
De manera que vamos a empezar la transformación (antes de empezar, sería un excelente ejercicio intentar imaginar cómo se haría esto sin usar tablas, sin haber visto el resultado final ni las explicaciones).
Volver al índice2.- PASO A PASO
Como ya comentábamos, vamos a ir paso a paso transformando el código, creando la estructira inicial, viendo los elementos que necesitaremos, etcétera. En cada paso intentaré explicar lo que uso y por qué.
2.1.- La cabecera
Ya dijimos en la primera parte que una de las cosas primordiales es estructurar correctamente el documento, comenzando siempre por colocar un doctype y una cabecera correctas y que se ciñan a los estándares.
Empezaremos pues por una cabecera parecida a esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Abogado-Malaga, Despacho de Abogados</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="abogado, malaga, despacho, colegio, recursos, penal, social" />
<meta name="Description" content="Despacho profesional en Málaga del abogado ****" />
<meta name="Author" content="****" />
<meta name="Subject" content="Despacho de Abogados" />
<meta name="Language" content="es" />
<meta name="Robots" content="index, follow" />
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
en la que destacamos un inicio con un "doctype estricto" (strict), la declaración del tipo y el idioma del documento, el juego de caracteres (iso-8859-1 en este caso), un título adecuado para la página, algunas etiquetas "meta" esenciales y el enlace a la hoja de estilo externa.
No me explayaré mucho en este asunto, ya que al estar hablando de migración doy por supuesto que el diseñador que utiliza tablas hasta ahora no tiene por que no conocer todo lo referente a la cabecera (que además habíamos tratado ya, aunque sin excesivo detalle, en la primera parte de la guía), o en su caso, ser capaz de encontrar las ingentes cantidades de literatura al respecto existentes en la red, y también porque esta segunda parte no está orientada hacia eso.
Sólo resaltaré un detalle porque me parece importante: como podremos observar en el código original, al estar escrito con un programa editor de HTML, todos los caracteres que podrían resultar "conflictivos" (tildes, eñes, interrogaciones, etc.), son reemplazados por sus respectivas "entidades HTML" (á para la á, ñ para la eñe, etcétera). Esto no es en absoluto necesario si hemos declarado un juego de caracteres como ISO-8859-1 en la cabecera, que incluye todos los caracteres del idioma español y muchos más, y guardamos nuestro archivo con la codificación en formato ANSI, ya que gracias a estos dos detalles, todos los caracteres que escribamos en castellano serán perfectamente interpretados en cualquier navegador.
Volver al índice2.2.- La estructura
Bien, como ya aconsejábamos en la primera parte de la guía, vamos a comenzar por poner un contenedor principal, dentro del cual pondremos todo lo demás, y que nos servirá para reemplazar la tabla principal y para indicar un ancho determinado para toda la web, y que ésta esté centrada siempre, independientemente de la resolución de pantalla:
<body>
<div id="contenedor">
...
</div>
</body>
Le ponemos un identificador (id) para poder referirnos a él cómodamente desde la CSS.
A continuación, y como parte de la estructura básica, empezaremos por añadir estos selectores a nuestra hoja de estilo (que como hemos visto guardaremos con formato de texto plano (txt) y llamaremos "estilos.css"):
* {margin:0; padding: 0;}
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color:#002142;
}
#contenedor {width: 840px;
margin: 20px auto;
}
Con el primer selector (* {...}), estamos utilizando el selector universal del asterisco para referirnos a "todos" los elementos de nuestro código, y lo que estamos haciendo es decirle que ponga a todos ellos un margen y un relleno de cero, con lo que estamos eliminando el margin y padding que pudieran tener algunos elementos por defecto (muchos lo tienen). Es una buena manera de comenzar una hoja de estilo. Esta práctica se suele conocer como "resetear" (no me parece un término demasiado adecuado, pero es el que hay), para lo que se suelen usar muchas más cosas, terminando a veces con hojas de estilo de tamaño considerable sólo para hacer esta función de "resetear" o poner a cero los estilos por dedecto, que por otro lado puede evitarnos muchos dolores de cabeza.
Los otros dos selectores parecen algo más evidentes: asignamos al elemento "body" una familia de tipo de letra principal y tres secundarias (genéricas), para que en el caso de que alguna de ellas no esté presente en el sistema del visitante se utilice la siguiente; le damos un tamaño al texto (recordad que lo que intentamos es imitar al máximo el diseño que ya teníamos, no mejorarlo o hacer una declaración de mejores prácticas, en cuyo caso yo hubiera elegido "em" para el tamaño de letra), y un simple color de fondo.
El selector del contenedor, que como vemos hemos llamado por su identificador (anteponiendo al nombre la almohadilla que identifica que se trata de un ID), solamente le hemos indicado el ancho fijo en pixels, imitando al que ya había en el original, y hemos utilizado el margen lateral automático para centrarlo en la pantalla en horizontal, dando a su vez un margen de 20px superior e inferior para dejar el hueco que había. Recuerda que propiedades como el margen se pueden agrupar en una sola declaración, funcionando como: arriba, derecha, abajo e izquierda (en la dirección de las agujas del reloj), y que a su vez se pueden agrupar por parejas, pudiendo usar el primer valor para indicar "arriba y abajo", y el segundo para "izquierda y derecha", como en el caso que nos ocupa (margin: 20px auto; significa 20px arriba y abajo, y automático a derecha e izquierda).
La definición de la estructura se completaría con el resto de bloques que vamos a colocar para conseguir el mismo aspecto visual que con las tablas. Pero casi creo que es mejor seguir paso a paso por cada nuevo bloque, ya que es como yo lo construyo, en lugar de pensar en el conjunto completo ahora. Si fuera algo con mayor complicación seguramente sería mejor pensar primero la estructura general y demás, pero siendo lo que es, e intentando únicamente imitar lo que ya teníamos, considero que no es necesario, pudiendo ir viendo tranquilamente cómo crear y colocar cada nuevo bloque.
Volver al índice2.3.- El contenido
Para empezar ya a ver el contenido vamos a comenzar por colocar los siguientes elementos:
2.3.1.- La cabecera o "Header"
Empezamos por el clásico "header", al que como no soy anglófono llamaré simplemente "cabecera" (lo he remarcado para que no se confunda con la cabecera del archivo HTML en sí, que ya hemos descrito antes).
Esta cabecera será el bloque que contendrá tanto el titular como el subtítulo y la imagen inicial que ocupa todo el ancho (que también identificaremos con un ID, ya que será único en toda la página). Para el titular y el subtítulo usaremos como es lógico los elementos h1 y h2, cuya función es exactamente esa, proporcionar el título o motivo principal de la página y el subtítulo o motivo secundario. Es el orden más lógico y semántico que encontraremos, de la misma manera que cuando leemos un libro.
<div id="cabecera">
<h1>www.abogado-malaga.es</h1>
<h2>DESPACHO DE ABOGADOS</h2>
</div>
A diferencia del código original, este título no será una imagen, ya que en caso de que las imágenes estuvieran desactivadas o simplemente fallaran, desaparecería por completo el motivo o título principal del documento, algo que me parece muy mala práctica. Encontraremos que efectivamente la tipografía no va ser del todo exacta, ya que usar una imagen nos permitirá usar la que más nos guste y el visitante la verá bien, mientras que siendo texto estamos sujetos a las fuentes instaladas en su sistema. Pero a este respecto habremos de preguntarnos: ¿qué es más importante? Personalmente lo tengo claro, pero cada uno quizá tenga su propia opinión. Para mi no se pierde nada de la tipografía usada en el código original a la que yo mostraré al final del documento aunque sea un poquitín diferente (y esto sí que es opinable), y sin embargo se gana orden y semántica en el documento.
Otro asunto importante: ¿cómo pondremos la imagen de la cabecera? Podríamos hacerlo como fondo del div "cabecera", o de alguno de los elementos header, o insertada directamente, etc. Bien, en este caso la vamos a poner directamente en el código y no como fondo. ¿Por qué? porque si por alguna razón la imagen no se viera (error del enlace, hoja de estilo desactivada, etc.), tampoco veríamos el texto de sustitución de la imagen (al estar como "background" en la CSS), lo que nos impediría saber qué había ahí, y si ha sido colocada en esa posición, es de suponer que será una imagen relevante para la web. Quizá pueda haber otras imágenes más decorativas y menos relevantes a lo largo de la página, pero es de suponer que la imagen que aparece en la cabecera pretenderá hablar de la empresa, el propietario o el objetivo de la web, por lo que suele ser suficientemente relevante como para que procuremos, por un lado, usar el texto alternativo en caso de que no se pueda ver por alguna razón, y por otro, ofrecer una descripción detallada para personas con alguna discapacidad.
De esa manera, la cabecera nos quedará como sigue:
<div id="cabecera">
<h1>www.abogado-malaga.es</h1>
<h2>DESPACHO DE ABOGADOS</h2>
<img src="imagenes/panoramica.jpg" alt="Imagen corporativa del despacho" />
</div>
Es importante usar siempre el atributo "alt" en todas nuestras imágenes, y como mínimo procurar que sea algo descriptivo como muestra el ejemplo, no el clásico "foto_roja", que no diría absolutamente nada en caso de que no se viera la imagen.
Como lo que estamos intentando es imitar el aspecto original, añadiremos estos selectores a la CSS:
#cabecera {width: 840px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #5a011f;
margin-bottom: 4px;
}
donde damos a la cabecera (#cabecera), el mismo ancho que a la página, le damos el color de fondo original y alineamos el texto al centro, y redefinimos los elementos h1 y h2, buscando el tamaño, color y tipografía que mejor encajen con los originales. Un poco de "padding" superior y "margin" inferior respectivamente para darles también la separación de elementos más parecida posible al original.
De momento esto es lo que tenemos:
[D]Volver al índice
2.3.2.- El menú
Para hacer el menú, en primer lugar creamos una caja para acomodar en ella el resto de cosas (con el ID menú, que también será único), colocaremos los elementos dentro de una lista (en este caso desordenada, "ul"), y dentro de cada elemento de la lista el enlace correspondiente:
<div id="menu">
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="areas.html">AREAS DE ACTUACIÓN</a></li>
<li><a href="situacion.html">SITUACIÓN</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
Esta es en general la manera más correcta y ordenada de crear un menú, al fin y al cabo una lista desordenada de elementos (que no necesitan ser ordenados por ningún criterio en especial).
El asunto estará ahora en cómo les daremos el formato que nos interesa mediante CSS, para lo que usaremos estos selectores:
#menu {background-color: #333;
height: 34px;
}
#menu ul {text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #FFF;
line-height: 34px;
font-family: "Century Gothic";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #e9eada;
color: #333;
border: solid 1px #333;
line-height: 32px;
}
Como vemos, vamos declarando por orden de fuera a adentro los elementos usados para el menú, de manera que sean selectores inequívocos y no vayan a afectar a otras partes que no nos interese: #menu, #menu ul, #menu ul li, etc.
Vamos por partes: al menú sólo le hemos dado un color de fondo y una altura fija de 34px, para que ocupe lo que ocupaba el orginal de alto. Al elemento "ul" del menú le hemos puesto un "text-align: center" para que los enlaces estén centrados dentro de su espacio asignado. Los elementos "li" (cada elemento de la lista), los hemos flotado a la izquierda con "float: left", de manera que permitan que haya otros elementos a su lado, y con lo que conseguimos que este listado de enlaces aparezcan todos en una misma línea en horizontal. Finalmente les hemos dado un ancho de un 25% a cada uno, porque como son cuatro, el espacio que cada uno ocupe será perfectamente proporcional.
Y generalmente damos todos los estilos a la caja del menú, la lista, los elementos de la lista, etcétera, pero nos solemos olvidar de que el elemento más importante es el enlace (a), entre otras cosas porque si luego queremos poder aplicarle variaciones al pasar el ratón, ser visitado, etc., las propiedades a modificar las deberá llevar el enlace, o será lo más cómodo.
En este caso le hemos dado al enlace el estilo de letra que había en el diseño original, hemos añadido un "display: block", que como recordaremos sirve para que un elemento de línea se comporte como uno de bloque y por tanto acepte las propiedades como "width" o "height" para fijar su tamaño; le hemos dado el mismo alto de línea que la caja del menú (line-height: 34px) con el fin de que el enlace ocupe todo el alto de la caja pero además el texto quede centrado verticalmente, y poco más; color blanco, que no aparezca el subrayado (que por defecto en los enlaces sí aparece), y que aparezca en negrita (font-weight: bold)
Gracias a esas propiedades que hemos dado a los enlaces, nos hemos permitido el lujo de añadir un pequeño efecto que no existía al pasar el ratón sobre cada uno de ellos con el selector "#menu a:hover": cambiar el color del cuerpo y fondo (background-color: #e9eada; color: #333;) y añadir un borde del color del texto (border: solid 1px #333;), lo que también nos ha obligado a reducir 2px la altura para conseguir que no se muevan (line-height: 32px).
Lo que tenemos hasta ahora es:
[D]Volver al índice
2.3.3.- El cuerpo
El cuerpo principal va a estar formado por dos bloques uno al lado del otro: un bloque a la izquierda con la presentación de la compañía, y otro a la derecha con un menú secundario de los servicios específicos que se prestan.
Por lo tanto, vamos a colocar una caja con un "id" llamado "cuerpo", que acogerá ambos bloques. Dentro de ella pondremos los bloques de "presentación" y otro que llamaremos "secciones".
<div id="cuerpo">
<div id="presentacion"></div>
<div id="secciones"></div>
</div>
Vamos a ver cada bloque. El de la izquierda, el de presentación, en primer lugar deberá ser flotado a la izquierda (float: left), de manera que ocupe el ancho que le indiquemos y nos permita poner otro bloque a su derecha. Le daremos pues ese ancho fijo y le pondremos también un borde en el lado derecho para imitar esa separación que existe entre las dos cajas del contenido central:
#presentacion {width: 380px;
float: left;
border-right: solid 2px #002142;
}
Como vimos en el original, ese bloque lleva una imagen que incrustaremos con la etiqueta "img" para que sea reemplazada por su texto alternativo en caso de que no se vea la imagen, y a la que también tendremos que aplicar un "float:left", pero esta vez para que permita que el texto se coloque a su derecha ocupando todo su alto:
#presentacion img {float: left;
padding: 20px 20px 20px 14px;
}
El "padding" nos permitirá controlar el espacio entre la imagen y el texto. Para conseguir este efecto deberemos colocar la imagen antes del texto en el HTML de esta manera:
<div id="presentacion">
<img src="img/ubicacion.jpg" alt="Edificio donde se encuentra el despacho" />
<p>Los servicios de asesoramiento...</p>
</div>
El resultado será este:
[D]Para el bloque derecho, que hemos llamado "secciones", utilizaremos dos listas desordenadas diferentes (ul), ya que como vimos en el original, el autor ha dividido ese submenú en dos columnas, y esta será la mejor manera de hacerlo:
<div id="secciones">
<ul>
<li>- <a href="civil.html">Derecho Civil</a></li>
<li>- <a href="mercantil.html">Derecho Mercantil</a></li>
<li>- <a href="administrativo.html">Derecho Administrativo</a></li>
<li>- <a href="penal.html">Derecho Penal</a></li>
</ul>
<ul>
<li>- <a href="familia.html">Derecho de Familia</a></li>
<li>- <a href="laboral.html">Derecho Laboral</a></li>
<li>- <a href="accidentes.html">Accidentes</a></li>
</ul>
<img src="img/libros.jpg" alt="Imagen de una librería de derecho" />
</div>
<div class="corte"></div>
Aquí podemos ver varias cosas: como decíamos, hemos usado dos listas diferentes para poder colocarlas en dos columnas, para lo que hemos flotado a la izquierda cada una de ellas; hemos puesto el guión de cada elemento fuera de los enlaces para que no se vean afectados por el formato de los mismos, concretamente por la leve transformación que haremos al pasar el ratón sobre cada uno: serán subrayados. Finalmente los listado están apoyados por otra imagen representativa de la compañia. Y todo esto lo hacemos con este código CSS:
#secciones ul {float: left;
margin: 16px 0 0 54px;
}
#secciones ul li a {color: #006;
font-family: "Century Gothic";
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
#secciones ul li a:hover {text-decoration: underline;
}
#secciones img {padding: 22px 16px 16px;
width: 426px;
height: 160px;
float: left;
}
.corte {clear: both;}
El resultado hasta ahora:
[D]Supongo que os habrán llamado la atención en el código tanto el "div" con la clase "corte" (<div class="corte"></div>), como el selector del mismo nombre en la CSS (.corte {clear: both;}). Esto es algo fundamental y fruto de muchas confusiones. La cosa es la siguiente: aunque a la caja "cuerpo" le hemos puesto un color de fondo, éste no se verá porque cuando una caja tiene dentro otras cajas que están flotadas, éstas no ocupan espacio físico real y no hacen crecer a su caja contenedora. En este caso lo que se suele hacer es añadir una caja vacía cuyo único objetivo es no estar flotada e impedir que otros elementos se coloquen a sus lados, ocupando toda la línea horizontal, lo que consigue producir lo que llamamos un "corte" en el flujo del documento, obligando a la caja contenedora a crecer para acojerla a ella, que como está después de las flotadas (pero dentro de la contenedora), hará que crezca hasta el final de las flotadas como mínimo.
Volver al índice2.3.4.- El pie
Y ya sólo nos queda rematar la faena con el pie. De entrada lo ponemos fuera del bloque principal de contenido, pero dentro del contenedor general, de esa manera se confina a la anchura de éste sin que le pongamos nada (recordarás que si a un elemento de bloque no le indicas anchura y la modificas de ninguna manera, ocupará el 100% de ancho de su contenedor padre).
Así que simpemente colocamos un "div" con el indentificador del pie, al que daremos mediante CSS una altura exacta (como en el original), un color de fondo, tamaño y color de letra:
#pie {background-color: #191919;
height: 106px;
color: #fff;
font-size: 10px;
}
Ahora veamos los elementos dentro del pie. En primer lugar tenemos una imagen (el teléfono), que para imitar cómo estaba en el original, pondremos flotada a la derecha, de manera que se pegará al margen derecho del pie y nos permitirá poner texto a su izquierda. Le daremos un "padding" para indicar a qué distancia se colocará el texto.
Ahora tenemos cuatro cajas de texto con los datos de contacto, cada una de ellas en una línea independiente. Bien, aunque no es imprescindible hacerlo así, lo que vamos a hacer es colocar una caja que nos permita posicionarla dónde y cómo nos interese, y dentro de ella pondremos los bloques de texto, que serán párrafos (elementos "p"). Esto puede hacerse de muchas maneras (como todo el resto), pero en este caso esta me parece la más cómoda.
A esa caja la llamaremos "datos", la flotaremos a la derecha para que se pegue sin hacer nada más a la imagen del teléfono, le daremos un margen superior para ubicarla donde nos interesa y diremos que el texto que contenga aparezca alineado a la derecha, de esa manera cada bloque se ajustará a la imagen que teníamos en lugar de alinearse a la izquierda (seguimos en realidad imitando el aspecto visual del original).
#pie {background-color: #191919;
height: 106px;
color: #fff;
font-size: 10px;
}
#pie img {float: right;
padding: 10px;
}
#pie div.datos {float: right;
margin-top: 14px;
text-align: right;
}
Colocaremos cada línea de datos dentro de un párrafo para que aparezca en líneas independientes sin tener que provocar el salto de línea con un <br /> (debido a que "p" es un elemento de bloque y contiene un salto de línea en sí mismo como todos los de su especie). Por último, aparece un enlace que daría acceso a una página con un formulario para solicitar una cita. Simplemente pondremos ese texto dentro de un enlace y le daremos el formato que aparece en el original con este selector:
#pie a {font-weight: bold;
font-size: 18px;
color: #fff;
line-height: 30px;
}
Volver al índice
3.- RESULTADO FINAL
Y eso es todo, ya tenemos la página completamente transformada de un diseño con tablas y estilos dentro del contenido a un diseño en XHTML con CSS y la presentación completamente independiente del contenido. El resultado final es este:
[D]Enlace a la página real
(Este enlace es externo y lleva a otra página)
El código HTML resultante es este:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Abogado-Malaga, Despacho de Abogados</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="abogado, malaga, despacho, colegio, recursos, penal, social" />
<meta name="Description" content="Despacho profesional en Málaga del abogado ****" />
<meta name="Author" content="****" />
<meta name="Subject" content="Despacho de Abogados" />
<meta name="Language" content="es" />
<meta name="Robots" content="index, follow" />
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1>www.abogado-malaga.es</h1>
<h2>DESPACHO DE ABOGADOS</h2>
<img src="imagenes/panoramica.jpg" alt="imagen corporativa del despacho" />
</div>
<div id="menu">
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="areas.html">AREAS DE ACTUACIÓN</a></li>
<li><a href="situacion.html">SITUACIÓN</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
<div id="cuerpo">
<div id="presentacion">
<img src="imagenes/ubicacion.jpg" alt="Edificio donde se encuentra el despacho" />
<p>Los servicios de asesoramiento que presta el despacho, ubicado en Málaga capital, abarca la totalidad de España, contando, si fuera preciso, con la colaboración de los mejores profesionales para el supuesto de que así lo requiriese la situaci´´on o el propio cliente y siempre bajo los criterios de competencia, implicación, responsabilidad y transparencia.</p>
</div>
<div id="secciones">
<ul>
<li>- <a href="civil.html">Derecho Civil</a></li>
<li>- <a href="mercantil.html">Derecho Mercantil</a></li>
<li>- <a href="administrativo.html">Derecho Administrativo</a></li>
<li>- <a href="penal.html">Derecho Penal</a></li>
</ul>
<ul>
<li>- <a href="familia.html">Derecho de Familia</a></li>
<li>- <a href="laboral.html">Derecho Laboral</a></li>
<li>- <a href="accidentes.html">Accidentes</a></li>
</ul>
<img src="imagenes/libros.jpg" alt="Imagen de una librería de derecho" />
</div>
<div class="corte"></div>
</div>
<div id="pie">
<img src="imagenes/telefono.jpg" alt="Imagen de un teléfono-fax" />
<div class="datos">
<p>Teléfono: *********</p>
<p>Fax: *******</p>
<p>Dirección: ***********************</p>
<a href="#">CONSULTA PREVIA CITA</a>
</div>
</div>
</div>
</body>
</html>
Y el código CSS utilizado es este:
* {margin:0; padding: 0;}
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
background-color:#002142;
}
#contenedor {width: 840px;
margin: 20px auto;
}
#cabecera {width: 840px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #5a011f;
margin-bottom: 4px;
}
ul {list-style-type: none;}
#cabecera img {margin-bottom: -3px;}
#menu {background-color: #333;
height: 34px;
}
#menu ul {text-align: center;}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #FFF;
line-height: 34px;
font-family: "Century Gothic";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #e9eada;
color: #333;
border: solid 1px #333;
line-height: 32px;
}
#cuerpo {background-color: #F0F0F0;}
#presentacion {width: 380px;
float: left;
border-right: solid 2px #002142;
}
#presentacion img {float: left;
padding: 20px 20px 20px 14px;
}
#presentacion p {font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
margin: 20px 10px 0 0;
}
#secciones img {padding: 22px 16px 16px;
width: 426px;
height: 160px;
float: left
}
.corte {clear: both;}
#secciones ul {float: left;
margin: 16px 0 0 54px;
}
#secciones ul li a {color: #006;
font-family: "Century Gothic";
font-weight: bold;
font-size: 13px;
text-decoration: none;
}
#secciones ul li a:hover {text-decoration: underline;}
#pie {background-color: #191919;
height: 106px;
color: #fff;
font-size: 10px;
}
#pie img {float: right;
padding: 10px;
}
#pie div.datos {float: right;
margin-top: 14px;
text-align: right;
}
#pie p {padding-top: 2px;}
#pie a {font-weight: bold;
font-size: 18px;
color: #fff;
line-height: 30px;
}
Esta forma de diseñar, como ya hablamos en la primera parte, tiene toda una serie de ventajas en cuanto a velocidad de carga, accesibilidad, respeto por los estándares, posicionamiento e indexado para buscadores, separación de contenido y formato, etcétera, que deberían ser suficientes como para que ni nos planteáramos maquetar a la antigua usanza. Además, como se ha visto, aprendiendo cuatro nociones de CSS es bastante sencillo, y con otras cuatro más, mucho más flexible y rico que con el antiguo sistema.
Lo dicho: esto no pretende ser un manual de buenas prácticas en el diseño y maquetación con XHTML y CSS, sino un simple ejemplo de cómo se podría conseguir transformar un antiguo diseño con tablas al formato actual.
Y bueno, nuevamente sólo me queda desearos suerte, animaros a que investiguéis todo lo que podáis sobre el diseño a través de CSS y sobre todo, que os divirtáis.
Espero que esta segunda parte también os haya podido servir de algo. Ahora a ver cómo planteamos la tercera. :-)
Mikel Morote Donazar
Volver al índice