Software over the rainbow

Media Invaders es la instalación interactiva con la que Cuatic se han presentado en sociedad (el pasado fin de semana en El Sol). Consiste en una versión irónica del clásico Space Invaders donde el usuario mueve con su mano un puntero en vez de un joystick, defendiéndose de los ataques de los medios publicitarios tradicionales.

Según he podido saber, la parte técnica consta de Max, Java y Flash, además de un poco de electrónica casera. En su newsletter*:

La imagen del juego se emite sobre una pantalla de retroproyeccion de
2mt x 1.50mt. El usuario, de pie frente a la imagen, interactúa a
través de un cursor de metacrilato y metal que mueve con la mano. Cada
vez que el usuario pierde una vida, recibe en su mano una descarga
eléctrica de 40W durante unos milisegundos.

Lo interesante de la propuesta es la intención de aplicar este tipo de interactividad (habitualmente relegada a departamentos de investigación y festivales de arte electrónico) a proyectos reales de publicidad. Promete mucho.

* Envía un mail con el texto “APUNTAME” a news [arroba] cuatic [punto] com.

Un amigo (don jose florido, de ávidos), me preguntó si se podía hacer en processing algo de video ascii para una genial idea que tuvo para la decoración de su casa. Ya se que el lo que quería era hacerlo por sí mismo (tranquilo que no te pasaré el código), pero me picó la curiosidad. Aquí una captura de la primera versión.

;)

Esta semana empiezo en mi trabajo con el diseño de una aplicación para pantalla táctil. Un poco de investigación preparatoria:

La usabilidad de los terminales táctiles

Artículo general sobre la usabilidad en pantallas táctiles (es)

Interaction Design Guide for Touchscreen Applications

Recurso completísimo sobre diseño de interacción en aplicaciones táctiles (en).

Touchscreen Usability in Short

… y unos tips de usabilidad como recordatorio (en).

Touchscreen Application Tips

10 tips para conseguir el éxito en el diseño para táctiles (en).

Keys to a Successful Kiosk Application

Presentación tipo powerpoint sobre aplicaciones táctiles para kioskos interactivos (pdf/en).

Touch tips – designing touch friendly applications

Y otra lista de tips (en)

Principles of User Interface Design

Principios generales de diseño de interfaz (en).

Últimamente cada vez que tengo un rato libre (e incluso algunos que no son libres) siempre acabo abriendo processing. Estoy haciendo variaciones sobre el sketch del reloj de color.

En esta ocasión pretendía, siguiendo con el esquema original (hora= Tono, minutos y segundos= Saturación) representar una hora entera cada vez. La inspiración viene (salvando las evidentes distancias) del Cinema Redux de Brendan Dawes . En un principio pensé en guardar automáticamente una captura de pantalla de cada segundo y luego colocarlas en una nueva imagen en un segundo sketch, pero eso me limitaría a generar imágenes estáticas. Prefiero continuar haciéndolo interactivo.

Finalmente he hecho algo más simple. En un cuadrado de 60 x 60, el eje horizontal representa los segundos, y el vertical los minutos. La hora sigue representada por el tono, pero ahora sólo vemos el de los segundos… El resultado es que a los 59 minutos se observa un degradado desde blanco en la esquina superior derecha al tono que marque la hora abajo a la derecha… es un poco difícil de explicar. Mejor vean el applet*.

Dudo que tenga la más mínima utilidad como reloj, y el resultado visual es bastante pobre, pero estamos en proceso.

* Es necesario instalar el plugin de java. Puedes descargarlo para linux, macintosh o windows.

No me desagradan las 2:20 de la madrugada.

La 1:19 del mediodía tampoco está mal.

Pero creo que me quedo con las 23:58.

Hace un par de días he vuelto a jugar con proce55ing. Como últimamente estoy pensando en la interactividad y el tiempo pensé en hacer algo en este sentido.

Se me ocurrió un reloj de color*. Cada hora del día se representa como un tono en la escala HSB. Los minutos son el mismo color pero variando la saturación (desde 0% a los 00 minutos hasta 100% a los 59). Los segundos se reflejan igualmente pero tomando como valor máximo en cada momento la saturación de los minutos. Dependiendo de la hora a la que entremos veremos una determinada conjugación de colores.

No es que sea nada del otro mundo, pero me sirvió para retomar un poco el lenguaje (que espero seguir practicando porque me encanta). También me gustó hacer un experimento de código pensando primero y ejecutando después, y no al revés.

http://www.jesusgollonet.com/proce55ing/reloj_color

*Para ver el reloj es necesario instalar el plugin de java. Puedes descargarlo para linux, macintosh o windows

Habitualmente cuando hablamos de interactividad como un añadido en la web solemos limitarnos al binomio persona-ordenador. Sin embargo, la interactividad puede implicar otras relaciones no tan exploradas .

Una variable que puede dar resultados interesantes es el tiempo. Con un código relativamente sencillo podemos hacer que una página web se comporte de manera distinta dependiendo de, por ejemplo, la hora del día.

Aquí tenemos un pequeño código que ya puse en la lista de correo de www.ovillo.org que nos permitirá, mediante javascript y CSS darle un aspecto distinto a una página web dependiendo de la hora a la que entre el usuario.

Es realmente básico. Simplemente cogemos la hora del sistema con el objeto Date y dependiendo de cual sea escribimos con document.write la dirección de una hoja de estilos u otra.

Metemos en el Head del documento este javascript:

var fecha=new Date();
// tomamos la fecha con el objeto Date();
var ahora= fecha.getHours();
// metemos la hora actual en una variable
var amanece=7;
// pongamos que amanece a las 7...
var anochece=21;
// y anochece a las 8 de la tarde.
if (ahora < amanece ||  ahora > anochece) {
    // si la hora actual es menor que la de amanecer
    //y mayor que la de anochecer;
    document.write('<link rel="stylesheet" href="noche.css" type="text/css">' );
   // tomamos la hoja de estilos "noche.css"
} else {
   document.write('<link rel="stylesheet" href="dia.css" type="text/css">');
    // y si no pues "dia.css"
}

Creamos dos hojas distintas de estilos para el “dia”y la “noche”
*”dia.css”*

body  {
   color: black;
   background-color: white;
}

*”noche.css”*

body  {
   color: white;
   background-color: black;
}

Si probais a cambiar la hora de amanecer o anochecer vereis como cambian las hojas de estilo.

El ejemplo es una simplificación extrema, y podría ser fácilmente implementado (y seguro con resultado más interesantes) en actionscript y otros lenguajes. Más sobre esto pronto.