With this in mind, the Thought Factory was created and its main purpose was to save and classify the thoughts of festival visitors. Thoughts are abstract and intangible notions (we can’t read minds… yet). The Factory was made to make those thoughts somewhat tangible, “saving” them in bottles that can later be opened and their contents made visible as the genius in the lamp.

Each bottle represents an inquiry made by festival organizers. Every hour and a half a new bottle is placed in the filling station:

A bottle being filled

From that moment, and during the next ninety minutes, that bottle will be filled with thoughts from people who type them in the input stations:

Thought input machine

Thoughts can also be sent as an SMS message via mobile phone.

Since the Festival as for all ages it was necessary to curate these thoughts (basically removing obscene ones… let’s be honest, there’s plenty of obscenities in our thoughts :P).

Curating machine

Once approved, the message enters the bottle in the filling station:

When removed from the filling station, the bottle is labelled and placed with the rest of the full bottles so its thoughts can be read in the viewing station.

At the end of the Festival (in april 4, 2010) there will be sixty bottles full of thoughts that can be read in the project website.

My main tasks were developing the visual interfaces (thought input, thought curating, filling station, bottle visualization), the database that manages thoughts and inquiries and all communication happening between these and the bottles. SMS message service was kindly provided by Contacto SMS.

If you are curious about the tech side of the project: interfaces are made with Adobe Flash which communicate with a MySQL database via PHP and AMFPHP. Filling and viewing stations communicate with the bottles via Wiring using sockets and an RFID tag. ActionScript programming was made in FDT.

The Thought Factory originalmente escrito en mga/blog en March 28, 2010.

A partir de esa premisa, se realizó la Fábrica de Pensamientos cuya idea principal es guardar y clasificar los pensamientos de los visitantes al festival. Los pensamientos son nociones abstractas e intangibles (aún no podemos leer la mente). Con la Fábrica se busca hacer esos pensamientos tangibles de alguna forma, “guardándolos” en botellas que luego pueden ser abiertas y su contenido se hace visible como el genio de la lámpara.

Cada botella representa una inquietud planteada por el festival. Cada hora y media se pone una nueva botella en la base de llenado:

Una botella en proceso de ser llenada

A partir de ese momento, y durante los siguientes noventa minutos, se llenará esa botella con los pensamientos que la gente escribe en las máquinas de entrada:

Máquina de entrada de pensamiento

Pensamientos también pueden entrar en la botella vía mensaje de texto de teléfono celular.

Dado que el Festival es un evento para toda la familia es necesario hacer una curaduría de los pensamientos (básicamente prevenir el ingreso de obscenidades… seamos honestos, hay mucho pensamiento obsceno sucediendo en nuestras cabezas :P ).

Máquina de curaduría

Una vez aprobado, el mensaje entra a la botella que se encuentra en la base de llenado:

Cuando se retira la botella de la base, se etiqueta y se guarda para luego ser consultada por los visitantes en cualquier momento en la estación de visualización.

Al finalizar el Festival en abril 4 de 2010 habrá sesenta botellas llenas de pensamientos que podrán ser visualizadas en el sitio web del proyecto.

Mi labor principal fue desarrollar la parte visual (interfaz de entrada de pensamientos, interfaz de moderación, interfaz de llenado, interfaz de visualización, sitio web), la base de datos que soporta el sistema de pensamientos e inquietudes y toda la comunicación que sucede entre estas y las botellas. El sistema de mensajes de texto fue amablemente provisto por Contacto SMS.

Si tiene curiosidad de saber qué tecnologías están involucradas: las interfases están hechas en Adobe Flash y se comunican con la base de datos MySQL usando PHP y AMFPHP. Las interfases de llenado y visualización de botellas se comunican vía sockets con Wiring usando un tag RFID.

La Fábrica de Pensamientos originalmente escrito en mga/blog en March 28, 2010.

For a long time I have wanted to do a videogame history timeline. It would combine several of my interests: information visualization, history, time and, of course, videogames. Currently I have a class on videogame history (class blog in spanish) as a lecturer in the Design Department at the Universidad de los Andes and such a timeline would be useful (and neat).

I had the opportunity of creating a history timeline for a client and decided to use that code as the starting point for my timeline. This is why I can now present (drumroll):

The videogame history timeline

The URL is: http://www.mauriciogiraldo.com/vgline/beta/

clic para ver imagen completa

The timeline showcases eight types of events:

1. people (birthdates) of relevance: game designers and developers, scientists, artists, entrepreneurs.
2. business: companies or important business events.
3. consoles (or hardware such as PCs) where videogames are executed.
4. games
5. accessories and controls: peripherals that are connected to consoles.
6. technologies of importance.
7. cultural: events that have somehow influenced the world of videogames (books, movies, ideas or theories, etc.).
8. other events that contextualize what was happening worldwide when the other types of events happened.

Every event can be related to other events in three ways:

• creation (event A created event B): mostly used to relate a person with the games he/she created
• inspiration (event A was inspired or is “plainly” related to event B)
• series (event A precedes event B): for “sequences” of events (eg.: the “Mario” series by Nintendo are assumed to be sequential editions even though they were developed for different consoles)

Presenting this information clearly to the user is rather complicated. Not to say that I am finished with the interface. It still needs work and I want to explore more possibilities.

You need to press SPACEBAR in order to see the relationships between events:

relations between events

Given that you see a lot of relations between events in the default display mode (and even more events are missing from the timeline) I decided to allow the user to turn on/off event types and relation types. This way, if I turn off all events except people and games, I can see the screen with less “noise”:

people and games

It’s difficult (maybe even impossible) to plot all events and relations while completely avoiding superposed lines (or maybe I need to investigate a little more). However, I believe that the current solution is easy to understand once you have played with it for a few minutes (I didn’t set out to create a conventional interface; I wanted to experiment a little).

This is what I see if I turn on series and games:

game series

You can see that Doom II goes after Doom and that there is another later game in the series. Riven goes after Myst, etc.

Search

