EstadoBeta

Un Patrón de Diseño es una solución estándar para problemas comunes. Originalmente aplicado a la arquitectura, el concepto pronto fue aplicado a otros campos como el diseño de software o el diseño de interfaces.

En Diseño de Software, hay un numero considerable de Patrones de Diseño conocidos que resuelven tareas como la creación de objetos, módulos o “plugins”, separación de lógica y presentación, pero en esencia aplicamos patrones en mayor o menor medida cuando intentamos resolver problemas frecuentes de forma estructurada y convencional. Empecemos con un ejemplo concreto adecuado al desarrollo web:

El proyecto

Se necesita desarrollar una galería de fotos. Debemos poder consultar una lista de miniaturas de cada foto en el catálogo y, al clickear cada foto, ver una versión de alta resolución que podemos descargar o imprimir.

El problema

La galería puede ser modificada en el tiempo, posiblemente llegando a contener miles de fotos, cada una con sus versiones miniatura y alta resolución. Podríamos confeccionar manualmente cada página para cada foto y lista, pero esto se hace inpracticable al momento de mantener o modificar el sistema. Se requiere un método convencional que permita optimizar la mantención del sistema.

La solución

Este caso es ideal para identificar un patrón: tenemos varios elementos -fotos- que se comportan de manera idéntica y estan compuestos por el mismo número de elementos. Hay una lista de todas las fotos, cada foto tiene dos versiones.

El paso siguiente es identificar y extraer convenciones del problema evaluado. En el caso de un sistema basado en Web, podemos empezar por definir una estructura convencional de directorios.

En el directorio “fotos” almacenaremos todas las fotos. Cada foto es una carpeta numerada. Dentro de cada una estan las dos versiones de cada foto con nombres que usarán la convención “grande” y “chica” para los dos tamaños de cada imagen, seguidos de la extensión (jpg). Esta estructura es ideal para usar la herramienta batch de Photoshop, por ejemplo, combinada con una acción para guardar dos versiones de cada imagen (Photoshop incluso permite definir la estructura de carpetas donde guardar el conjunto de fotos).

En el directorio “html” podríamos tener las dos páginas necesarias para nuestro ejemplo: una “lista” para el listado de fotos y una “detalle_foto” para la versión grande de cada foto.

La implementación

Hasta ahora todo bien. La simple estructura de directorios que definimos nos permite, teóricamente, ahorrarnos el tedioso trabajo de construir una página para cada foto, y al reducir los miles de elementos potenciales del sistema a una estructura convencional de directorios y archivos y una nomenclatura estándar para las versiones de cada foto, estamos también reduciendo enórmemente la complejidad de un sistema que puede llegar a ser enorme y facilitando la mantención del sistema a futuro.

En teoría, bien, pero ¿cómo hacemos para construir las páginas a partir de esta estructura?

Las opciones son varias. Se puede utilizar un lenguaje de scripting como PHP, ASP, JSP u otros. También se puede utilizar Javascript, que se ejecuta en el browser e incluso una película Flash y un simple parámetro de configuración que indique a la película el numero total de fotos en el sistema. Para el caso de este ejemplo utilizaré pseudo-código que podría ser implementado en cualquiera de estas alternativas.

Otra vez, antes de empezar a escribir código necesitamos identificar los componentes del problema. Empecemos por la página “lista” en la carpeta “html”. Esta página debe:

• Averiguar cuántas fotos hay en la carpeta “fotos”
• Crear una lista html con la miniatura de cada foto y un link a la versión grande de cada una

Así pues, el pseudo-código para estas dos funciones puede ser:

obtiene_total_fotos() puede obtener el total de carpetas dentro del
directorio “fotos” o ser simplemente una variable modificada a mano.


total_fotos = obtiene_total_fotos()


Una vez sabido el total de fotos, sólo resta hacer un simple loop y usar las convenciones de nuestro sistema para crear la miniatura y el link para cada imagen.


loop for $i = 1 to total_fotos
 <-- html para cada foto -->
  <div id="foto-$i">
   <img src=”/fotos/$i/chica.jpg” />
   <a href=”/html/detalle_foto.xx?id_foto=$i”>Ver detalle de foto #$i</a>
  </div>
  <– /html –>
end loop


OK. Primero, hacemos un loop para el número total de fotos existentes. Para cada vuelta del loop, la variable $i contendrá un numero entero consecutivo (1, 2, 3, 4, etc.).


loop for $i = 1 to total_fotos


Esa sola variable nos basta para construir la miniatura y el link para cada foto: al tener todas las miniaturas en una estructura conocida y convencional - /fotos/[numero_de_foto]/chica.jpg, es cosa de escribir el html para esos directorios substituyendo el numero del directorio de la imagen por la variable $i. Para el link, según la solución que diseñemos para la página de detalle -en este caso un link a la página detalle_foto.xx (donde xx es la extensión elegida de acuerdo a latecnología empleada: PHP, ASP, JSP, HTML, etc) con un parámetro en la URL que indica el numero de la foto que queremos ver, que a su vez equivale al nombre de la carpeta que contiene las versiones de esa foto.


