Tras contactar con Peldi, me facilitó una licencia gratuita del programa, y después de probarlo durante un buen rato, lo menos que puedo hacer es escribir una review. Aunque antes de entrar en detalles sobre la aplicación, para aquellos que no estén familiarizados, voy a dedicar un apartado a explicar algunos conceptos relacionados con el mundillo de la “arquitectura web”.

Nota: Para los más puristas, me gustaría aclarar que éste no es un artículo exhaustivo sobre el tema. Los términos utilizados suelen ser muchos (wireframe, mockup, prototype, arquitectura web, blueprint, layouts… más las correspondientes traducciones al castellano) y en algún caso, el significado entre ellos es muy sutil. Así pues, para este post, daré por buenas mis definiciones “caseras”.

De wireframes y similares

En general, llamamos wireframe a un boceto que define el contenido y la funcionalidad de una web, alejándose completamente del diseño de la misma. En castellano, solemos hablar de “arquitectura web” o simplemente “arquitectura”.

Ejemplo de wireframe para una comunidad de Ikea®

Un wireframe entra (o debería entrar) en la fase inicial de cualquier proyecto web, y ayuda a que la gente implicada (programadores, diseñadores, etc) trabaje sobre un elemento común: la estructura. Al trabajar únicamente en la arquitectura, es fácil centrarse en puntos clave como la disposición de los elementos, la navegación o la funcionalidad, y nos ayudan a hacernos preguntas que si salieran en la fase gráfica o de implementación seguramente supondrían rehacer parte del trabajo. Además, al ser aprobados por el cliente, los siguientes cambios se focalizan en aspectos como gráficos o copys, pero no ya en la estructura (aunque con el cliente, donde dije digo…).
Resumiendo: un buen wireframe puede salvar muchas horas de cambios posteriores, tanto en la programación como en el diseño.

A partir de aquí, hay gente que distingue entre los wireframes estáticos y los wireframes funcionales, aquellos que permiten una navegación. A estos últimos, se les suele conocer como prototypes, mientras que el estático se aproxima más al concepto de mockup, que vendría a ser un boceto o bosquejo, sin interactividad.

Si te preguntas porqué una arquitectura debería ser navegable, has de tener en cuenta que un proyecto medio puede contar fácilmente con 30 o 40 wireframes. Al dotar de interactividad, puedes hacer un circuito lógico que facilita enormente la compresión al cliente, a colaboradores, etc.

Microsoft Visio es uno de los softwares históricos para llevar a cabo este tipo de tareas, aunque en los últimos años ha ganado muchísima fuerza Adobe Fireworks. Entre medio están los que no abandonarán jamás el lápiz y el papel, los que lo hacen todo en Photoshop… y mejor lo dejo en este punto porque el tema da para mucho :)

El programa

Balsamiq Mockups es una aplicación AIR pensada para ayudarnos a crear de manera fácil y rápida nuestros wireframes. Lo consigue a través de un sistema de drag-and-drop de componentes predefinidos. Todo es tan fácil como buscar el elemento que necesitamos (un botón, un scroll, una imagen) y arrastrarlo a nuestro canvas. En pocos minutos podemos tener nuestras pantallas definidas.

Arquitectura de un un post interior de LLops Blog hecho con Mockups.

El set de componentes es bastante amplio y, en general, podemos construir cualquier tipo de interfaz.

Una muestra de la librería.

Una vez elegido un tipo de control, podemos editar su texto, cambiar tamaño, posición… y además contamos con un panel flotante que nos da opciones específicas para cada uno:

Opciones de un ComboBox.

Una vez terminado el boceto, podemos exportar un png.

Obviamente, podemos guardar nuestro archivo original para volver a editarlo. Para ello se guarda un archivo de configuración en formato bmml, que en realidad es un xml que describe todo lo que hemos realizado.

En cuanto a la interfaz del programa, es sencilla, intuitiva y todo responde bastante bien. Se necesitan pocos minutos para sacarle todo el provecho al programa.

Ventajas de Balsamiq Mockups

Desde mi punto de vista, la principal ventaja es la productividad, o dicho de otra manera, lo rápido que se puede hacer cualquier cosa. El hecho que cuente con tantos componentes ahorra mucho tiempo “de pintar”, asemejándose más a colocar piezas de un puzzle.

