Cargando...


Fases del Diseño y Desarrollo Web





La construcción de un sitio web exitoso puede convertirse en una tarea difícil si no consideras estándares de desarrollo, cuál es el factor común en el mundo del desarrollo web, lo más fácil usar un manejador de contenidos que te promete crear tu propio sitio web en el menor tiempo posible o en su alternativa utilizar un poco más de tiempo en crearlo usando tus propios recursos, comparando alojamiento web y controlar tus códigos del desarrollo, estilos y validaciones.

Fases del desarrollo web. Fuente de la imagen http://www.cora3.es


Tener presencia en Internet significa hacer que las ideas y servicios que ofreces sean conocidos y estén disponibles en Internet. Es importante que la información sea interesante y fácil de seguir para los lectores además de disponer de ella de una manera rápida y atractiva.


Los diseño de Website, cubren las necesidades tanto individuales como comerciales y/o institucionales, tomando en cuenta en ambos casos un concepto gráfico, dinámico e interactivo con el usuario.

Este proceso ofrece una propuesta práctica, atractiva y eficaz. Los diseños permiten que el visitante realice una navegación por el Website, de forma sencilla y eficiente. 
Un Website le permitirá proyectarse a través de Internet, mejorando la comunicación con clientes y proveedores; y alcanzando nuevos prospectos.


Este es un tema que suele dar mucho que debatir y bastante recurrente en la comunidad de diseñadores web. Hay varias propuestas con respecto a las fases del desarrollo web, estas fases corresponden a la arquitectura basada en el modelo a tres capas: usuarios, aplicación (cliente-servidor) y datos. En cualquiera de los casos debes considerar las fases por las que debe pasar el desarrollo de un sitio web, los expertos indican que la creación del sitio web debe pasar por las siguientes fases:

FASES DEL DESARROLLO WEB ESTANDARIZADO


  1. PLANIFICAR SITIO WEB
  2. DISEÑO DEL SITIO WEB
  3. DESARROLLO, ENSAMBLE Y PRUEBAS
  4. PROMOCION
  5. EVALUACION
etapas-construccion-sitio-web


   Diagramas de las etapas de un proyecto web, tomado de las siguientes publicaciones:
http://disenowebakus.net/fases-para-el-desarrollo-de-un-proyecto-web.php
 http://www.cora3.es/aplicaciones-a-medida.php
 

1. PLANIFICAR SITIO WEB

 

En esta fase se deben obtener como resultado un claro panorama de los objetivos y expectativas que perseguirá el sitio web,  estudio inicial  de necesidades y requisitos, elección de un responsable coordinador y una estimación de costos.


Se debe obtener un borrador que incorpore los siguientes conceptos:


  • Objetivos y expectativas de la website
  • Estudio inicial de necesidades y requisitos
  • Elección de un responsable o coordinador
  • Presupuesto estimado aproximado

En esta primera etapa se analizan los requerimientos básicos del cliente, se define el objetivo del sitio y se estudia la factibilidad del proyecto. Considerando esto se elabora una propuesta en la cual se determina el alcance, y se estiman plazos y costos.

Delimitación del tema

 

Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. Si no se evalúa adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrás un trabajo ordenado de delimitación de contenidos.

Recolección de la Información

 

En esta etapa se recolecta la información que se va a poner en el Web, de acuerdo a la especificación hecha en la etapa anterior. Esta fase consta del análisis una etapa primordial para poder culminar con éxito cualquier tipo de proyecto.

2. DISEÑO DEL SITIO WEB

 

Una vez aprobado el presupuesto por el cliente, se recopila la información y el material disponible de trabajos anteriores de gráfica, publicidad web y todo lo que el cliente posea para que sea una página que respete la imagen de su empresa.


Se estudian las necesidades de su sitio, el segmento de su empresa, las palabras clave, las frases clave, los términos competitivos, se estudia la competencia directa y se redactan los contenidos relevantes.  

 Se define el sitio con el máximo nivel de detalle, se generan modelos del aspecto gráfico, del contenido, y del funcionamiento. Estos modelos son prototipos del sitio y lo reflejan con exactitud, se trabaja con el cliente definiéndolos hasta que quede satisfecho con todos los aspectos. Es fundamental la aprobación del cliente para seguir avanzando, pues los cambios en etapas posteriores serán más costosos.  

Para ser presentado al cliente avances del diseño podemos trabajar usando prototipos. los elementos a trabajar en ésta etapa son:

  • Prototipo imaginario
  • Prototipo real
  • Agregación
  • Estructuración 
  • Metáfora
  • Diseño Grafico
  • Diseño y Estilo Grafico

 

Prototipo imaginario

 

Durante esta fase se debe desarrollar la interfaz gráfica del sitio Web, la forma, el estilo y diseño vendrá dado por la información de las fases predecesoras.

Prototipo real

 

En este momento debemos ponernos al control del ordenador y empezar a diseñar con cualquier programa de retoque gráfico. Cualquier cambio o alteración en la idea inicial será fácilmente editable en el programa.

Agregación

 

Una vez que tenemos la información que irá en el sitio, comenzamos una clasificación apropiada . Aquí hay que encontrar un adecuado balance entre la linealidad y la jerarquización.
Aplicamos una clasificación de tipo jerárquica a trozos de información que sean complementarios o que dependan uno de otro, como secciones y subsecciones. Usualmente los pondremos en diferentes páginas. 

Estructuración

 

En este punto se estructura la manera en que se unen las diferentes páginas, de acuerdo a la agregación de contenidos realizada en la etapa anterior. Se provee de un botón home para todas las páginas (altamente recomendado), de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea.

Enlaces Internos (Metáforas)

 

Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro sitio, quizás en alguna parte del documento mencionamos a otra página y sería interesante que el usuario pudiera hacer click en esa referencia para ir a la página que estamos referenciando. A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad del sitio.

Diseño Grafico

 

Un estilo gráfico adecuado puede ser algo importantísimo a la hora de hacer que la persona que nos visita se sienta cómoda, y como una manera de alivianar el contenido y hacerlo más digerible. En cuanto a la cantidad y tamaño de las imágenes, hay que adoptar un equilibrio. Hay sitios que se basan casi por completo en grandes y lentas imágenes GIF, otros que se ven bastante pobres pues son casi sólo texto, con lo que se desaprovechan los métodos multimediales.

Diseño y Estilo Grafico

 

Otro punto importante en la etapa de definición de la parte gráfica, es intentar en lo posible mantener una cierta coherencia gráfica, y atreverse a innovar en cuanto a las distribuciones. Un color de fondo, un fondo o una distribución interesante de los elementos dentro de una página es algo que no se olvida con facilidad

3. DESARROLLO DEL SITIO WEB

 

La Fase de Proyecto en el desarrollo web, es quizás la fase que requiere más tiempo y consultas con los diferentes actores, el coordinador encargado del proyecto debe establecer con los mismos las acciones a tomar, plasmando esto en un plan estratégico con plazos de tareas sobre el cual se basará todo el trabajo en equipo.



La Fase de Desarrollo del Proyecto,  encuentra a los actores trabajando cada uno en sus áreas de acuerdo al proyecto estratégico antes mencionado, y debe tratar de lograr al final de esta Fase ya una maqueta del sitio para un maquillado final. Se define el diseño del sito web, la programación de la base de datos, pruebas de usabilidad, rendimiento ante los navegadores y todos los aspectos operativos.

En esta fase del proyecto ya se contempla el esqueleto del sitio, con las tecnologías que se aplicarán, los detalles de los profesionales que se utilizarán y un detallado cronograma de trabajo. Deberá concluirse con un primer borrador o maqueta que permita la aprobación o modificación del diseño inicial del website.
 

Ensamble Final

 

En este punto concretamos el diseño, con los últimos enlaces que sean necesarios e incorporamos el estilo gráfico a las páginas, se ensambla el sitio con una portada que sea capaz de presentar en una sola página física al menos lo más relevante del sitio, se instalan links hacia la página personal del autor y/o su dirección de correo electrónico.

Pruebas 

 

El diseño está definido en cuanto a la presentación gráfica y multimedia, se coordinan las páginas, los scripts, los programas. Se comienza el diseño y configuración de las Bases de Datos (de ser necesarios) para el correcto funcionamiento del sitio. Es una etapa de testeo permanente y exhaustivo con el fin de controlar el correcto funcionamiento de la integración de los sistemas y programas ejecutantes. Este proceso se hace en el ámbito de desarrollo y luego se prueba directamente en la Red. A medida que el Sitio Web este en proceso de desarrollo lo podrá observar en forma online. Paralelamente a esto, en los sitios dinámicos, los futuros administradores del sitio comienzan a capacitarse para el mantenimiento y desarrollo del mismo.


Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redacción y ortografía de las páginas, hacer los ajustes necesarios para separar las páginas que sean demasiado extensas en páginas más pequeñas.

4. PROMOCION

 

Sólo cuando la web está 100% probada y en marcha, planificaremos los métodos de promoción y publicidad más adecuados. La Fase de Promoción, apunta directamente a que el sitio se publicite y se conozca utilizando las herramientas de marketing existentes. De esta manera se persigue que el tráfico del sitio llegue a un grado positivo y lograr los objetivos establecidos.

  • Registro y Marketing en los principales buscadores
  • Promoción y publicidad del website 
  • Registre un dominio 
  • Encuentre una compañía host 
  • Upload el website

 

5. EVALUACION

el mantenimiento del sitio, que ya se ha establecido en la Planificación, pero en esta etapa se entra en detalles de designación de personas y planificación del seguimiento de objetivos previstos.

Aquí hay algunas cosas que se revisan en ésta fase: 

  • Limpios y fáciles los updates diseño/estructura.
  • Buena funcionalidad en el diseño y todo lo que eso implica.
  • Rápida carga de las páginas 'light'.
  • Inteligente uso de la tecnología - Usando Flash pero si esto tiene sentido y no porque usted desea una llamativa entrada!
  • El website tiene la habilidad de dar el mensaje/significado del sitio rápidamente si no instantáneamente.


 Para finalizar, un diagrama que me pareció muy completo, tomado de la siguiente presentación que puedes leer en Slideshare: Desarrollo de software orientado a la web

 Fuente del diagrama:



Algunas Referencias utilizadas:







En el mundo de la informática no haces nada sin un bit. Busca el bit que necesitas en mis blog.





Recuerda envíar comentarios.

Publicado por: 

Pedro Antonio Villalta




Haga clic aquí para ver los comentarios 1 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios


Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Hosting y Alojamiento

MBA Ranking

Online Forex Trading