Eguino + Alondra Comunicación + Naciones Unidas = Expo Zaragoza 2008

Introducción

A principios de Marzo de 2008, Alberto Álvarez Vallina de Alondra Comunicación se puso en contacto conmigo para ofrecerme un interesante proyecto que desarrollaríamos conjuntamente. Consistía en preparar un Punto de Información Multimedia (PIM) con una aplicación interactiva para la oficina española de las Naciones Unidas que se expondría en la Expo Zaragoza 2008 y en otras ferias/exposiciones durante 5 años. En el PIM se ofrecería información al usuario sobre los 8 Objetivos del Milenio (ODM), se visualizaría un vídeo resumen y le permitiría grabar un mensaje personal de 40 segundos explicando su punto de vista sobre esta iniciativa o en contra de la pobreza. Cabe destacar que es una aplicación multilingüe: español, catalán e inglés.

Dados mis conocimientos de tecnologías web y el poco tiempo del que disponíamos, propuse desarrollar un interfaz web en el que se utilizarían animaciones Flash. Para dar la imagen de programa sin barras de herramientas, navegación y demás información de la pantalla, se utilizó el navegador Opera que en su modo pantalla completa desaparece toda esa información (e incluso las barras de desplazamiento) dando la sensación al usuario de que está en una aplicación completa. Inicialmente para grabar el vídeo se pensó en utilizar una cámara IP ya que al tener asignada una dirección IP y poder ser vista desde una página web, se mostraría en un iframe dentro de mi aplicación. A pesar de no ser la mejor opción era la que a priori parecía más sencilla. Más adelante explicaré por qué cambiamos de opinión y al final utilizamos una cámara web normal y tecnología Flash para la grabación del mensaje.

Especificaciones técnicas

Hardware: el PIM es un ordenador normal (Intel Pentium Dual Core E2180 2,0 GHZ, 1GB DDR2 667 Kingston, ASUS P5GC-MX, HD 80GB SATA II, Windows XP,...) con una pantalla táctil de 19'' panorámica y resolución 1440x900 píxeles e incluye teclado+trackball. Pesa aproximadamente 65 kg. y el diseño del vinilo también es mío.

Software: para visualizar la aplicación se utiliza el navegador Opera, el servidor WAMP de Apache y bases de datos en MYSQL y el nuevo servidor de Flash Open Source (código abierto) Red5 que se utiliza para la grabación de vídeos.

Protector de pantalla

La aplicación parte de una pantalla semi-estática: un protector de pantalla que no varía hasta que el usuario toca la pantalla para comenzar a interactuar con la aplicación. En él se muestran continuamente vídeos de famosos que en español y en inglés opinan sobre estos ODM. A su vez en la parte superior se ven los logotipos de cada uno de los 8 objetivos y de la Campaña del Milenio en los que su nombre va cambiando de idioma en lentas transiciones. Se puede ver una captura de esta pantalla en la "Figura 1".

Selección de idioma

Una vez que se ha comenzado a interactuar con la aplicación el primer paso es dar la bienvenida al usuario y seleccionar el idioma en el que verá el vídeo y se ejecutarán todas las páginas siguientes. En realidad este paso es todo una animación Flash completa en la que con fusiones y máscaras de capa se van mostrando poco a poco todos los elementos hasta que finalmente aparecen las banderas que son los botones de elección. Captura de esta pantalla en "Figura 2".

Vídeo e información sobre los ODM

A continuación, se visualiza un vídeo con audio de 1 minuto y 40 segundos de duración que sirve de pequeña introducción a los Objetivos del Milenio. Este vídeo es la parte del proyecto que yo no he hecho si no que Borja ha sido el responsable. Para ello a utilizado el Photoshop para los dibujos y el retoque fotográfico y el After Effects para animarlo.

Seguidamente se pasa a una nueva página Flash en la que el usuario puede interactuar con los ODM y obtener mucha información sobre cada uno de ellos y su estado de desarrollo actual. Puesto que se quería "ver movimiento" esta sección está bastante cargada de animaciones para la entrada y salida de fotos e items en el menú. Se pueden ver capturas de varios de los Objetivos y su disposición en la "Figura 3", "Figura 4" y "Figura 5". Por temas de copyright © no puedo poner demos de las animaciones, pero imaginar que hay muchas transiciones y fundidos y se puede pulsar/interactuar en todos los elementos y botones que aparecen.

