Esto es una recopilación con material exclusivo de cómo se llevó a cabo el proyecto web para la oficina de turismo de santiago de cali, ustedes podrán ver este sitio web en su primera entrega y podrán observar todos los procesos que se llevaron a cabo para su desarrollo final.

Los temas a tratar se volvieron un poco extensos por eso se decidió partir el artículo de tres en tres, los primeros tres temas a tratar serán:

1. Requerimientos técnicos
2. Look & feel
3. Diagramación

Temas

1. Requerimientos técnicos
2. Look & feel
3. Diagramación
4. Adaptación de estilos
5. Optimizacion
6. Personalización de extensiones de terceros
7. Seguridad de CMS
8. Beta test
9. Entrega Cliente

Para comenzar quiero darle las gracias a todas las personas blogger y comunidades que hacen posible que  millones de personas aprendamos dia a dia de la experiencia de trabajar en diferentes proyectos y que luego sin ningún tipo de lucro compartamos con la comunidad  nuestras experiencias profesionales, porque como dijo alguien por ahí es más importante el conocimiento que la inteligencia, por eso después de mucho tiempo de estar trabajando en este medio y con el recorrido suficiente de haber hecho parte de grandes proyectos en la industria colombiana tanto en entidades públicas como privadas quiero darles a conocer mi experiencia de cómo desarrollar un proyecto web profesional basado en nuestro magnífico CMS JOOMLA. El tiempo que tenemos para la entrega es de 5 días hábiles.

En esta guía no les enseñare a programar pues no es necesario saber programar para este proyecto debido a que los requerimientos del cliente se pueden cumplir a cabalidad con las herramientas que nos brinda JOOMLA y algunas herramientas de terceros. sin embargo es posible que si no tienen algún conocimiento acerca de este tipo de  lenguajes la diagramación les parezca algo enredado pero al final es bastante lógica.

Dia 1  “El cliente puede llegar a ser el rey, pero no es el director de arte.” Von R. Glitschka

Lo primero que debemos tener en cuenta es que antes de empezar con cualquier proyecto debes saber cuales son las necesidades reales de nuestro cliente, si el cliente aún no sabe cual es su necesidad primaria en la web es nuestra obligación  guiarlos en este proceso buscando las necesidades básicas que se suplirán teniendo un sitio web, y es ahí donde hablaremos un poco de los...

Requerimientos Técnicos

Para este cliente en particular se debe  tener en cuenta algo fundamental, su principal objetivo será mostrar la oferta turística de su ciudad de forma fácil y sencilla, porque entre más intuitivo sea, tendremos más posibilidades que nuestro sitio web sea atractivo para los usuarios y genere mayor tráfico.

Dentro de estos requerimientos técnicos ya se tiene en cuenta el dominio y el hosting sin embargo para su entrega final se usará un subdominio del contratista y se entregará un inicio rapido (quick-star) con datos de ejemplo del sitio web.

Requisitos

1. Mostrar en formato de video la oferta turística de su ciudad
2. Mostrar los eventos de la ciudad
3. Tener un Blog de noticias
4. Formulario de Contáctenos

Dia 2  “Hacer las cosas lo más simple posible pero no más sencillo.” Albert Einstein

Hoy empezaremos trabajando el look & feel del sitio web para nuestro cliente, los que desconocen este término es una expresión inglesa  que en el contexto web hace referencia a las características  del sitio web hablando del color y su forma, si no eres un diseñador podrás tener recelo con esta parte pero es el resultado de un problema que enfrenta nuestro cliente y es nuestro trabajo ofrecerle la mejor solución web tomándonos el tiempo de pensar en  la interface de nuestro proyecto.

Antes de hacer el look & feel se debe hacer otro proceso realmente importante como lo es un wireframe o esquema de página. el principal objetivo es la funcionalidad, comportamiento y jerarquía de contenidos que se mostrarán en el sitio web, este esquema carece de color y estilo gráfico pues eso no es su principal objetivo eso se lo dejamos al look & feel

Ustedes pueden usar la herramienta gráfica de su preferencia, yo por mi parte usaré illustrator cs6. Existen muchas herramientas en el mercado que te ofrecen componentes básicos y avanzados que te facilitarán crear un wireframe y look & feel de tu proyecto web.

