La elegancia del lenguaje

En cientos de documentos web se habla sobre la creación de código correcto y las posibles razones para hacerlo. En ellos se intenta dar razones sociales, véase como ejemplo los beneficiones para la accesibilidad, o razones comerciales, como el efecto positivo para la indexación por los motores de búsqueda. Pero hoy, viendo el código de un sencillo documento web, me ha surgido otra posible razón: el ego del programador

Muchas veces, debido a causas ajenas (como pueda ser el apretado tiempo de desarrollo, a los contínuos cambios que se suelen producir una vez comenzado el proceso de desarrollo, etc) o a las propias del programador (vagancia, poco interés, etc) los proyectos que inicialmente cumplían ciertas espectativas acaban siendo 'una merienda de negros' (que nadie malinterprete esta frase hecha).

Una medida para intentar que esto no suceda es hacer ver al programador/maquetador que el código HTML generado habla sobre su personalidad. Cualquiera que haya programado sabe lo que siente al ver el código escrito por otra persona, el experimentar esa sensación de profesor corrigiendo exámenes al revisarlo. Ninguno podemos negar el haber calificado a otro programador o maquetador al ver la calidad de su código (esta es una realidad que he visto en todos los trabajos por los que ido pasando).

Así que desde aquí apelo a ese ser vanidoso que todo programador esconde para que intentemos hacer las cosas mejor, porque se tarda lo mismo en hacerlo mal que en hacerlo bien. Veámoslo con el código que ha motivado este artículo.

El documento en cuestión es un sencillo buscador al que se quiere añadir un pie con más opciones de búsqueda. Este es el código original, usado en el documento, para generar el pie:

<table border="0" width="100%" id="table2" bgcolor="#E3AE64">
  <tr>
	<td colspan="3"><b><font face="Verdana" size="2">Otras búsquedas</font></b></td>
  </tr>
  <tr>
  <td valign="top" width="33%">
	<b><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
	<a class="p" target="_top" xhref="http://www.sitioweb.com/compras/"
mce_href="http://www.sitioweb.com/compras/">
	<span style="background-color: #E3AE64">Compras:<br>
	Coches, Motos, Perros, </span></a></font></b><br>
  </td>
  <td valign="top" width="33%">
	<font face="Verdana, Arial, Helvetica, sans-serif" size="1">
	<b><a class="D" target="_top" 
xhref="http://www.sitioweb.com/directorio" mce_href="http://www.sitioweb.com/directorio">
	<span style="background-color: #E3AE64">
	Buscador de personas:Teléfonos y Direcciones</span>
	</a>
       </b></font><br>
  </td>

  <td valign="top" width="33%">
	<b>	<font face="Verdana, Arial, Helvetica, sans-serif" size="1">
	<a class="D" target="_top" 
xhref="http://www.sitioweb.com" mce_href="http://www.sitioweb.com">
	<span style="background-color: #E3AE64">Catálogo de Libros</span></a></font></b>
  </td>
</tr>
</table>

Este código, en mi modesta opinión, duele con solo mirarlo. A simple vista se aprecia

• código HTML obsoleto, lo que pudiera indicar esa misma cualidad en el creador
• falta de eficiencia; imaginad el coste de tiempo y esfuerzo en el caso de tener esa misma tabla con 5 veces más opciones (15 filas) y que se desea cambiar el tipo de fuente en todas ellas.
• falta de respeto por la estructuración lógica del documento y poco control sobre las diferentes entidades HTML y sus funciones

Alternativas a este código hay tantas como programadores, todas ellas dependiendo contexto donde se enmarque este fragmento de código, de los conocimientos de HTML y CSS. Esta es una de las mias en la que, básicamente, me ocupo del apartado estético:

<style type='text/css'>
#table2{width:100%;background-color:#E3AE64;border:0;}
#table2 td{font-family:Arial,Helvetica,sans-serif;font-size:0.7em;
        font-weight:bold;vertical-align:top; width:33%;}
.tdTit{font-family:Verdana, sans-serif;size:1em;}
.fondo{background-color: #E3AE64}
</style>
<table id="table2">
  <th>
    <td class='tdTit' colspan="3">Otras búsquedas</td>
  </th>
  <tr>
    <td>
 	  <a class="p" target="_top" xhref="http://www.sitioweb.com/compras/">
	  <span class='fondo'>Compras:<br>Coches, Motos, Perros, </span></a>
    </td>
    <td>
      <a class="D" target="_top" xhref="http://www.sitioweb.com/directorio">
      <span class='fondo'>Buscador de personas:Teléfonos y Direcciones</span></a>
    </td>
    <td>
      <a class="D" target="_top" xhref="http://www.sitioweb.com">
      <span class='fondo'>Catálogo de Libros</span></a>
    </td>
  </tr>
</table>

Si a parte de retocar el apartado estético, metemos mano a la estructura lógica del documento, podríamos hacer:

<style type='text/css'>
#table2{width:100%;background-color:#E3AE64;border:0;}
#table2 li{font-family:Arial,Helvetica,sans-serif;
font-size:0.7em;font-weight:bold;vertical-align:top;width:33%;}
#table2 li a{background-color: #E3AE64}
.tdTit{font-family:Verdana, sans-serif;size:1em;}
</style>
<p class='tdTit'>Otras búsquedas</p>
<ul id="table2">
  <li>
    <a class="p" target="_top" 
xhref="http://www.sitioweb.com/compras/">Compras: Coches, Motos, Perros</a>
  </li>
  <li>
    <a class="D" target="_top"
xhref="http://www.sitioweb.com/directorio">
	Buscador de personas: Teléfonos y Direcciones
	</a> 
  </li>

  <li>
    <a class="D" target="_top" 
xhref="http://www.sitioweb.com">Catálogo de Libros</a>
  </li>
</ul>

Como véis, hay tantas posibilidades como maquetadores, sólo he querido mostrar que el hacer bien las cosas o hacerlas mal lleva el mismo tiempo.