<img src="/fotos/$i/chica.jpg” />
<a href=”/html/detalle_foto.xx?id_foto=$i“>Ver detalle de foto #$i</a>


Una vez procesado el programa, el html resultante será:


  <div id="foto-1">
   <img src=”/fotos/1/chica.jpg” />
   <a href=”/html/detalle_foto.xx?id_foto=1″>Ver detalle de foto #1</a>
  </div>
…
  <div id=”foto-2″>
   <img src=”/fotos/2/chica.jpg” />
   <a href=”/html/detalle_foto.xx?id_foto=2″>Ver detalle de foto #2</a>
  </div>
…
Etc.


Y voilà! Gracias a que nos basamos en convenciones bien estructuradas, la cantidad de lógica -programación- y configuración requeridas son mínimas. Bien implementado, bastaría con agregar o quitar carpetas del directorio “fotos” para actualizar la galería. Mientras cada foto cumpla con la convención para la nomenclatura de las versiones (”grande.jpg” y “chica.jpg”) y la carpeta que contiene esos archivos sea un numero consecutivo, el sistema funcionará sin fallas.

Página de detalle

Sólo nos falta la página de detalle que muestra la versión a alta resolución de cada foto (”grande.jpg”). Según la dirección tomada en la página de lista de fotos, cada link referencia a la página “/html/detalle_foto.xx” con el parámetro id_foto, que en cada caso será el numero de la carpeta de la foto elegida. Sólo nos resta capturar ese parámetro en la página de detalle y usarlo para construir una etiqueta <img /> dinámicamente.

Capturamos el parámetro (cada tecnología tiene sus propios métodos para efectuar esto).

$numero_de_foto = Parametros[”id_foto”]


Construímos el html necesario para referenciar la imagen indicada. La convención nos dice que en la carpeta representada por la variable $numero_de_foto existe un archivo “grande.jpg” para la versión a alta resolución de la foto.

<img src="/fotos/$numero_de_foto/grande.jpg” />
<h1>Foto #$numero_de_foto </h1>


El Patrón de Diseño

Dejándoles los detalles de la implementación a ustedes, hemos identificado elementos comunes a muchas “galerías online” y los hemos ordenado en una estructura de directorios y una convención de nombres. Esta solución, sin importar el lenguaje o tecnología elegidos para implementarla, es útil para resolver problemas similares la próxima vez que se nos presenten sin necesidad de reinventar la rueda.

Lo único que le falta a nuestra solución para ser un verdadero Patrón de Diseño es un nombre. Si los Patrones de Diseño tienen todo que ver con convenciones conocidas por todos, es ideal que cada uno tenga un nombre reconocible que podamos usar para comunicar la solución elegida en pocas palabras a nuestros colegas. En nuestro caso, podemos bautizar nuestro patrón “galería web”. Si una galería de miles de fotos necesita un paginador para las listas de fotos, por ejemplo, podemos definir o utilizar algun patrón adecuado para implementar paginadores y combinarlo con nuestra galería. Al describir nuestro sistema a otros desarrolladores podemos decir: “nuestra galería implementa los patrones Galería Web y Paginador Web“. Si conoce los patrones referidos, esto dará a nuestro interlocutor una idea general de la arquitectura del sistema y será más fácil para él o ella retomar el desarrollo.

Conclusión

Este ejemplo, que muchos podrán considerar demasiado simple, delínea los conceptos básicos de un Patrón de Diseño. En el mundo real del diseño de software estos conceptos se desarrollan en soluciones mucho más sofisticadas para resolver todo tipo de problemas. Sin embargo los principios son los mismos. Patrones complejos como el popular MVC2 utilizado para separar la lógica, los datos y la interfaz de usuario en aplicaciones web e implementado por frameworks de desarrollo como Ruby on Rails, Cake PHP o Java Struts se basan en las mismas ideas básicas (^*). Los diseñadores de interfaces también se benefician de encapsular soluciones a problemas comunes. Elementos que pueden ser complejos como los paginadores de listas, listas de noticias, barras de navegación o menus de varios niveles puden ser resueltos en soluciones generales que pueden ser luego aplicadas por los diseñadores en diversos escenarios, algo que Yahoo! está haciendo actívamente en su Biblioteca de Patrones de Diseño de Interfaces.

En el futuro describiré, con ejemplos, patrones más complejos para el desarrollo de aplicaciones web como MVC, Front Controller o Active Record.

Links

• Patrones de Diseño en Wikipedia
• Biblioteca de Patrones de Diseño de Interfaces en Yahoo!
• Catálogo de Patrones de Diseño de Martin Fowler
• An Introduction to Using Patterns in Web Design, por 37Signals
• Mis links sobre Patrones de Diseño en Del.icio.us

design patterns

• Servicios:
• Comentarios RSS
• Menear!
• Del.icio.us