Users Digital Design 14

CORRECCIÓN DE COLOR EN PHOTOSHOP ILUSTRACIÓN ESTILO CÓMIC TELEVISIÓN DIGITAL Y 3D ARQUITECTURA DE LA INFORMACIÓN ACROBAT X WEB SEMÁNTICA GEOLOCALIZACIÓN FLASH VS. HTML 5

14

AR. $16,90 / MX $45 ESPAÑA €3,95

REALIDAD AUMENTADA INFORME ESPECIAL

¿QUÉ ES EXACTAMENTE? / ¿CÓMO LA PUEDO APLICAR EN MIS TRABAJOS? / TÉCNICAS, SECRETOS Y TENDENCIAS Esta tapa contiene Realidad Aumentada. Para ver la animación, debe visitar el sitio: http://design.redusers.com/ra (Powered by The Pool Argentina)

TAPA - UDD#14 .indd 1

11/03/2011 11:31:02

6

placer visual

digital

Andrea Errico http:// xavor85.deviantart.com Bio. Andrea Errico nació en Nápoles, Italia. Amante de la ciencia ficción, comenzó a desarrollar su faceta artística como autodidacta durante su adolescencia.

Por eso, al terminar sus estudios secundarios, ingresó en la famosa Academia de Bellas Artes de Nápoles, en la que se recibió con honores. Aún como estudiante, empezó a trabajar en GG Studio, una empresa dedicada a la publicación de cómics. Allí adquirió gran parte de su experiencia como dibujante.

Actualmente, trabaja como ilustrador freelance para cómics y videojuegos, y colabora como artista conceptual con prestigiosos estudios italianos. A pesar de valerse a la perfección de herramientas digitales –como Photoshop–, Andrea sostiene que a veces prefiere comenzar su trabajo con lápiz y papel.

2 Mira tribute. Esta obra demuestra cómo la elección del vestuario y de los colores es fundamental para definir la personalidad de un personaje.

www.redusers.com

Ethan tribute.

En este trabajo se puede apreciar el talento de Andrea como dibujante, al lograr rostros humanos perfectos.

06-Placer visual _ajustado.indd 6

2/24/11 10:56:10 AM

BOMBO - LIBROS PARA UDD#10 GLOBAL - Sep 10 - EDITABLE.indd 1

01/03/2011 22:06:31

22

portfolio the pool argentina

digital

media lab especializado en realidad aumentada

1

www.redusers.com

2

1 | El Andarín de la noche

2 | Copa Telmex

Libro infantil realizado por la editorial Mano Escrita con ilustraciones del artista Iñaki Echeverría. The Pool estuvo a cargo de crear aplicaciones con Realidad Aumentada con el fin de que los personajes del cuento cobraran vida.

Este libro fue presentado en la Feria del Libro de Buenos Aires como el primero con Realidad Aumentada.

En todas las entradas para la Copa Telmex se incluyó un código y se distribuyeron cámaras web por el estadio.

Al acercar el marker a la cámara, éste mostraba el Lawn Tennis Club en 3D en tiempo real con las puertas de acceso más cercanas. De esta manera, los espectadores lograban ubicarse fácilmente en el estadio.

21-25 Portfolio_ajustado.indd 22

3/2/11 2:42:16 PM

digital

23

3

3 | Astillero Quattromarine

4 | Monsieur Lolo

Réplica exacta de la lancha comercializada por el astillero Quattromarine. Esta aplicación en Realidad Aumentada se expuso en la Feria de Barcos de Nápoles con una aceptación impresionante. El astillero utilizó la aplicación para publicitar sus productos e, incluso, concretar ventas sin necesidad de mostrar la lancha original.

En este caso, The Pool tuvo que darle vida al personaje infantil Lolo. Se incluyó un marker en el arte de tapa del disco y, al acercarlo a una cámara web, se podía ver a Lolo cantando y bailando algunas de las canciones incluidas en el CD. Este trabajo demuestra las múltiples aplicaciones que tiene esta tecnología.

