Comunidad de diseño web y desarrollo en internet online

¿Que proceso seguir para hacer web XHTML + CSS?

Citar            
MensajeEscrito el 07 Ago 2005 12:56 pm
Espero que nadie se moleste por preguntar tanto pero tenia ganas de ponerme con CSS y me surgen dudas a mogollon.

Que proceso seguis a la hora de hacer una web con CSS?

Me explico. Yo soy" diseñador-intento de programador" hago el diseño con Photoshop y cuando me convence pasaba a maquetar (con mucho esfuerzo y con tablas :oops: ) en HTML.

Ahora que estoy aprendiendo CSS querria saber que pasos empleabais vosotros. Cada maestrillo tiene su librillo, pero tengo curiosidad por saber como os lo montais.

He visto que Photoshop/Image ready exporta en XMTML + CSS (generara bastante codigo basura, pero bueno) pero lo hace con posiciones absolutas. Fireworks creo que aun exporta con tablas, no?

Empleais las opciones de exportacion (hay algun arma milagrosa que desconozco?) o simplemente lo usais como "imagen de rastreo"

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Ago 2005 05:48 pm
Particularmente uso la vista de codigo de dreamweaver para armar el CSS y la vista de diseño para poner los divs y el texto.
Las imagenes las trabajo en Fireworks pero no le dejo a ningun programa que me haga la maquetacion, eso lo hago a mano.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

opera
Citar            
MensajeEscrito el 07 Ago 2005 06:12 pm
uh? No entendi muy bien.

Pero lo que hago antes de hacer un proyecto, es simple:

- Conversar con el cliente y armar un contrato
- Diagramar todo el sitio web (jerarquías, textos y qué páginas habran) según el contrato
- Revisar con cliente y pedir la primera parte del pago
- Crear bocetos en papel del diseño de las páginas
- Crear el diseño en programa de diseño (digamos fireworks)
- Revisar con cliente
- Crear el contenido semántico, osea escribir todo en orden, con titulos, subtitulos, parrafos, y etiquetas exactas.
- Crear etiquetas <div> , <span> según el criterio del diseño actual y futuros con sus respectivas clases e ids. NOTA: Nunca usen clases o ids con textorosa, textonegrita, etc. Esto no te ayudará cuando crees nuevas hojas de estilo.
- Cortar slices y exportarlos según su forma, colores o transparencia, en jpg, gif o png 8-24-32bit .
- Empezar a maquetar la web, crear la hoja de estilo con css-p y emplear las imagenes del diseño como fondos, las imágenes del contenido mantenerlas en el html.
- Terminar detalles de CSS
- Revisar con cliente y Recibir Pago Final

En caso de que el sobrino del cliente aparesca:
- Modificaciones finales que al cliente se le ocurrió al ultimo momento o que su sobrino que hace webs le dijo, pero no implementarlas tal y como dice, sino dependiendo de lo que es pensar y discutir si ponerlo o no, si es demasiado pensar en un nuevo precio por cada "implementacion" y decir que su sobrino sale caro XD
- Recibir último pago y Entregar web

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 07 Ago 2005 10:20 pm
uh? No entendi muy bien.

Entendiste, mas o menos :)
Ademas de los pasos comerciales, estructurales y de contenido (que mas o menos sigo en el mismo orden) yo me referia mas al proceso "tecnico", una vez que ya tienes el concepto y el estilo del sitio en el coco. Es decir, los pasos desde vuestra cabeza hasta que lo puedes ver en el navegador.

Lo que no acabo de entender es
Cortar slices y exportarlos según su forma, colores o transparencia, en jpg, gif o png 8-24-32bit .
- Empezar a maquetar la web, crear la hoja de estilo con css-p y emplear las imagenes del diseño como fondos, las imágenes del contenido mantenerlas en el html.


Te refieres a que exportas partes de la web (sectores o slices) y luego las pones como fondo para tomarlo como "plantilla" para maquetar el html?

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Ago 2005 11:01 pm

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 07 Ago 2005 11:15 pm
No me referia a como maquetar [ y me quedo con el tutorial de Cristal lab que lo encontre mejor :lol: ]

Me referia al proceso tecnico, no a la maquetacion en si. Como haceis los pasos. Yo, mas o menos y una vez que tengo la idea, la plasmo en el photoshop. Luego lo que me sale intento copiarlo usando HTML aunque no siempre me queda igual.

Era por saber si empleabais las opciones de exportar de Photoshop/Fireworks aunque fuesen como ayuda (ya que generan bastante codigo basura), si maquetabais directamente con los css siguiendo la idea de la cabeza o bien con algun boceto en papel, si empleais algun editor de css especial, alguna mania o truco personal...

La cuestion era que cada uno contara un poco su proceso de creacion de una web en XHTML + CSS

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Ago 2005 03:05 am
Era por saber si empleabais las opciones de exportar de Photoshop/Fireworks aunque fuesen como ayuda (ya que generan bastante codigo basura),

A veces, no suelo hacerlo pero a veces cuando tengo un diseño muy extraño, hago eso, lo exporto en tablas y asi tengo las medidas exactas de todo lo que haré, digamos 1 de 100.


si maquetabais directamente con los css siguiendo la idea de la cabeza o bien con algun boceto en papel

No, primero es la diagramación, luego el diseño en papel, luego el diseño en fireworks, y luego recien lo pasas al CSS. Porque asi ya tienes las medidas en fireworks, y vas armando la idea.


si empleais algun editor de css especial

Ninguno en especial, puedo usar cualquiera, ya que me acostumbré, pero da igual, puedes usar Dreamweaver MX 2004 en versión codigo, y ya.


alguna mania o truco personal...

Escuchar música todo el tiempo que hago el trabajo, y/o conversar con alguien para no aburrirme


Cortar slices y exportarlos según su forma, colores o transparencia, en jpg, gif o png 8-24-32bit .

Hago slices, las exporto y las agrego a la web, mediante CSS.


- Empezar a maquetar la web, crear la hoja de estilo con css-p y emplear las imagenes del diseño como fondos, las imágenes del contenido mantenerlas en el html.

Los pongo como fondos, para asi respetar la idea de separar el contenido del diseño.



PD: Estuve haciendo un post mucho, mucho mas largo, pero se cerró el firefox accidentalmente y lo perdi *sighs*, planeaba explicarte más cosas, pero ya será poco a poco, sigue preguntando todo lo que necesites!

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 08 Ago 2005 03:39 am
:D Gracias por compartir los gajes del oficio 8)

:lol: :lol: :lol: :lol:

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 08 Ago 2005 09:33 am
ok NEO_JP... esta era la idea que algun pro me explicara paso a paso como lo hace... imaginaba que era asi, pero queria certificar....
gracias

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 30 Ago 2005 06:46 pm
Excelente jugada maestro!! torre en 7ma.

Como dicen por allí: "El cliente siempre tiene la razón"

Y el sobrino tambien! y a cobrar!! Ole!

por supuesto!

8)

Por aliucho

1 de clabLevel



Genero:Masculino  

msie

 

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