Datos del usuario

El paso previo a grabar el vídeo consiste en rellenar un pequeño formulario donde el usuario escribe alguno de sus datos personales para identificar el vídeo y que más adelante se mostrarán el a web en caso de que su mensaje sea seleccionado. Todos los campos son obligatorios con el consiguiente aviso en caso de que no los rellene. Captura en la "Figura 6".

Escenarios

El usuario debe elegir entre uno de los cuatro siguientes escenarios (ver "Figura 7") donde le gustaría que se grabase su mensaje contra la pobreza:

  • Asamblea de las Naciones Unidas
  • Congreso de los Diputados
  • Plató de televisión
  • Manifestación

Grabación del vídeo

Esta es la parte más complicada del proyecto y en la que fue necesario invertir muchas horas y esfuerzo. La verdad es que lo conseguí gracias a la inestimable colaboración de Jorge Álvarez Alonso. A pesar de que inicialmente habíamos pensado en utilizar una cámara IP, más adelante nos dimos cuenta que utilizar las nuevas opciones de Flash y ActionScript 3.0 podían ofrecer un resultado óptimo. Para poder grabar vídeo en Flash es necesario instalar un servidor Red5. Es un programa Open Source que está en fase de desarrollo. Su versión más nueva es la v.0.7.0, pero a pesar de esto he de decir que funciona perfectamente y no ha dado ningún problema. En la animación resultante se muestra un reloj de 40 segundos que se activa cuando comienza la grabación, una barra para ver el tiempo transcurrido y varios botones:

  • Grabar: inicia la grabación.
  • Parar: tiene la doble función de parar la grabación y la reproducción del vídeo guardado.
  • Ver: una vez grabado el vídeo el usuario puede verlo para comprobar si está correcto.
  • Eliminar: si el vídeo no le gusta, puede borrarlo y proceder a crear uno nuevo.
  • OK: si todo está correcto este botón guardará el vídeo y pasará a la siguiente página.

En el fondo se puede intuir una imagen del escenario que ha elegido el usuario. No queda muy bien pero era uno de los requisitos que nos pidieron junto con una pequeña explicación del uso de la cámara y la grabación. La captura que muestra este proceso es la "Figura 8".

Fin de la aplicación

Finalmente se muestra una simple animación Flash que agradece y recuerda al usuario que podrá obtener más información en www.sinexcusas2015.org (en la versión en español) y que tras unos segundos se redirecciona a la pantalla inicial con los vídeos de famosos hablando. Ver "Figura 9".

Conclusiones del proyecto

Ha sido un trabajo muy interesante que ha llevado bastante más tiempo del que pensaba. Esto se debe en parte a que se dependía de la información y traducciones que nos enviaba la oficina de las NN.UU. No ha desentrañado una gran complejidad, salvo el desarrollo de la grabación de vídeo con la cámara web en Flash. Tampoco hubo que hacer muchos diseños ya que desde un principio gustó bastante la propuesta. En resumen, se puede decir que ha sido un proyecto muy bueno, mi primer gran proyecto a nivel nacional, y espero que mucha gente lo vea y lo utilice en la Expo y otras ferias. Esperaré con ansia los resultados que nos envíen sobre su uso.

Proyecto Expo Zaragoza 2008

Proyecto Expo Zaragoza 2008

Figura 1: Protector de pantalla

Figura 1: Protector de pantalla

Figura 2: Selección de idioma

Figura 2: Selección de idioma

Figura 3: Introducción a los ODM

Figura 3: Introducción a los ODM

Figura 4: Ejemplo de un ODM

Figura 4: Ejemplo de un ODM

Figura 5: Reducir la mortalidad infantil

Figura 5: Reducir la mortalidad infantil

Figura 6: Datos del usuario

Figura 6: Datos del usuario

Figura 7: Selección de escenarios

Figura 7: Selección de escenarios

Figura 8: Grabación del vídeo

Figura 8: Grabación del vídeo

Figura 9: Despedida

Figura 9: Despedida


Eguino © 2017