21-25 Portfolio_ajustado.indd 23

www.redusers.com

4

3/2/11 2:42:17 PM

24

portfolio the pool argentina

digital

Estudios media labPunga especializado en realidad aumentada ¿Qué capacitación se necesita para trabajar con Realidad Aumentada?

www.redusers.com

Ramiro: En principio, hay que tener la habilidad de entender el potencial y animarse a experimentar. Hay un factor de innovación constante en esto. Las cosas no están servidas para nadie, y si uno empieza a observarlas desde sus limitaciones, nunca van a realizarse, porque es una técnica multidisciplinaria. Nuestro equipo de trabajo está integrado por ingenieros, programadores, modeladores 3D y artistas. Creo que todo depende más de tener esa pizca de ganas de probar cosas nuevas, que de la formación. Hay que tener una visión integradora del proyecto a la hora de ejecutar las cosas, porque son bastantes áreas y es preciso trabajar con todas para que la pieza final funcione bien.

que ofrece la tecnología. Hay un primer acercamiento de fascinación completa.

Después, hay gente que piensa que se puede hacer cualquier cosa o que las cosas realmente van a aparecer. Por otro lado, lo que más limita las alternativas no es la tecnología en sí, sino la capacidad de los usuarios de captarla; por ejemplo, la velocidad de conexión en América Latina, las características de las computadoras. Fuera de eso, acercarse a la Realidad Aumentada significa tener un espíritu aventurero.

Julián: El impacto que tiene esta tecnología es clarísimo: uno ve una aplicación de Realidad Aumentada y el factor “wow” es impresionante. Lo primero que le surge a la gente es una sonrisa, y trabajar en algo que lo primero que genera es una sonrisa es brillante y facilita el resto de la experiencia. La Realidad Aumentada es la primera conducta inmersiva que pone en la ecuación al consumidor. Antes, uno abría una página y veía un aviso de diario, y era eso y nada más, porque lo que estaba ahí no se podía modificar. Ahora, con Realidad Aumentada es posible modificar absolutamente todo nuestro entorno, o sea, todo tiene potencial de ser algo mucho mejor. Obviamente, teniendo todos los elementos necesarios: una cámara web, una mínima conexión a Internet o no;

21-25 Portfolio_ajustado.indd 24

depende de cómo se programe todo. El otro día me dijeron que estamos cuatro años adelantados, y es así, porque no todo el mundo tiene acceso a una cámara web. Sin embargo, todas las tablets ya vienen con cámaras unidireccionales, todos tenemos teléfonos con cámaras, todo va a tender a eso.

¿Cómo está posicionado el mercado local con respecto al internacional?

Julián: Esta técnica se practicaba mucho en Europa y Nueva Zelanda, que ocupa uno de los lugares más importantes del mundo. También se destacan mucho Alemania y París, pero el lugar más relevante está en Suiza. Ahora, lo que hay que hacer es un comparativo de costos. En este sentido, América Latina sale ganando. En Europa, hacer una aplicación en Realidad Aumentada puede salir hasta cuatro veces más que hacerla acá. Por eso, nosotros estamos teniendo propuestas de trabajo de lugares que están al lado de Alemania, porque por un tema de presupuesto, prefieren hacerlo acá. Y como éste no es un producto en el que hay que poner una cosa arriba de la otra, se puede programar todo y verse en cualquier parte del mundo. Entonces, eso facilita el desarrollo.

¿Cómo es el grupo laboral? ¿Qué metodología de trabajo tienen?

Julián: La metodología es la siguiente.

Primero, todos en sincro; todo empieza con una reunión con el equipo de programación, de modelado, de 3D, de capturas de imágenes; un montón de variables que se van a incluir en el proyecto. Cuando todos dicen: “sí, esto se puede hacer”, entonces pensamos cómo sería el timeline para que todo entre. Una vez nos pasó que teníamos que animar un personaje y estaba todo perfecto, pero éste no se movía y nadie sabía por qué. Entonces nos dimos cuenta de cuáles son las variables que juegan en esto. Por eso, con cada descubrimiento muy chiquito que hacemos con Realidad Aumentada, tenemos un mar de cosas posibles para desarrollar.

