Todo proyecto web siempre deberá contar con una previa fase de planeación, en la cual se distribuyen, ubican y definen el tipo de contenidos que se presentarán y el enfoque que el mismo sitio presentará.

Esta fase de planeación nos permite conocer, a priori, qué tipo de servicios se pueden implementar para apoyar nuestros esfuerzos y tener una meta hacia la cual dirigirnos.

Puesto que éste es un tutorial bastante sencillo, sólo comentaré que en esta fase se ha establecido una estructura de navegación lo suficientemente simple para permitir que cualquier persona, sin importar el nivel de conocimientos que tenga sobre desarrollo de sitios web, pueda trabajar con los ejemplos presentados y conocer lo que se requiere en forma muy superficial.

Los wireframes

Mención importante requieren los wireframes, pues son éstos el resultado de la planeación y la esencia que se trata de pasar a los diseñadores para la generación del diseño de todos y cada uno de los gráficos que compondrán el sitio.

Durante mi experiencia, muchos diseñadores se han quejado porque los wireframes, supuestamente, les limitaban para implementar "su creatividad". Nada más equivocado puede asumirse, pues el diseño de este mismo tutorial --y de aquél que vas a desarrollar para aprender y que ha sido prediseñado-- se basa en un wireframe que es, similarmente, muy sencillote... diría que es simplón... así que no te alteres ni veas limitada tu capacidad de creatividad e ingenio.

El wireframe utilizado para el sitio prediseñado puedes descargarlo si deseas. Lo coloco en formato PowerPoint para que puedas interactuar con el mismo, ya que los wireframes y distribución de contenidos suelo generarlos en Visio.

Por tanto, consideremos que un wireframe cubre únicamente el objetivo de realizar la distribución de contenidos y la forma en que se procede según se tome una acción (dar un clic).

Puedes comprenderlo mejor si le consideras como un plano de arquitectura (de hecho, el wireframe es parte importante de la Arquitectura de la información), en que se indica dónde quedará el baño, por dónde pasará el cableado, en qué lugares estarán las ventanas, la sala y hasta la casa del perro... pero no te limita en nada, pues puedes elegir los modelos, colores, dimensiones, calidad, precio, duración y hasta ISO si eres muy sui generis.

La estructura

Como podrás darte cuenta, la estructura del sitio es muy simple. Contendrá un DIV que funcionará como "Contenedor" (en éste estarán incluídos todos los contenidos) que vamos a centrar en forma horizontal y darle espacio suficiente en la parte superior.

Los contenidos se componen de dos secciones, una para el menú de navegación y otra para los contenidos de cada página. El DIV que contendrá los contenidos lo vamos a convertir en uno que pueda facilitar el deslizarse dentro del mismo para presentar sus contenidos cuando éstos sobrepasan la altura asignada (es para que aprendas cómo "deslizar" dentro de un DIV).

Considero ésto es suficiente como "estás advertido cabezón", así que pasemos, sin más preámbulos, al desarrollo del sitio prediseñado... pero si consideras hace falta mayor info, utiliza el formulario abajo presentado para lanzar tu piedra...



Participa con tus comentarios o lee lo que otros opinan: