El proceso de un buen desarrollo web

Es interesante conocer el proceso de desarrollo de un sitio web, ya sea una página corporativa para una empresa o un proyecto web más complejo, como una red social, un portal de venta online, etc.

Hace poco escribimos un artículo hablando del pilar que sostiene al e-emprendedor, donde comentábamos que uno de los aspectos más importantes en un proyecto basado en la web es el equipo de desarrollo, aunque se tengan todos los demás puntos muy controlados (marketing, ventas, plan de negocio…) si el desarrollo no se hace de forma correcta el proyecto probablemente fracase o no funcione como debería.

Primer paso: Definición del proyecto

Es uno de los puntos más importantes, hay que tener lo más claro posible el alcance del proyecto, los requisitos que se quieren cumplir desde el inicio, que cosas gustaría que apareciesen más adelante, etc. La definición consiste en muchos puntos, pero principalmente hay que hacer un estudio del proyecto, describir los distintos apartados o secciones y qué se espera de cada una.

Para esto es necesario hacer una serie de mockups, o esquemas que muestren el funcionamiento básico y los componentes de cada sección. De este modo, sin necesidad de saber cómo va a diseñarse, qué imágenes van a aparecer o los colores finales, se puede tener una idea clara de los elementos que contendrá cada apartado de nuestra web.

Segundo paso: Diseño y maquetación

El diseño del sitio web es tan importante como el desarrollo, ya que definimos el aspecto que va a tener, lo que nuestro público va a ver, los colores que decidamos que van a acompañar a nuestra marca durante su inicio (no tiene por que mantenerse a lo largo de toda la vida del proyecto, hay muchos casos de rediseños en empresas importantes).

Una vez diseñadas todas las partes (o al menos las más importantes) se procede a hacer una maqueta en HTML+CSS (puede llevar también JavaScript para darle algo de interactividad). Con esta maqueta tendríamos definido el código de marcado que el navegador leerá, con información estática, todos los datos que se pongan ahora estarán puestos a mano, son de prueba, para ver el resultado del diseño con elementos realistas (pero no tienen por que ser reales).

Esta parte es la que se suele llamar Frontend, todo el código que hace que la web se vea de una forma o de otra en el navegador, que consigue que la experiencia de usuario sea buena o desastrosa.

Tercer Paso: Desarrollo de la lógica de la web

Normalmente este tercer paso es el que más largo suele ser de todos, ya que suele consistir en escribir una gran cantidad de código para que la web sea capaz de interactuar con el usuario obteniendo sus datos de entrada, o mostrarle datos que tenemos almacenados en alguna base de datos. Definir correctamente esta parte es fundamental para el buen proceso de desarrollo, ya que será el esqueleto de nuestro proyecto, lo que hace que se mantenga en pie, cuanto más robusto y a la vez ligero sea, mejor funcionará nuestra web.

Es muy importante en este paso usar un lenguaje de programación con el que nos sintamos cómodos y seamos capaces de desarrollar la mayoría de las funcionalidades requeridas por nuestra aplicación.

Y es fundamental, al menos para realizar un proyecto que pueda crecer con el tiempo – ¿existe algún proyecto web que no crezca? – usar una estructura de datos y de código mantenible y escalable. Estas palabras pueden dar un poco de miedo al principio, pero casi siempre están resueltas haciendo uso de algún Framework de desarrollo web, ya que nos ayudan a organizar el código de forma correcta (normalmente usando el modelo MVC – Modelo Vista Controlador) donde separemos la lógica de acceso a datos de la forma de mostrar esa información al usuario. Un framework de desarrollo además tiene otras muchas ventajas, como una gran cantidad de funcionalidades que nos ayudarán a ahorrar tiempo (o lo que es lo mismo, dinero) realizando tareas de un modo sencillo, protegiendo nuestra web de gran cantidad de ataques y fallos de seguridad que si programamos todo a mano probablemente olvidemos comprobar.

Cuarto paso: Test

Probar nuestra aplicación, comprobar cada detalle, cada punto, formulario de entrada de datos, imágenes, distintos navegadores, opciones que puedan ser inverosímiles pero que casi con total seguridad se producirán – ¿quién en su sano juicio va a elegir la opción blabla junto con la opción nosequé? – probar los emails que se envían al usuario, faltas de ortografía… todo es importante.

Quinto paso: Publicación

Es el momento crucial de nuestro proyecto, vamos a tener la web disponible online, la gente la va a poder ver y probablemente a criticarla… Para dar este paso, tenemos que estar seguros que hemos hecho bastantes pruebas, que todo está en orden y lanzar la web.

Probablemente, por más que hagamos pruebas antes de publicar, surgirán problemas luego. Por eso es común salir primero con una fase beta, donde los usuarios van accediendo poco a poco a la aplicación, normalmente por invitación. De este modo podemos ir usando sus reacciones y sus comentarios para mejorar la web o cambiar cosas antes de salir de forma pública.

Pues más o menos esto sería un proceso correcto de desarrollo de un proyecto web, cada uno de los pasos se pueden descomponer en muchos pasos intermedios, que en próximos artículos se desarrollarán. Además, esta aproximación es algo simple y se basa sobre todo en el proceso iterativo de desarrollo. Actualmente se está poniendo muy de moda, cosa que me alegra, la aproximación ágil para el desarrollo web, donde se va iterando sobre el proceso y consiguiendo tener distintas versiones de la web, desde una muy básica, hasta la definitiva. En próximos artículos explicaré en qué consisten estos métodos de desarrollo.