Hay algunos componentes que están muy bien resueltos, y una vez que te metes a editarlos te dan un buen número de opciones.

Como manejo general, permite algunas opciones sobre los controles como agruparlos, bloquearlos o posicionarlos en función de otros componentes.

También se agradecen “detallitos” de la aplicación como su sistema de tabs para los archivos, hacer/deshacer ilimitado o búsqueda rápida de componentes.

Desventajas de Balsamiq Mockups

Curiosamente, muchos de sus puntos fuertes se pueden ver también como débiles.

Por ejemplo, la librería de componentes: el número, a pesar de ser amplio, es limitado, y no tiene porqué ceñirse a lo que buscamos. Un caso claro lo encontramos en el componente cowerflow (el famoso pase de imagenes que utiliza iTunes). Está añadido porque está de moda, pero seguramente hace un año no lo hubiera incluido. Lo mismo puede pasar con cualquier otro caso específico de nuestro proyecto. Seguramente esto se hubiera paliado con una herramienta de dibujo, pero no existe ninguna, y esto limita muchísimo.

Algunos componentes se quedan cortos en opciones.

Aunque el ajuste automático se agradece al principio, cuando trabajas con muchos controles se echa en falta un sistema más preciso de ajuste (entrar coordenadas, reglas, etc).

El canvas es dinámico, en función de lo que vas añadiendo utiliza scroll horizontal y vertical, pero no puedes fijar de entrada el tamaño del documento.

El look and feel es cachondo y cumple con el cometido de evitar que nos centremos en el diseño, pero para algunos clientes puede resultar demasiado infantil o poco profesional, y no hay (por ahora) más alternativas.

Por el mismo camino, sólo se puede elegir entre una fuente de sistema o la odiada Comic Sans.

Es imposible hacer una navegación mínima ya que no permite ningún tipo de interactividad.

Una cuestión de enfoque

Balsamiq Mockup es un muy buen programa, pero en función de tú nivel de exigencia a la hora de hacer wireframes puede quedarse corto.

Si se enfoca únicamente (que ademas ya lo indica el nombre) para hacer bocetos estáticos, para una gran mayoría de interfaces, de forma rápida y ágil, y estás contento con la estética que te proporciona, no te lo pienses dos veces.

Por contra, si hay uno o más puntos de las desventajas comentadas que consideras vitales, seguramente hay otras opciones mejores (yo estoy bastante enamorado de Fireworks)

Para acabar

Personalmente voy a utilizar Mockups. Para la gran mayoría de arquitecturas creo que me funcionará. Lo único que realmente echo en falta, y aún sabiendo que no es el enfoque de la aplicación, es que no funcione para hacer prototypes. Esperemos que Peldi siga adelante con el programa y le vaya añadiendo nuevas opciones, componentes, estilos, etc.

Si quiere probarlo, cuenta con una versión demo (que no deja guardar documentos ni exportar la imagen), pero échale a un ojo al sistema de licencias, que gracias a una estrategia bastante inteligente de Balsamiq, quizá puedas conseguir una copia completa gratuitamente.

>> Descargar Balsamiq Mockups

6 comentarios | Permalink | Add to del.icio.us

LLops Blog, 2008

Mi proceso anímico frente a cada nueva pieza suya suele cumplir este orden: expectación, admiración y frustración (sana, pero frustrante al fin y al cabo). Igual que en el ajedrez, que cuanto más progresas más consciente eres de la inmensidad del juego, ponerte delante de una obra de Yugo Nakamura es como enfrentarte a un Gran Maestro: cuanto mejor seas más limitado te hará sentir.

Su última obra en cuestión es FontPark 2.0 para Morisawa, una compañía japonesa con más de 80 años de antigüedad cuyo negocio gira entorno a la tipografía. Y como no podía ser de otra manera, la tipografía juega el rol principal en esta micro: a partir de un alfabeto japonés puedes arrastrar letras al escenario y hacer tus propias composiciones, dibujando caras, paisajes o lo que se te ocurra.

Para interactuar con la letras, básicamente contamos con los movimientos del mouse para mover/rotar, el mouse-wheel para agrandar/disminuir y un doble-click para copiar, y con eso tienes todo un abanico de posibilidades para “dibujar” cualquier cosa que te imagines.

A pesar de que una idea tan sencilla podría caer en la simplicidad, la forma de interactuar con la aplicación es tan exquisita que rápidamente te ves envuelto en una experiencia que fluye con soltura: jugar con cada letra tocándola con suavidad, sacudiéndola violentamente o lanzándola fuera de la pantalla es un gustazo.

Y si te estás preguntado si es posible crear algo interesante a partir de letras, justo al entrar al site verás el proceso de creación de distintos dibujos (sí, al publicar un dibujo se guarda todo el proceso). Para muestra un botón:

La verdad es que es sorprendente el nivel de las ilustraciones de los usuarios, y eso aún hace más meritoria la obra de Yugop, porque más allá del diseño y el desarrollo, la idea funciona.

Y hablando de diseño, gráficamente me encanta. Todo el site juega con el blanco y el negro, es limpio, elegante y funcional.

Y en el apartado de programación, ¿qué decir? como cualquier cosa que haga este japonés, técnicamente es una delicia, todo funciona de forma ágil y está cuidado al milímetro. Valga como ejemplo el siguiente detalle del título de color negro, que cambia a blanco al solapar una letra. Puede parecer una tontería, pero da una idea de la minuciosidad con la que se ha trabajado.

Mención especial merece la física de las letras. Si tienes alguna referencia en Flash de algo que se mueva de manera similar, por favor, pásamela, porque yo no recuerdo nada igual. Obligatorio probarlo.

Y un +5 para el algoritmo con el que convierte la letras en vectores. Al principio pensaba que tendría todas las letras “preparadas”, pero me dejó parado cuando vi que se puede insertar cualquier carácter:

En este ejemplo he metido un ampersand, el caracter ascii 126… ¡e incluso una c trencada! Vaya, que da igual qué teclado o idioma uses, cualquier símbolo introducido lo convierte a vector, y en diferentes tipografías. ¿Como cojones lo hace?

Por lo demás, se pueden votar las ilustraciones, hay galerías, reproducción automática… Como punto negativo no me gusta el audio, se hace muy cargante y no hay botón para desactivarlo.

En fin, mejor que te pases por el site y te dediques a disfrutar un rato de la penúltima maravilla de Yugop. A estas horas, seguramente debe estar programando la última.

Visitar FontPark 2.0

9 comentarios | Permalink | Add to del.icio.us

LLops Blog, 2008

He de reconocer que de entrada no era un libro que me llamara mucho la atención, debido principalmente al subtitulo “una guía para principiantes”. Sin embargo, me picó la curiosidad este post escrito por Lee Brimelow: The Best ActionScript Book Ever Written, en el que deja el libro por las nubes. En términos similares se expresaba Josh Tynjala (desarrollador que merece todos mis respetos) en este otro post. Así pues, decidí darle una oportunidad y me hice con una copia. Una vez leídas sus 350 páginas, puedo entender el porqué de unas críticas tan favorables.

A continuación, mi review sobre el libro.

De un vistazo

Este es un libro que enseña ActionScript 3.0 desde cero en el contexto de Flash CS3. Y lo mejor es que lo hace de una forma muy clara y amena.

Empieza cubriendo temas básicos no sólo de ActionScript, sino de programación en general. Poco a poco va enseñando conceptos propios de AS3 y de Flash, y en el camino introduce OOP, que se va aplicando progresivamente en el resto de capítulos que cubren temas más específicos, como Bitmap, XML o Vídeo.

Dos características inusuales

La primera, anecdótica, es que este libro pertenece a la serie Adobe Developer Library, pero por primera vez no vemos en portada el típico animal que acompaña cada uno de los libros de esta publicación, sino un cover muy alejado del estilo O’reilly.

La segunda, más importante, marca un precedente dentro de este género: es un libro a color. Al leer siempre los libros en blanco y negro, no me había dado cuenta lo mucho que se agradece este hecho, y más tratándose de programación en Flash, donde el color juega un papel tan importante.

Los autores

Está escrito por Rich Shupe y Zevan Rosser, dos programadores que llevan usando Flash durante años y que imparten clases en New York. Esta faceta educacional queda patente en este libro, no sólo por la forma en que fluye o por la claridad con la que se explican, sino también porque han escrito una obra que en 350 páginas cubre un gran abanico de lo que es ActionScript, la mayoría de veces sin entrar en mucha profundidad pero logrando que no queden lagunas.

El temario

El libro cuenta con 15 capítulos que se engloban en 6 bloques.

