Comunidad de diseño web y desarrollo en internet online

El teatro de marionetas de Cristalab presenta...

Citar            
MensajeEscrito el 08 Ene 2007 08:45 am
[El proceso de desarrollo de una pagina web]


Los protagonistas: El programador, la diseñadora y el cliente.

La siguiente no planea ser una guia detalla del proceso para elaborar una pagina web, pues estas pueden tener una infinidad de variables que pueden afectar los tiempos del proyecto, asi que imaginense esta secuencia como un ejemplo muy basico del proceso que se debe seguir para elaborar una pagina web, espero la disfruten.


Paso 1: La discusion

Naturalmente vas a iniciar tu proyecto con una pequeña charla con tu cliente. En la primera junta, necesitas establecer los parametros basicos de trabajo -Que es lo que se necesita hacer, quien hara cada cosa y cuales seran sus responsabilidad, quien es tu contacto para recabar materiales (textos, fotos) etc.



Paso 2: Lluvia de ideas

Piensa acerca de como estructuraras las cosas. ¿Que es importante?, ¿que informacion es necesaria en cada pagina?. Dependiendo del tamaño del proyecto se deberia crear un mapa visual para el cliente. Aunque es indispensable cuando se reorganiza informacion de cualquier tipo.


paso3: Wireframe

El "wireframe" es un esqueleto de la pagina web, indicando toda la navegacion, funciones y los elementos que contiene y que apareceran en ella, pero sin utilizar elementos de diseño grafico, es decir en extremo sencillo. Es usado para notar problemas y elementos perdido y servira como un plano de los contenidos, el diseño y la maquetacion que vendran despues.

la forma de crear un wireframe es cosa de cada uno, pero por lo general para sitios pequeños bastara con dibujarlo en ilustrator o photoshop (por medio de lineas), mientras que en sitios mas complejos tal vez sea necesario crearlo en html para que el cliente pueda revisar que todo este en el sitio correcto haciendo clic en los links.


Paso 4: Planenado el contenido

Trabajando con el mapa del sitio y el wireframa, tu y el cliente deben trabajar juntos para planear el contenido de la pagina (especificamente el texto). La planeacion del contenido y el escribir los textos son quizas, las partes que mas requieren del apoyo del cliente durante el proyecto ( y por obvias razones las que mas tiempo llevan):


Paso 5: Diseño Inicial

Con toda la informacion obtenida, el diseñador puede trabajar en el diseño base de la pagina principal y de las secciones que integraran la pagina.


Paso 6: Retroalimentacion del cliente

Cuando el diseño base este listo, el cliente necesita revisar que tu vayas en la direccion correcta y sugerir los ajustes que considere necesarios.


Paso 7: Rediseño

...Probablemente tengamos que componer algunas cosas o añadirlas hasta que....


Paso 8: Aprobacion del cliente

...el este feliz.

El proceso de "diseño-retroalimentacion-rediseño", es repetido en varias partes del proyecto. Ademas de preparar el contenido, la confirmacion de este proceso es una de las responsabilidades principales del cliente.


Paso 9: Añadir el diseño a la pagina

Una vez que el diseño base este aceptado, puede uno comenzar a trabajar en el "layout" y diseño de cada una de las paginas/secciones que integraran el sitio web.


Paso 10: Confirmacion

Y de nueva cuenta el cliente debe revisar la pagina y nosotros hacer los cambios, y entonces finalmente es aprobado el diseño.


Paso 11: Crear el codigo HTML...

Es hora de que el programador comience a crear la pagina HTML....


Paso 12: ...Y el CSS

...Y el CSS


Paso 13: Presentacion del proyecto al cliente

Haremos otra sesion de retroalimentacion con el cliente, con el fin de pulir y corregir los errores hasta que el sitio quede completo.


Paso 14: Prueba

La parte final del proceso es el "debug", lo que vendria siendo la busqueda de posibles errores. El sitio necesita ser probado en todas las plataformas para encontrar cualquier problema tecnico, asi como ser revisado rigurosamente para evitar errores en el contenido. Naturalmente, tambien deberemos probar que los codigos HTML Y CSS funcionen correctamente en cualquier navegador. Al final de cuentas invertiremos mucho tiempo en este proceso pero que al final vale la pena pues entregaremos un buen producto.


Paso 15: Lanzamiento del sitio

Aunque la imagen diga "The end" no significa que nosotros solamente debamos tomar el cheque y salir corriendo por la puera a gastarlo en pron, cerveza y C_C. Nostros debemos estar atentos al sitio por al menos 10 dias despues de su lanzamiento (o apertura al publico), en caso de que haya problemas y sea necesario arreglar algunas cosas.


El teatro de Cristalab espera que hayan disfruta de la funcion del dia de hoy. Que tengan buen dia ^^

Articulo original: The Website Development Process
Traducción y adaptación (que espero no sea muy mala): Koeth ^^

Por Koeth

655 de clabLevel

1 tutorial

 

El DeFectuoso

firefox
Citar            
MensajeEscrito el 08 Ene 2007 11:24 am
Pues yo que no entiendo ni papa de crear webs y cosas de esas me aresultado extrañamente comprensible (exceptuando algunos términos) y realmente ameno.
Por mi parte solo queda decir:
Gracias por colgarlo! ^^

