El proceso de diseño de un sitio Web - Etapas del diseño Web

2 - Etapas del diseño Web

""<P class=CompletoP><FONT size=2>Estas son algunas etapas que se sugieren para diseñar eficientemente un sitio; es conveniente no comenzar a escribir ninguna línea de código HTML antes de completar las primeras etapas.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=111 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e1.GIF width=159 border=0 name=e1></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=159><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Delimitación del tema</FONT></DIV>
 <P class=CompletoP><FONT size=2>Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. Tambien es el momento para definir tanto las audiencias (normalmente es mas de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).</FONT></P>
 <P class=CompletoP><FONT size=2>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.</FONT></P>
 <P class=CompletoP><FONT size=2>Obsérvese lo siguiente: la mayoría de los sitios que son premiados con distinciones como "Lo mejor de ...", "La mejor página de la semana ...", "Top 5% del Web", son sitios que se dedican a temas muy especificos. La gente no quiere un montón de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=67 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e2.GIF width=59 border=0 name=e2></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=59><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Recolección de la información</FONT></DIV>
 <P class=CompletoP><FONT size=2>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. Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencioné antes hay mucha gente que si bien le tiene aversión a los computadores y que dispone de valiosísima e interesante información. Las organizaciones en general producen grandes cantidades de informacion, tambien en esta etapa hay que delimitar cuanta de la informacion historica, que ya no es relevante, sera incluida en el sitio web, por ejemplo, se puede definir que la informacion de mas de 3 años de antiguedad no sera incluida, etc.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=123 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e3.GIF width=99 border=0 name=e3></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=99><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Agregacion y descripcion</FONT></DIV>
 <P class=CompletoP><FONT size=2>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.</FONT></P>
 <P class=CompletoP><FONT size=2>Aplicamos una clasificación de tipo lineal a fragmentos de información que requieren que la persona que los lee vaya avanzando poco a poco en el conocimiento de algo, como en un libro. Usualmente los pondremos en una misma página, usando FRAMES o una técnica similar si se estima apropiado. 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.</FONT></P>
 <P class=CompletoP><FONT size=2>Es importante aqui no centrarse en una unica forma de clasificar los documentos. Una serie de descriptores tienen que ser definidos. Ademas, un mismo documento puede pertenecer a varios valores de un mismo descriptotor. Si nos encontramos en esta etapa discutiendo sobre si un elemento de informacion va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperaria encontrarlo.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=158 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e4.GIF width=160 border=0 name=e4></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=160><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Estructuración</FONT></DIV>
 <P class=CompletoP><FONT size=2>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 ayudas para la navegacion, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea.</FONT></P>
 <P class=CompletoP><FONT size=2>Tambien es importante proveer de indices para cada descriptor que haya sido diseñado.</FONT></P>
 <P class=CompletoP><FONT size=2>Desde este punto en adelante se puede trabajar en la implementación HTML propiamente tal.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=179 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e5.GIF width=215 border=0 name=e5></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=215><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Metáfora</FONT></DIV>
 <P class=CompletoP><FONT size=2>Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro servicio (por ejemplo: un glosario o una ayuda). 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.</FONT></P>
 <P class=CompletoP><FONT size=2>A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad (en este caso, una página HTML) en diferentes contextos. Estas paginas deben ser diseñadas cuidadosamente puesto que seran importantes para los usuarios al permitirles "saltar" dentro del sitio desde zonas logicamente distantes.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=171 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e6.GIF width=230 border=0 name=e6></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=230><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Diseño y estilo gráfico</FONT></DIV>
 <P class=CompletoP><FONT size=2>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. Un sitio por mas contenido que tenga si no tiene un buen diseño grafico dificilmente lograra un lugar destacado entre otros sitios del mismo tipo.</FONT></P>
 <P class=CompletoP><FONT size=2>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 . El esquema que se adoptará, (que se encuentra en algún lugar entre ambos extremos) varía de diseñador a diseñador y es un punto importante a considerar.</FONT></P>
 <P class=CompletoP><FONT size=2>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 ella. 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.</FONT></P><BR clear=center>
 <TABLE style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px" cellSpacing=0 cellPadding=3 align=center border=0>
 <TBODY>
 <TR>
 <TD style="VERTICAL-ALIGN: top"><FONT size=2><IMG height=199 alt="&#10;" hspace=0 src= http://www.wikilearning.com/imagescc/6061/articles-1060_e7.GIF width=263 border=0 name=e7></FONT></TD></TR>
 <TR>
 <TD class=CompletoP width=263><FONT size=2></FONT></TD></TR></TBODY></TABLE>
 <DIV class=CompletoH3><FONT size=2>Ensamble final</FONT></DIV>
 <P class=CompletoP><FONT size=2>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 sóla 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.</FONT></P>
 <DIV class=CompletoH3><FONT size=2>Testeo</FONT></DIV>
 <P class=CompletoP><FONT size=2>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.</FONT></P>
 <P class=CompletoP><FONT size=2>Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la practica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguiran.</FONT></P>""

Añade una nota a tu edición que explique en qué consisten tus cambios:

Opinar
5 opiniones

las etapas

es muy einteresante para los alunnos me llamo wendy cueva temoche

Maria Elena

Procesos de diseño de un sitio web.

Muy bueno ,y me sirvio de mucho ,les agradezco mi nuevo conocimiento.

Calos

Webmaster.

Muy bueno.

Veronica

El proceso de diseño de un sitio web.

Observaciones interesantes.

Francia Elena Cano

Me gusto.

Me gusto mucho porque es corto, consiso y claro.

Cursos gratis relacionados con 'El proceso de diseño de un sitio Web'

El proceso de diseño de un sitio Web

Tal como un periódico, por ejemplo, no es sólo una colección de artículos, un sitio... Más »

Introducción al diseño web

El diseño web va más allá del diseño gráfico, al influir en él multitud de... Más »

Fundamentos de diseño de Sitios Web

Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de... Más »

Introducción al Web Marketing

El el plan integral de marketing es un plan que incluye la publicidad de los... Más »

Publicando en Internet, eleccion proveedor Hosting

Conceptos como dirección IP, DNS, hosting, que le permitirán entender cómo poner las páginas que... Más »

Anuncios Google

Autor y licencia de 'El proceso de diseño de un sitio Web'

Curso gratis de Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1060.html CopyLeft

Los contenidos de este sitio pueden ser reproducidos solamente bajo estas condiciones. La licencia está respaldada con el registro de propiedad intelectual número 97.125 en Chile y otros países.

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.

Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.