Desarrollo de Techos SCT

Al sitio de TechosSCT lo recuerdo con mucho cariño por su diseño; los diseños en negro me encantan, siempre le da elegancia a cualquier sitio, al contrario del blanco, que a pesar que no es malo, lo hace ver todo muy ordenado.

El cliente requería mostrar la gran variedad de productos y servicios que manejan, todo esto ilustrado con imágenes de gran calidad de cada uno de sus proyectos realizados alrededor de Costa Rica.

Uno de los mayores retos fue distribuir el contenido en categorías, acomodarlo propiamente en las URLs, y que fuera de fácil acceso a través del menú. Existen categorías de tipo de producto y servicio, y dentro de ella una lista de las variedades que contenía. La idea en concepto es bastante sencilla: Si veías la lista completa de productos y servicios, se iba a tomar un ejemplar de la lista, para sacar la fotografía y usarla en la descripción, todo esto para evitar estar creando nuevas imágenes de forma innecesaria, y luego el diseño se repetiría para listar los items de ese producto o servicio.

El menú de la parte derecha dentro de la sección de Productos y Servicios requería un estilo de acordeón; durante la investigación se pensó en usar alguno ya hecho -algún plugin-, pero el comportamiento de estos no rendía las especificaciones de comportamiento, ya que muchos de estos una vez después de hacerles click se mantenían desplegados, y era posible que el menú tuviese muchos items dentro y no podíamos permitirnos hacer que el usuario se desplazara mucho con el mouse. Al final la idea del plugin se desechó, y usé jQuery y manejo de eventos para activar la apertura y cierre del menú.

La rotación de imágenes en la Pantalla Principal, tuvo su reto, mucha gente está familiarizada con Flash, pero desconocen que hacer cada uno requiere muchas veces un esfuerzo tan grande como hacer una aplicación; por sí misma es un proyecto aparte. Nunca había hecho un flash así, por lo tanto fue un reto interesante; por lo general las transiciones de imágenes son simples, a esto me refiero que cada que se carga una imagen, se procede con la siguiente, pero esta requería 3 imágenes, desplegar su información, y hacerlo de forma cronometrada. Recuerdo que uno de los primeros demos fue algo "exagerado", ya que usé una transición de caída, y otra de movimiento de izquierda a derecha, por lo que luego se optó por el denominado "fadein" o transición por medio del canal alfa, que hace que la imagen aparezca de transparente a sólido.

El sitio fue realizado en 2009.