Tal como
explicábamos el otro día, una buena manera de afrontar el desarrollo de una aplicación web es comenzar por la interfaz y, a la vez que vamos construyendo ésta, vamos viendo cuáles van a ser los servicios que vamos a ofrecer.
Por ejemplo: podemos estar haciendo un listado de productos. Al verlo nos damos cuenta de que sería buena idea añadir un campo de búsqueda abajo del todo, o añadir pestañas para ordenar según distintos criterios. Todo ello afectará a la funcionalidad que teníamos pensada en un principio. Nos daremos cuenta de qué cosas son útiles y de cuales no.
En un principio uno puede pensar que para hacer dicho prototipado usar
HTML puede ser suficiente, sobretodo para ir incorporando el
CSS a la vez, que siempre nos gusta ver cómo queda el resultado final. Sin embargo, cuando ya llevamos varias páginas hechas en
HTML y vemos que queremos cambiar algún elemento común en todas empieza el desastre, porque no sabemos si lo hemos cambiado en todas, no sabemos cuál era la última versión de todas las que hay, etc.
Todo esto nos lleva a pensar que hace falta utilizar un lenguaje dinámico, como PHP o
ASP, para diseñar buenas interfaces. Sin embargo, no los queremos nada más que para escribir bloques de código con una simple llamada a función. Como no conozco
ASP me voy a centrar en desarrollar los ejemplos del post en PHP. La idea es muy sencilla. Primero debemos de tener claro cuál va a ser la estructura común a todas las páginas (o a la mayoría de ellas). A partir de ahí podemos ir viendo qué partes van a variar muy poco o nada, para así factorizar y crear funciones con dichos bloques de código. Cada uno de los bloques deben de tener una funcionalidad diferente.
Por ejemplo, imaginemos la siguiente página web, con la estructura típica de un weblog, compuesta por los siguientes elmentos:
-Título
--Logo
-Menú superior
-Contenido
--Posts
--Menú lateral
---Publicidad
---Listado de categorías
---Listado de post antiguos
---Enlaces para sindicar
-Pie
Cada uno de los elementos del
Menú lateral serían ejemplos perfectos para alguna de nuestras funciones. El
Título, el
Pie y el
Menú superior también lo serían.
Una vez definidas las partes a extraer basta sustituir los bloques de código por llamadas a función:
Hecho esto podemos seguir sacando partido al PHP, utilizando sus bucles para simular listados, etc.
Finalmente os comento un pequeño truco para hacer que el menú lateral tenga distintos componentes en función de la página que estéis cargando sin tener que escribir una a una las llamadas a función. El siguiente código gasta una funcionalidad de PHP que no suelo ver mucho por ahí y que puede serle útil a alguien. Imaginemos que tenemos las siguientes funciones definidas:
function publicidad() {
...
}
function categorias() {
...
}
function post_antiguos() {
...
}
function sindicar() {
...
}
Definimos la siguiente función para llamar a otras funciones a partir de un array:
function mostrar_secciones($array) {
foreach($array as $value) {
$value();
}
}
Y ahora una llamada con la siguiente forma:
<?php
mostrar_secciones(array('publicidad','post_antiguos'));
?>
Se encargará de llamar a las dos funciones cuyo nombre está en el
array, con lo que ya hemos conseguido una factorización total en nuestro prototipo.
Con esto ya podéis desarrollar todas las páginas que queráis que tenga vuestro prototipo de una manera rápida y coordinada con el resto de contenidos.
Antes de finalizar quiero hacer notar que no he nombrado a los editores
WYSIWYG para prototipar por dos razones: la primera es que generan
HTML estático y hemos llegado a la conclusión de que eso no nos sirve si vamos a desarrollar un prototipo lo más completo posible y lo más parecido que podamos a la aplicación final. Y la segunda es que de poco sirven para generar
CSS válido y bien hecho. Aunque está claro que cada uno tiene unas necesidades y puede venir bien contar con una herramienta visual en determinados momentos, así que no dejéis de tener esa idea en cuenta.