Foros del Web » Creando para Internet » Diseño web »

Codificación por capas: obteniendo un código limpio y de fácil mantenimiento.

Estas en el tema de Codificación por capas: obteniendo un código limpio y de fácil mantenimiento. en el foro de Diseño web en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 25/04/2007, 08:23
 
Fecha de Ingreso: noviembre-2006
Ubicación: Argentina
Mensajes: 28
Antigüedad: 11 años
Puntos: 1
Codificación por capas: obteniendo un código limpio y de fácil mantenimiento.

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:
  1. Planificación
  2. Diseño
  3. Codificación
  4. Implementación
  5. Promoción
  6. 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:
  1. Convertir un boceto (realizado con alguna herramienta gráfica, como Adobe Photoshop) a código XHTML+CSS+JavaScript.
  2. 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

Última edición por JavierGuerrero; 25/04/2007 a las 09:04
  #2 (permalink)  
Antiguo 25/04/2007, 18:36
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: Codificación por capas: obteniendo un código limpio y de fácil mantenimiento.

El código HTML que has pegado no valida con el w3, ya que no contiene el DOCTYPE correcto.

De todas formas, el artículo me parece muy interesante y claro sobre las ventajas de la separación de las diferentes capas que componen una página web.


Saludos.
  #3 (permalink)  
Antiguo 26/04/2007, 05:59
Avatar de denied  
Fecha de Ingreso: octubre-2005
Ubicación: Barcelona - España
Mensajes: 52
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: Codificación por capas: obteniendo un código limpio y de fácil mantenimiento.

Las ventajas de separar el codigo, siempre terminan viendose reflejadas...

Yo aún sigo con el metodo tradicional, pero no descarto empezar con este metodo en cuanto consiga algo más de conocimientos sobre uno de estos lenguajes.


Por cierto alvlin, tienes razón el codigo de ejemplo no es valida en W3...

Pero creo que por eso, es un simple ejemplo, para dar una explicación.

En fin, JavierGuerrero tu articulo, un ejemplo a seguir.
Saludos,
__________________
Retroceder Nunca, Rendirse Jamas
===============================
  #4 (permalink)  
Antiguo 26/04/2007, 18:12
 
Fecha de Ingreso: noviembre-2006
Ubicación: Argentina
Mensajes: 28
Antigüedad: 11 años
Puntos: 1
Complementando...

Hola, amigos.

En primer lugar, me disculpo por no poner el DTD. Pero en fin, se los dejo de tarea .

Ahora, para complementar un poco más la idea, les recomiendo un artículo muy breve acerca de la separación en capas, escrita por un amigo muchísimo más experimentado.

Este es el link:

Código:
w w w .ventanazul.com/forum/showthread.php?t=1181
Luego les daré enlaces a libros que tratan acerca de este tema, pero eso sí, están en inglés.

Saludos cordiales,

Javier Guerrero Pacheco
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:50.