Haciendo una paginita. Capítulo I: Diseño del layout

Debido a que varias personas me han pedido que comparta algo de mi escaso conocimiento en la rama de las páginas web... he preparado la siguiente guía sobre cómo hacer una página web de una de las formas más sencillas posibles. Para realizar esta guía, el procedimiento será muy sencillo: Haré la página y explicaré el proceso paso a paso... desde la planeación, empezar en blanco en Photoshop hasta culminar con la página subida al Internet y completamente funcional. Cabe aclarar que esta es MI versión de cómo hacer una página con tema libre, lo más sencilla y rápida de realizar y que aún así no quede taaan mal.

Comencemos.

Paso 1. Una página... ¿Pero de qué? Muchas veces la elección del tema no es una opción, puesto que debes hacer la página debido a una necesidad o por trabajo. Sin embargo, resulta cómodo que nuestros primeros pasos dentro del mundo de la webmastereada sean con proyectos personales o con un tema que te agrade. Generalmente lo mejor es hacer una página de una banda, un actor/actriz, una serie, un equipo de futbol, etcétera... Un proyecto que te resulte interesante y recreativo. En este caso, la página será de los Deftones.

Paso 2. Cómo comenzar. Para hacer una página no hay leyes escritas sobre piedra, es un campo muy experimental. Sin embargo, cada quien tiene su proceso creativo, es muy personal la forma de trabajar.

El trabajar con una página web tiene dos grandes áreas: El diseño del layout (es decir, lo gráfico) y escribir la página (es decir, el código) y depende de cada quien, de la forma de trabajar cómo empiezas tu proyecto. También depende mucho de qué clase de página web hagas. En este caso, haremos la página de la forma más sencilla posible: Diseñaremos el layout en Photoshop (será algo sencillo, una pequeña paginita) y después armaremos la página en Dreamweaver (Esto será de la forma más sencilla, usaremos HTML y CSS).

Paso 3. Preparándose para trabajar. Antes de abrir cualquier programa para diseñar nuestra página, debemos documentarnos bien sobre el tema. Leer, buscar imágenes, etcétera; es la primer tarea.

Debemos darnos una idea muy general sobre cómo queremos que sea nuestra página. Existen infinidad de posiblidades. En nuestro caso, haremos una página sencillita, tendrá una cabecera y dos columnas, una de ellas servirá de menú y en la otra irá el contenido.

A la hora de bocetar la página, debemos pensar en cómo es que quiero presentar la información. Esto debe ser de una forma eficaz, debemos hacer que el usuario se sienta cómodo navegando, y debemos hacerlo de una forma creativa.

Paso 4. Photoshop. Existen varios programas para diseñar la interfaz de nuestra página, siendo los más rifados (para mi) Phtoshop, Illustrator y Fireworks. Este último dedicado especialmente a ello, pues incluso podemos hacer páginas completas sin tener que usar ningún otro programa. Sin embargo, ya hemos elegido la forma en cómo enfrentaremos la empresa de realizar la página.

En cuanto al proceso creativo, resultaría muy difícil y tedioso poner aquí por escrito... además de que todo eso es muy subjetivo, pues se trata sencillamente de cómo CADA QUIEN hace la página, todo es es muy personal. Es por ello que he hecho el siguiente video donde está como YO hice el layout de la página que servirá de ejemplo para esta pequeña y poco útil guía. Es mi propia versión de Bob Ross (el cabrón de peinado de micrófono que te enseñaba a hacer paisajitos en el canal once). El video en chico no se ve ni madres, hay que hacerlo a pantalla completa y se ve chido... por otro lado, sigo sin poder encontrarle al programa que uso para que se escuche chido el audio... por eso nuevamente incluyo unas bonitas pistas musicales para acompañar la acción. Ojalá sirva de ejemplo:



Bueno, sé que ahí en el video no se aprecia totalmente cómo es que quedó el layout, por ello aquí va una imagen de cómo es que está quedando la cosa:


En el siguiente capítulo: Preparamos el archivo para guardarlo de forma correcta y así poder armar la página en el DreamWeaver, además ¿Qué es eso del HTML y para qué jodidos sirve?