¿Cómo se hace un sitio web?
A veces me preguntan que si como hago un sitio web, la respuesta es sencillamente complicada, y no lo digo porque hacer un sitio sea muy complicado y yo sea el dueño del conocimiento, sino porque traducir el proceso a palabras normales es dificil.
Cuando me preguntan no se por donde comenzar a explicar, siempre termino balbuceando una versión (para gente común y corriente) de lo que son los estándares, el uso del CSS, y del proceso de pasar el diseño del papel al Photoshop y luego a HTML jeje, creo que no soy el único al que le pasa esto y esque la verdad no es fácil explicarlo a alguien que no está familiarizado con los términos y el uso de internet.
Yo se que cada quien tiene su proceso, pero creo que siempre es bueno bocetar, me ayuda a definir espacios (que casi siempre van en función de la info que vas a desplegar, sobre todo en el home page), además sirve para mostrarle a tu cliente la idea que tienes antes de siquiera tocar el acceso directo de Photoshop, es una parte del proceso donde se definen muchas cosas. Tengo hojas con una captura impresa en blanco y negro, puede estar de más imprimir estas ventanas pero a veces es bueno porque el cliente lo entiende mejor.
Y bueno, mi proceso a grandes razgos. Bocetos al inicio, una vez definido el layout, paso a Photoshop, aquí trabajo el archivo hasta que queda más o menos como va a ser el diseño final, hay que tener cuidado de no proponer cosas que depués nos vayan a crear problemas, por ej. si vamos a usar listas hay que hacerlas como si fueran de html, textos sin antialias y en las fuentes "permitidas" si no el cliente te va a reclamar que no tiene la misma letra y ese tipo de cosas, una vez cuidando estos detalles le muestro al cliente el diseño, si aprueba paso a Dreamweaver + Topstyle y tomo del file de photoshop los elementos que no pueda generar con CSS, como bordes con volumen, gradientes, fotos, etc. y es esta parte del proceso la que más trabajo me lleva, el CSS. Posicionar los elementos como tu quieres y que esto funcione bien en diferentes navegadores es lo más desgastante del proceso, además de que el diseño debe verse como el que le mostraste al cliente.
Después de esto lo que resta es mostrárselo al cliente y esperar que no pida muchos cambios :s jeje
Arriba se muestra uno de los bocetos que hice para el sitio del Festival Ortiz Tirado, el de color es una captura del archivo de Photoshop, y el aquí el sitio final.
Sería interesante saber que proceso siguen otras personas, si tienes un proceso distinto escríbelo en los comments. Saludos.
NOlo el día 30 de Enero de 2006 a las 5:42 pm escribió:
Interesante la técnica de la captura para presentar al cliente los bocetos, creo que es bastante aplicable. Incluso para uno, seguro se visualiza mucho mejor sabiendo los límites que se tienen para trabajar.
Kid_A el día 30 de Enero de 2006 a las 6:44 pm escribió:
Auque mi proceso no difiere en mucho, me gustaría compartirlo.
Primero defino la estructura del sitio justificando y describiendo cada sección y apartado, posteriormente hago un diagrama jerárquico para mostrar gráficamente cómo quedarán comunicadas las páginas (esto ayuda a que el cliente entienda mejor la estructura).
Después creo algunos bocetos en una libreta, le muestro al interesado mis avances y partiendo de su opinión comienzo con el diseño en mi PC, en mi caso uso Paint Shop Pro, hago dos o tres propuestas diferentes, nuevamente le muestro mis resultados al cliente para seleccionar el diseño definitivo, y de ahí continúo con el proceso, hago los cortes estratégicos para seccionar las imágenes del diseño (slicer), y después comienzo a trabajar con la tecnología elegida, para CSS igual uso TopStyle y para editar el código restante me apoyo de HomeSite.
Finalmente hago las respectivas pruebas de accesibilidad con los 3 navegadores más utilizados (Mozilla y derivados, IE y Opera), y como bien dice Droid, en el caso de las Hojas de estilo, en cuanto a posicionamientos se refiere, esta parte del proceso puede llegar a ser muy tediosa, inclusive hasta desesperante.
Bien, pues básicamente esa es mi manera de trabajar, Saludos.
Alex el día 31 de Enero de 2006 a las 6:48 am escribió:
Respecto a las fuentes permitidas yo he entrado en sitios web donde yo no tenia instalado el tipo de fuente y sin embargo podia verla, porque?
Felixe el día 31 de Enero de 2006 a las 10:12 am escribió:
Mi proceso es parecido, pero somos 2 o 3 personas involucradas: el diseñador (o diseñadores) y yo como programador. Primero armamos un cuadro sinóptico tipo mapa del sitio para ver cuántos “escenarios” manejaremos, luego ya hacen propuestas en el Photoshop y le presentamos al cliente 2 o 3. De ahí, por descartación, nos quedamos con una ya corregida y revisada para comenzar a programar. Todo es CSS, incluyendo algunos slices generados con el ImageReady pero de los que se toman sólamente las imágenes. El formado lo defino con posicionamientos en el CSS.
Lo que siempre les digo a los clientes “¿quieres mover completamente una sección para el otro lado (der, izq, arriba, abajo)? No hay problema ¿quieres mover un pixel algún elemento? Espérame porque no es tan sencillo”
Así es esto. Gracias Rubén por compartir.
Sabo el día 1 de Febrero de 2006 a las 11:02 pm escribió:
1. Pregunto al cliente que necesita.
2. Me contesta puras cosas que yo se que no necesita.
3. En base a mi experiencia trabajo ideas alrededor de lo que el cree que necesita y lo involucro en la idea real de lo que realmente necesita.
4. Lo convenzo de que su idea seria mejor con esos cambios que le sugiero.
5. Platico con el diseñador y formamos la estructura del diseño en base a una idea muy bien estudiada entre el diseñador y el que estudió la necesidades del cliente.
6. Se generá un “brainstorm” sumamente interesante y creativo.
7. Se pone a trabajar el diseñador sobre una idea creativa, sólida, real, eficiente en todos los sentidos (layout, código, usabilidad, mercadotecnia, y exactamente lo que Droid explicó que hace, etc…) todo lo que el cliente no sabe que existe.
8. Se entrega trabajo final previamente autorizado por el cliente y cualquier detalle de cambios es “mínimo” XD gracias al trabajo previo en los puntos anteriores. (nada es perfecto)
Es bonito combinar la experiencia con los trabajos que realiza un diseñador con experiencia en su ramo para que este tenga más libertad de hacer lo que el sabe hacer, sin que el cliente le diga como hacerlo ;) y al mismo tiempo satisfaciendo las necesidades del mismo.
Diferente punto de visita de hacer un site, sorry por no hablar de tecnicismos gráficos, no soy diseñador pero me ha tocado trabajar con buenos diseñadores y ayudado a desarrollar y vender buenos sitios.
MARIANA el día 2 de Febrero de 2006 a las 9:44 am escribió:
esta muy claro cómo lo hacen, después de semanas de estár intentando entender cómo lo hacen por fin logro entender que es un proceso relativamente sencillo pero que requiere de los programas indicados.
Es padre este mundo del diseño.
ahora hay muchas pág con información pero son muy técnicas y como que da penita estar preguntando por tecnicismos, en fin. gracias.
Gracias tambien a SABO, me gustó también su pag.
saludos
Patata_killer el día 2 de Febrero de 2006 a las 4:13 pm escribió:
Sabo, ya sabes usar el rail?
Sabo el día 2 de Febrero de 2006 a las 4:20 pm escribió:
Gracias Mariana, el logo de mi sitio lo hizo Droid (TROST).
Patata_Killer ¬¬
cho el día 4 de Febrero de 2006 a las 5:39 pm escribió:
yo creo que el mayor problema en la creacion de sitios web es hacer entender a los clientes que el uso de estandares web son la mejor opcion para su pagina y no sitios que se hacen en flash llenos de animaciones e imagenes pesadas por todos lados.
creo que la gente aun se sigue apantallando con elementos animados(innecesarios) y detalles churrigurescos dentro de sus sitios..
Dede el día 6 de Febrero de 2006 a las 11:57 am escribió:
Droid … vendria bien un post sobre como “saber cobrar un desarrollo web” es decir cotizar/valuar un sitio web, ese es mi coco.. sabemos que depende de muchas cosas, pero ahí está el asunto .. debe de haber alguna medida de donde partir para cobrar cada cosa: el diseño gráfico, las animaciones, si va a existir algún sistema como publicacion de noticias, galerias,etc.).
Sería de mucha utilidad un post sobre esto.
Saludos !
Bueno