Saltar al contenido

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.

4 comentarios

  1. Y tanto! ggg… seguro que nos llaman talibanes de los Estándares o algo relacionado xDD

    http://www.blog.culturadigital.org/desarrollo-web/z-index-para-internet-explorer
    …precisamente, el contenido mismo de esa entrada no es muy semántico que digamos, pero a veces hacemos cosas algo rápido.

    Queda tanto marcado basura en la web… pfff, y lo peor es que sigue maquetando y distribuyendo así en o desde sitios importantes, desde software WYSIWYG… y tú te sientes tan bien al saber que desde hace tiempo haces las cosas “como se deben hacer” ^^

    Un saludo.

  2. Debemos ser pacientes con la gente, sé que cuesta pero si no lo hacemos sí que nos tacharán de Talibanes :-). Pero debo reconocerte que hay días que me dan ganas de sacarme un ojo antes de seguir viendo el código de páginas de ciertas empresas relativamente importantes o determinadas instituciones públicas.

    Algún día lo conseguiremos, hasta entonces no pierdas el ánimo que no estás solo en tu lucha 🙂

  3. Silvana Silvana

    esto si k es una basofiaaa

  4. Hola Silvana,

    gracias por tu aporte pero, lo cierto es que, no le entiendo muy bien.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Jorge Hoya.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a OVH que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies, puedes lees sobre ellas en la política de cookies    Ver política de cookies
Privacidad