VI Conferencia de Adwa Claves y Recursos para afrontar un proyecto multimedia

Francisco Moreno Sánchez-AguilillaCreativo Multimediahttp://www.fcomoreno.netfco@fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

PresentaciónEn primer lugar buenas tardes, me llamo Francisco Moreno y trabajo como Director Creativo en Im3diA comunicación, en Albacete desde hace 9 años. Empecé en el mundo de la web y del desarrollo multimedia sobre el año 1997 durante mis estudios de Informática de Gestión, y poco después en las diferentes compañías para las que he trabajado; y desde siempre me interesó el desarrollo de interfaces de usuario, la web, el diseño y la interactividad.

Vengo a hablaros de multimedia, un concepto que pese a que no suena a nada nuevo, hoy casi todo es multimedia, pienso que aún tiene mucho por explotar, desde el punto de vista tanto de negocio como del desarrollador; así como de las infinitas posibilidades y aplicaciones de las que dispone dentro de muchos campos, como la educación, el comercio, el mundo editorial o incluso de aplicaciones terapéuticas como ya veremos más adelante. Mi idea no es ofreceros una clase magistral sobre desarrollo multimedia, sino más bien animaros a que la incluyáis como parte activa de vuestros desarrollos.

El desarrollo de aplicaciones multimedia llamadas “Stand Alone”, que se distribuyen en CD, Pendrive USB o DVD se ha visto un poco eclipsado por el auge de las RIA, las “Rich Internet Aplications”, y con el crecimiento de la web en general y los desarrollos interactivos en Internet. Sin embargo sigue existiendo un mercado incipiente de productos o empresas demandantes de desarrollos multimedia que desean enriquecer, de alguna manera, su producto, y que ven en la multimedia un añadido que hace revalorizarlo, como por ejemplo en el caso del mundo editorial o discográfico.

¿A qué llamamos multimedia?Según su definición: El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión (físicos o digitales) para presentar o comunicar información. De allí la expresión "multi-medios". Los medios pueden ser variados, desde texto e imágenes, hasta animación, sonido, video, iluminación etc.

También se puede calificar como multimedia a los medios electrónicos (u otros medios) que permiten almacenar y presentar contenido multimedia. Multimedia es similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio.

Se habla de multimedia interactiva cuando el usuario tiene libre control sobre la presentación de los contenidos, acerca de qué es lo que desea ver y cuando; a diferencia de una presentación lineal, en la que es forzado a visualizar contenido en un orden predeterminado.

¿Para qué podemos utilizar nosotros la multimedia?¿Qué es la multimedia para el cliente real y cuales son las posibilidades que ofrece?¿A quién podemos ofrecerle desarrollos multimedia?Empezando por nosotros mismos que nos dedicamos al mundo del diseño, y de la web, las presentaciones multimedia nos pueden servir tanto para presentar nuestros proyectos como para enriquecerlos. Tenemos que aprender a presentar tanto los trabajos como las propuestas con presentaciones compiladas y ejecutables.

Empezando por presentación de Manuales de Identidad Corporativa, y acabando por completos catálogos de productos; pasando por dossieres de empresa, libros electrónicos, catálogos de obras pictóricas o aplicaciones interactivas para educación, Kioskos virtuales, Puntos de Información,

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

Publicidad Dinámica... Todo eso es lo que podemos ofrecerle a nuestros clientes.

Pero veamos las claves para utilizarla ni más ni menos que para lo que mejor sirve:

1.- Enriquecer la presentación de productos: Incluir multimedia junto a los soportes publicitarios tradicionales hacen que éstos se revaloricen y colocan a la empresa que utiliza estas técnicas por delante de de sus competidores. Un ejemplo: acompañar folletos de productos con pequeñas tarjetas-CD que incluyan fichas electrónicas del producto y sus especificaciones, vistas 3d, videos o fotografías desde diferentes ángulos, etc. Facilitan la difusión de contenidos y el acceso y archivo de la información desde ordenadores.

2.- Mejorar la atención y la comprensión de conceptos o acelerar el aprendizaje ya que utilizar varios sentidos para comprender un mismo concepto se acerca mucho más a la forma más habitual que tiene el ser humano de comprender las cosas. Ej. Aplicaciones de e-learning para aprendizaje de idiomas, juegos educativos que acompañen a libros infantiles, o por ejemplo aplicaciones multimedia para la resolución de test de autoescuelas. También Puntos de Información Turística...

3.- Crear estimulación sensorial

Las presentaciones multimedia pueden verse en un escenario, proyectarse, transmitirse, o reproducirse localmente en una pantalla, o en un proyector. Además de ver y escuchar, la tecnología háptica permite sentir objetos virtuales. Las tecnologías emergentes que involucran la ilusión de sabor y olor también puede mejorar la experiencia multimedia. Ejemplos de este uso son presentaciones interactivas de productos en pantallas grandes en stand de ferias y congresos (acompañados por catas de productos alimenticios), proyecciones interactivas en salas de estimulación sensorial para personas con discapacidad intelectual, personas cuya terapia necesita de estimulación de los sentidos o para áreas recreativas en centros para personas mayores .

4.-Creación de publicidad dinámica, mediante proyecciones en pantallas, escaparates virtuales que nos permitan segmentar la publicidad, programarla y crear interacciones con el público objetivo.

5.- En definitiva

Puede distribuirse como contenido en CD, DVD o lápices de memoria, o pueden descargarse desde Internet como contenido adicional de páginas web u optimizarse para reproducirse en la misma web. Este gran abanico de posibilidades de distribución, y la gran versatilidad que tenemos los desarrolladores para crear contenidos y/o elementos o espacios multimedia nos brinda la posibilidad de ofrecerla a nuestros clientes, ya sea como producto exclusivo o como producto adicional a lo que ya ofrecemos habitualmente.

Las Herramientas de Autor. Breve retrospectiva.La expresión programa de autor se utiliza para nombrar al software que permiten a sus usuarios desarrollar una confección más o menos intuitiva de aplicaciones autoejecutables multimedia que integran diferentes tipos de documentos. Existen numerosas herramientas de autor en el mercado, sobre todo orientadas a la realización de aplicaciones educativas; comerciales, o de libre uso y distribución. En el terreno profesional, las más significativas han sido, Authorware, Director y posteriormente Flash.

Authorware fue una aplicación bastante famosa para el desarrollo de aplicaciones multimedia. Fue desarrollada por Macromedia en la década de los 90. Actualmente, caída en desuso, se distribuye su versión 7 por Adobe, muy enfocada a la creación de contenidos educativos cumpliendo estándares de e-learning.

Hasta hace bien poco, la mayoría de los proyectos y desarrollos multimedia estaban planificados y desarrollados en Macromedia Director, el software de la antigua Macromedia destinado a la producción de programas ricos en contenidos multimedia. Considerada una de las herramientas más poderosas de integración y programación de medios digitales; disponía de su propio lenguaje de programación (Lingo) y soporte para Javascript y su propia tecnología de empaquetado, llamada Shockwave. Hoy día está distribuida por la casa Adobe y su última versión es la 11.5.

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

Sólo con una decena de comandos Lingo una persona puede lograr un sistema interactivo de gran impacto, pero llevar a cabo técnicas de expertos requiere mucho más esfuerzo de lo que la mayoría de los diseñadores puede llegar a soportar, lo cual nos hará trabajar junto a un programador experto para trabajos de relativa dificultad.

Es bastante arriesgado decir que Director y la tecnología Shockwave ha caído en desuso porque aún hoy existen muchos desarrolladores que lo utilizan debido a su gran potencia incluso en la web; pero su utilización ha disminuido considerablemente sobre todo desde la aparición de Flash, y su gran versatilidad. Pese a que muchos afirmen que no se hacen competencia, lo cierto es que hoy día Flash es la primera elección de la mayoría de los desarrolladores.

Y qué decir de Flash: Si bien su uso en web está actualmente muy polemizado, es innegable las dotes que este software tiene para la realización de forma considerablemente sencilla de animación, integración de numerosos formatos gráficos tanto vectoriales como de mapa de bits, ejecución de aplicaciones exteriores, soporte de XML, vídeo con una relación calidad-peso inmejorable y la inclusión de un potente lenguaje de programación orientada a objetos, de fácil comprensión y utilización para dar interactividad a las aplicaciones: Action Script.

Pero no dejéis aparte ninguna herramienta de autor. Cualquiera os puede servir un momento dado para crear aplicaciones multimedia interactivas. Existen muchas entre ellas: Neobook Pro, ToolBook, Captivate...

Principales Claves para el desarrollo de aplicaciones Multimedia.El desarrollo profesional de títulos multimedia es ante todo una labor de equipo que requiere organización, diseño, y producción, sin embargo la dirección de un proyecto multimedia y su ejecución, requiere de un profesional que, en primer lugar evalúe las necesidades del proyecto, distribuya las diferentes tareas a los especialistas de cada disciplina y aúne las piezas resultantes en el puzle final, cohesionado un proyecto completo. Para ello debemos convertirnos en un personaje distinto en cada una de las fases del desarrollo.

a) Análisis de Requisitos del Proyecto.Esta fase es la denominada de Dirección Ejecutiva. Comprende en una primera instancia el contacto con el cliente, y la anotación de los requisitos. ¿Qué quiere realizar el cliente? O en su caso ¿Qué queremos ofrecerle a nuestro cliente? Una vez anotados estos conceptos que son claves para el ajuste a los presupuestos establecidos pasamos a diversificar qué elementos vamos a necesitar:

• Grabación de Vídeo (si necesitaremos de un profesional de cámara)

• Edición de Vídeo (si necesitaremos de un profesional de la edición de vídeo)

• Redacción de guiones de audio (un documentalista capaz de estudiar el producto y escribir los guiones en consonancia con lo que quiere expresar el cliente)

• Locuciones profesionales (posiblemente en diferentes idiomas)

• Maquetación de documentos (un profesional que prepare los documentos premaquetados cuidando la imagen corporativa del producto y del cliente)

• Desarrollo de infografías en 3D o Realidad Virtual (si necesitaremos de un profesional de la infografía o la postproducción)

• Reportajes fotográficos Profesionales (Si necesitaremos de fotos profesionales de los productos, y si esas imágenes necesitan ser retocadas, silueteadas sobre transparencias...)

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

• Selección del formato de integración de cada uno de los componentes anteriores, para que tengamos completa compatibilidad con la interfaz final.

• Establecer el formato final del proyecto en cuanto a su distribución (CD-ROM, DVD-ROM...)

A lo largo de mi carrera he podido constatar que culminar de forma exitosa el proyecto depende en gran medida de realizar correctamente esta fase, y que de no hacerlo así, se corre el riesgo de improvisar e ir encontrándonos con problemas de integración, ampliando los tiempos de desarrollo debido a imprevistos, y suponiendo pérdidas económicas que alguien tendrá que asumir, lo más probable que nosotros mismos.

b) Distribución de las diferentes tareas.También podemos llamar a esta fase Coordinación de Producción. Como en cualquier otro proyecto de desarrollo, ciertas funciones deben ser desempeñadas con objeto de llevar a buen puerto el asunto . Estas funciones pueden ser separadas en tres categorías: Organización, diseño, y producción.

Ni que decir tiene que muchas de las tareas expuestas en el punto anterior, en las pequeñas empresas son realizadas por el mismo personal. Pero la teoría se puede aplicar igualmente. Necesitamos actuar como vínculo entre los diferentes profesionales a quienes delegaremos las tareas anteriores, revisar los productos brutos resultantes e ir recopilando todo el material que integraremos después en la aplicación, e ir tachando tareas en la lista de requisitos. En las grandes producciones, los funciones de cada persona son, por lo general, muy especializadas a diferencia de los proyectos pequeños.

c) Desarrollo de la GUI.El desarrollo de la Interfaz gráfica de nuestra aplicación multimedia conlleva en primer lugar un estudio por parte de la Dirección de Arte de las decisiones de diseño y del aspecto general del proyecto, dotando a la interfaz de contenido creativo equilibrándolo con la viabilidad técnica.

Es importante contar con la figura del programador que nos permite establecer aquí los sistemas de navegación dentro de nuestra aplicación, cuidando también el equilibrio entre la accesibilidad y usabilidad del mismo. El diseño de la interfaz se realiza en conjunción con la programación lo que nos permite solucionar las limitaciones del mismo.

La realización de Layouts esquemáticos, esquemas de distribución de los elementos dentro de nuestro diseño y bocetos de los diferentes estadios de nuestra aplicación nos puede ayudar a solucionar las posibles eventualidades de navegación.

Una clave muy interesante a la hora de plantear el diseño de la interfaz gráfica de la aplicación es tener en cuenta la Proporción Áurea. La Proporción Áurea (o "proporción divina", como la llamó Pacioli hacia el año 1500) tiene fama desde la antigüedad por sus propiedades estéticas, empezando por la arquitectura griega y continuando por la pintura de todas las épocas.

Una forma fácil de entender es dibujando un cuadrado y agregar un punto medio en uno de sus lados, luego lo unimos con uno de los vértices del cuadrado y por ultimo llevamos esta distancia hacia alguno de los lados a partir del punto que dibujamos, obtenemos gráficamente un rectángulo con proporciones áureas.

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

La Proporción Áurea es la retícula más vista y estudiada en el desarrollo de una interfaz usable y equilibrada; y nos permitirá ofrecer composiciones mas armoniosas que puedan enfocar la atención en un punto deseado.

Quiero en este punto hablaros de Mark Coleran, un diseñador especializado en crear interfaces de usuario que imagina y visualiza las vistosas interfaces gráficas que vemos en numerosas películas de ciencia ficción, y que en numerosas ocasiones han servido de inspiración para desarrollos multimedia posteriores. Su Showreel es impresionante, si hay tiempo os pondré el vídeo al final de la ponencia.

http://vimeo.com/1563485

d) Fase de Implementación.

D1) Programación del Sistema de Navegación. En esta fase pasamos a integrar todos los elementos que van a formar parte de nuestra aplicación, programando el sistema de navegación que permitirá cargar al usuario en pantalla los elementos externos disponibles. Para ello normalmente se utiliza un lenguaje de programación, ya sea Lingo en el caso de Director o Action Script en el caso de Flash. Tendremos que tener en cuenta la apertura de ventanas, el solapamiento de botones en menús superpuestos, o la inhibición de zonas activas debajo elementos en reproducción. Es interesante utilizar una base de navegación estructurada en XML que nos ayude a llevar todo ese control.

D2) Segmentación de ContenidosEs bueno tener en cuenta la segmentación de la aplicación. Flash da la posibilidad de cargar diferentes aplicaciones independientes dentro de otra aplicación principal. Es decir, cargar diferentes películas SWF en diferentes niveles de nuestro escenario, o en contenedores específicos del mismo. Para ello hay que tener siempre en cuenta la estructura de directorios que va a tener nuestra aplicación, a la hora de almacenar el

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

material que se reproduce de manera externa, fuera del alcance directo del usuario; y por supuesto llevar en todo momento un control de los elementos que hay en pantalla, los niveles que están cargados y los que están disponibles. Otra vez podemos ayudarnos del XML para organizar la información externa.

D3) Integración Máxima de Contenidos ExternosEs bueno integrar todo el material externo de la mayor forma que sea posible, es decir cuantas menos aplicaciones tenga que instalar el usuario final en su equipo, mejor. Ejemplos de estos buenos usos es utilizar el formato FLV para los videos, directamente importable desde nuestro escenario en Flash en vez de formatos como MOV que necesita la instalación del reproductor de QuickTime. Otro ejemplo es el formato SWF generado por Flash Paper para la documentación en vez de utilizar el formato PDF.

D4) Inclusión de VideoIncluir vídeo dentro de nuestra aplicación multimedia, la enriquece de forma exponencial. O bien con contenidos ya suministrados por el cliente, o bien creando nuestros propios contenidos. En ese caso debemos afrontar como un proyecto en si mismo la creación del reportaje, estimando durante la fase de análisis de requisitos si precisaremos de realizar Grabación, Rodaje y/o Filmación.

Supervisar posteriormente el contenido bruto creado y despues realizar la edición del mismo mediante un software de edición profesional tales como Adobe Premiere, Sony Vegas o Final Cut, y si necesitaremos motion graphics o postproducción con software como After Effects. Igualmente si necesitaremos integrar dentro del vídeo infografías descriptivas, tanto en 2D como en 3D.

De la misma manera, durante la fase de coordinación de la producción estableceremos y repartiremos las tareas a los diferentes profesionales, colaboradores, o miembros del equipo que se vayan a dedicar a realizar estas tareas, supervisar su desarrollo, y comprobar finalmente que los documentos resultantes sean perfectamente integrables en nuestra aplicación multimedia, para lo cual debemos cuidar de utilizar formatos compatibles. Como paso final, os recomiendo utilizar el formato FLV con el codec H264 para el video que es perfectamente integrable con Flash en el caso de que utilicéis ésta herramienta.

Una particularidad muy útil de que dispone el formato FLV es la posibilidad de integrar “cue points” o puntos clave dentro del vídeo que son capaces de disparar un evento, lo que nos permite interactuar mediante programación con otros elementos integrados en nuestra aplicación. En palabras sencillas nos permite disparar acciones de nuestra aplicación de forma simultánea al vídeo, o bien controlar qué partes de un mismo vídeo reproducir dado el caso.

D5) Gestión documentalLa gestión documental en nuestros desarrollos multimedia también es muy importante de analizar durante la fase de análisis de requisitos. Por regla general, la gestión documental en un proyecto multimedia se realiza para proyectos que incluyen catálogo de numerosos productos catalogados por familias. Para ello es interesante la posibilidad de utilizar un lenguaje de programación dinámico con acceso a base de datos. Con el lenguaje Lingo de Director y algunos extras es posible realizar consultas en bases de datos. En Action Script directamente no es posible pero podemos valernos de XML como transportador de la información generada a raíz de una consulta.

Personalmente cuando nos hemos visto en la necesidad de realizar una gestión documental dentro de un desarrollo multimedia, hemos optado por utilizar lenguaje PHP y bases de datos MySQL, funcionando en servidores denominados portables capaces de funcionar de forma autónoma en un disco óptico o USB. Ejemplos de estas aplicaciones son PortableWebAp, Indigo Microweb o iNewPHP.

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net

Claves y Recursos para afrontar un proyecto multimedia

Fase Final: Compilación,Testeo y PublicaciónUna vez esté todo resuelto, es el momento de compilar el proyecto. Crear el ejecutable principal con el acceso a los menús que estructurarán la presentación de la información. En el caso de haber utilizado Flash, y si hemos conseguido integrar todo el proyecto, es interesante crear ejecutables tanto para PC como para MAC.

Una vez lista nuestra aplicación multimedia daremos paso a concretar los detalles como la inserción de órdenes de autoarranque, iconos y etiquetas descriptivos desde la exploración del soporte óptico, y un documento “léame” con instrucciones de uso, requisitos del sistema y datos sobre el posible copyright de la autoría, NIPO, depósito Legal o autorización de la SGAE etc, etc.

Estamos listos para testear la aplicación en diferentes equipos. Comprobar su comportamiento dentro de sistemas operativos de la misma familia (ej. Windows XP, Vista, Siete …). Subsanar los posibles errores de ejecución, evaluar los tiempos de carga etcétera. Es importante llevar un control exhaustivo de las diferentes versiones, que incluyan las mejoras solicitadas por el cliente, aplicaciones adicionales...

Es el momento de publicar, mandar a duplicar y a distribuir, y de tener la satisfacción de haber completado el proyecto, y haber sacado un buen producto. Aunque la creación de proyectos interactivos multimedia se diferencia de un lugar a otro, del uso de una tecnología u otra, y de la envergadura del proyecto; las fases son básicamente los mismas. Tenerlas en cuenta y seguir un buen protocolo de trabajo nos ayudará a automatizar procesos, eliminar las pérdidas de tiempo innecesaria y en definitiva, optimizar el proceso de desarrollo, lo que se traduce siempre en beneficios.

Links Consultados y Recomendados

• Herramientas de autor. Por Pedro Arconada | http://www.idg.es/Macworld/content.asp?idart=29835

• Sitio Oficial de Adobe Authorware 7 | http://www.adobe.com/products/authorware/

• La Divina Proporción y el diseño web. Por Mexside | http://www.mexside.com/diseno-web/la-divina-proporcion-y-el-diseno-web

• Principios del Diseño Web. La Sección Áurea. Por Enrique Acosta en piensaenweb.com |http://www.piensaenweb.com/principios-del-diseno-web-v-la-seccion-aurea_detalle_113.html

• Design and the Divine Proportion, by Mark Boulton | http://www.markboulton.co.uk/journal/comments/design-and-the-divine-proportion

• Control de video FLV en Flash, por Eldervaz en Cristalab |http://www.cristalab.com/tutoriales/control-de-video-flv-en-flash-c114l/

• Utilización de cuepoints o eventos de FLV Flash Video, por Eldervaz en Cristalab |http://www.cristalab.com/tutoriales/utilizacion-de-cuepoints-o-eventos-de-flv-flash-video-c134l/

• Macromedia Director MX2004 Official LiveDoc |http://livedocs.adobe.com/director/mx2004/release_update_en/wwhelp/wwhimpl/js/html/wwhelp.htm

• Adobe Director 11.5 Official Site | http://www.adobe.com/products/director/

• PortableWebAp | http://portablewebap.com/

• Indigo Star Microweb - MicroWeb Home Page | http://www.indigostar.com/microweb.php

• INEWPHP Official Site | http://www.inewphp.com/

ADWA – Desarrolladores Web de Alicante Francisco Moreno – www.fcomoreno.net