Lo más importante de este proyecto web es que será diseñado bajo el concepto malinterpretado por algunos como lo es el Mobile First, éste hace referencia a poder hacer más accesible la información pensando en la experiencia de usuario que brinda nuestro sitio web muy de la mano y complementarias una de la otra  como lo es el Responsive Web Design que busca la adaptación de nuestro sitio web a diferentes resoluciones brindando también una mejor experiencia de usuario a la hora de navegar. si desean saber un poco más acerca de estos nuevos conceptos pueden leer estos articulos recomendados: diseño adaptivo y diseño responsivo.

Empezaremos creando nuestro lienzo con una medida inferior a <768px en donde pensaremos primero en como mostrar los módulos o componentes esenciales para nuestro cliente, tendrá muchos cambios en su producción final pero esta es su primera fase, mi estilo gráfico está orientado al minimalismo web en donde hay unas leyes esenciales que se aplicaron a este proyecto:

1. Reducción: muestra lo que realmente ejerce acciones e interacciones con el usuario lo absolutamente imprescindible.
2. Omitir: no satures con tanta información el sitio web, muestra lo que al usuario realmente le interesa.
3. Detalles: Cuida el más mínimo de los detalles de tus componentes, marcaran la diferencia entre los usuarios.
4. Espacios en blanco: busca el equilibrio en tu diseño un espacio en blanco es una buena solución

Este es el resultado final de nuestra propuesta gráfica para nuestro cliente en donde se intenta  ser lo más intuitivo posible para facilitar la navegación del sitio web y mejorar la experiencia de usuario.

Vista resoluciones <768px

Vista resoluciones >768px

una vez definida tu propuesta sustentada y aprobada por el cliente empezaremos por la diagramación del sitio web… 

Dia 3  “Piensa más, diseña menos.”  Ellen Lupton

Debido al corto tiempo que tenemos debemos hacer uso de herramientas que mejoran nuestro desempeño.lo primero que debemos tener para empezar a diagramar nuestro sitio web es:

1. Tu espacio de trabajo configurado en este caso trabajaremos sobre un dominio nuestro, ya tenemos una nueva carpeta creada llamada ../ofturismo/ ahí alojaremos nuestro JOOMLA empaquetado que trae un framework de desarrollo de front-end llamado t3-framework construido bajo Bootstrap 3 de los parceros de joomlart  esta herramienta facilitará la administración, optimización y estilización de nuestro proyecto web brindandonos mayor flexibilidad y escalabilidad para mantener siempre nuestro sitio web actualizado y seguro.

Después de descargar nuestro JOOMLA empaquetado o inicio rápido(quick start) alojaremos el archivo ZIP en nuestra carpeta ofturismo lo descomprimimos e instalamos, su instalación es muy sencilla se instala como cualquier JOOMLA lo único que debes tener en cuenta es que en la parte donde dice instalar datos de ejemplo seleccionas datos por defecto listo.

Una vez hecho esto podrá ver algo como esto desde una resolucion mayor a los >768px:

para  las resoluciones más pequeñas la vista sera asi

Después de tener nuestra plantilla de inicio rápido instalada pasaremos a ir al back-end de JOOMLA para empezar con la diagramación y poder personalizar nuestra nueva plantilla. Para esto nos dirigiremos a Extensiones/Gestor de plantillas/. Una vez ahí ingresamos a la plantilla por defecto llamada t3_bs3_blank - por defecto cambiamos el nombre y damos clic en guardar como copia como se muestra en la imagen

Ahora todos los cambios que hagamos se aplicarán a nuestra nueva plantilla con el estilo personalizado llamado of-turismo pero como no  tenemos configurado nuestra nueva plantilla no se verá hasta que seleccionemos la plantilla que hemos creado desde el menú principal. Para esto nos dirigimos a Menus/Menu Principal/  e ingresamos a nuestra página por defecto esta es la que se ve marcada con una estrella amarilla con el título Home/Casa

Una vez ahí seleccionamos el tipo de plantilla que queremos se vea en nuestro index (página principal) y listo.