Quiroga Comunicacion

3. Diseño web / programación front end

Una vez que tenemos la web pintada, planificada y esquematizada, ya podemos ponernos a generar codigo HTML para que sea visible en un navegador. Hasta ahora nuestra web es solo un conjunto de imágenes o maquetas, y una serie de esquemas que distribuyen la informacion y la manera de navegar por ella.

En este punto un maquetador web, haciendo uso de los lenguajes HTML y CSS “corta” las plantillas producidas en la fase de diseño y las convierte en un conjunto de ficheros .html y .jpg (o .gif). Se llama a esta parte del proceso “cortar” por que el maquetador con el programa de tratamiento de mapa de bits va recortando imágenes y encajandolos en una estructura (tambien llamada layout) HTML / CSS. Asi pues el maquetador tratara de producir una pantalla HTML lo mas fiel posible a la plantilla original que le paso el diseñador.

Una vez hecho esto, el mismo maquetador web o un especialista en interfaces web puede añadir diversos comportamientos, efectos, animaciones, etc, con el fin de dotar a la web de una mas rica experiencia de uso al visitante. Es lo que se conoce como programación Front End, llamada asi por ser lo que esta al frente de la web, lo primero que ve el usuario cuando visita una web determinada.

El objetivo en mente es lograr que el usuario se quede el mayor tiempo posible, y que repita la visita en un futuro cercano. No solo por el diseño de la web, que sea cómodo y agradable, si no que el contenido sea util y actualizado periódicamente.

Entran pues en juego factores como la navegabilidad, usabilidad, interactividad y la arquitectura de información. Conceptos de los que hablaré en futuros posts.

Como en el paso anterior, el maquetador web primero produce un boceto de la home y lo presenta al resto del equipo implicado o al cliente. Una vez aprobado produce en serie el resto de las pantallas, hasta tener una serie de paginas HTML con sus correspondientes carpetas de recursos (imágenes, hojas de estilo, ficheros swf de flash, etc…)

2.Diseño gráfico.

La documentación y especificaciones del proyecto se pasan al equipo de diseño gráfico. Esta documentación consiste en unos requisitos del proyecto, y una serie de pantallas esquematizadas. Un esqueleto de pantallas por asi decirlo. Donde habrá botones en esta documentación solo hay rectangulos con texto plano.

Ahora es el momento del profesional del diseñador gráfico de dibujar todo esto en un aspecto agradable acorde con el espíritu que se quiere conseguir. Normalmente los diseñadores gráficos empiezan con el logotipo. Una vez aprobado el logo saltan a la cabecera y menú para terminar haciendo un ficticio de pagina home. Una vez aprobada la home, la usan como plantilla para sacar el diseño de todas las demás páginas.

En este momento del proceso ya se empiezan a tomar decisiones importantes para el final desarrollo del website. En primer lugar se define el “look & feel” del website, algo determinante en la estadística del tiempo medio de permanencia de un usuario en nuestra página. Asi mismo el diseñador gráfico puede jugar con el puzzle que es el esqueleto de secciones cambiando la disposición del mismo. El objetivo último siempre es el mismo, facilitar la navegación y que el usuario se quede el máximo tiempo posible en nuestra pagina web.

El software utilizado en esta fase puede variar, pero el mas común es Adobe photoshop. Otros programas que trabajen sobre mapa de bits como corel photopaint, gimp, tambien pueden usarse. Incluso hay quien diseña sus web sobre vectorial con freehand, illustrator o inkskape. Y hay quien usa de todo un poco.

Al final de este proceso se producen una serie de ficheros maestros que son paginas “ficticias” de como se verán cada página de la web al final del proceso. Pero estas paginas son solo contenido gráfico, no funcionan, ni pueden verse en un navegador.

1.Concepción y planificación.

En este paso, se piensa y planifica la página web. Lo primero y primordial es marcarse un objetivo. Responder a la pregunta ¿para que queremos una web? En web comerciales, cuyo objetivo es vender productos (tienda on line) o captar clientes, se define una estrategia comercial.

Normalmente, un directivo o una cabeza pensante, o el cliente, o un ejecutivo de cuentas en una reunion con el cliente final, se sientan y deciden todas estas cuestiones. Se definen las secciones que va a tener la web, con lo que tenemos una estructura de navegación, o las “partes” que tendrá la web.

También es común hacer un estudio de la competencia, visitando web similares, para ver como se aproximan al tema en cuestión sobre el que trata el web site. Esto es fundamental para estudiar si nuestra web es viable comercialmente hablando, o es un nicho de mercado relativamente virgen y rentable.

Un punto clave es ojear en Google las palabras claves que mas nos puedan interesas para centrarnos en aquellas que tengan menos competencia. Esto ayuda a definir nombres de secciones, texto sobre el que habrá que incidir, y búsqueda de un dominio si no teníamos uno ya.

Normalmente al final de esta parte del proceso, ya se tiene claro el número de pantallas que va a tener nuestra página, las secciones temáticas en las que se dividirá la web, y el menú de navegación. Todo esto se esquematiza en una documentación base del proyecto (realizada en algun software de presentaciones sencillas y esquemáticas, como por ejemplo microsoft powerpoint).

Bueno pues empezamos con nuestro blog. Para ir abriendo boca, algo con mucha chicha: el proceso de creación de un Web site. Lo que yo llamo “la cadena de montaje”.

El hacer una página Web es un proceso que puede o simplificarse mucho, o complicarse mucho, según la pagina Web que se desee. (No es lo mismo un blog personal para compartir fotos con los amigos que un portal corporativo). Pero a grandes rasgos, cuando se hace un trabajo serio y profesional, el proceso es como una cadena de montaje, en el que en cada fase se realiza una tarea determinada, y el resultado pasa a la persona siguiente, que realiza a su vez la tarea que le toca. Y asi hasta que el resultado final por el trabajo de varias personas es una pagina Web lista para salir al aire. Por supuesto que después puede haber un trabajo de mantenimiento, de actualización de contenidos, de mejora, o de modernización de la Web. Por supuestisimo que si. Una Web es un producto “vivo”, que cambia, mejora, evoluciona, y que en ultima instancia tiene un tiempo de vida útil, tras el cual o desaparece de la red, o se hace una Web nueva más moderna.

A grandes rasgos el proceso de creación de una web es el siguiente:

1. Concepción y planificación
2. Diseño grafico
3. Diseño web / programación front end
4. Programación web / programación back end
5. Postproducción: Promoción del web site (SEO, SEM, banner, mailings, enlaces)