Cada experiencia es capitalizable para la próxima. Si no se trabaja todo en sincro, no hay manera de hacerlo.

¿En qué áreas aplican Realidad Aumentada?

Julián: En este momento, estamos dedicándonos a lo que es arte, a plástica con nuevas tecnologías inmersivas, y llevamos todo esto a lo que es publicidad.

Diego Alberti —un artista que trabaja con nosotros— es muy bueno para realizar conceptos en Realidad Aumentada, y esto nos facilita mucho las cosas. De este

3/2/11 2:42:19 PM

digital

25

modo, The Pool le agrega un tono muy alto de creatividad a lo que es el recurso. El recurso solo, es decir, la Realidad Aumentada, puede empezar y terminar muy rápido. Si no le sumamos una buena idea, el recurso se muere. Hay que meterle mucha idea y mucho concepto detrás.

Así, las cosas que se están viendo son impresionantes.

¿Cuáles son los proyectos más destacados?

21-25 Portfolio_ajustado.indd 25

bién actualizándonos para tener siempre la información más nueva sobre soportes y modos de comunicación de vanguardia en lo que respecta a Realidades Mixtas, Realidades Inmersivas y Realidad Aumentada.

¿Qué recomendaciones podrían darle a alguien que se está iniciando en RA? Ramiro: Todo tiene que ver con el área desde donde se genera. Hay que tener muchas ganas de nutrirse de todo lo que está pasando, porque esto es como una licuadora de tendencias. Es necesario estar muy informado y mantener los ojos bien abiertos, comprar las revistas, leer las publicaciones.

Julián: Informarse es la clave. La Realidad Aumentada no es un hardware o un software; se puede trabajar hasta en un sistema de textos. Lo importante es cómo entra la información y cómo sale. No es un sistema que se puede ver sólo en una página web: se puede controlar, hacer una proyección, lo que cada uno quiera. Por eso decimos que la creatividad es inmensa e infinita. Recién estamos empezando.

Obviamente, nosotros tenemos capacidad para hacer algo mucho más fuerte, pero dependemos de las limitaciones del hardware de los usuarios. Tenemos que manejarnos con parámetros más gene-

rales, porque de lo contrario, estaríamos haciendo un producto para tres personas.

Ramiro: La tecnología, en vez de verse en un monitor, se pasa a un proyector, y después es posible proyectarla en cualquier cosa. Uno está interviniendo la realidad.

A todas las personas les va a faltar algo: al que sabe más de programación le va a faltar la parte artística, y el artista se verá limitado por la programación. Hay una dosis muy grande de trabajo interdisciplinario. Si uno tiene un perfil más artístico, deberá empezar a leer el código con más tranquilidad y sin tanto miedo; mientras que el que programa tendrá que empezar a jugar gráficamente.

¿Cuál es el mayor desafío que debe enfrentar un profesional antes de comenzar?

Julián: No sólo hay que pensar en algo que era plano y se mueve; hay que pensar en algo que antes era plano, se mueve y, además, tiene tres dimensiones. Entonces, el desafío que esto implica para artistas y desarrolladores es tremendo.

Algunos clientes HUGO BOSS | EDITORIAL MANO ESCRITA | COPA TELMEX | ASTILLERO QUATTROMARINE

www.redusers.com

Julián: Dentro de los proyectos más interesantes que realizamos está la Copa Telmex. Todas las entradas tenían el código o marker. Luego, en varios lugares del estadio, se colocaron cámaras que, al acercar el marker, mostraban el Lawn Tennis Club en 3D en tiempo real sobre la entrada y las puertas de acceso más cercanas. En gran parte, este trabajo se realizó gracias a la visión innovadora de Sebastián Roqueiro, Director de Marketing de Telmex. Otro proyecto muy interesante fue el que realizamos para el astillero Quattromarine, que nos encargó hacer cuatro lanchas en Realidad Aumentada. Éstas se mostraron en el Boat Show de Nápoles y fueron la novedad más grande del evento. Sin embargo, el proyecto que más sobresale por su innovación y por la osadía del cliente es el que hicimos para la editorial Mano Escrita, que estaba por lanzarse al mercado. La directora, María Laura Caruso, nos encargó hacer dos libros en RA que fueron ilustrados por el genial Iñaki Echeverría. Luego de mucha planificación, largamos con el proyecto.

