Foros del Web - Ver Mensaje Individual - Codificación por capas: obteniendo un código limpio y de fácil mantenimiento.

JavierGuerrero · #1 (**permalink**) 25/04/2007, 07:23

Hola, amigos de Forosdelweb

Estoy iniciándome en el mundo del desarrollo de proyectos para Internet para lo cual sigo un proceso de desarrollo (un método) que me ayuda a realizar ordenadamente la elaboración de un proyecto determinado (aplicaciones web, para ser específico). Este proceso de desarrollo consta de las siguientes etapas:

Planificación
Diseño
Codificación
Implementación
Promoción
Administración y mantenimiento

Dependiendo de la complejidad de un proyecto, éste podría ser realizado por una persona o un equipo de desarrollo (donde podríamos encontrar: un arquitecto de información, un especialista en usabilidad, un diseñador web, un desarrollador web, un copywriter, etc). En mi caso, estoy tratando de conocer un poco de cada etapa del proceso de desarrollo con el objetivo de poder abarcar proyectos de mediana complejidad. No obstante, estoy concentrado en elaborar un perfil de desarrollador web, especialista en temas de programación y otras cosas, con la ilusión de formar un equipo de desarrollo y ofrecer nuestros servicios al mundo.

Por lo tanto, estoy poniendo énfasis en la etapa de codificación, la cual se podría subdividir en dos fases:

Convertir un boceto (realizado con alguna herramienta gráfica, como Adobe Photoshop) a código XHTML+CSS+JavaScript.
Adaptar el código anterior a un CMS (como Drupal o Joomla).

Este artículo se centra en la primera fase de la codificación establecida líneas arriba, aplicando el principio de separación por capas a la hora de escribir nuestro código.

LA CODIFICACIÓN POR CAPAS
Para iniciar con esto, tendríamos que definir cuáles son las capas, éstas son:

XHTML: Estructura
CSS: Apariencia
JavaScript: Comportamiento

Cada una de estas tecnologías pensadas para desempeñar una determinada función y separadas en distintos archivos: CSS en un archivo .css y JavaScript en un archivo .js, ambos enlazados a las distintas páginas XHTML.

Un detalle muy importante a tener en cuenta es que la capa estructural XHTML es básicamente requerida y las capas de presentación y comportamiento se construyen sobre ella (son opcionales).

Considerando el principio de separación, todo este código del lado del cliente debe escribirse considerando la:

Separación de presentación y estructura (CSS y XHTML)
Separación de comportamiento y estructura (JavaScript y XHTML)
Separación de comportamiento y presentación (JavaScript y CSS)

LAS VENTAJAS
Las ventajas de escribir código de esta manera se verá reflejado claramente en la obtención de un código limpio y de fácil mantenimiento.

EL EJEMPLO
Para completar la idea, voy a mostrar un ejemplito súper básico donde mostraré:

La "forma tradicional" de escribir código (que todavía muchos siguen practicando).
La manera de escribir código siguiendo el principio de separación por capas.

Forma convencional

index.html

Código:

<html>
  <head>
    <title>Desarrollo Web</title>
    <script language="JavaScript">
      <!--
      function wellcome(){
        alert('Bienvenido al mundo de desarrollo de proyectos para Internet');
      }
      //-->
    </script>
    
    <style>
      body{
        background-color:#ccc;
        color:#000;
        font-family:arial;
      }

      h1{
        font-style:italic;
        text-align:center;
      }

      h3{
        font-weight:bold;
        color:#548;
        text-align:center;
      }
    </style>

  </head>
  <body>
    <h1>"PREPARÁNDOME PARA SER UN DESARROLLADOR WEB"</h1>
    <h3>Javier Guerrero</h3>
    
    <form>
      <input type="button" value="Entrar" onclick="wellcome()" />
    </form>

  </body>
</html>

Separación por capas

index.html

Código:

<html>
  <head>
    <title>Desarrollo Web</title>
    <script language="JavaScript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="estilo.css" />
  </head>
  <body>
    <h1>"PREPARÁNDOME PARA SER UN DESARROLLADOR WEB"</h1>
    <h3>Javier Guerrero</h3>
    <form>
      <input type="button" value="Entrar" id="btnEntrar" />
    </form>
  </body>
</html>

estilo.css

Código:

body{
  background-color:#ccc;
  color:#000;
  font-family:arial;
}

h1{
  font-style:italic;
  text-align:center;
}

h3{
  font-weight:bold;
  color:#548;
  text-align:center;
}

script.js

Código:

var W3CDOM = (document.createElement && document.getElementsByTagName);
window.onload = init;

function init(){
  if (!W3CDOM) return;
  var btn = document.getElementById('btnEntrar');
  btn.onclick = wellcome;
}

function wellcome (){
  alert('Bienvenido al mundo de desarrollo de proyectos para Internet');
}

Quizás con las pocas líneas de código que he escrito no se note la gran ventaja de la separación en capas, pero cuando tengas cientos o miles de líneas de código, será muy favorable.

Un requisito fundamental para aplicar satisfactoriamente la separación en capas es que aprendan muy bien cada tecnología implicada: XHTML, CSS y JavaScript. Sobre todo, les recomendaría que empiecen a ver el tema de XHTML hasta dominarlo, pues constituye la base estructural de un documento y lo demás depende de ello.

Espero que les sea de utilidad este sencillo artículo, por lo menos que les incentive a investigar más sobre el tema. Cualquier duda y/o comentario serán bien recibidos.

Saludos cordiales,

Javier Guerrero Pacheco