¿Cómo hacer una página web en XHTML/CSS? ¿Cuáles son los pasos para diseñar en XHTML/CSS? Son preguntas recurrentes en foros de diseño web en diferentes idiomas, sin que hasta el momento yo haya encontrado una respuesta simple, lo cierto es que posiblemente no la hay debido a que cada desarrollador aplica una metodología distinta en su proceso. Libros excelentes se han escrito sobre el tema, sin embargo queda abierto al criterio del desarrollador el orden de los pasos a seguir. A mí me gusta programar manualmente pues obtengo resultados prácticamente exactos al modelo gráfico presentado (al cliente o al jefe).

Mi metodología es la siguiente:

1. Diseño Gráfico:
   Diseñar (en photoshop, fireworks o lo que quieras) la apariencia gráfica que tendrá la página, “el modelo”, con todo y textos, botones, etc… vamos, como una fotografía de la página.
2. Etiqueta CSS:
   Genero un archivo CSS con las etiquetas de estilo en blanco de acuerdo a las áreas que logro identificar en el modelo: header, content, footer, etc.
3. Etiqueta XHTML:
   Genero un archivo XHTML 1.0 Strict, defino y posiciono las divisiones con las respectivas etiquetas de estilo, incluyo todos los textos, al menos en forma simulada (lorem ipsum) si no existen los reales todavía.
4. Define Estilos:
   Asigno las características de estilo a cada una de las etiquetas del CSS creado previamente y que estaban en blanco.
5. Segmenta:
   Procedo a segmentar o “rebanar” las piezas del modelo grafico que me serán de utilidad y que serán recogidas por el CSS o el XHTML una vez en el servidor.
6. Ajusta:
   Reviso que las piezas del paso anterior hayan quedado en su lugar de acuerdo al modelo, reviso medidas, cabos sueltos, etc.
7. Verifica:
   Procedo a revisar que la página pase efectivamente la verificación de la W3C.

Espero que esta metodología sea de ayuda para los diseñadores o desarrolladores web que apenas se inician en esto, igualmente invito a los desarrolladores y diseñadores web veteranos que quieran compartir su metodología, lo hagan en los comentarios de este post para enriquecer este recurso.