Los libros se presentaron en la Feria del Libro 2010 de Buenos Aires, y fueron los primeros con RA en el mundo. Habíamos logrado algo mucho más importante de lo que creíamos, y los libros fueron un boom de prensa. Dimos conferencias en el CMD (Centro Metropolitano de Diseño), clases en la UCES, entrevistas a la mayoría de los medios, notas a los diarios, y hasta nos llamaron del programa de televisión Un Mundo Perfecto (con Roberto Petinatto) para presentarlos junto al ganador de dos Oscars, Gustavo Santaolalla. Actualmente, los pedidos llegan de todas partes del mundo. Por nuestro lado, estamos no sólo implementado esta tecnología, sino tam-

3/2/11 2:42:27 PM

48

ACROBAT X CREACIÓN DE CONTENIDOS MULTIMEDIA

diseño gráfico

digital

Autora Silvia Lifman consultas@la-teacher.com.ar www.la-teacher.com.ar Dificultad Intermedia |

Herramienta utilizada Acrobat X

PDF, “acrobático formato”

www.redusers.com

En este artículo analizamos las características más importantes que nos ofrece Adobe Acrobat X para trabajar con contenidos multimedia.

Hasta hace unos pocos años, el uso rudimentario del PDF les era aún extraño a muchos usuarios. Cuando en mis cursos solía preguntar quién trabajaba con este formato, obtenía por toda respuesta un silencio absoluto; y en el mejor de los casos, alguna tímida mano se alzaba para decir “yo”.

Con el tiempo, fui agregando a mi primera inquietud la siguiente cuestión.

Entonces preguntaba: “¿qué tipo de PDF utilizan?”. Y para mi sorpresa, hasta el día de hoy sigo encontrando a usuarios que me miran desorbitados, como si es-

48-50 Acrobat_ajustado.indd 48

tuviese hablando en una lengua extraña.

Es entonces cuando comienzo a contar que no existe un solo PDF, y tampoco para un único fin. En esta oportunidad, abordaremos en detalle el uso del “acrobático formato” para ser distribuido incluyendo video, archivos 3D, sonido y también animaciones Flash.

Características de las versiones El formato PDF, a partir de la versión 9 y ahora con la 10, de Adobe Acrobat y Adobe Reader, es capaz de reproducir los siguientes contenidos multimedia:

Contenidos interactivos: SWF Video: archivos de video MOV, M4V, 3GP y 3G2 que utilizan compresión H.264. También incluye archivos FLV, F4V, MP3 y MP4. Para reproducir archivos que emplean compresión H.264, hay que tener códecs H.264 instalados en la computadora.

Audio: MP3 y MP4.

Comprendidos estos conceptos, en los pasos que acompañan a esta introducción, veremos de qué manera se puede crear un archivo multimedia a partir de un PDF multipágina.

2/23/11 9:29:38 PM

2

A continuación, procedemos a colocar botones para la navegación entre las distintas páginas del documento. A partir de la versión X, el menú de Adobe Acrobat se ha reducido para dar prioridad al uso de los paneles de herramientas, de manera similar a como aparecen en otras aplicaciones de Adobe. Seleccionamos el panel [Contenidos/Botón] para agregar un botón. Una vez ubicado, dentro del cuadro de diálogo [Propiedades del botón], en [Aspecto] elegimos [Color de relleno: Sin color].

diseño gráfico

1

Creación de un archivo multimedia a partir de un PDF multipágina.