Parte I – Getting Started

   1. ActionScript Overview – Vistazo general sobre AS3 y la plataforma Flash.

   2. Core Language Fundamentals – Introducción a la programación y sus elementos más básicos (condicionales, funciones, etc).

Parte II – Graphics and Interaction

   3. Properties, Methods and Events – El nombre del capítulo lo deja claro. La parte de eventos está bien resuelta, incluyendo la propagación, Frame y Timers, e incluso un ligero repaso por el Garbage Collector.

   4. The Display List – Un capítulo imprescindible para los que dan el salto a AS3.

   5. Timeline Control – Explicación de la linea de tiempo en el IDE de Flash.

   6. OOP – Se introduce el concepto de clase, herencia, composición, encapsulación y polimorfismo. Hasta el sexto capítulo no se toca nada de OOP, pero a partir de aquí los ejemplos se basan en esta metodología.

   7. Motion – Mover objetos en ActionScript, desde movimiento básico hasta tweening, pasando por temas como fricción, gravedad y movimiento angular. También se tocan las (no muy conocidas) clases de CS3 Motion y Animator.

   8. Drawing with Vectors – Muy buen capítulo donde se abarca todo lo referente a la clase Graphic y al dibujo con vectores. Se explica de manera brillante temas complejos como matrices o degrados.

   9. Drawing with Pixels – Otro gran capítulo para explicar todo lo relacionado con la imagen: bitmap, bitmapData, caching… Mención aparte merecen los apartados dedicados a los filtros y al blendMode.

Parte III – Text

   10. Text – Un único capítulo en este bloque para tratar el tema de texto. Personalmente me ha parecido algo básico, pero cumple su cometido.

Parte IV – Sound and Video

   11. Sound – 30 páginas para explicar sobradamente la nueva arquitectura de audio en AS3.

   12. Video – Similar al anterior pero enfocado al vídeo: encoding, componentes de video, cue points…

Parte V – Input/Output

   13. Loading Assets – Carga de audio, películas, texto y comunicación entre las máquinas virtuales. No se olvidan del siempre espinoso tema de la seguridad y el sandbox.

   14. XML and E4X - Un soplo de aire fresco para los que no estén familiarizados con XML.

Parte VI – Programming Design and Resources

   15. Programming Design and Resources – Para finalizar, se comentan algunos modelos de desarrollo y se abre la puerta a los patrones de diseño. El único que se trata, como no, es el patrón Singleton. También hay un extenso listado de recursos sobre ActionScript. Los blogs y foros que todos conocemos y unos cuantos más que no.

Conclusión

Aunque personalmente no me atrevería a decir que este es el mejor libro sobre ActionScript que se ha escrito nunca, sí que coincido con Lee Brimelow en que el resto de escritores deberían tomar nota del estilo y la fluidez de esta obra.

Saber mucho de un tema y saber explicar ese tema son dos cosas totalmente diferentes, y estos autores cuentan con ambas características. Su forma sencilla y directa es lo que realmente marca diferencias respecto a otros libros.

Learning ActionScript 3.0 es un libro obligatorio para todos aquellos que quieran aprender a programar en AS3, bien acercándose desde otro lenguaje o entrando por primera vez en el mundo de la programación. También es una obra imprescindible para los que se hayan quedado estancados en AS2.

Si eres un programador de nivel medio/avanzado, no te dejes engañar por la coletilla de A beginner’s guide, ya que este libro cuenta con apartados que son pequeñas joyas y trata temas que en pocos sitios he visto tan bien explicados.

A su vez, la estructura del libro permite utilizarlo como manual de referencia, o meterte de lleno en un tema desconocido en poco más de un cuarto de hora.

Si eres un programador muy avanzado quizá no te satisfaga su lectura, ya que está lejos del Essential 3.0 en cuanto a profundidad y densidad de los capítulos, aunque precisamente esto será un gran incentivo para mucha gente.

Por último, creo que sería genial que Anaya tradujera este libro para los que no tienen un buen dominio del inglés. Hace tiempo que se viene diciendo que desde la salida de AS3 y Flex, la brecha entre programadores “fuertes” y flasheros se ha hecho demasiado grande y que es difícil dar el salto. Este libro, sin lugar a dudas, puede tender un puente para acortar distancias.

10 comentarios | Permalink | Add to del.icio.us

LLops Blog, 2008