Users are lazy (okay, all but you) and if they don’t find what they are looking for in a few seconds they will go somewhere else. Also, in large sets of information (even though the timeline currently has only a few hundred events) it is difficult to predict how a user expects to find some particular data point. This is why the timeline has a search box:

search results for "nintendo"

Viva la open source!

In my web developing years I have benefitted from a large amount of open source libraries/programs/content and, every time I can, I try to give something back. In this case I have created a Google Code project so, whoever knows ActionScript 3 and Flash, can take a look and see what benefits he/she can find there (I don’t plan on supporting this code, use under your own risk).

Things to do

The timeline is far from finished. Among the things I want to do:

• content in spanish: I am using this timeline in my Videogame history class and I want the content to be fully translated
• complete content: a lot of information is missing or incomplete
• experiment: this basic information setup can be explored in many different ways
• share: there is an RSS feed with the whole content so anyone can use it to visualize it (an API would be more elegant) although my current server is a little unsteady at the moment

Technical stuff (and other)

Several people have collaborated, inputting data or with their opinion. Among them: Nicolás Arteaga, Vanessa Gómez, Andrea D’Macedo, Manuel Piñeros, Sebastián Ramírez, Rafael Tudela y Cárlos López. If you want to collaborate or if you find any innaccuracies, please contact me.

If you want to know what powers the timeline: content is fed via Drupal (which works on top of PHP, MySQL and Apache) to which I connect from Flash using AMFPHP (Drupal has a module for AMFPHP which I had to modify a bit). This has the benefit of automagically generating a plain text version of the content. The server is a little bit slow (the whole database is loaded in the first request… that’s why you see the quiz). Any performance ideas are welcome. Keep in mind it is a shared hosting environment.

This project has been supported by Powerflasher, the people behind FDT (the cool software I use to write all the ActionScript you see in Google Code).

The videogame history timeline originalmente escrito en mga/blog en January 30, 2010.

Por cosas de la vida un cliente me comisionó un trabajo de una línea de tiempo (que luego linkearé una vez esté terminado) y decidí usar ese proyecto como punto de partida para mi línea de tiempo. Es por esto que puedo ahora presentar (drumroll):

La línea de tiempo de la historia de los videojuegos

El link es: http://www.mauriciogiraldo.com/vgline/beta/

clic para ver imagen completa

Decidí destacar ocho tipos de eventos en la historia de los videojuegos:

1. personas (a partir de su nacimiento) de importancia: creadores de juegos, científicos, artistas, empresarios.
2. negocios: empresas o eventos corporativos relevantes.
3. consolas o soportes (hardware) sobre el cual se ejecutan los videojuegos.
4. juegos
5. accesorios y controles que funcionan o se conectan a las consolas.
6. tecnologías relevantes.
7. culturales: eventos que han influenciado de diferentes formas el mundo de los videojuegos (libros, películas, ideas o teorías científicas, etc.).
8. otros eventos que sirven para contextualizar los anteriores con respecto al mundo en su momento.

Cada tipo de evento puede estar relacionado a otros de tres formas:

• creación (evento A creó evento B): por lo general usado para relacionar una persona con los juegos que ha realizado
• inspiración/relación (evento A está relacionado o fue inspirado por evento B)
• series (evento A precede a evento B): para “secuencias” de eventos (ej.: los diferentes “Marios” de Nintendo se asumen como sucesiones secuenciales)

Toda esa información presenta el problema de cómo visualizarla de la forma más clara para el usuario. Para hacer visibles las relaciones se oprime la tecla SPACEBAR:

relaciones entre eventos

En el estado inicial aparecen muchas relaciones y aún falta poner muchísimos eventos. Es por esto que decidí permitir al usuario encender/apagar eventos y líneas de relación (puede usar el teclado). De esta forma, si apago todos los eventos menos personas y juegos puedo ver la misma pantalla con menos “ruido”:

relaciones juegos - personas

Es difícil (hasta diría que imposible) hacer que la interfaz grafique automáticamente todos los eventos y relaciones evitando que líneas se superpongan. Sin embargo creo que la actual solución es agradable y fácil de entender una vez uno le ha metido un par de minutos a jugar (no era la idea hacer una interfaz convencional, quería experimentar un poco con eso).

Esto es lo que se ve si prendo solamente las relaciones tipo serie junto con los juegos:

series de juegos

Se puede apreciar que Doom II va después de Doom y que hay otro juego posterior en la serie. Riven es posterior a Myst, etc.

Buscador

Los usuarios son flojos (bueno, todos menos usted) y si no logran encontrar lo que están buscando en un par de segundos, desistirán e irán a otro sitio web. Adicionalmente, en grandes cantidades de información es difícil predecir por dónde van a llegar a un dato en particular. Es por esto que la línea de tiempo cuenta con un buscador:

resultado para "nintendo"

¡Viva el open source!

En mis años de trabajo web me he apoyado en gran cantidad de librerías/programas/contenidos web libres (conocidos en inglés como open source) y, cada vez que puedo, procuro colaborar de vuelta. En este caso he abierto un proyecto en Google Code para que, el que sepa de ActionScript 3 y Flash, mire a ver que puede sacar de ahí (no pienso dar soporte a ese código, úselo bajo su propio riesgo).

Cosas por hacer

La línea de tiempo está lejos de terminarse, pero es un comienzo. Entre las cosas que quiero hacer:

• contenido en español: desafortunadamente la gran mayoría del contenido sobre videojuegos disponible en la web se encuentra en inglés, y quisiera tener todo al menos en inglés y español
• contenido completo: falta una gran cantidad de información (¿quién dijo SEGA?) y quisiera que fuera una línea exhaustiva y precisa (fechas)
• experimentar: una vez haya muchos más eventos será interesante jugar visualmente con el contenido
• compartir: hay un RSS con todo el contenido de la línea y la idea es que quien quiera hacer su propia visualización pueda usar ese contenido (un API sería más elegante) aunque la verdad mi servidor es un poco precario para aguantar mucho tráfico

Detalles técnicos (y demás)