Por Discordia

139 de clabLevel



Genero:Femenino  

msie
Citar            
MensajeEscrito el 08 Ene 2007 11:28 am
Que bonito.... y que irreal (no por que sean muñecos XD). Eso es el diseño web en un mundo perfecto. Yo lo comparo mas con peliculas como "La delgada linea roja".

Por mrkoala

Claber

1298 de clabLevel

1 tutorial
3 articulos

 

Guadalajara (España)

firefox
Citar            
MensajeEscrito el 08 Ene 2007 12:54 pm

mrkoala escribió:

Que bonito.... y que irreal (no por que sean muñecos XD). Eso es el diseño web en un mundo perfecto. Yo lo comparo mas con peliculas como "La delgada linea roja".


:lol: :lol: si, de hecho si lees el articulo original, al comienzo comenta exactamente lo mismo, que esta es como que la version utopica del proceso de desarrollo ^^

Por Koeth

655 de clabLevel

1 tutorial

 

El DeFectuoso

firefox
Citar            
MensajeEscrito el 08 Ene 2007 03:21 pm
Jeje ya puedes imprimir tu libro "vendiendo webs para ninos de 12 o +" Con un cd incluido con los trials de todos los programas que necesite ^^

Por elfleat

871 de clabLevel

2 tutoriales

Genero:Masculino  

Miami, USA

firefox
Citar            
MensajeEscrito el 08 Ene 2007 05:42 pm
Para algunas personas lo ven un poco complejo y poco entendible el de entrar al mundo web, pero terminandolo de ver, se podria utilizar para muchos fines los cuales netamente educativos (y no para chicos de 12).

^^ Muy bueno me gusto bastante .. U_U aunque vi un parecido a los muñequitos de Playgo q tenia cuando era pequeño ...

Por Pley

Claber

2268 de clabLevel

8 tutoriales

 

Lima - Peru

firefox
Citar            
MensajeEscrito el 08 Ene 2007 08:05 pm
Faelazo

Por Wanaya

Claber

1115 de clabLevel

4 tutoriales

 

La Unión Sovietica U_U

firefox
Citar            
MensajeEscrito el 08 Ene 2007 09:01 pm
OBJECTION!
ya ya, no me invoquen tantas veces que me gasto... y al final terminará perdiendo la gracia.
al menos koeth no dijo que era nuevo, creo que si lo tradujo tan excelsamente, debio haberlo leído al menos unas tres veces y se dio cuenta que este artículo lleva más de un año.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 08 Ene 2007 09:15 pm
Esta muy bueno el articulo

Por jacri

788 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 Ene 2007 09:30 pm

fael escribió:

OBJECTION!
ya ya, no me invoquen tantas veces que me gasto... y al final terminará perdiendo la gracia.
al menos koeth no dijo que era nuevo, creo que si lo tradujo tan excelsamente, debio haberlo leído al menos unas tres veces y se dio cuenta que este artículo lleva más de un año.


Si, de hecho el post del blog es viejo, es del 2005, pero bueno, me parecio buena idea traducirlo (que no es que este muy dificil de entender tampoco) :P

Por Koeth

655 de clabLevel

1 tutorial

 

El DeFectuoso

firefox
Citar            
MensajeEscrito el 08 Ene 2007 10:21 pm
A mi me gustaron las ilustraciones U_U

Por DaHouseCat

Claber

1011 de clabLevel

2 tutoriales

Genero:Masculino  

Smarphones Fan Boy

firefox
Citar            
MensajeEscrito el 09 Ene 2007 10:46 pm

DaHouseCat escribió:

A mi me gustaron las ilustraciones U_U



Ami tambien; donde se compran esos muñequitos :P

Por Jack Royce

460 de clabLevel



 

México DF

firefox
Citar            
MensajeEscrito el 10 Ene 2007 12:35 pm
Muy interesante...

Por torrealbaruben

Claber

1051 de clabLevel

4 tutoriales

Genero:Masculino  

Front-end developer

opera
Citar            
MensajeEscrito el 13 Ene 2007 09:49 pm
*-<ENTRETENIDO>-*

Por Artic-Hunter

221 de clabLevel



Genero:Masculino  

lejos de mi hogar en el Ártico

msie7
Citar            
MensajeEscrito el 13 Ene 2007 10:16 pm
Muy bonito, ojala y fuera asi en la realidad.

Por Odin

Claber

639 de clabLevel

2 tutoriales

Genero:Masculino   Premio_Secretos

El valle de las hamacas

firefox
Citar            
MensajeEscrito el 13 Ene 2007 11:41 pm

Odin escribió:

Muy bonito, ojala y fuera asi en la realidad.

--Remasterización de texto--

Odin escribió:

Muy bonito, y ojalá fuera así en realidad.

Por Artic-Hunter

221 de clabLevel



Genero:Masculino  

lejos de mi hogar en el Ártico

msie7
Citar            
MensajeEscrito el 14 Ene 2007 08:39 pm
Muy educativo... ¿A cuántos niños les habrán quitado sus juguetes para hacer esta demostración?

Por grank

45 de clabLevel



Genero:Masculino  

Guayaquil, Ecuador

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.