El primer paso que debemos realizar es abrir un archivo PDF creado previamente con InDesign. Notaremos que todos aquellos textos que posean una dirección URL o de e-mail serán reconocidos como hipervínculos por Acrobat de manera automática.

digital

49

3

Asignar una acción.

Una vez colocado el botón, le asignaremos la acción.

Trabajaremos también desde el cuadro de diálogo [Propiedades del botón], en [Acciones/ Seleccionar acción/Ejecutar un elemento del menú], dentro de los elementos [Ver/Navegación de página/Página siguiente].

Luego de colocar la acción, pulsamos el botón derecho sobre el botón y aparecerá la opción de duplicarlo en todas las páginas donde necesitemos avanzar hacia la página siguiente. Para colocar el botón de navegación hacia las páginas anteriores, procedemos de la manera descripta.

48-50 Acrobat_ajustado.indd 49

4

5

Incorporar audio.

Desde el panel [Contenidos/ Multimedia] seleccionamos [Sonido], examinamos y buscamos el archivo MP3 o MP4. Para que aparezca alguna imagen, en [Configuración de inicio], donde dice [Crear poster desde archivo], elegimos una imagen; si no, el audio se podrá activar, pero el usuario deberá intuir que allí puede ejecutarse sonido. Para volver a editar las opciones multimedia del objeto, vamos a [Panel Contenido], con la herramienta [Seleccionar objeto].

www.redusers.com

Continuamos con los botones. En [Opciones], donde figura [Diseño], elegimos [Sólo ícono], y donde dice [Comportamiento], [Al activar]. De esta manera, veremos que aparecerán tres opciones de estado para asignar imágenes o iconos a los botones: [No esté pulsado], [Esté pulsado] y [Al pasar sobre él]. En [Seleccionar ícono], examinamos la ruta hacia un archivo en formato PDF que contenga una o varias páginas con imágenes de botones.

2/23/11 9:29:39 PM

web

digital

58

FLASH GEOLOCALIZACIÓN CON GOOGLE MAPS API

¿Dónde estás? ¿Dónde estoy?

En esta nota hablaremos sobre geolocalización, uno de los temas que mayor difusión están teniendo dentro de lo referido a la Web 3.0.

Autora Soledad Zapata solezapata@gmail.com

www.redusers.com

@solezapata

La transición entre los elementos y la tecnología, que van desde la brújula hasta los sistemas de posicionamiento global a través de satélites (GPS) y su registro

58-60 Geolocalizacion_ajustado.indd 58

por medio de Sistemas de Información Geográfica (SIG), contribuye al desarrollo de herramientas y aplicaciones que dan como resultado información más exacta y su posible implementación en sistemas de geolocalización.

De la mano del impulso de la Web 3.0, la geolocalización de contenidos es una herramienta que creció a pasos agigantados en el último tiempo, utilizando los mapas como contextualizadores de notas. Pero ¿qué es exactamente? En

términos simples, geolocalización significa asociar un recurso digital —como fotografías, videos, texto y/o metadatos— a una locación física. La información del lugar se calcula sobre la base de coordenadas de longitud y latitud, para referir un lugar que puede estar en cualquier parte del mundo.

La combinación de Internet, dispositivos móviles y tecnología de geolocalización hace posible que varios usuarios puedan compartir y consultar información geográfica en tiempo real.

2/23/11 10:43:42 PM

HYBRID_MAP_TYPE: Mapa con fotografías satelitales y nombres de las vías.

NORMAL_MAP_TYPE: Mapa normal con nombre de las vías.

Una interfaz de programación de aplicaciones, o API (Application Programming Interface) es el conjunto de funciones, procedimientos y/o métodos que ofrece una biblioteca para ser utilizado por otro software como una capa de abstracción.

En la actualidad, son muchas y variadas las aplicaciones que podemos darle a esta funcionalidad: emplearla en la típica sección “¿DÓNDE ESTAMOS?” de una web corporativa, marcar la ubicación de un evento o emplearla junto a las nuevas capacidades de geolocalización que traerá Flash Player 10.1 aplicado en dispositivos móviles.