Varias personas han colaborado, ya sea ingresando eventos o dando su opinión. Entre ellos: Nicolás Arteaga, Vanessa Gómez, Andrea D’Macedo, Manuel Piñeros, Sebastián Ramírez, Rafael Tudela y Cárlos López. Si quiere colaborar o si encuentra alguna impresición en el contenido de la línea, no dude en contactarme.

Si quiere saber qué hay detrás de todo, la línea funciona sobre Drupal (que, a su vez funciona sobre PHP, MySQL y Apache) al que me conecto desde Flash usando AMFPHP (Drupal tiene un módulo para AMFPHP pero igual ha tocado meterle algo de mano para que funcione con las relaciones). Esto tiene la ventaja que se genera automáticamente una versión texto plano del contenido. El servidor está un poco lento (en la primera cargada ya que trae toda la base de datos) y tengo que ver como optimizar mejor todo para que ande mejor (se reciben ideas).

El proyecto ha sido apoyado por Powerflasher, la gente detrás de FDT (el programa que uso para escribir todo ese ActionScript que ve en Google Code).

Una línea de tiempo de videojuegos originalmente escrito en mga/blog en January 25, 2010.

–

Cuando uno piensa en abogados que son celebridades vienen a la cabeza nombres como Atticus Finch, Perry Mason, Johnnie Cochran, Andrew Beckett y, obviamente, Ally McBeal. La mayoría de esas celebridades, reales o ficticias, han participado en casos controversiales que encerraron criminales, atacaron prejuicios, cambiaron legislaciones o dejaron asesinos libres. Yo nunca quise ser abogado pero encuentro fascinante el tema: al final la ley no es más que código, eso sí, muchas veces confuso.

Derechos de autor

Una de las áreas (para mi) más confusas del derecho es la de derechos de autor o copyright como se conoce en el mundo anglosajón. Este post no pretende explicar en detalle eso (ya dije que no soy abogado) pero basta con decir que establecen el “conjunto de normas y principios que regulan los derechos morales y patrimoniales que la ley concede a los autores (los derechos de autor), por el solo hecho de la creación de una obra literaria, artística, científica o didáctica, esté publicada o inédita.” [1] Y tiene sentido, por lo menos a primera vista: si una creación no está debidamente protegida de su usurpación ilegal, ¿qué motivación tiene un artista/científico/escritor de realizarla? Digamos que el placer de la creación por sí misma no es suficiente ya que todos tenemos que pagar nuestro almuerzo.

En muy pocas palabras, los derechos de autor fueron creados para regular la copia de las obras (copy right… ¡ajá, seguro que usted no lo había pensado!). Si yo quiero una copia de una obra (o “la obra” en el caso de creaciones que no puedan ser copiadas) debo obtener autorización de su autor. El autor decidirá si simplemente me da una copia o, por lo general, requerirá que yo le dé una suma de dinero a cambio. La cantidad de dinero a intercambiar es arbitraria pero en el fondo está determinada por el mercado. Dicho proceso de autorización suele ser delegada por los autores a los publicadores quienes se encargan de diseminar la obra obteniendo, en el proceso, beneficio ecónomico (un buen autor no necesariamente es un buen vendedor y vice-versa).

Puede que en este punto ya se esté empezando a aburrir de leer pero créame que vienen cosas interesantes.

Todos en el juego

En principio, el modelo mencionado tiene todo el sentido del mundo: el autor se encarga de hacer sus obras, el publicador las difunde y, si la obra es buena, la gente la compra y todos contentos. El problema surge cuando entran en la ecuación la palabra digital y, especialmente, la web. El problema con lo digital es lo fácil (y, por consecuencia, económico) que es generar una copia idéntica al original (gracias, en parte, a la reducción de costos de los quemadores de CD). El problema con la web es lo fácil (sí, económico también) que es distribuir esa obra (gracias al crecimiento del ancho de banda de una conexión casera promedio, a programas como Napster, Kazaa y BitTorrent, y a formatos como el MP3 y el DivX que reducen el tamaño de las obras con muy poca pérdida de calidad). Para colmo de males hay otro detalle y es que cada vez que vemos un documento/archivo/video en la web, automáticamente se genera una copia local (también conocida como el caché del navegador) de aquello que estamos viendo (con algunas excepciones, claro). Básicamente estamos quebrantando la ley con el solo acto de navegar.

Adicionalmente, hoy día se pueden adquirir, por un costo relativamente bajo, las herramientas necesarias para crear obras de calidad técnica que rivaliza con producciones de grandes estudios cinematográficos o disqueras. Estas herramientas facilitan, a creadores no reconocidos (¿amateurs?), el acceso a obras de “profesionales” como punto de partida para sus propias creaciones (remix, collage, sampling, llámelo como quiera). Estas nuevas obras muchas veces poco o nada tienen que ver con la original pero igual sus creadores son perseguidos por abogados (los abogados también pueden ser los malos del paseo) y obligados a suspender su distribución; dos casos notables: el músico conocido como Danger Mouse (quien combinó la música del White Album de The Beatles y el Black Album de Jay-Z para crear el que llamó Grey Album [2]) y Girl Talk (quien ha usado docenas de samples de diferentes artistas en una misma canción [3]). Sin embargo, ellos dos no son los únicos que han usado música de otros artistas para hacer sus propias obras: artista que se respete se ha “inspirado” en el trabajo de otros (“un buen artista toma prestado, un gran artista roba”, frase que suele atribuírsele a Pablo Picasso).

Evitando llegar a mayores niveles de densidad, el punto principal es que la ley de derechos de autor claramente no fue concebida teniendo en cuenta la situación tecnológica que llegaría a suceder años después.

Persiguiendo a propios y extraños

Otro de los creadores que fue perseguido por abogados por su uso no autorizado de obras de terceros es Lawrence Lessig, filósofo, economista y (sorpresa) abogado, quien además es profesor de derecho en el Stanford Law School (y toda una “celebridad web”). Como toda celebridad nerd, Lessig suele dictar conferencias apoyado de material audiovisual. Lessig publica algunas de esas presentaciones en su sitio personal y en sitios como YouTube.

Antes de seguir por favor ver la presentación que motivó a los abogados a perseguir a Lessig por “violación a la ley de derechos de autor”:

En serio… vea la presentación… yo espero… si no sabe inglés siéntese con alguien que sepa y le vaya traduciendo.

Cabe anotar que la ley anglosajona contiene un ítem que permite el uso no autorizado de obras llamado “fair use” (principalmente para ámbitos académicos o críticos) pero que, por alguna razón, los persecutores de Lessig no tuvieron en cuenta al notificarlo.

La presentación en cuestión está llena de ejemplos de cómo artistas y amateurs (principalmente los últimos… asumiendo que un “artista” no es un “amateur”) han construido sobre el trabajo de otros y cómo esto ha sido benéfico para la creación de cultura.

Lessig es mejor conocido en este medio por su trabajo con Creative Commons (CC), organización que fundó y que busca facilitar ese proceso natural de intercambio y reutilización de obras. El punto principal de CC es eliminar la premisa principal del copyright en cuanto a que se asume la no copiabilidad de una obra (por definición, toda obra creada, registrada o no, se considera con todos los derechos reservados, impidiendo así cualquier posible copia no autorizada). Este “pequeño” obstáculo se elimina con unas licencias creadas por CC en las que se asume la sí copiabilidad de una obra bajo ciertas condiciones que el autor pone sin perder el derecho sobre la misma (se pasa de todos los derechos reservados a algunos derechos reservados). Otra de las ventajas de las licencias CC es que no se necesita ser un abogado para entenderlas (!).

De esta forma, CC busca motivar la creación (artística, científica, literaria) la cual considera necesaria para el desarrollo de la cultura (con lo cual estoy de acuerdo). Las licencias eliminan intermediarios, permitiendo a los creadores tener control del uso y destino final de sus obras. Estas licencias han sido traducidas y adoptadas en más de cincuenta países (incluido Colombia). Las licencias CC también han sido adoptadas por millones de sitios web entre los que se incluyen Wikipedia, Flickr y Revver.

Es difícil de ignorar la ironía que hay en que, de todos los que han podido censurar, hayan escogido un video de Lawrence Lessig. Si quiere saber en que terminó todo ese cuento contra Warner Music, disquera demandante que al parecer no vió con buenos ojos que uno de los ejemplos mostrados usara música de los Muppets, puede leer el blog de Lessig.

NIN ©

Mientras que disqueras y estudios de cine (y uno que otro artista) tratan de tapar el sol con las manos demandando a diestra y siniestra, algunos han usado la oportunidad para establecer un contacto directo con sus seguidores. El caso más popular es Nine Inch Nails (NIN), banda liderada por Trent Reznor (en realidad se puede decir que NIN es Reznor y vice-versa). Para promover sus más recientes discos y giras, Reznor ha usado todo tipo de estrategias: incluyó mensajes secretos en el material publicitario de una gira que llevaba a los fans a sitios web “escondidos” donde podían descargar música; sale de gira con bandas que no son del mismo género musical de NIN; su más reciente disco (de 2008) podía descargarse gratis (licencia CC, como no) y, sin embargo, fue el más vendido en Amazon; critica abierta y explícitamente las políticas de las empresas que distribuyen su música.

Esta combinación de habilidad artística y de mercadeo (¿quién dijo que un buen artista no era un buen vendedor? ¡duh!) le ha merecido reconocimiento y entrevistas. Puede que le caiga bien o mal, que le guste o no su música, pero no cabe duda que Reznor es un tipo brillante. Reznor entiende digital y web y lo que esto implica en su producción artística (y no se trata de abrir una cuenta de MySpace/Facebook y empezar a agregar “amigos”).

Así como NIN sirve de ejemplo de innovación (odio esa palabra) en el mainstream, no debemos perder de vista que la premisa básica de los Creative Commons es permitir a creadores construir a partir del trabajo de otros y a la vez permitir que otros construyan a partir de su propio trabajo. Claro que esto no fue lo que sucedió en el caso de Stewart Smith, artista y programador. Smith oyó una canción de una banda llamada Grandaddy que le gustó y decidió hacerle un video:

El video (bueno, lo que sale en el video) tiene la particularidad que es completamente programado. Es código: usted se consigue un computador que pueda ejecutar ese código (un Apple ][+ como el que aparece en el video), le da RUN, y listo... puede ver el video (bueno tiene que conseguir la canción y ponerle PLAY simultáneamente). El problema es que, al publicar ese video en internet, Smith estaba violando la ley de derechos de autor (la canción y disco en cuestión no están cobijados por una licencia CC). V2 Records, la disquera de Grandaddy, en lugar de demandarlo, decidió firmar un contrato retroactivo donde lo contrataban para hacer el video de esa canción (convirtiéndolo así en el video oficial). Al parecer no siempre tratan de tapar el sol con las manos.

Presentando a...

Si vió la presentación de Lessig (más vale que lo haya hecho) se dará cuenta que es muy buen presentador (bueno el no sale en la presentación pero podemos oír su voz y ver las imágenes y videos). Nada peor que una presentación aburrida (y la mayoría lo son). Todos hemos estado ahí: alguien hablando interminablemente buscando descrestar a su audiencia con un montón de bullets y cifras que no se pueden leer bien, con transiciones visuales al mejor estilo PowerPoint o, peor aún, leyendo un párrafo de texto que sale en la presentación. Si le sumamos a eso que el tema a presentar sea difícil de entender o especializado, tenemos un mejor somnífero que Halcion.

No nos digamos mentiras, el derecho puede ser muy aburrido: yo no he estado en un juicio pero lo que vi en televisión del de O. J. Simpson y del de los hermanos Menendez era bien aburrido. Las versiones cinematográficas que pueden hacerse seguro serían mucho más interesantes (empezando porque resumirían cuatro años de litigio en dos horas) y eso que son casos controversiales de asesinato.

No me mire así por estar hablando "de esta forma" de juicios por asesinato... usted entiende a lo que me refiero.

El crédito de Lessig está en tener el interés del observador durante toda su charla a la vez que hace fáciles de entender conceptos e ideas que pueden ser difíciles de asimilar para personas no familiarizadas con el tema.

Esa forma de presentar lleva su nombre (dije que Lessig es una celebridad) en este blog dedicado a cómo hacer buenas presentaciones (sí, hay un sitio web para todo). En ese blog mencionan una presentación realizada al "estilo Lessig" particularmente interesante y entretenida pero de otro tema completamente diferente (aunque es un tema web). No la puedo meter acá así que mejor visite este link y haga clic en la versión Streaming (Flash) que dice Play Small (240x180, 100kbps).

Al final todo se reduce a la habilidad de una persona de hacerse entender.

Actualización 28/09/09: Hablando de Trent Reznor, me enviaron esta entrevista que le hace Joystiq. Resulta que Reznor es, además, un ávido gamer y al parecer quiere desarrollar proyectos de ese tipo. Lectura recomendada (si le interesan los videojuegos).

Información relacionada:

• mga/blog: Visualización de información, ...: Post con algunos links al trabajo de Edward Tufte
• Bájese este disco con licencia CC que incluye canciones de los Beastie Boys, David Byrne y Le Tigre
• Vea y baje el video de House of Cards de Radiohead (también es código y es de distribución libre)
• mga/blog: pixel-frenzy: Post que hace mención de un video oficial de Modest Mouse hecho por fans
• RiP!: A Remix Manifesto: Documental de 2008 sobre copyright (véalo acá).
• Bájese el último disco de Girl Talk (obviamente con licencia CC)
• Un buen FAQ de mitos sobre el copyright (en inglés) [vía nomeacuerdo]
• mga/blog: ¿qué es copyright?: Post anterior con un video mashup que usa material de Disney para explicar el concepto de copyright

Visualización de información, diseño de interfaces, naturaleza y código

todos los derechos reservados © originalmente escrito en mga/blog en July 18, 2009.

—

Han pasado unos quince años desde que se masificó lo que hoy conocemos como Internet. Esa masificación se da en parte gracias a la distribución libre de dos elementos claves: el lenguaje HTML y el navegador web. Ambos son creación de Tim Berners-Lee mientras trabajaba en el CERN, un centro de investigación europeo. El primero es un lenguaje muy sencillo que permite a personas sin conocimiento de programación realizar documentos de hipertexto mientras que el segundo es el programa que hace visible dichos documentos (evoluciones de dicho programa se pueden ver hoy en los numerosos navegadores disponibles). A esta combinación de tecnologías, por un lado la comunicación y transferencia de información vía red y por el otro el hipertexto, Berners-Lee decidió llamarla World Wide Web (WWW). WWW no fue el primer proyecto que sacó provecho de la Internet (paralelo a este existen otros menos conocidos como FTP, Gopher y WAIS entre otros) pero hoy día es el más popular ya que permite moverse dentro de la información en un ambiente que combina texto e imágenes (“navegar”) y que luego se complementaría con video, sonido y posibilidades adicionales de interacción gracias a programas que se instalan en los navegadores: plug-ins.

La facilidad para crear documentos de hipertexto (páginas web) que permite el HTML dió lugar a que cualquier persona con un editor de texto simple (Notepad, SimpleText) pudiera “diseñar” sus propios sitios web (¿quién no conoce un primo de un amigo que “diseña páginas web”?). La WWW como la conocemos ahora empieza a surgir en los noventas con una gran incertidumbre; se sospechaba que sería un medio importante pero no se tenía certeza de cómo debía ser abordado. Pioneros como Jeff Bezos (Amazon), Jerry Yang y David Filo (Yahoo), Sabeer Bhatia y Jack Smith (Hotmail), Pierre Omidyar (eBay) daban las primeras pautas de diseño exitosas que luego serían imitadas por muchos y encapsuladas en lo que hoy conocemos como “comercio electrónico”, “portales” o “redes sociales”. Otros como Joshua Davis (praystation.com), Yugo Nakamura (yugop.com), ioResearch (theremediproject.com) y Eric Natzke (natzke.com) asumiendo la vanguardia web, experimentaban con el medio y las herramientas que se producían (Java, Flash, VRML, video). La anterior no pretende ser una lista exhaustiva ni esto una historia resumida de la WWW (para eso ya hay otros sitios web).

El diseño web surge orgánicamente con el medio, con claras bases en otras disciplinas del diseño pero con sus particularidades y peculiaridades; se establecen nuevas estéticas y lenguajes. Un interesante análisis y recuento sobre la estética temprana (90s-00s) de la WWW se puede ver y leer en La web vernácula: los indígenas y los bárbaros (traducción propia del título en inglés), un artículo de Olia Lialina, rusa, artista y diseñadora web (no olvide hacer clic en el botón abajo a la derecha que parece decir “continuar” en ruso):

So what was this culture? What do we mean by the web of the mid 90′s and when did it end?

To be blunt it was bright, rich, personal, slow and under construction. It was a web of sudden connections and personal links. Pages were built on the edge of tomorrow, full of hope for a faster connection and a more powerful computer. One could say it was the web of the indigenous…or the barbarians. In any case, it was a web of amateurs soon to be washed away by dot.com ambitions, professional authoring tools and guidelines designed by usability experts.

Si no tuvo la oportunidad de ver esos sitios web como eran hace 10 años no se preocupe, existe la máquina del tiempo web. Escriba un url y de clic en “take me back”… puede ver cómo era Yahoo en 1996.

Hoy día no nos libramos de esas “modas de diseño web”: ahora se habla de una tal Web 2.0 y un tal AJAX (y no es el héroe mitológico ni el detergente) y que en realidad no son más que apodos (también conocidos como buzzwords) a estilos de diseño, tecnologías o metodologías que existen desde hace rato (más de diez años en el caso de AJAX). No pongo links intencionalmente :). Al parecer no soy el único que detesta (sí, detesta) la compulsividad de algunos a reempaquetar conceptos/ideas/modas en “nuevos e innovadores” conceptos y de otros de seguirlos ciegamente: en 2007 se llevó a cabo la charla Destroy The Web 2.0 Look:

Lialina tiene también un artículo sobre la “nueva generación web”, aptamente llamado La web vernácula 2 que también vale la pena leer.

Pero el problema sigue ahí: aún no sabemos qué es “diseño web”. Wikipedia hace un intento pero se queda en una definición técnica. Recientemente encontré un artículo de Jeffrey Zeldman que podría ser lo que buscamos:

We get better design when we understand our medium. Yet even at this late cultural hour, many people don’t understand web design. Among them can be found some of our most distinguished business and cultural leaders, including a few who possess a profound grasp of design—except as it relates to the web.

[...]

The trouble is, web design, although it employs elements of graphic design and illustration, does not map to them. If one must compare the web to other media, typography would be a better choice. For a web design, like a typeface, is an environment for someone else’s expression. Stick around and I’ll tell you which site design is like Helvetica.

Architecture (the kind that uses steel and glass and stone) is also an apt comparison—or at least, more apt than poster design. The architect creates planes and grids that facilitate the dynamic behavior of people. Having designed, the architect relinquishes control. Over time, the people who use the building bring out and add to the meaning of the architect’s design.

Zeldman finalmente plantea su definición de diseño web:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Mi traducción: el diseño web es la creación de ambientes digitales que facilitan y motivan la actividad humana; reflejan o adaptan voces y contenidos individuales; cambia en el tiempo de forma agraciada pero siempre conservando su identidad. Acá está nuevamente el link al artículo completo porque realmente vale la pena leerlo.

Para terminar, ya que estamos en eso de las definiciones, veamos qué dice Paul Rand (logo de IBM y UPS entre otros) sobre su definición de diseño:

Links relacionados en este mismo blog:

• Jeffrey Zeldman, Milton Glaser, Shigeru Miyamoto

¿qué es diseño web? originalmente escrito en mga/blog en February 19, 2008.

Johnny Wii

Johnny Lee es un estudiante de doctorado del Human-Computer Interaction Institute de la Carnegie Mellon University. Lee posee varias patentes y trabaja desarrollando versiones simples y económicas de tecnologías usualmente costosas. Como él mismo menciona en su enunciado de investigación:

My work solves real world problems of applying research concepts by simplifying implementation and reducing system cost. This does two things: first, it enables more researchers to explore the domain advancing the state of research; second, it results in a more practical commercialization increasing distribution, adoption, and overall impact.

Entre los proyectos de Lee se destaca el trabajo que hace con el Nintendo Wii. Usando la tecnología presente en el control del Wii, Lee ha creado desde interfases similares a las que se vieron en la película Minority Report, hasta ambientes inmersivos tridimensionales. Lee documenta sus proyectos Wii en su sitio web. El software requerido para uno implementar esas interfases, si es que tiene un Wii, yo tengo el mío :), está disponible para descarga. Sin embargo lo que más descresta es la simplicidad como explica y presenta los proyectos, como se puede ver en el siguiente video:

vía Gizmodo

Hay otro video de la interfaz tipo Minority Report, un video de un pizarrón electrónico y un impresionante video de pantallas plegables, todos muy recomendados.

Recomendaciones del chef

Nos gustan las recomendaciones. A pesar de tener una amplia selección en un menú, algunos restaurantes tienen “menú del día” o “el chef recomienda”. ¿Por qué destacan un producto sobre otro? ¿Acaso no todos los platos son igual de buenos? Barry Schwartz, psicólogo y profesor en Swarthmore College plantea en su libro The Paradox of Choice: Why More Is Less que la multiplicidad de opciones no necesariamente nos beneficia:

Infinite choice is paralyzing, Schwartz argues, and exhausting to the human psyche. It leads us to set unreasonably high expectations, question our choices before we even make them and blame our failures entirely on ourselves.

En su charla en TED Talks Schwarz menciona ejemplos que aclaran su idea que muchas opciones en realidad perjudican nuestro bienestar generándonos un estrés innecesario. En un restaurante contamos con un mesero que, esperamos, nos va a dar una buena recomendación basada en la información que proveamos: “no puedo comer pescado y no me gustan los pepinillos”. En internet, sitios web como Amazon se basan en millones de clics que hacen los compradores para encontrar patrones que sivan como punto de partida para recomendaciones: de los que compraron la última película de Harry Potter una gran cantidad compró Piratas del Caribe. Entre más compras se hagan (y más compras haga usted) más precisa es la recomendación… o por lo menos eso creemos; si compra un regalo para alguien con gustos muy diferentes a usted estará “dañando” futuras recomendaciones.

¿Qué me recomienda?

¿Cómo generar un sistema de recomendación más preciso? Entre más acertada sea la recomendación, más valioso será el sistema. Precisamente fue esta la razón por la que Google prevaleció sobre Altavista, AskJeeves y otros buscadores que estuvieron primero: daba mejores resultados a las búsquedas (hoy día algunos pueden debatir eso pero ya Google está en una posición ultra dominante que ha sabido explotar). En el mundo musical la cosa es más complicada: ¿si me gusta “Let It Be” me van a gustar todas las canciones de los Beatles? ¿solamente las escritas por Paul McCartney? ¿sólo las baladas? ¿sólo las que son dedicadas a alguien cercano al autor? ¿las que tienen determinado patrón compositivo? Todos quisiéramos tener una emisora personalizada que pusiera los hits que más nos gustan pero que también nos sugiera nueva música: que no suene un reguetón después de “Hey” de Pixies… de hecho que no suene nunca un reguetón. Hasta el momento la mayoría de sistemas de recomendación, como los de Amazon y Google, se basan en modelos matemáticos. Este artículo cubre (superficialmente) tres aproximaciones a este problema que se reflejan en tres sitios web: MeeMix, Pandora y Last.fm. Para los últimos dos sitios hay mayor detalle en este otro artículo:

Algorithmically, Pandora versus Last.fm is something like the nature versus nurture debate. Taking the nature side, Pandora’s recommendations are based on the inherent qualities of the music. Give Pandora an artist or song, and it will find similar music in terms of melody, harmony, lyrics, orchestration, vocal character and so on. Pandora likes to call these musical attributes “genes” and its database of songs, classified against hundreds of such attributes, the “Music Genome Project.”

On the nurture side (as in, it’s all about the people around you), Last.fm is a social recommender. It knows little about songs’ inherent qualities. It just assumes that if you and a group of other people enjoy many of the same artists, you will probably enjoy other artists popular with that group.

Otros están experimentando con la aplicación de algoritmos matemáticos ya no a la recomendación sino a la creación. Dichos algoritmos se inspiran en la evolución biológica (reproducción, mutación, recombinación y selección):

EAs take two parent designs – for a boat hull, say – and blend components of each, perhaps taking the surface area of one and the curvature of another, to produce multiple hull offspring that combine the features of the parents in different ways. Then the algorithm selects those offspring it considers are worth re-breeding – in this case those with the right combination of parameters to make a better hull. The EA then repeats the process. Although many offspring will be discarded, after thousands of generations or more, useful features accumulate in the same design, and get combined in ways that likely would not have occurred to a human designer.

[...]

To encourage more of this kind of work, SIGEVO runs the annual Human Competitiveness Awards, dubbed the “Humies”. The idea is to reward designs produced by EAs that are “competitive with the work of creative and inventive humans”.

[...]

Celebrated UK innovator James Dyson, inventor of the bagless vacuum cleaner, has a more emotional objection. “Evolutionary algorithms will mean the end of those exciting stories about how people made great inventions by accident,” he says. “Human ingenuity and intuition should remain crucial in making a success of any product.”

El chef recomienda estos otros posts anteriores relacionados:

• Wii rule
• Soundflavor, las obras completas de Charles Darwin…
• En busca de una vida programable

Actualización 2/6/2009:

Desde su salto a la fama, Johnny Lee ha hablado en las TED Talks y consiguió trabajo en Microsoft donde está trabajando en Natal, un proyecto que pueden ver mejor en su blog y en este video:

Click here to view the embedded video.

Pueden ver una demostración de las diferentes tecnologías disponibles en Natal en la rueda de prensa de Microsoft en E3 (fijarse en la parte final del video).

El chef recomienda: Johnny Lee y el Wii originalmente escrito en mga/blog en January 17, 2008.

La Señorita Guainía no tiene la culpa de no saber inglés… tratando de quedar bien y ganar algo de puntos, finalmente cedió ante la prensa. Ahora es el turno de Lauren Caitlin Upton, aspirante a Miss Teen EE.UU.:

Aparecen nuevamente las reacciones esperadas (no es que me la pase leyendo noticias de farándula… ejem… bueno no tanto como parece), entre las cuales encontré dos que me llamaron la atención y quise incluir acá por venir de diseñadores reconocidos. Primero Debbie Millman (Sterling Brands, School of Visual Arts, AIGA EE.UU.) en una columna para A Brief Message:

We live at a time when every part of the body can be redesigned, and we’ve reached a tipping point in our efforts to recreate who we are by recreating how we look. What then is the measure of beauty when we’re designing it?

La segunda, y la que más me llamó la atención, fue la de Michael Bierut, socio de Pentagram, en una columna para su publicación en línea Design Observer que llamó “You’re So Intelligent”:

Yet, in a way I cannot explain, I sensed what was coming when Ms. Upton revealed several days later to the sympathetic hosts of the Today show that she was not, in fact, dumb, but would be attending football powerhouse Appalachian State University where she would be studying, yes, graphic design.

Perhaps design is the field of mindless prettiness. But hasn’t it always been so? After all, most of us entered the profession not because we’ve determined after long thought that it represented a more effective way of influencing the course of world events than, say, law or medicine. Instead, somewhere along the way, we discovered we liked making things look good, and that we were better at it than other people.

Bierut tiene razón: pocas veces coexisten la belleza y la inteligencia. Pocas veces, también, coexisten la belleza y la funcionalidad. Un sitio web bonito, o visualmente agradable, no necesariamente es un sitio web fácil de usar (y vice-versa). A veces la belleza del diseño se convierte en su funcionalidad (si se le viene a la cabeza algo parecido a un iPod o a un Wii ya somos dos)… ¿o será al revés?. Lo bonito, si funcional, doblemente bonito :)

Ya que estamos en este tema, vale la pena leer lo que Khoi Vinh llama “La belleza de lo aburrido“.

Muy recomendados A Brief Message (creación de Liz Danzico y Khoi Vinh, anteriormente mencionado acá) y Design Observer.

Reinados y diseño originalmente escrito en mga/blog en September 9, 2007.

… otros, en cambio, excluyen por completo a usuarios nuevos:

… y también hay casos donde el tipo de servicio que ofrece el sitio hace obligatoria la identificación del usuario:

Eso sin tener en cuenta si es necesario exigir que el usuario se registre ni los detalles que se pueden ver en las imágenes como el link “¿olvidó su clave?”, la casilla “recordar mi identidad en este computador” y otros elementos que cambian de un sitio a otro. La “respuesta correcta” depende de diferentes factores como el modelo de negocio del sitio, el carácter costo/beneficio de ese paso (o pasos) adicional (suele ser dispendioso registrarse en un sitio web, al punto de perder potenciales usuarios en ese punto a menos que el contenido o servicio que ofrezca sea valioso para el usuario), el tipo de servicio que se ofrece, y más.

El caso del login, a pesar de aparentemente ya “estar inventado”, muestra la gran cantidad de consideraciones que deben tenerse en cuenta al crear interfases web (o de cualquier tipo). Pero bueno, como diría el Chapulín Colorado: ¡que no panda el cúnico! ya que existen lo que llaman:

Patrones de diseño web

Un patrón de diseño web (web design pattern) describe la solución óptima a un problema común de diseño web en un contexto específico:

Patterns are optimal solutions to common problems. As common problems are tossed around a community and are resolved, common solutions often spontaneously emerge. Eventually, the best of these rise above the din and self-identify and become refined until they reach the status of a Design Pattern. [1]

Una definición bastante darwiniana. Los patrones se generan a partir de una especie de evolución, donde la mejor solución tiende a prevalecer. Los problemas pueden ser muy simples: cómo presentar grandes cantidades de información que viene organizada alfabéticamente; o muy complejos: cómo manejar cambios de estado por medio de transiciones. En internet hay muchas inciativas por agrupar y categorizar esos patrones, algunas de las cuales enumero a continuación:

• Yahoo! Design Pattern Library: En Yahoo! tienen un impresionante listado categorizado de patrones que usan en sus propios proyectos acompañados de imágenes, descripción y recomendaciones. Cada patrón está complementado por una entrada en el blog de interfases.
• A Pattern Library for Interaction Design: De Martijn van Welie, holandés, PhD en Human Computer Interaction y quien ha recopilado y organizado una gran cantidad de patrones e incluye links a otros sitios similares.
• Web Patterns Project: Iniciativa de unos estudiantes de U. C. Berkeley que se preguntaron “Our primary motivation for this project was to consider why user experience, particularly around web-based user interfaces, is so poor across the Berkeley domain. Why is a good user interface so difficult to create? Why is it that at U.C. Berkeley, a leader in technology research, a place of high academic achievement and innovation, good web user experience is hard to come by?”. Este suele ser un sentimiento generalizado.

Adicionalmente está User Interface Engineering, una firma de investigación en usabilidad de interfaces. Tienen una gran cantidad de artículos en el tema.

SPORE

En otra área del diseño (juegos en este caso) pero muy afín con la teoría de la evolución está Will Wright. Mundialmente conocido por ser el diseñador de SimCity y The Sims, exitosos juegos de video: el primero creó un nuevo paradigma (no se pierde ni gana) y el segundo es uno de los más vendidos. Wright fue portada y protagonista de una edición dedicada a juegos de la revista Wired en la que habla de Spore, un juego que permitirá al jugador simular la evolución de una especie (desde un organismo unicelular hasta la conquista del espacio). El juego aún no ha sido lanzado pero las expectativas son altas. En Marzo de 2007 Wright fue invitado a las TED Talks donde hizo una breve presentación de ese juego:

Web design patterns, Will Wright y Spore originalmente escrito en mga/blog en August 20, 2007.

Jeffrey Zeldman — mejor conocido por su revista web A List Apart, ha sido nombrado King of Web Standards (rey de los estándares web) por la revista BusinessWeek. Zeldman se convirtió en una celebridad luego de escribir Designing with web standards en el 2003. Como cofundador del Web Standards Project Zeldman contribuyó a la creación de estándares sobre los cuales se deberían crear los navegadores web: sin un estándar, empresas como Microsoft y Netscape creaban los navegadores que les daba la gana (algo como “mi navegador hace esto que el otro no hace… usa mi navegador”) y los diseñadores/desarrolladores web nos veíamos obligados a crear múltiples versiones de los sitios web (algo que todavía sucede pero en un menor grado… aunque ¿alguien ha podido ver Yahoo! Music en Firefox?). Recomiendo ver el slideshow que acompaña el artículo.

Posiblemente conozcan el logo arriba. Fue diseñado por Milton Glaser, uno de los más importantes e influyentes diseñadores gráficos (y de quien ya se había hecho mención acá). La revista Foro Alfa tiene en su más reciente número digital una transcripción de una charla que Glaser, ya por sus 78 años, dió a la AIGA en Londres llamada “Diez cosas que aprendí”. Algunos apartes:

Desafortunadamente nuestro campo, el así llamado creativo (odio esa palabra porque se suele usar mal, odio el hecho de que se la use como sustantivo, ¿te imaginas llamar a alguien creativo?) [...]

Soy un gran defensor del dibujo, no por haberme convertido en ilustrador, sino porque creo que el dibujo cambia el cerebro de la misma forma en que encontrar la nota correcta cambia la vida de un violinista. El dibujo te vuelve atento, te hace prestar atención a lo que ves, lo cual no es tan fácil.

Las creencias profundamente arraigadas de cualquier tipo evitan que te abras a experimentar, y es por eso que encuentro cuestionable a toda posición ideológica sostenida con firmeza. Me pone nervioso cuando alguien cree demasiado en algo. Ser escéptico y cuestionar toda convicción arraigada es esencial. Por supuesto hay que tener clara la diferencia entre escepticismo y cinismo, porque el cinismo es tan restrictivo a la propia apertura al mundo como las convicciones apasionadas: son como gemelos. En definitiva, resolver cualquier problema es más importante que tener razón.

El artículo completo acá

Siguiendo con el feeling existencialista de la charla de Glaser está este divertido video/animación creado por Clemens Kogler, diseñador austriaco de 25 años, que es una rara combinación entre Nietzsche y PowerPoint:

Si reconocen el personaje de arriba conocen el trabajo de Shigeru Miyamoto. Este japonés es el padre de Mario, Donkey Kong, Zelda y demás personajes y juegos de Nintendo. Es la cabeza detrás del enormemente exitoso Wii (del cual se ha hecho mención anteriormente acá). Fue nombrado caballero de la Legión de Honor por el gobierno francés y recientemente El Mundo de España publicó una entrevista con él [vía]:

Cuando tengo una idea no es exclusivamente para un juego. Es una idea general sobre algo que luego trato de implementar en un juego. No hablo con los ingenieros o los especialistas hasta que tengo clara la idea y la solución de cómo aplicarla a un videojuego. Así que mi forma de diseño de juegos está más cercana al diseño industrial que otra cosa. Y ése puede ser uno de los secretos, como dices, de mi éxito.

La entrevista completa acá

Para terminar, el primer trabajo de CombatTV (un grupo al cual pertenecen estudiantes y profesores del Departamento de Arte de la Universidad de los Andes) que se inspira y hace homenaje a Game Over (sí… de este también se ha hecho mención acá). En este caso se trata de Breakout, un conocido juego de video de los ochentas:

Jeffrey Zeldman, Milton Glaser, Shigeru Miyamoto originalmente escrito en mga/blog en August 11, 2007.