mié. Dic 11th, 2019

Etapas de desarrollo de una página web

Muchos clientes nos solicitan presupuestos de páginas webs pero muy pocos comprenden qué es una página web exactamente y cuáles son las etapas de su proceso de desarrollo.

A lo largo de este artículo abordaremos las etapas lógicas del desarrollo de una web para así facilitar la comprensión del usuario promedio.

Etapa 1: Diseño o bocetado

En esta etapa se trabaja sobre una “foto” de cómo lucirá la página web cuando esté terminada. En conjunto con el diseñador se decidirán cuestiones tales como:

  • Layout (Cómo se distribuirán los contenidos dentro de la página). Se suelen utilizar herramientas para generar croquis (wireframes ó mockups en inglés)
  • Cromatismo (Cuál será la combinación de colores de la página)
  • Tipo de diseño (moderno, minimalista, web 1.0, web 2.0, etc)

El output de este proceso es una “captura de pantalla” tanto de la página de inicio (también llamada “home” ó “index”) y las páginas internas o secciones. En el caso de una página corporativa solo por dar un ejemplo habría que diseñar las secciones index, quienes somos, servicios, contacto, etc.

El software que suele utilizarse para este proceso puede ser Photoshop ó Illustrator, no obstante el más adecuado es Fireworks puesto que está concebido precisamente para el diseño web que optimiza las imágenes para que sean lo más “livianas” posibles. La escasez de peso da las imágenes harán que el sitio sea más veloz.

Un sub-item del diseño es la generación de contenidos de texto los cuales deberán ser desarrollados con cuidado, evitando faltas de ortografía, lenguaje vulgar o poner texto de “relleno”.

Extensión de archivo de salida: PNG (Fireworks), AI (Illustrator) ó PSD (Photoshop)

Etapa 2: Maquetación

El input de esta etapa es la Etapa 1 finalizada y consiste en separar en fragmentos esas “capturas de pantalla” brindándole independencia. Por ejemplo, separar los botones o solapas de navegación en forma independiente y ponerle enlaces entre sí para que el sitio comience a ser “navegable”.

También es importante transformar en texto todo lo que sea posible para hacer la página más ligera y a la vez hacer al contenido más amigable con los buscadores. Dicho en otras palabras, los buscadores no saben reconocer el texto que hay dentro de las imágenes con lo cual deberíamos tratar de evitar el texto como imágen a no ser que sea absolutamente indispensable.

El software más utilizado para este proceso es Dreamweaver puesto que ofrece una interfaz WYSWYG (Lo que ve es lo que obtiene) lo cual facilita la maquetación para diseñadores que no dominan tanto el código de programación.

En esta etapa, existen 2 caminos de maquetación.

Maquetado con tablas

Bajo esta modalidad, se arma una tabla compuesta de tantas filas y columnas como sea necesario para ubicar cada fragmento del diseño. Como es imposible ubicar a la perfección todos los fragmentos se recurren a “trucos” que permiten ajustar el contenido para que quede idéntico al diseño. El recurso más utilizado son las imágenes transparentes. Como podrán imaginar, aunque las imágenes sean transparentes agregan peso al sitio. Esta modalidad se está utilizando cada vez menos puesto que presenta una serie de limitaciones para la visualización en distintos navegadores y dispositivos móviles.

Maquetado con hoja de estilos en cascada (CSS)

Simplificando la explicación podría decirse que en esta metodología se utiliza un sistema de coordenadas para localizar los contenidos en el documento en cuyo caso, no es necesario recurrir a imágenes transparentes y así el peso de la página se ve disminuído.

Extensión de archivo de salida: HTML, HTM & CSS

Etapa 3: Programación

La programación es un proceso más complejo en dónde pretendemos otorgarle a la web no sólo navegabilidad sino la capacidad de hacer cosas, o dicho de otro modo, “funcionalidad”. Un ejemplo sencillo sería un proceso de registración de un usuario, o el envío de un formulario de contacto. Un ejemplo más compleo sería armar un paso a paso para una compra o una pasarela de pagos online.

En esta etapa existen en general tres caminos:

Camino 1: Adaptar una solución ya desarrollada para lo que deseamos hacer. Esta es la opción más sencilla y en muchos casos podemos encontrar soluciones de código abierto u “open source” que nos permiten disminuír notablemente el tiempo de desarrollo y a la vez economizar notablemente el proyecto. El grado de personalización puede ser ilimitada si adaptamos una solución open source y limitada si la solución no lo es.

Camino 2: Programar “from the scratch” o desde cero aquello que queremos hacer. En este camino se realiza un desarrollo a medida y el nivel de personalización que podemos conseguir es absoluto. Este proceso es muy costoso pero en algunos casos está justificado o es imprescindible.

Camino 3: Programar utilizando mashup o combinando fragmentos de código de programación y/o aplicaciones de terceros tales como Google Maps o Twitter, sólo por citar algunos ejemplos.

Extensión de archivo de salida: php, asp, aspx, jsp, js

Etapa 4: Testing

En esta etapa, el sitio se monta en un directorio de prueba ya sea en forma local como en forma remota y se lo comienza a someter a pruebas por un grupo reducido de usuarios expertos e inexpertos. Vamos a navegarla por completo y hacer todo lo posible porque falle.  La idea es lograr que “se rompa”, que aparezcan enlaces rotos y que la página muestre errores. Si no lo hace, probablemente no estemos probando bien. Todas las páginas fallan. Todas tienen errores. El output de esta etapa no es un sitio exento de errores sino que tiene un número aceptable de ellos, casi imperceptibles al ojo de un usuario promedio.

Otro punto clave de esta etapa es ver a los usuarios inexpertos (y preferentemente que no formen parte del equipo de desarrollo) ver como navegan la página, si encuentran la información que nosotros queremos que encuentren y si les resulta atractiva.

Etapa 5: Puesta en producción o sitio en vivo (live)

En esta etapa, se subirá todo el sitio web a su destino final (www.dominioelegido.com) y se realizarán las pruebas finales.

Contrario a lo que algunos puedan inducir, esta no es la última etapa del desarrollo de una página web. ¿Y por qué no lo sería? Por el sencillo motivo que una página web que pretende posicionarse correctamente en buscadores deberá mantenerse actualizada, ser lo suficientemente dinámica como para adaptarse a las expectativas de los usuarios y sus hábitos de navegación. Una página que se sube y nunca más se toca corre grandes probalibidades de fracasar.

Etapa 6: Análisis de métricas y realimentación

Esta etapa representa un loop o ciclo infinito. Las páginas web son entidades dinámicas como así también el público que las busca y que las visita. Mantener un sitio al día no es una opción sino una obligación para organizaciones que han invertido recursos en su desarrollo. Del correcto análisis de métricas derivarán sin dudas modificaciones que debemos introducir a lo largo del tiempo y de nuestra flexibilidad para introducirlas dependerá el éxito del sitio.

Fuente: http://www.dotmanagement.com.ar/2010/10/26/etapas-de-desarrollo-de-una-pagina-web/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *