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 $45ESPAÑA €3,95

¿QUÉ ES EXACTAMENTE? / ¿CÓMO LA PUEDO APLICAR

EN MIS TRABAJOS? / TÉCNICAS, SECRETOS Y TENDENCIAS

INFORME ESPECIAL

REALIDAD AUMENTADA

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 1TAPA - UDD#14 .indd 1 11/03/2011 11:31:0211/03/2011 11:31:02

6

digi

tal

placer visualw

ww

.red

user

s.co

m

2

Andrea Errico

Ethan tribute. En este trabajo se puede apre-ciar el talento de Andrea como dibujante, al lograr rostros hu-manos perfectos.

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

2

Mira tribute. elección del vestuario y de los colores es fundamental para defi nir la personalidad de un personaje.

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.

06-Placer visual _ajustado.indd 6 2/24/11 10:56:10 AM

BOMBO - LIBROS PARA UDD#10 GLOBAL - Sep 10 - EDITABLE.indd 1BOMBO - LIBROS PARA UDD#10 GLOBAL - Sep 10 - EDITABLE.indd 1 01/03/2011 22:06:3101/03/2011 22:06:31

22

digi

tal

portfolio the pool argentinamedia lab especializado en realidad aumentada

ww

w.r

edus

ers.

com


1 | El Andarín de la nocheLibro 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 fi n 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.

2 | Copa TelmexEn 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.

1

2

21-25 Portfolio_ajustado.indd 22 3/2/11 2:42:16 PM


23

digi

tal


ww

w.r

edus

ers.

com

3 | Astillero QuattromarineRé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.

4 | Monsieur LoloEn 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.

3

4


24

digi

tal

portfolio the pool argentinaEstudios PungaEstudios Pungamedia lab especializado en realidad aumentada

ww

w.r

edus

ers.

com

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 com-putadoras. Fuera de eso, acercarse a la Realidad Aumentada signifi ca tener un espíritu aventurero.Julián: El impacto que tiene esta tecno-logí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 esta-ba ahí no se podía modifi car. Ahora, con Realidad Aumentada es posible modifi car 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;

¿Qué capacitación se necesita para trabajar con Realidad Aumentada?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 limita-ciones, nunca van a realizarse, porque es una técnica multidisciplinaria. Nuestro equipo de trabajo está integrado por inge-nieros, 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 te-ner 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 fi nal funcione bien.

¿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 progra-mació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 hace-mos 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

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, prefi eren 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.


25

digi

tal

ww

w.r

edus

ers.

com

modo, The Pool le agrega un tono muy alto de creatividad a lo que es el recur-so. 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?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 planifi cació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-

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 des-pué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 interdiscipli-nario. Si uno tiene un perfi l 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áfi camente.

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

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, Reali-dades 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 infi nita. Recién estamos empezando. Obviamente, nosotros tenemos capaci-dad 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-

Algunos clientesHUGO BOSS | EDITORIAL MANO ESCRITA | COPA TELMEX | ASTILLERO QUATTROMARINE


48

dig

ital

dis

eño

gráfi

co

ACROBAT X CREACIÓN DE CONTENIDOS MULTIMEDIA

ww

w.r

edus

ers.

com

Autora Silvia [email protected]

www.la-teacher.com.ar

Difi cultad Intermedia | Herramienta utilizada Acrobat X

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

PDF, “acrobático formato”

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-

tuviese hablando en una lengua extraña. Es entonces cuando comienzo a contar que no existe un solo PDF, y tampoco para un único fi n. En esta oportunidad, abordaremos en detalle el uso del “acro-bático formato” para ser distribuido incluyendo video, archivos 3D, sonido y también animaciones Flash.

Características de las versionesEl 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 ar-chivos 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.

48-50 Acrobat_ajustado.indd 48 2/23/11 9:29:38 PM

ACROBAT X CREACIÓN DE CONTENIDOS MULTIMEDIA49

dig

ital

dis

eño

gráfi

co

ww

w.r

edus

ers.

com

Continuamos con los botones. En [Opciones], donde fi gura [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.

3

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

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.

4

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.

1

5 Incorporar audio. Desde el panel [Contenidos/Multimedia] seleccionamos [Sonido], examinamos y buscamos el archivo MP3 o MP4. Para que aparezca alguna imagen, en [Confi guració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].

48-50 Acrobat_ajustado.indd 49 2/23/11 9:29:39 PM

58

dig

ital

web

FLASH GEOLOCALIZACIÓN CON GOOGLE MAPS API

ww

w.r

edus

ers.

com

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

AutoraSoledad [email protected]

@solezapata

por medio de Sistemas de Información Geográfi ca (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 agi-gantados en el último tiempo, utilizando los mapas como contextualizadores de notas. Pero ¿qué es exactamente? En

términos simples, geolocalización signifi ca asociar un recurso digital —como fotogra-fí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, disposi-tivos móviles y tecnología de geolocali-zación hace posible que varios usuarios puedan compartir y consultar informa-ción geográfi ca en tiempo real.

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

58-60 Geolocalizacion_ajustado.indd 58 2/23/11 10:43:42 PM

59

dig

ital

web

ww

w.r

edus

ers.

com

Encuentre los archivos utilizados en este tutorial en design.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 me-diante 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 refi ere 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.

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

Luego, debemos descargar el kit de Google con las librerías de ActionScript y Flex desde el siguiente link: http://maps.googleapis.com/maps/fl ash/release/sdk.zip, donde se encuentra la última versión. Como no es un com-ponente 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. De-pendiendo del sistema operativo que utili-cemos y la versión de Flash que tengamos instalada, las rutas de instalación variarán; para Mac OS X: Macintosh HD/Applica-tions/Adobe Flash CS5/Common/Confi gu-ration/Components; y para Windows 7: C:/Archivos de programa/Adobe/Adobe Flash CS5/en/Confi guration/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 arras-tramos 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.*;

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

function onMapReady(event:Event):void { map.setCenter(new LatLng(lat,lon), zoom, MapType.NORMAL_MAP_TYPE);}

En este código estamos, en princi-pio, importando las clases necesarias

En la actualidad, son muchas y varia-das las aplicaciones que podemos darle a esta funcionalidad: emplearla en la típica sección “¿DÓNDE ESTAMOS?” de una web corporativa, marcar la ubica-ció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 aplica-ción). La podemos obtener en: http://code.google.com/intl/es/apis/maps/sig-nup.html, indicando el dominio de forma http://tudominio.com.ar, para poder utilizarla en todos los subdirectorios, y aceptando los términos y condiciones.

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.

PHYSICAL_MAP_TYPE: Muestra el mapa físico.

SATELLITE_MAP_TYPE: Mapa con fotografías satelitales.

58-60 Geolocalizacion_ajustado.indd 59 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 1BOMBO - SUSCRIPCIONES UDD NUEVO IV - Feb 11 - EDITABLE.indd 1 22/02/2011 22:34:2122/02/2011 22:34:21

Documents

Users Digital Design 14