Dec 16, 2011

Carnival LiveCam y los mockups

Como ya lo anuncié en ZonaQt y la Qt Derveloper Network, estoy trabajando en Carnival LiveCam, mi nuevo proyecto.
Ahora me gustaría contarles un poco el detrás de escena de Carnival LiveCam, en este caso todo lo relacionado a cuestiones de diseño, interfaz, estética, ergonomía, y funcionalidad.
Yo normalmente a medida que se me ocurren nuevas ideas para implementar, dependiendo de que tan compleja sea la idea, suelo realizar sketches muy simples que suelo diseñar y rediseñar cada vez para luego llevar eso a código, las herramientas que suelo usar para realizar esos sketches son simplemente una tableta gráfica de las más económicas y un simple programa de dibujo, la mayor parte del diseño surgió de esta combinación tan sencilla.
Este post no va a ser practico, sino mas bien netamente teórico, para que puedan apreciar un poco las ideas y los patrones de diseño que suelo utilizar mas comúnmente en mis programas mas complejos.
El primer sketch muestra la interacción que existe entre los diferentes módulos del programa. Estos módulos principales son por el momento 6:

  • Core: El corazón del código fuente, es el encargado de hacer la conexión entre todos los módulos, conexión de señales y slots, y una inicialización mínima.
  • Shell Manager: Gestiona la interfaz que utilizará Carnival LiveCam.
  • Driver Manager: Gestiona los drivers a un nivel muy básico, simplemente realiza la carga y la descarga de los mismos.
  • Device Manager: Gestiona los dispositivos creados por los drivers.
  • Plugin Manager: Gestiona los Candys.
  • Stream Manager: Todavía hace falta desarrollar aún más este módulo, pero su propósito es la de agregar la funcionalidad de grabar video y tomar fotos, entre otras cosas.

Este diseño lo realicé siempre teniendo en mente que el programa debía ser completamente modular, pero a la vez pensando en que Carnival LiveCam debía de tener una base ligera, donde la mayor parte del trabajo se desplaza hacia los plugins. Esto, lejos de complicar el desarrollo de los plugins, hace que se vuelva mucho más flexible su desarrollo, y lo que hace la base del programa es simplemente definir el protocolo de comunicación entre los plugins.
Es como desarrollar pequeños programas que luego se integran todos juntos a Carnival LiveCam.


Aquí tenemos el mockup que hice para la Candy Bar, este me costo bastante diseñarlo, ya que el diseño de la interfaz esta pensado para funcionar tanto en PC's de escritorio con pantallas grandes, como en tablets con pantallas más pequeñas. Por lo tanto la idea es que todo pueda manejarse usando el mouse o los dedos. Y además el diseño debía ser lo más compacto e intuitivo posible.
Una decisión muy complicada, y este fue el mockup que realicé:


También durante las investigaciones realizadas para Carnival LiveCam, me fui encontrando con artículos muy interesantes sobre cuestiones de diseño, que más adelante puedo implementar en el programa:


En estos momentos estoy desarrollando el módulo que permite mostrar varias fuentes de capturas al mismo tiempo pudiendo cambiar las disposición de las mismas.
La idea es utilizar un mecanismo similar al que se usa para manejar ventanas en un entorno gráfico como puede ser KDE, Gnome o cualquier otro. La cuestión es buscar un diseño simple que permita mover, redimensionar y rotar las diferentes capturas, pero que se pueda ser utilizado principalmente.
Para ello, se me ocurrió que podría utilizar el concepto de los Love Handles de Compiz.


Y no solo eso, sino que también se podrían aplicar conceptos mas avanzados como los de tiling y snapping.
También pienso agregar un nuevo control a cada Candy que me permita seleccionar a que frames aplicar el efecto.


Este será el próximo commit importante del proyecto. Cualquier duda y sugerencia será bienvenida :)

1 comment: