mga/blog

This is an english translation of a previous post. I believe english readers could be interested in this project.

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).

Hace rato que quiero hacer una línea de tiempo de la historia de los videojuegos. Combinaría varios de mis intereses: visualización de información, historia, tiempo y videojuegos. Actualmente dicto un curso de historia de los videojuegos en el Departamento de Diseño de la Universidad de los Andes y una línea de tiempo sería útil y elegante.

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).

He sido cliente de Bancolombia desde 1998 cuando todavía se llamaba BIC. En 2008 (30 de abril para ser exactos) tuve un problema transfiriendo dinero por la Sucursal Virtual Personas que hasta el día de hoy (casi dos años después) sigue igual (ya no puedo transferir a otros bancos). Por esta razón me tocó adquirir una cuenta nueva a nombre de mi empresa y hacer uso de la Sucursal Virtual Empresas. Las transferencias que usualmente hacía eran pagos a proveedores y empleados (de ahí que me acuerde que era el 30 de abril de 2008, pago de quincena) y, siendo el tipo organizado que soy, decidí que lo más sensato era tener una cuenta empresarial.

El servicio de Sucursal Virtual Empresas vale unos US$ 200 al año pero supuse que, por esa no despreciable cantidad, tendría un servicio muy superior a la que había tenido hasta el momento en la otra cuenta.

Cuán equivocado estaba…

Login y clave

Empecemos por el login:

login fail

Algunos detalles:

• el NIT y el usuario se escriben con el teclado normal pero…
• la clave toca ponerla con el tecladito ese que sale pintado
• ese teclado pintado no funciona bien: el área sensible de los botones es la letra y no la tecla de forma que es muy fácil no dar clic en el lugar correcto…
• porque uno está pendiente del tecladito y no de la caja no se fija si está “tecleando” bien… si no sale un puntico ahí es que no hizo clic donde era
• solo funciona bien en Internet Explorer (raro) pero ¡estamos en 2010 no en 1999! Este tipo de idioteces es imperdonable hoy día, en especial en un sitio web transaccional que uno debe pagar para usar.
• ¿que significa eso de “contraste 1 2 3″? (¿no puede hacer el tecladito ese accesible a todo el mundo sin necesidad de calibrar el contraste? ¿por qué no asumir el mayor nivel de contraste y eliminar esos controles que solo distraen?)

Ya sé lo que están pensando: “el punto del tecladito ese es para evitar key loggers“. La verdad no imagino que clase de imbécil se mete a la sucursal virtual de una empresa desde un web café (que es donde suele haber key loggers) pero digamos que es medianamente sensato (aunque estoy seguro que si hay key loggers será igual de facil instalar otro tipo de programas espías). Eso significa que la Sucursal Virtual Empresas mantiene esa seguridad en todos lados donde se solicita la clave. ¿Cierto? Por ejemplo, donde uno puede cambiar su clave:

¿y dónde está el teclado?

Dejemos de lado esto y más bien hablemos de lo servicios de la Sucursal Virtual Empresas Bancolombia (suena elegante ¿no?).

Cabe anotar que yo uso esta sucursal principalmente para transferir a otras cuentas (pagos a proveedores, empleados, etc.) y para pagar servicios (luz, teléfono, internet, celular, etc.) así que de pronto me estoy perdiendo de un montón de servicios maravillosos que solo nuestro amado Bancolombia tiene para sus clientes empresariales (hmmm… nah).

Dicho eso, veamos un par de casos:

Navegación

test de motricidad fina

Este bello menú anidado nos transporta a una época web donde todo parecía no tener límites (¿recuerdan la burbuja?) pero en este caso a alguien se le ocurrió que era el menú el que no debía tener límites. Muy 1990’s, este menú me recuerda otro que lo supera en su complejidad. Un diseño de información adecuado debe poder organizarla de forma que evite este tipo de malabarismos.

Si doy clic en “saldos” veamos qué sale (no sé por qué toca hacer clic y no sale eso en la pantalla principal con un resumen general de lo más reciente pero bueno):

Saldos y Movimientos

óptimo uso del espacio disponible

En esta pantalla se nota que el diseñador tuvo un momento de lucidez destacable. Es un juego compositivo que busca darle un nuevo significado al espacio en blanco. Un par de clics más y vemos el detalle de una cuenta (sí, si quiero llegar a ver el detalle de movimientos de una cuenta todavía me falta ver dos pantallas que no quiero incluir para no aburrirlos):

¿qué prefiere, tablas o tablas?

Empezamos a ver un patrón (y no me refiero a ese patrón) sino a un patrón que suelo llamar Save as… pero combinado con otro que suelo llamar Plantilla predeterminada 1. Todas las pantallas de la Sucursal Virtual Empresas Bancolombia (sí, voy a procurar escribir el nombre completo siempre para ver si recibo algo de ranking Google para esos términos) parecen sacadas de un template de Microsoft FrontPage o Visual Studio.

Transferencias

Hagamos una transferencia. Eso sí es un servicio. Todo lo anterior no ha sido más que presentación de datos. Supongamos que ya tengo una cuenta creada (ese formato también es bello pero me lo voy a saltar) y que voy a hacer un “pago a proveedores”:

formulario de creación de transferencia

En “tipo de pago” hay:

¿cuál de estos es el formato correcto?

…no uno ni dos ni tres sino veintisiete tipos de “pagos a proveedores” diferentes (¿WTF?).

¿Por qué carajos hay formatos del 2003? De pronto es que mi empresa no es una Fortune 500 o yo debería saber más de esto.

¿Por qué hay un pago a proveedores que se llama “pago a proveedores”? ¿no es ese el verdadero “pago a proveedores”? Ese es el que yo siempre uso… nunca he usado ninguno de los otros y no sé que significan… de hecho es en otro lado en la sucursal que uno paga TV por cable entonces no entiendo qué hace esa opción ahí.

¿Me faltó una capacitación para poder usar la Sucursal Virtual Empresas de Bancolombia?

Bueno selecciono “pago a proveedores”. Ahora solo debo ponerle un nombre al pago… algo que me sirva para luego recordar qué estaba pensando yo al mandarle plata a otra persona: “Pago Paulo Pinto 12/1/2010″ es suficientemente claro y explícito (cualquier parecido con nombres de personas reales es pura coincidencia):

26 caracteres ya es demasiado

¡Pues no! ¿Quién dijo que podía usar más de 25 caracteres? ¡Bruto! ¡Lo que sea que le va a poner al nombre de la transferencia debe ser menos de 25 letras y espacios! ¡25 es más que suficiente!

Con lo costoso que es guardar, digamos, 64 caracteres… hay niños muriendo de hambre y usted pidiendo más de 25 caracteres. ¿Alguien quiere pensar en los niños? Supongo que si permitiera más caracteres el servicio no podría ser tan económico… 200 dólares al año son una ganga (ni mencionar la Sucursal Virtual Personas Bancolombia que cobra por cada login). Esto me recuerda la arbitrariedad que tenían (y tienen) algunos sistemas operativos con los nombres de los archivos (8 caracteres debía ser suficiente).

FAIL

Me tengo que conformar con algo más prudente, más sensato… no podemos desperdiciar tanto caracter… hay niños muriéndose en todo el mundo.

Olvidaba mencionar que los nombres de las transferencias deben ser únicos (no puede haber dos pagos con el mismo nombre). ¡El sistema es capaz de manejar billones de pesos y millones de clientes pero no es capaz de generar un nombre único interno de forma automática! Debe haber un lado donde yo pueda saber qué nombres he usado o si el nombre está tomado… pues no… de ahí que decidí usar fechas para los nombres de los pagos (que de hecho está dos renglones abajo pero no encontré otra forma de garantizar unicidad).

Seleccionemos una cuenta a la cual transferir:

¿pago en efectivo? ¿desde la Sucursal Virtual empresas de Bancolombia?

Arriba vemos “Benef” que, supongo, significa “Beneficiario” (alguien tiene que pensar en los niños).

Claramente el sistema sabe que es una cuenta de ahorros (arriba dice “ahorros” y además es una cuenta Bancolombia). Sin embargo, en “tipo de transacción” me pide seleccionar qué hacer con la plata que voy a mandar. Por alguna razón no es capaz de asumir que voy a “abonar a una cuenta de ahorros”. Nunca he usado “pago en efectivo” (si voy a pagar en efectivo pues voy al cajero y saco la plata… para eso no necesito una sucursal virtual… ¿o es que mandan un tipo con la plata a donde vive el dueño de la cuenta? lo mismo aplica para el cheque… si tuviera chequera) y no sé que carajos es “efectivo seguro”.

El problema es que si usted selecciona algo que NO sea “abono a cuenta de ahorros”, ¡la transacción falla! Pero de eso usted no se entera sino cuando el proveedor lo está llamando a preguntar: ¿por qué no me ha pagado?

La odisea continúa…

No sigo porque me puedo quedar toda la noche pegando pantallazos pero la verdad es que no puedo creer cómo, con $25,000,000,000,000 en utilidades del sector financiero (un gran porcentaje de eso siendo de nuestro amigo Bancolombia) no son capaces de tener una Sucursal Virtual Empresarial cobrada decente… ¡es realmente molesto y descarado!

Yo no tengo problema con pagar si recibo un servicio adecuado, especialmente si la empresa que presta el servicio está repleta de dinero.

¿Cómo es la sucursal virtual de su banco? ¿Es mejor o peor que esto? ¿Cuál banco me recomiendan?

“日々の音色 (Hibi no neiro)”

impresionante video

de la descripción en YouTube:

This music video was shot for Sour’s ‘Hibi no Neiro’ (Tone of everyday) from their first mini album ‘Water Flavor EP’. The cast were selected from the actual Sour fan base, from many countries around the world. Each person and scene was filmed purely via webcam.

Director: Masashi Kawamura + Hal Kirkland + Magico Nakamura + Masayoshi Nakamura

Desde hace rato estaba inconforme con la velocidad de este blog. Suponía que era un tema de hosting, pero MediaTemple ha sido mi proveedor para cualquier cantidad de sitios, propios y ajenos, desde 2001 (o aún antes) y nunca he tenido grandes inconvenientes con ellos. Supuse que era un tema de WordPress (el corazón detrás de este blog) pero he visto muchos blogs WordPress que no son lentos. Reduje la cantidad de posts que salen en cada pantallazo a cinco y nada (igual me parece mejor dejar eso como está ahora… el feed sigue igual con diez posts). El blog ya estaba demasiado lento al punto de ser insoportable. Me puse a buscar y encontré este listado de tips para resolver problemas de velocidad que finalmente resolvió el problema. Como el listado está en inglés, acá publico mi versión en español:

1. Para evitar que su presencia como usuario administrador afecte el desempeño del blog, abra la administración de WP en un navegador (Firefox por ejemplo) y el blog como tal, sin estar logueado, en otro (Opera por ejemplo).
2. Vuelva a uno de los temas predeterminados/básicos de WordPress.
3. Si esto no funciona, desactive todos los plug-ins que tenga instalados.
4. Pruebe que el blog funcione bien (sea rápido o más rápido que antes). Si esto no sucede, puede que simplemente sea un tema de hosting… de pronto es momento de pasarse a MediaTemple :)
5. Active uno a uno los plug-ins, verificando que la velocidad no se afecte demasiado.
6. Eventualmente encontrará uno que sea el culpable de la lentitud.

Cuando encuentre al culpable, busque una versión actualizada del plug-in o de pronto habrá uno equivalente que funcione mejor. En mi caso era BC Enable (no pongo link porque no se los recomiendo) que permite incluir videos de BrightCove (como un YouTube pero comercial/profesional) en el blog. Lo peor de todo es que ni siquiera estaba usando el maldito plug-in (!) (simplemente lo tenía activado en la administración y ya). A veces es mejor simplemente usar el código <embed> de los sitios así no sea “políticamente correcto“.

En restrospectiva parece obvio que el problema fuera un plug-in, pero la verdad nunca pensé que pudieran afectar tanto la velocidad del blog.

Espero el blog sea nuevamente un poco más tolerable (en lo que concierne a velocidad, por lo demás si no respondo) y el tip le sirva a alguien más.