El primer paso para utilizar esta API es obtener una clave que nos permitirá mostrar los mapas en nuestra web. Esta clave es una cadena alfanumérica que va asociada únicamente a un dominio (aquél donde se va a ejecutar la aplicación). La podemos obtener en: http:// code.google.com/intl/es/apis/maps/signup.html, indicando el dominio de forma http://tudominio.com.ar, para poder utilizarla en todos los subdirectorios, y aceptando los términos y condiciones.

58-60 Geolocalizacion_ajustado.indd 59

digital

Luego, debemos descargar el kit de Google con las librerías de ActionScript y Flex desde el siguiente link: http:// maps.googleapis.com/maps/flash/ release/sdk.zip, donde se encuentra la última versión. Como no es un componente que ya venga preinstalado en Flash, debemos incluirlo en la carpeta correspondiente a nuestra instalación.

Descomprimimos el ZIP descargado y buscamos el archivo map_X_X.swc (las X indican la versión del componente; actualmente está en uso la 1.20) dentro de la carpeta lib.

Ahora debemos copiarlo en la carpeta de componentes de Flash, generando primero una carpeta llamada Google. Dependiendo del sistema operativo que utilicemos y la versión de Flash que tengamos instalada, las rutas de instalación variarán; para Mac OS X: Macintosh HD/Applications/Adobe Flash CS5/Common/Configuration/Components; y para Windows 7: C:/ Archivos de programa/Adobe/Adobe Flash CS5/en/Configuration/Components.

Creamos un documento nuevo de Flash AS 3.0 y, en la ventana [Components], comprobamos que hemos instalado bien el API de Google Maps. Lo seleccionamos y lo arrastramos hacia el escenario o hacia la biblioteca del proyecto.

Ahora vamos a incluir en el panel de acciones el código básico para mostrar un mapa de la ciudad de Buenos Aires: import com.google.maps.*;

PHYSICAL_MAP_TYPE: Muestra el mapa físico.

var lat:Number = -34.613714; var lon:Number = -58.392849; var zoom:int = 10; var map:Map = new Map(); map.key = “tu_API_key”; map.setSize(new Point(550, 400)); map. addEventListener(MapEvent.MAP_READY, onMapReady); map.sensor=”true”; this.addChild(map);

SATELLITE_MAP_TYPE: Mapa con fotografías satelitales.

function onMapReady(event:Event):void { map.setCenter(new LatLng(lat,lon), zoom, MapType.NORMAL_ MAP_TYPE); } En este código estamos, en principio, importando las clases necesarias

www.redusers.com

La herramienta por excelencia para visualizar este tipo de contenidos es Google Maps (http://maps.google.com).

Como no podía ser de otro modo, el gigante de Internet tiene el mayor motor de mapeo disponible hoy en día. Ya sea por su aplicación de escritorio (Earth) o por su desarrollo web (Maps), logró captar el interés de millones de usuarios.

En esta nota veremos cómo incluir un mapa en nuestros sitios Flash mediante el uso de AS3, utilizando Google Maps API for Flash. Ya no necesitamos un componente de terceros para tener mapas en nuestra web, porque el API provisto por Google es amigable, simple y cuenta con buena velocidad en lo que se refiere a acceso de datos. Además, posee una extensa hoja de referencias, lo que facilita el desarrollo de cualquier aplicación para Flash, AIR o Flex.

59

web

Encuentre los archivos utilizados en este tutorial en design.redusers.com

2/23/11 10:43:43 PM

PUBLICACIÓN DE USERS DIGITAL DESIGN: SUDAMÉRICA / (EXCEPTO VENEZUELA) DE MARZO A NOVIEMBRE VENEZUELA / MÉXICO / ESPAÑA / CENTROAMÉRICA/ DE SEPTIEMBRE A MAYO

BOMBO - SUSCRIPCIONES UDD NUEVO IV - Feb 11 - EDITABLE.indd 1

22/02/2011 22:34:21