TheCoffeMaker

Lo prometido es deuda, aquí podran ver el video de nuestra primer sesion. Utilizar UStream no es la mejor opcion para realizar screencasts, menos ahun cuando el WebcamStudio 4 Linux solo tiene una salida a 640×480, lo que hace que no se vea nada … realmente lo lamento, pero por el momento es lo que hay, sepan entender.

Para poder solucionar este problema y a modo de material complementario, siempre vamos a agregar un post. Así que no sean vagos y hagan click en el  titulo del post para poder ver el contenido y comentar o preguntar.

El proceso de desarrollo de Sitios Web

Obviamente, el proceso de desarrollo que utilicemos para desarrollar un proyecto web dependera de las caracteristicas propias del mismo proyecto por lo que no vamos a entrar en detalle sobre que proceso utilizar.

De lo que si estamos seguros es que el sitio debera ser relevado, diseñado, construido, testeado, puesto en produccion y mantenido, lo que no quiere decir que necesitemos utilizar un modelo de desarrollo en cascada, es todo lo contrario, de todas formas el post sera desarrollado linealmete y lo mas generico posible como para que cada administrador de proyectos pueda adaptar el conocimiento adquirido aqui en cualquier condicion de la vida real.

Saber que necesita nuestro cliente

Se un cliente real o nosotros mismos, siempre debemos sabes cuales son los requerimientos del proyecto. La captura de requerimientos, como uds. ya sabran, depende del tipo de proyecto, no es lo mismo relevar un sitio  web de presentacion de una empresa, que relevar un sitio que debera interactuar con algun proceso interno de la empresa (entiendase como proceso interno cualquier actualidad realizada por la empresa para lograr su objetivo). Existe mucho material sobre la “Ingenieria de Requerimientos” por lo que no me dentedre mucho mas sobre este punto.

Una ves que sepamos las necesidades de nuestro cliente, deberemos poner manos a la obra y empezar a diseñar la interfaz grafica de nuestro sitio.

Diseño preliminar

En DynamixSoft acostumbramos a presentarle al cliente una serie de alternativas de diseño para el sitio, realizamos 3 bocetos de diseño utilizando una herramienta de dibujo vectorial InkScape para acelerar el proceso creativo. Hacer esto, nos permite conocer, ademas de los requerimientos secundarios de nuestro cliente, el gusto estetico del mismo y asi afinar el diseño, obviamente, si nuestro cliente carece de buen gusto, sera nuestra obligacion guiarlo para que pueda tomar la mejor decision para su negocio. Para poder llegar a un acuerdo, en el que el cliente este satisfecho con la imagen propuesta es recomendable realizar varios workshops (no mas de 3, ya que necesitamos pasar lo mas rapidamente a la maquetacion) para tener un buen feedback.

Como dijimos en nuestro live show, centraremos nuestro diseño en el uso de un framework CSS (volveremos a hablar sobre este tema mas adelante) por lo que utilizaremos un template para iniciar el diseño grafico del sitio. Esto nos permite mantener la coherencia de las dimensiones.

Bien, primero, deberemos generar el template para el BluePrint CSS, para ello existe una aplicacion web, donde le pasamos el numero de columnas, la dimension de las columnas y la dimension de los espacios entre columnas y como resultado nos descarga un archivo svg. Sigan el link y guardenlo en sus favoritos, asi que tienen un acceso rapido a esta aplicacion.

Abrimos el archivo y nos encontraremos con un archivo en blanco, con lineas verticales que delimitan columnas y espacios.

A partir de este archivo deberemos generar nuestros bocetos, una ves terminados podremos mostraselos a nuestros clientes para la seleccion del prototipo en el que trabajaremos en la proxima fase.

Maquetacion

Ya hemos decidido junto al cliente cual sera el diseño en el que trabajaremos, por lo que ahora necesitaremos mejorar las imagenes que componen nuestro proyecto, InkScape es una excelente herramienta para trabajo vectorial, pero como es obvio, necesitaremos pulir estas imagenes. Para esto utilizaremos Gimp, la opcion libre al PhotoShop de Adobe, esta herramienta es muy potente y nos permite hacer la gran mayoria de las cosas que podemos hacer con su contraparte privativa.

Maquetar un sitio consta de dos partes, primero hacer la produccion grafica, esto es, hacer los retoques necesarios en las imagenes o crearlas para realizar el diseño grafico “final” (final es una forma de decir, sabemos que todo proyecto esta sujeto a cambios) en Gimp y luego pasar al HTML/XHTML y editar las hojas de estilo.

Les aconsejo que hagan uso extensivo de las capas y que separen a cada imagen en capas para que les sea mas facil exportar las imagenes para que se ajuste a la maqueta html/xhtml y ademas facilitar los cambio de diseño en el futuro.

No me voy a detener mucho mas en como utilizar el Gimp, exite infinidad de recursos en internet, por lo que pueden invocar a San Google para investigar sobre el asunto.

Bien, ya deberiamos tener el diseño en Gimp terminado y las imagenes exportadas y optimizadas para continuar con el proximo paso.

Primero nos descargaremos el framework CSS, BluePrintCSS, tambien podemos usar herramientas web que nos ayuden en la generacion de nuestro CSS. Lo agregamos a nuestro proyecto y ya podremos empezar a trabajar en la maquetacion web. En este paso, ya prodremos empezar a jugar con JQuery (o cualquier otro framework Ajax/JavaScript que les guste) para trabajar en las interacciones de nuestro sitio.

Hora de hacer un cocktel, de la maqueta al codigo

Bien, ya estamos listos para empezar a codificar, como vimos en el video existen muchas opciones para usar como sistema de adminsitracion de contenidos, pero como hemos visto WordPress nos permite realizar sistemas web rapidamente, faciles de programar y mantener y ademas es muy facil de usar, por lo que la curva de aprendizaje para el cliente/usuario final es minima.

Para utilizar BluePrint con WordPress, necesitaremos instalar en nuestro WP el tema SandBox, el cual deberemos editar para ajustarlo a nuestras nesecidades.

En DynamixSoft, si bien contamos con procesos y estandares, creemos que cada uno de nuestros colaboradores tiene la libertad de utilizar el software de desarrollo con el que se sienta mas comodo, obviamente sugerimos utilizar NetBeans como IDE para desarrollar practicamente en cualquier lenguaje (siempre que este soportado por el NB), de hecho, nuestros estandares estan desarrollados para soportar esta libertad (salvo cuando se usan tecnologias que nos restrinjan, como desarrollar una aplicacion usando el NetBeans Platform o su contraparte de Eclipse).

Bien, ahora queda en sus manos seguir investigando y profundizando sobre el tema, les dejo unos cuantos links para que puedan seguir y en cuanto tengan alguna consulta … Ask to TheCoffeMaker!!!

• BluePrint CSS
• Lista de compatibilidad de Browser
• BP Wiki
• Demostraciones
• Learn BluePrint Basics
• BP Quick Guide
• BluePrint CSS 101
• Personalizacion de Tipograficas
• BluePrint + JQuery
• Desarrollo Web con Gimp y BluePrint CSS
• SandBox BluePrint CSS Theme y WordPress
• Frameworks CSS Populares
• InkScape
• Tutoriales InkScape
• Gimp
• Recursos Gimp
• NetBeans
• WordPress
• WordPress Codex

Creo que con esto estamos para que sigan viendo sobre el tema … cualquier cosa, pregunten!!! estoy para responder