A veces es difícil explicarle a un cliente los procesos, terminologías y situaciones colaterales implícitas en el desarrollo web, las analogías son una forma de explicar de una manera más coloquial de tal forma que sea sencillo su entendimiento.

Para el caso de este post, o sea Remodelación de un Sitio Web, tomaremos como analogía la remodelación de una casa. Así que primeramente hay que contextualizarnos asignando equivalencias. Para el caso de esta analogía solamente tomaremos 3 elementos del proceso de construcción de una casa: Planos, Obra Negra y Acabados. Equiparándolos con los procesos de desarrollo web: Diseño, Programación, Integración.

Explico cada uno:

• Planos (Diseño): Como nos gustaría que se viera la casa, donde va cada área, ubicar instalación eléctrica, agua, gas, etc. Lo mismo para un sitio web, como queremos que se vea, donde va cada sección, cuantas páginas, etc.
• Obra Negra (Programación): Lo que sustenta lo casa, block, castillos, dalas, cemento, etc. Para un sitio web: código del frontend, el del backend, bases de datos, servidor, sistema operativo, etc.
• Acabados (Integración): Piso de mármol o imitación madera, pintura económica o lavable, los detalles pues. Para un sitio web se refiere específicamente a la segmentación gráfica y la integración del CSS.

A fin de aclarar las situaciones que confunden en las remodelaciones, he asignado una escala de acuerdo al nivel de modificación que se requiera:

• Nivel 1: Usualmente textos, es como cambiar las chapas o los grifos de una casa, son asuntos menores de muy bajo costo, no hace falta cambiar planos ni obra negra.
• Nivel 2: Usualmente gráficos. A veces únicamente nos piden conservar la estructura de un sitio web pero cambiar su apariencia gráfica o alguna foto en cuestión, esto es relativamente sencillo, por supuesto tiene un costo mayor, pero equivale según el caso a cambiar desde el color de las paredes hasta un cambio de piso o detalles de acabados, no implica cambios en obra negra sin embargo se sugiere algo de maquetación para que el resultado sea lo más cercano a lo esperado, igualmente para los sitios web, una propuesta gráfica es recomendable.
• Nivel 3: Modificaciones a la estructura del sitio, usualmente cuando queremos agregar una página nueva, una sección nueva o cambiar la distribución de los elementos y esto repercute en todo el sitio, su costo es más elevado. Bueno comparándolo con una casa esto equivale desde añadir una puerta, una recámara adicional, un segundo piso, etc., o sea cambios en la obra negra y por lo tanto lo ideal es recurrir a un plano para que el resultado sea cercano a lo visualizado.
• Nivel 4: Rediseño de la estructura del sitio, usualmente una nueva versión mejorada sirviendo al mismo propósito que ya tenía el sitio. Equivale a tumbar la casa y hacer una nueva en el mismo predio. Un costo importante. Obvio planos y obra negra totalmente nuevos.
• Nivel 5: Reingeniería. Usualmente implica un cambio de tecnología, plataforma, sistemas y se abre a la posibilidad de nuevos propósitos. Equivale a tumbar la casa, modificar las dimensiones del predio y hacer un condominio o locales comerciales.

Por lo anterior es sumamente importante al momento de crear o remodelar un sitio web (como lo es en una casa) observar los siguientes detalles:

• Certeza en el diseño: para no estancarse, regresarse o equivocarse en las fases siguientes.
• Estructura funcional: que sea resistente, bien armada y adecuada al propósito.
• Futuras ampliaciones: dejar margen para crecer, si es posible de acuerdo a un plano.
• Vista agradable: que el proyecto sea vistoso de acuerdo a su propósito.

El diseño en XHTML/CSS es muy diferente al HTML típico (la versión 4). Diseñar para HTML es muy fácil ya que se puede hacer (la mayoría de las veces) a través de un GUI como Dreamweaver, Firefox, Photoshop, etc., con la consecuente pérdida de estándares y ante (o vs.) el creciente énfasis de los buscadores en precisamente eso: ESTANDARES.

Bien, el XHTML es el formato de mayor vigencia actualmente (al 2008) y el más premiado por los motores de búsqueda por su facilidad para ser explorado por los robots, entre más estricto y puro es mejor. La páginas web programas en XHTML/CSS por lo general son sujetas a una verificación voluntaria por el W3C, aun cuando dicha verificación es voluntaria y no hay multas por no pasar la verificación, si puede representar un costo (sobre todo para las páginas web comerciales) en el largo plazo al ir cayendo en la posición que se tenga en las “paginas de resultados de los motores de búsqueda” (los SERPs), o bien jamás aparecer en ellos.

No es que yo nunca haya usado un GUI, de hecho mi favorito es el Dreamweaver, pero tampoco se puede usar para todo, vamos… hasta una navaja suiza tiene sus límites, y sin duda el XHTML con CSS es mejor programarlo a mano o al menos revisarlo o limpiarlo a mano antes de verificarlo y publicarlo.

La siguiente analogía va como ejemplo, supongamos que el motor de búsqueda es un buzo de aguas profundas buscando un tesoro en el fondo del mar. Nuestra página web es el espacio del océano (el agua) donde se ha decido buscar dicho tesoro. El tesoro es el producto o servicio que ofrecemos en nuestra página.

1. Cuando un motor de búsqueda explora una página web hecha con un GUI equivale a bucear en lodo, será difícil, lento y tal vez nunca encontremos el tesoro.
2. Cuando un motor de búsqueda explora una página web XHTML con estándares W3C equivale a bucear en agua purificada, todo será fácil, rápido y visible.

¿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.