Tuétano, creatividad que cala hasta los huesos


Pequeña metodología para diseñar sitios electrónicos
23.abril.2008, 8:36 am
Filed under: Artículos

Como muchos de ustedes saben, soy instructor en una empresa que lleva por nombre Aula Virtual. La presente metodología esta basada en la que Adobe integra en su curricula oficial y que consta de cinco pasos principales al cuál yo le agregué uno más que Adobe incluye en su quinto paso.

A muchas personas se les dificulta el hecho de poder concretar el proyecto que le trae dando vueltas en la cabeza. Tienen la idea, pero les es muy complicado poder aterrizarla, lo cuál es preocupante si pensamos que muchos de sus futuros clientes pueden estar en las mismas condiciones.

Los pasos de la metodología son: Definición, Estructura, Diseño, Construcción y pruebas, Lanzamiento y Promoción. Los desgloso a continuación:

Definición: En este paso tenemos que sacar toda la información que podamos de nuestro cliente (nuestro jefe si estamos en alguna empresa es nuestro cliente; nosotros si es un proyecto particular, somos los clientes) acerca del proyecto por el cuál nos esta contratando. Metas, objetivos, público objetivo, requerimientos especiales, etcétera. Muchas veces tendremos que acosar a nuestro cliente física y mentalmente para poder obtener la información que se requiere para el proyecto, si no lo hacemos así, un proyecto de un sitio sencillo que estaría listo en dos semanas, puede postergarse meses con los insufribles “aún no hecho nada, pero te juro que esta semana si trabajo en ello, llámame el lunes”.

Estructura: Una vez que tenemos los alteros y alteros de información, hay que clasificarla en categorías
y subcategorías, siempre con el objetivo en mente de construir un mapa de sitio para nuestro proyecto. Realizar un esquema sencillo hecho con rectángulos para marcar las áreas en las que caerá la información es básico para poder definir la estructura del sitio. Recordemos que HTML lo único que hace es estructurar el contenido en rectángulos a los cuales les pone nombre (párrafo, header, etc) y que la herramienta principal de los CSS son también rectángulos (divs) los cuales deberemos decorar.

Diseño: Hasta esta etapa es cuando abrimos cualquier programa de diseño para poder construir gráficos estaticos describiendo las formas y colores que tendrá nuestro sitio. En el diseño  como tal, existen muchas otras metodologías de las cuales podemos echar mano para poder estructurar el trabajo que nos llevará hacia el éxito en los proyectos. Bruno Munari y su metodología de arroz verde es un ejemplo. Generalmente se construyen de dos a tres prototipos que se presentan al cliente, éste a su vez hace las observaciones que considera pertinentes (por favor diseñadores amantes de su trabajo, hay que practicar mucho en esta etapa el “dejar ir”), y nosotros los incorporamos.

Construcción y pruebas. Es el momento de abrir Dreamweaver o Flash para poder comenzar a construir nuestro sitio. Generar tablas con los slices desde Fireworks o Photoshop, también es parte primordial de esta etapa. Los slices son un paso muy delicado que en ocasiones es menospreciado, ya que de ello dependerá el qué tan limpio será el código generado en la tabla HTML. También podemos exportar slice por slice e importar las imágenes generadas una por una en Dreamweaver y acomodarlas en celdas o en divs. Paso siguiente es la construcción de plantillas, elementos de libreria, botones, gráficos extra, estilos css,  menús, vínculos, etcétera. Ya que tenemos toda esa infraestructura armada, podemos comenzar alimentar el “sistema de archivos interrelacionados entre sí” que acabamos de construir con contenido. En todo momento de esta etapa tendremos que estar vigilando estrechamente el correcto funcionamiento de lo que vamos generano, y al final podemos dirigir una prueba de navegación con algún conocido, el cuál nos arrojará información acerca del si están funcionando los elementos que planee como debieran.

Lanzamiento. Antes de subir la página al servidor, es nuestra última oportunidad para poder checar que todos nuestros archivos HTML y swf tengan títulos y descripciones para hacerlos visibles a los motores de búsqueda, agregar textos alternativos a las imágenes y parámetros title a nuestros vínculos. En otras palabras, dejar complentamente accesible nuestra página, de acuerdo a los estándares de la W3C.

Promoción. Dar de alta nuestra página en diferentes motores de búsqueda, contratar adwords, realizar convenios para intercambio de banners, anunciarla en sistemas impresos, instalar un sistema de seguimiento de clics como el de google analytics. Todo lo que se nos ocurra para lograr que nuestra página tenga presencia importante en la web. Para algunos sitios este último paso será más importante que para otros y para los freelance y empresas siempre brindará una oportunidad de aumentar la cartera de servicios.

El llevar a cabo esta metodología, no solamente nos permitirá poder concretizar de mejor manera los proyectos que estamos realizando, también nos ayudará a proteger nuestro trabajo si en cada paso requerimos la firma y autorización del cliente.

Anuncios

2 comentarios so far
Deja un comentario

FASCINANTE ja, como sea mi profe ya me lo habia enseñado… ups.. a pues si este es mi profe…. en fin, tenia algo sobre esto, de acuerdo a la clase, pero encontrarlo de nueva cuenta y mejor explicado, o vamos con un poco de redacción, pues mucho mucho mejor, asi ya no me pierdo, y asi, para aquellos que empezamos por el metodo empirico, pues ya tenemos otra base mas de cual partir… SALUDOS DESDE POZA RICA

Comentario por Gerardo Correa

[…] que este para mi sería el sexto paso de la metodología que propone Adobe para la construcción de sitios web. No hay comentarios por mucho Deja un comentario […]

Pingback por Posicionamiento de páginas web « Tuétano, creatividad que cala hasta los huesos




Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s



A %d blogueros les gusta esto: