Proyectar un sitio web III. Maquetar pensando en el futuro, por Luman

Nuevo capitulo de este tutorial encaminado a monstrar y comentar todo lo que se mueve a la hora de hacer un sitio web

Partimos de que tenemos unos cuantos pantallazos de nuestra web en archivos gráficos, ya sean de Photoshop, FireWorks, Gimp o cualquier otro editor gráfico. Es muy fácil usar las opciones de Guardar para la web y exportar todo nuestro diseño, dejando que el editor gráfico lo convierta en un HTML. Esto no se hace. Malo malo malo. Lo que optendremos de esta manera será un diseño lleno de gráficos, optimizados o no, cuando con un poco de paciencia y “arte” (uso de la herramienta “Cortar” y CSS) podemos conseguir un control absoluto y auténticamente optimizado, usando, por ejemplo, pequeños gráficos que se repiten, o colores de fondo en lugar de grandes gráficos. Y aunque estas herramientas están evolucionando y podemos indicarle que el texto lo exporten como tal y algunas opciones más, nunca sustituiran al buen hacer de un alguien con una base de HTML y CSS. (Nota: No digo aquí “Diseñador” porque muchas veces, este tema de maquetar y optimizar el diseño, coseguir que se vean bien en todos los navegadores posibles, suele ser cosa de los Obreros-Peones de la web).

Ya elijamos un diseño a base de tablas o con el uso de capas, debemos a la hora de maquetar facilitar en lo posible la vida al navegador y hacer nuestras plantillas lo más sencillas posibles; en el caso de maquetar con tablas tratetemos de poner los menos posibles rowspan y colspan, es decir, que no unamos muchas celdas con un maquetación enrevesada. No ahorraremos muchos problemas con cierto navegador de cuyo nombre no quiero acordarme.

Una cabecera, columna de menu a la izquierda, contenido a la derecha y un pie de web suele ser la estructura más común y a la que el usuario está acostumbrado. Buscará encontrar un logo en la esquina superior izquiera que en cualquier parte del sitio le lleve siempre al Home, un apartado de contacto y ayuda, y un menu con los distintos apartados del sitio. Nuestro diseño estará correcto si el usario es capaz de encontrar estos puntos con un rápido vistazo y saber de qué trata el sitio web y qué va a encontrar en él.

Estamos ahora en el punto de que hemos convertido nuestro diseño en páginas html. No todas, claro, pero sí las más significativas. En realidad un sitio web suele estar compuesto por 4 ó 5 plantillas, que nos sirven para los distintos puntos de la web. No tiene sentido cambiar el diseño y los elementos de sitio cada vez que entre en un apartado, aunque podemos encontrar sitios que asignan un color a cada uno de ellos y cuando entramos en él vemos como cambia el color de ciertos elementos (cabecera, títulos) para indicar más claramente en qué apartado nos encontramos. Pues bien, tenemos esas 4 ó 5 paginas webs, con ciertos elementos que se repiten, como los menus, o la cabecera, el pie de página… Una buena hoja de estilos nos ayudará a que podemos cambiar desde un único archivos colores y otras características, pero este método también lo podemos aplicar mediante el uso de “includes” de lenguajes dinámicos como PHP. De este modo cogemos un trozo de código HTML, correspondiente a la cabecera, por ejemplo, y lo copiamos y pegamos en un nuevo archivo, al que llamamos head.php. Pues mediante un simple:

<? include(“head.php”); ?>

En el lugar que ocupaba el código de la cabecera habremos hecho ya dinámico nuestro sitio web. Y cambiando algo en el archivo head.php tendremos actualizado todo nuestro sitio automáticamente. Ojo! Para hacer funcionar esto nuestros archivos deben tener extensión .php y necesitaremos un servidor para ver el resultado. Dreamweaver y, supongo, GoLive, traen también sus propios sistemas de plantillas que no están nada mal, pero aquí estamos dependiendo de un programa para la gestión de nuestro sitio, mientras que con el uso de includes, no dependemos de ninguno.

Problemas con los que os vais a encontrar cuando este todo listo: al cliente se le ocurren nuevos apartados, el cliente no quiero algunos apartados, el cliente quiere cambiar todos los colores del sitio, el cliente… Si trabajos de la manera más modular posible podremos solucionar todos estos problemas tocando sólo un archivo 😀