6 - El Guion Multimedia

El guinmultimedia

Caterina RamonMarta Serra

PID_00150918

FUOC PID_00150918 El guin multimedia

Ninguna parte de esta publicacin, incluido el diseo general y la cubierta, puede ser copiada,reproducida, almacenada o transmitida de ninguna forma, ni por ningn medio, sea ste elctrico,qumico, mecnico, ptico, grabacin, fotocopia, o cualquier otro, sin la previa autorizacin escritade los titulares del copyright.


ndice

1. Etapa 1. Proceso de creacin de un producto multimedia...... 51.1. Fases de la produccin ................................................................ 51.2. El equipo humano de un proyecto multimedia ......................... 61.3. Introduccin al guin multimedia ............................................. 91.4. Consideraciones previas .............................................................. 91.5. Fases en el proceso de elaboracin del guin ............................. 101.6. La concepcin del producto multimedia .................................... 11

1.6.1. Anlisis, estudio y estrategia ......................................... 111.6.2. Ficha del producto ......................................................... 11

2. Etapa 2. Diseo de la interactividad............................................ 132.1. Idea .............................................................................................. 132.2. Sinopsis ........................................................................................ 132.3. Diseo de la interactividad ......................................................... 152.4. La secuencialidad o narracin lineal .......................................... 15

2.4.1. Obras de ficcin y juegos .............................................. 162.4.2. Enciclopedias y obras de consulta ................................. 172.4.3. Productos didcticos ...................................................... 17

2.5. Estructuracin de la comunicacin ............................................ 172.6. La temporalidad .......................................................................... 182.7. Interactividad e interaccin ........................................................ 182.8. Reglas en el diseo de la interactividad ..................................... 20

2.8.1. Reglas segn Bou ........................................................... 202.8.2. Reglas segn Mok .......................................................... 21

2.9. La forma del diseo interactivo .................................................. 22

3. Etapa 3: Diseo de la navegacin.................................................. 233.1. Organizacin de la informacin ................................................. 233.2. Modelos de organizacin de la informacin .............................. 26

3.2.1. Lineal .............................................................................. 263.2.2. Circular ........................................................................... 263.2.3. Indexada ......................................................................... 273.2.4. Jerrquica ....................................................................... 273.2.5. Lineal jerrquica ............................................................ 283.2.6. Ramificada ...................................................................... 283.2.7. Lineal ramificada ........................................................... 283.2.8. Matricial ......................................................................... 293.2.9. Paralela ........................................................................... 293.2.10. Concntrica .................................................................... 303.2.11. Reticular ......................................................................... 303.2.12. Contributoria ................................................................. 313.2.13. Mixta .............................................................................. 31


3.3. Sistemas de navegacin .............................................................. 323.3.1. Tipos de navegacin ...................................................... 32

3.4. El diagrama de flujos .................................................................. 333.4.1. Definicin ...................................................................... 333.4.2. Elaboracin de diagramas de flujos ............................... 353.4.3. Simbologa en los diagramas de flujos .......................... 35

4. Etapa 4. El diseo lgico.................................................................. 394.1. El diseo lgico ........................................................................... 394.2. El guin tcnico .......................................................................... 39

4.2.1. Ttulo .............................................................................. 404.2.2. Fondo ............................................................................. 404.2.3. Zonas sensibles .............................................................. 414.2.4. Comportamiento de las zonas sensibles ........................ 41

4.3. Otros elementos del guin ......................................................... 424.3.1. Textos ............................................................................. 424.3.2. Iconos ............................................................................. 424.3.3. Secuencias ...................................................................... 424.3.4. Animaciones .................................................................. 434.3.5. Sonido ............................................................................ 434.3.6. Marcadores ..................................................................... 434.3.7. Objetivos ........................................................................ 434.3.8. Distractores .................................................................... 434.3.9. Ejecuciones o rutinas ..................................................... 444.3.10. Grupos de tareas ............................................................ 444.3.11. Entrada a una escena ..................................................... 444.3.12. Tareas de fondo ............................................................. 45

4.4. Reglas para la escritura del guin ............................................... 454.5. Ejemplo de diseo lgico ............................................................ 454.6. Recursos y ejemplos de guin multimedia ................................. 48

5. Etapa 5. El story-board..................................................................... 505.1. El story-board multimedia ............................................................ 505.2. Funciones y ventajas del story-board............................................ 505.3. Grafo general y grafo exhaustivo ............................................... 51

5.3.1. El grafo general .............................................................. 525.3.2. El grafo exhaustivo ........................................................ 53

5.4. El story-board con wireframes........................................................ 565.4.1. Narrativa de wireframes guiados .................................... 56

5.5. Anexos del guin ........................................................................ 585.5.1. Los guiones audiovisuales ............................................. 58

FUOC PID_00150918 5 El guin multimedia

1. Etapa 1. Proceso de creacin de un productomultimedia

1.1. Fases de la produccin

En el proceso de creacin de un producto multimedia se pueden establecer lassiguientes grandes etapas: diseo, produccin y difusin. Cada una de ellasest estructurada en distintas fases, como se muestra en el grfico adjunto.

En la etapa de diseo se definen los objetivos y la estrategia teniendo en cuen-ta el presupuesto para realizar la aplicacin. Una vez definidos los objetivos ydesarrollada la estrategia, ya est encaminada la tarea de generar la aplicacinmultimedia. En la fase de concepcin del producto se enmarca el proceso de


creacin del guin. En cuanto est elaborado el guin y determinado el equipohumano necesario, el plan de trabajo y el material, se programarn las aplica-ciones y se proceder a la fase de pruebas (tests y pruebas piloto).

Equipohumano: Se debe planificar el equipo humano que se necesitarpara la creacin del producto multimedia.

Plandetrabajo: Se procede a la divisin del conjunto del trabajo en m-dulos o partes detalladas; se seala al responsable y el plazo de tiempo.

Equipomaterialnecesario: ordenadores, escner, cmara, software, etc.

Con las pruebas ya realizadas, se programa definitivamente la aplicacin conlas pertinentes modificaciones. En la tercera etapa, en la de difusin, se esta-blecer la distribucin del producto y su promocin.

1.2. El equipo humano de un proyecto multimedia

Se trata de un equipo interdisciplinar. Las producciones multimedia interac-tivas de diversa tipologa pueden resultar bastante complejas y, por ello, esimprescindible la participacin coordinada de diferentes profesionales. Hoyen da, raramente se puede concebir una aplicacin desarrollada por una solapersona que tenga la intencin de competir con los productos multimedia quese encuentran en el mercado.

Pero, habitualmente, ocurre que una misma persona puede desempear msde uno de estos perfiles.

Jos Luis Orihuela agrupa las funciones del equipo en cuatro grandes reas:

rea Funcin

Produccin Coordinacin

Redaccin Documentalista y guionista

Artstica Direccin de arte y diseo grfico

Tcnica Programacin y especialidades (audio, vdeo, animaciones)

En la tabla adjunta se definen las funciones de cada perfil teniendo en cuentalas reas propuestas anteriormente.

Funciones de cada perfil segn el rea

rea de produccin

Nota. Estos cuadros estn basados en:Orihuela,JosLuis;Santos,MaraLuisa(1999). Introduccin al diseo digital. Concepcin y desarrollo de proyectos de comunicacin interactiva (pginas 69-74). Madrid: AnayaMultimedia.Vayhan,Tay (1994). Todo el poder de multimedia (pginas 35-49). Osborne, Mxico: McGraw-Hill.

Bibliografa

Orihuela,JosLuis;Santos,MaraLuisa(1999). Introduc-cin al diseo digital. Concep-cin y desarrollo de proyectos decomunicacin interactiva. Ma-drid: Anaya Multimedia.


Perfil Funciones

Coordinador Se responsabiliza del desarrollo total e implementacin del proyecto. Asimismo, tambinasume la responsabilidad del contenido y la estructura del proyecto.Entre sus tareas estn: la administracin, la gestin del equipo humano que desarrollar el proyecto y el lide-

razgo del equipo; la elaboracin y administracin del presupuesto; la realizacin de los planes de trabajo, horarios, sesiones, etctera y el control del ca-

lendario; la relacin con el cliente; la mercadotecnia del proyecto; la gestin de recursos; el control del resultado.

Productor ejecutivo Segn la envergadura de la empresa, puede existir este perfil, cuyas funciones son: la gestin administrativa, la mercadotecnia de la empresa, la relacin con los clientes, la elaboracin de presupuestos, la gestin de recursos.

Director del proyecto Segn la envergadura de la empresa, puede existir este otro perfil, responsable de la pro-duccin de un proyecto en particular, cuyas funciones son: el liderazgo del equipo, el establecimiento del plan de trabajo, el control del calendario, el control del resultado.

rea de redaccin

Perfil Funciones

Documentalista Su labor consiste en obtener la informacin necesaria para elaborar el contenido del pro-yecto.Sus funciones son: la investigacin, la identificacin y seleccin de fuentes, el acceso y la valoracin de informacin, la redaccin de borradores, la revisin y correccin de textos.

Guionista Se encarga del contenido global del proyecto: estructura el contenido, determina los ele-mentos de diseo que se requieren para apoyar esta estructura y decide los medios msapropiados de las diferentes partes del contenido.Sus funciones son: Dar estructura al contenido y elaborar la informacin del proyecto en forma de hiper-

texto: Establecer el sistema de navegacin contemplando todos los posibles trayectos,

determinando las rutas del usuario y su retroalimentacin. Definir el sistema de ayuda, las metforas y los mapas de navegacin. Seleccionar los medios ms idneos y considerar los puntos fuertes de cada uno de

los media que integran multimedia. Revisar y corregir textos. En proyectos de ficcin interactiva y juegos, el guionista:

crea la historia y los personajes, escribe los dilogos, los textos narrativos y expositivos y articula en escenas navegables los universos de ficcin.

rea artstica

Perfil Funciones



Director de arte Sus funciones son: la definicin de la esttica global, la supervisin del diseo grfico, la coordinacin con especialistas, el control del estilo final.

Diseador grfico Se encarga del aspecto visual del proyecto, junto con ilustradores, animadores y especia-listas en procesamiento de imgenes. Entre sus funciones estn: el diseo de interfaces, la creacin de elementos visuales, la composicin de pantallas.

Diseador de interfaces En funcin de la envergadura del proyecto, puede necesitarse este perfil especfico.Se encarga de: crear rutas de navegacin y mapas de contenido; organizar el contenido multimedia, de manera que permita al usuario acceder fcilmen-

te al contenido y moverse cmodamente dentro de la creacin final; que se mantenga la facilidad de uso de navegacin; el uso efectivo de ventanas, fondos,

iconos, etc. (resultados stos de su trabajo).

Puede ser adems guionista o diseador grfico.

rea tcnica

Perfil Funciones

Programador multimedia Usualmente, es un ingeniero de software que integra todos los elementos del proyectoutilizado, un sistema de desarrollo o un lenguaje de programacin. Entre sus funciones es-tn: la compilacin de la maqueta, la integracin multimedia, la funcionalidad de la navegacin, la operatividad del soporte, la realizacin de pruebas beta.

Especialistas Especialistaenvdeo. Adems de tener experiencia en direccin, edicin de vdeo ysaber realizar buenas tomas, ha de trabajar con herramientas para la edicin digital. Esimportante que adapte y consiga las tomas de vdeo para la programacin interactiva.Su funcin es la grabacin, la edicin y la postproduccin digital de vdeo.

Especialistaenaudio. Disea y produce msica, narraciones explicativas y efectos desonido. Pueden responsabilizarse tambin de localizar y seleccionar la msica adecua-da, grabar, digitalizar y editar material grabado. Tambin deben realizar los clculospertinentes para optimizar los sonidos y obtener una calidad decente.Su funcin es la composicin musical, la edicin y los efectos de sonido.

Otrosespecialistas. Tienen estas funciones: la fotografa y el tratamiento digital de imgenes; la creacin de objetos, entornos y animaciones 2D y 3D; la creacin de entornos de realidad virtual.


El diseo de la informacin, diseo interactivo y diseo de los mediosson reas crticas para la creacin de cualquier interfaz y debe haber unainterrelacin entre ellas.

La colaboracin entre todos los miembros del equipo es la clave paraconseguir un proyecto multimedia con xito.


1.3. Introduccin al guin multimedia

Como en un producto secuencial, el guin para una aplicacin multimedia in-teractiva es un documento clave para su produccin. La elaboracin del guinmultimedia se enmarca en la fase de diseo de la aplicacin, de creacin yconcepcin de un nuevo producto. La fase de diseo es previa a la fase deproduccin.

Actualmente, una aplicacin multimedia interactiva no puede pensarse comouna secuencia de pantallas estticas y sin conexin entre ellas, sino que apa-rece como una aplicacin viva, estructurada de forma conveniente y con inte-racciones. En una aplicacin multimedia, a diferencia de un cortometraje paratelevisin, por ejemplo, debe haber interaccin entre el usuario y la mquina.Es importante que en la creacin de un guin multimedia se conjuguen los re-cursos del lenguaje audiovisual juntamente con los propios de la informtica.

1.4. Consideraciones previas

La elaboracin de un guin multimedia, como proceso creativo, no es a prio-ri diferente a la de un guin para un producto audiovisual, pero incluye ele-mentos de lenguaje inexistentes en el guin secuencial: la interactividad y lanavegacin, por un lado y por el otro un canal de difusin distinto. Estos sonlos elementos que hacen diferente el guin multimedia.

En el guin para una aplicacin multimedia se incluye a menudo alguna partems narrativa que conlleva necesariamente una estructura lineal. Estos frag-mentos pueden concebirse como una "porcin" de un guin secuencial, conmuchas de sus caractersticas, dentro del conjunto total del guin de la apli-cacin multimedia.


Toda aplicacin multimedia debe concebirse sin perder de vista la perspectivadel guin audiovisual. Los elementos propios del guin han de estar presentesen el diseo de toda la aplicacin y en cada pantalla en particular. Se debepensar y planificar con detalle cada pantalla (texto, fotos, iconos, etc.) y suconjunto.

En la conceptualizacin de una aplicacin multimedia deben tenerse en cuen-ta los siguientes aspectos bsicos:

Hipertexto La organizacin de la informacin y su estructura considerando las posibi-lidades y caractersticas que ofrece el hipertexto.

Interactividad El diseo de la interactividad (cantidad de interaccin, calidad, capacidadde control por parte del usuario, etc.).

El guin multimedia es un documento que servir para recoger, desarrollar yplasmar todos estos aspectos. Adems, es importante recordar dos considera-ciones ms:

Usuario Las aplicaciones multimedia se conciben para ser utilizadas por un ti-po concreto de usuario, y, por tanto, deben adaptarse de forma con-veniente.A partir de aqu se disear la estructura de navegacin y la interactivi-dad.

Recursos tcnicos Se debe prever la incorporacin de recursos tcnicos, que servirn pa-ra reforzar el mensaje. Es importante seleccionarlos de forma acertadapara lograr que la aplicacin transmita las sensaciones previstas.

1.5. Fases en el proceso de elaboracin del guin

Como ocurra en el guin de un producto audiovisual no se ha establecidouna sola forma de presentacin para un guin multimedia. En el mundo pro-fesional, cada guionista, cada equipo de trabajo, cada editorial de ttulos inte-ractivos tiene su propio mtodo. Pero, como ocurre en el campo del audiovi-sual, se siguen unas pautas para la elaboracin de un guin multimedia mso menos sistematizado y adaptado a cada uno de los tipos de productos queexisten en el mercado.

La conceptualizacin de una website de un producto comercial diferir de la deun juego de estrategia en CD-Rom. El desarrollo del guin se deber adaptarde forma conveniente en cada caso.

Generalmente, para planificar el proceso global de la aplicacin, las fases quedeben tenerse en cuenta son las siguientes:


1.6. La concepcin del producto multimedia

1.6.1. Anlisis, estudio y estrategia

Antes de empezar una produccin las empresas multimedia realizan un ex-haustivo estudio a partir del cual se toman las decisiones pertinentes de diseoy se deciden la conveniencia de editar o producir el nuevo producto.

Tanto si el producto es encargado por un cliente, como si es un titulo propiode una editorial, se tienen que definir los siguientes conceptos:

cul es el mensaje que se va a comunicar; a qu publico va dirigido; cul es el objetivo del producto.

1.6.2. Ficha del producto

A modo de resumen, en esta primera fase se intenta dar respuesta a estas pre-guntas que se elaboran en forma de un documento que llamado Ficha del pro-ducto, que contiene:

1)Descripcindelaidea: De qu trata el nuevo producto?

2)Necesidad: A qu problema o necesidad queremos responder con el pro-ducto? Por ejemplo, la observacin de que en el mercado falta un productopara nios sobre cmo aprender matemticas jugando (Edutaiment).


3)Lameta:Qu queremos conseguir, cul es el beneficio que puede aportar laedicin del ttulo? Podra ser iniciar en el uso del ordenador a los trabajadoresde una empresa, apropiarse de un hueco en el mercado, etc.

4)Pblicoobjetivo: Quin es el usuario, quien es el comprador? Este es unode los apartados ms importantes por los que se debe definir muy bien tanto alcomprador, como el usuario real del producto. Por ejemplo, en los productosinfantiles el usuario real es un nio pero el comprador es el adulto.

5)Objetivos: En este apartado se establecen los objetivos editoriales: Es unttulo unitario? Pertenece a una coleccin, a una serie? Hay una fecha delanzamiento prevista? Etc.

Tratamos de responder a las siguientes preguntas:

Cul es el contenido?

A quin va dirigido?

Cules son los objetivos?


2. Etapa 2. Diseo de la interactividad

2.1. Idea

Una vez realizada la primera fase de anlisis y estudio y a partir de las decisio-nes tomadas respecto a cmo podra ser el producto, cul es su objetivo y cules su pblico recogidas en la ficha del producto, pasamos a la fase de creacinde guin propiamente dicha.

Todo producto empieza con una idea de su creador. La idea es el motivo prin-cipal para la realizacin de la aplicacin. Es recomendable que se pueda escri-bir, describir y concretar en un mximo de dos lneas. Debe ser sencilla y derpida comprensin para poderla comunicar a una empresa para su realizacino financiacin, al equipo, al cliente, etc.

En algunas aplicaciones interactivas multimedia, como en los juegos, encon-tramos que en la idea se refleja una estructura narrativa propia de un guinde ficcin de una produccin audiovisual (o literaria), con el esquema tpicode la introduccin o planteamiento, parte central o nudo y final o desenlace,junto con el desarrollo del personaje, el objetivo y el conflicto.

En otro tipo de aplicaciones, como las de ndole didctica, la idea puede estarconstituida por un objetivo de aprendizaje.

Ejemplo de aplicacin didctica

Objetivodidctico: Aprender a redactar.

Pblicoobjetivo: Nias y nios de 7 a 9 aos.

Idea: Crear un CD-Rom que permita aprender a escribir cartas originales, disear felici-taciones y continuar cuentos de forma muy imaginativa.

Cmo: Por medio de un bho muy especial, muy sabio y simptico, que facilitar a losnios la investigacin por las distintas pantallas y propondr ejercicios, actividades, etc.

En el caso de una aplicacin de ndole comercial, la idea puede estar consti-tuida por un objetivo de fidelizacin de clientes, aumento de ventas, etc.

Generalmente, el trabajo del guionista de una aplicacin multimedia consisteen transmitir el contenido especfico para que se cumpla el objetivo marcado.

2.2. Sinopsis

A partir de la idea que se tiene de la aplicacin en concreto se realiza la sinopsis.

Ejemplos de juegos

En Age of Empires el usuario esel gua de una tribu en la edadde piedra y su misin es domi-nar el mundo creando y con-quistando imperios.En la Odisea (la bsqueda deUlises), el usuario es Heritias,el mejor amigo de Ulises, y sumisin es emprender un largoviaje en su busca.


La sinopsis es el desarrollo ms amplio de la idea inicial. Para Guillem Bou,"la sinopsis es un texto que responde a la pregunta: En qu consiste esta apli-cacin?".

En este documento se deben establecer los puntos ms destacables de la apli-cacin, destacar lo esencial y ofrecer una idea clara del contenido de la apli-cacin o programa.

En los productos multimedia narrativos, como los juegos de aventuras, cuen-tos interactivos, etctera, se crea una estructura dramtica con sus personajesprincipales y secundarios, con un objetivo y un conflicto. Aunque estas histo-rias no son lineales, se bifurcan, el usuario puede elegir entre varios caminos over la historia desde el punto de vista de diferentes personajes; se debe contarde manera narrativa en la sinopsis, de la misma manera que se realiza en unguin cinematogrfico.

No slo las obras de ficcin tienen una construccin dramtica, muchos pro-ductos (didcticos, informativos, promocionales) crean metforas narrativasque van desde un tipo determinado de interfaz a la caracterizacin de perso-najes que nos guan a travs del producto multimedia. Estas metforas tam-bin se explican en forma de sinopsis argumental.

La trampa pap

Es un CD-Rom que forma parte de un conjunto de juegos que constituyen una alterna-tiva a los videojuegos. Est pensada para que los nios y las nias, a partir de siete aos,pongan a prueba sus habilidades de observacin, memoria, razonamiento lgico, orien-tacin, etc. Es una propuesta ldica para que disfruten de todos los alicientes de los jue-gos de ordenador: puntuaciones, tiempo, superacin de etapas o "pantallas", posibilidadde jugar varios jugadores a la vez, niveles de dificultad, premio al final, etc.

Sinopsis:

La "trampa pap" empieza cuando los protagonistas, Boris y Noem, sobrevuelan una delas islas pap, en Oceana; el motor del avin empieza a fallar; lo que les obliga a hacerun aterrizaje de emergencia.

Boris y Noem caen en una isla muy peligrosa, porque est habitada por piratas que hanexpulsado a sus habitantes, los paps. Por eso, los indgenas han llenado los bosques dela isla con peligrosas trampas: quieren capturar a los piratas.

Bibliografa

BouBouz,Guillem (1997).El guin multimedia. Madrid:Anaya Multimedia.


Boris y Noem descubren una de las trampas pap en la que hay alguien atrapado en suinterior. Su misin ser salvar a este cautivo para evitar que caiga en manos de los pirataso de los miembros de una escuela de supervivencia, an ms peligrosos.

2.3. Diseo de la interactividad

Una vez realizada la sinopsis, se procede al diseo de la interactividad, que esuna de las fases ms importantes en el guin multimedia.

Pensar en cmo se va a relacionar el usuario con la aplicacin es una de lastareas ms difciles del guionista de un producto interactivo.

Para Bou en esta fase "se describen con mayor detalle las caractersticas delprotagonista de la aplicacin y el modo de interaccin usuario-aplicacin" y"la misin de estas pginas es presentar al lector la idea de la aplicacin, conms detalle del que se proporcion en la sinopsis, a fin de que se entiendamejor el guin".

Segn Bou, su finalidad es:

Didctica: Explica con detalle en qu consiste la aplicacin. Persuasiva: Contribuye a "vender" la aplicacin.

Muchos autores definen esta fase como la capacidad que debe tener el guio-nista para convertirse en usuario imaginario del producto una vez finalizado.No imaginamos todava las pantallas y los enlaces que finalmente tendr elproducto, sino el uso que har de ellos el usuario. Por lo que es muy impor-tante tener en cuenta qu tipo de producto vamos a crear y quin es el usuario.

Antes de realizar esta fase es necesario conocer las caractersticas principales decada uno de los productos existentes. Toni Matas i Dalmau, editor de Barcelo-na Multimedia, propone un modelo de anlisis de productos multimedia ba-sado en cuatro dimensiones: la secuencialidad versus aleatoriedad, la estructu-racin o desestructuracin de la comunicacin, la temporalidad versus atem-poralidad, y la interactividad versus la pasividad.

2.4. La secuencialidad o narracin lineal

Cuando hablamos de secuencialidad nos referimos a aquellas narraciones enque los acontecimientos pasan consecutivamente en un orden inalterable. Co-mo en una novela o en una pelcula, los acontecimientos de una historia sesuceden uno detrs de otro segn el orden que ha dispuesto su autor.

Cuando es el usuario quien decide en qu orden va a acceder a la informaciny aparentemente no hay un orden establecido por el autor, hablamos de na-rracin no lineal o acceso aleatorio.

Bibliografa

Matas,A. (1997). Productesmultimedia: disseny i anlisiconceptual.Artculo electrnico disponi-ble en http://www.raco.cat/index.php/Bibliodoc/article/view/56349/ 65771


Cuando creamos un producto multimedia una de las primeras decisiones quedebemos tomar es cmo vamos a presentar la informacin: de manera secuen-cial o de manera aleatoria, y cules son las implicaciones para el usuario deun tipo de presentacin u otra.

En un multimedia tememos ambas opciones e incluso opciones mixtas:

Presentarloscontenidosdemanerasecuencial

Podemos presentar de manera ordenada los contenidos. Toni Matas di-ce que la estructura secuencial de la informacin se usa cuando la asi-milacin de una unidad de contenido es requisito indispensable para lapresentacin de la siguiente. En una pelcula debemos ver las escenastal y como las ha establecido el autor para tener toda la informacinque necesitamos para entender la historia.

Presentarloscontenidosdemaneraaleatoria

El usuario tiene la opcin de acceder adonde quiera; puede acceder des-de cualquier parte del contenido a cualquier otra cuando l mismo de-cida. El ejemplo ms caracterstico de este tipo de presentacin es la na-vegacin en el hipertexto, en el que circulamos mediante enlaces entrelos distintos nodos de contenido.

En el hipertexto el usuario debe participar activamente y se convierte enlector-autor. l es quien decide crear la secuencia narrativa a su manera:por tanto la ventaja que obtiene es la libertad de accin. Pero hay queser concientes de que esta ventaja, segn el tipo de producto, se puedeconvertir en inconveniente y llevar al lector al caos.

Presentarloscontenidosdemaneramixta:secuencialyaleatoria

Incluso en las obras aparentemente aleatorias, es necesario que el autorpiense el recorrido necesario que ha de hacer el lector para la buenaasimilacin de la informacin.

Toni Matas aconseja que "la combinacin de la aleatoriedad y la secuen-cialidad ha de ser estudiada para poder conseguir los resultados de trans-misin de contenidos". Una forma presentacin u otra tiene unos resul-tados diferentes segn sea el gnero del producto.

2.4.1. Obras de ficcin y juegos

Son por lo general secuenciales; un autor piensa como ser la sucesin de pan-tallas, las pruebas que el jugador deber superar, cmo se desarrollar la histo-ria que se pretende explicar.


Hay juegos de aventuras (como Myst, creado por Cyan y producido por Bro-derbund) que son secuenciales y aleatorios a la vez. El usuario puede accedera diversos lugares, pero, al mismo tiempo, los caminos son planteados de ma-nera secuencial, y para que el usuario pueda avanzar es necesario resolver di-versos enigmas.

2.4.2. Enciclopedias y obras de consulta

Las enciclopedias son aleatorias; para su buen funcionamiento deben permi-tir al usuario acceder a cualquier punto de informacin, como a una letra de-terminada o a una palabra determinada. Pero tambin es frecuente encontrarpropuestas secuenciales, como en algunos bloques temticos.

2.4.3. Productos didcticos

Los productos didcticos son secuenciales por naturaleza porque en este tipode productos es necesario asumir unos contenidos antes de pasar a otros; as,por ejemplo, es necesario aprender a sumar y restar antes de aprender a dividir.Pero por otro lado, deben permitir al usuario un acceso aleatorio para, entreotras cosas, repasar un concepto anterior que no ha sido bien asimilado.

2.5. Estructuracin de la comunicacin

La estructuracin de la comunicacin, segn Matas, no se refiere a la manerade ordenar el contenido de la informacin, sino a la forma en que se establecela comunicacin entre el usuario y la mquina; es decir, hasta qu puntonuestro producto necesita que el usuario est orientado?

Comunicacinmuyestructurada

En una comunicacin muy estructurada el usuario conoce en todo mo-mento las acciones que el producto le permite llevar a cabo mediantemens, estructuras en rbol, un interfaz grfico similar al Windows...Las obras de consulta o productos didcticos son productos altamenteestructurados.

Comunicacinpocoestructurada

Una comunicacin poco estructurada obliga al usuario a explorar el pro-ducto. El usuario no esta del todo guiado, y parte del atractivo del pro-ducto es precisamente se. De ah que los juegos de aventuras, dondela toma de decisiones del usuario tiene consecuencias diferentes, se ca-racterizan por este tipo de comunicacin poco estructurada.

De todas manera, en las obras de consulta y en los productos didcticos tam-bin encontramos formas de comunicacin desestructurada. Por ejemplo, enlos que productos contienen juegos, o una enciclopedia o un producto didcti-


co que incluya un apartado de aprendizaje experimental. Otro ejemplo son lossimuladores, que incluyen una parte muy estructurada porque son educativos,pero, como pretenden imitar la realidad, incluyen partes desestructuradas.

2.6. La temporalidad

Entendemos por temporalidad en un producto interactivo la presencia de uncontador de tiempo, explcito o implcito, que provoca que las acciones delusuario y sus consecuencias cambien en el tiempo.

Para analizar esta dimensin es necesario distinguir entre los conceptos devida, historia e inteligencia.

Vida

El concepto de "vida" en un programa informtico se aplica cuando steparece que hace "un esfuerzo por cambiar" para reclamar la atencin delusuario. Es el caso de la animacin de la ayuda de Word, elemento queparece que est vivo porque reacciona aparentemente slo.

Historiaeinteligencia

Los conceptos de "historia" y de "inteligencia" estn ligados entre s. Mu-chos productos multimedia guardan el historial de las acciones que rea-liza el usuario a lo largo del tiempo. Este historial permite al programaadaptarse a las caractersticas de cada usuario, por lo que parece reaccio-nar con inteligencia. El historial se utiliza a menudo en productos edu-cativos donde el programa guarda el historial de errores del estudiantey genera ejercicios especiales para corregirlos.

2.7. Interactividad e interaccin

Los productos multimedia son normalmente productos interactivos, pero notodos tienen el mismo grado de interactividad.


Primergrado

El primer grado es el ms simple: aprieto un botn y pasa algo. Todoslos programas interactivos incluyen este grado de interactividad.

Segundogrado

El segundo grado de interactividad se refiere a que los efectos de las ac-ciones del usuario tienen consecuencias en el tiempo, como en el ejem-plo del programa de mecanografa. Este segundo grado esta ligado a losconceptos de historia y de inteligencia.

Tercergrado

El tercer grado es el grado ms sofisticado de interactividad. Lo encon-tramos cuando las acciones del usuario transcienden al uso del produc-to. As ocurre cuando la aplicacin obliga al usuario a realizar accionesque van ms all de las comunes en un producto multimedia: coger unatlas para resolver un enigma, conectarse a Internet para participar enun foro o para recoger una informacin, etc.

Cada grado de interactividad tiene unas repercusiones diferentes en el usuario.Mientras el primer grado implica una actitud pasiva, el segundo grado obligaal usuario a pensar sus acciones antes de actuar. El tercer grado requiere unaactitud activa por parte del usuario.

Laura Solanilles en su anlisis de las webs de museo establece distintos nivelesde interactividad partiendo de una distincin entre interactividad e interac-cin. La interactividad es entendida como una actividad de dilogo entre elusuario y la mquina mediante el programa. En cambio, la interaccin es laaccin recproca que se puede establecer entre el emisor y el receptor.

As, podemos ver diferentes niveles de interactividad segn la relacin que seinstaure entre el emisor y el receptor.


Nivel1

El usuario puede contactar con los responsables de la web mediante elcorreo electrnico, por ejemplo. La interaccin no es controlada por elemisor, excepto en la posibilidad de responder o no al usuario.

Nivel2

El usuario tiene la posibilidad de participar en una actividad previamen-te programada por el emisor. El emisor determina lo que puede o nopuede hacer el usuario (un juego en lnea).

Nivel3

El usuario puede generar contenidos de forma controlada por los res-ponsables de la web (foros de opinin).

Nivel4

El usuario pude ser coautor de la web y modificar o ampliar la informa-cin ofrecida previamente por el emisor.

2.8. Reglas en el diseo de la interactividad

Para realizar el diseo de la interactividad de un producto multimedia se pue-den tener en cuenta una serie reglas genricas. En este apartado trataremos lasque proponen dos autores: Bou y Mok.

2.8.1. Reglas segn Bou

Bou recomienda que "siempre que pueda haber interaccin debe haberla". Pe-ro cada interaccin del usuario con la aplicacin debe estar cuidadosamenteplanificada.

1) La interaccin tiene la funcin de reforzar el mensaje. Debe haber un mo-tivo para cada intervencin.

2) Deben evitarse perodos excesivamente prolongados en los que el usuariono intervenga (as, la lectura de textos extensos en pantalla).

3) La interaccin implica participacin activa, no una repeticin de gestos.Toda interaccin implica una decisin entre alternativas. Pulsar "Intro" parapasar de una pantalla a otra no puede considerarse interactividad.

Bibliografa

BouBouz,Guillem (1997).El guin multimedia. Madrid:Anaya.


4) No recordar al usuario que no puede interactuar. Es frustrante para el usua-rio pulsar sobre un sitio en el que crea que va a pasar algo y no pase nada(bien porque aquel botn est desactivado por mantenimiento, bien porqueaparezca en la pantalla como una zona aparentemente sensible y en realidadno lo sea).

5) La interaccin no se limita al esquema usuario-mquina. Tambin formaparte de la interaccin de una aplicacin la previsin de que varias personaspuedan participar en ella simultneamente.

6) La interaccin permite obtener un registro de datos descriptivos de la con-ducta del usuario.

Bou recomienda lo siguiente:

"Adopte la costumbre de imaginarse a s mismo dialogando con el usuario cuando diseeun hipertexto. Si se esfuerza en respetar el enunciado anterior evitar los largos monlo-gos textuales disfrazados de texto interactivo".

2.8.2. Reglas segn Mok

Segn Mok, hay nueve reglas que miden la utilidad y el xito de un productomultimedia interactivo:

1)Consistencia. Los elementos han de tener una apariencia uniforme.

2)Predecible. El diseo debe ser intuitivo y predecible.

3)Progresin. Todo debe de progresar de simple a complejo.

La complejidad gratuita provoca disminucin del inters y de la participacinpor parte del usuario.

4)Visibilidad. Los elementos funcionales deben ser visibles y su funcin, apa-rente.

5)Transparencia. El usuario tendra que olvidarse de que est trabajando conun ordenador y concentrarse en la tarea del momento.

6)Retroalimentacin. Cada accin del usuario debera tener un efecto obvioe inmediato.

7)Modosdeoperacin. Existen tres modos de operacin principales:

Mododecomando: Decir al sistema que haga algo, que busque una pa-labra, que vaya a una seccin.

Mododemanipulacin: Manipular objetos, simular.

Bibliografa

Mok,Clement (1998). Desig-ning Business. Adobe Press.


Mododegrabacin: Introducir datos, anotaciones, etc.

8)Velocidad. El usuario tendra que ser capaz de poder controlar la velocidadcon la que se mueve.

9)Adecuacin. El diseo de la interfaz debera acomodarse a los usuarios.

2.9. La forma del diseo interactivo

Cuando hemos de plantear el diseo interactivo de un producto multimediadebemos describir la manera en que el usuario se relacionar con el programa,es decir, qu elementos vamos a incluir en nuestro programa para que el usua-rio se pueda relacionar con l. En esta fase se recomienda valorar las diversasopciones que tenemos a partir del gnero del producto.

En el diseo interactivo pensamos cmo presentamos los contenidos,cmo se establece la comunicacin con el usuario, qu elementos deluso del tiempo vamos a tener en cuenta, y cmo se materializa todo ello.

El diseo interactivo se escribe de manera narrativa, incluye todos estos ele-mentos y define cules son las cosas que encontrar el usuario cuando entreen nuestro CD-Rom o web.

Redaccin de un diseo interactivo

Como ejemplo de redaccin de un diseo interactivo de un juego est el siguiente frag-mento:

La aplicacin consiste en un juego en el que se establecen diversos grados de dificultad.Se va a guardar el historial de cada uno de los participantes. En cada grado de dificultadhay cinco etapas, compuestas por tres pruebas, que el usuario debe superar. Si las supera,se sumarn puntos en un contador. Si no las supera, se restarn. Los juegos se dividenen varias pruebas de preguntas y respuestas sobre diversos campos de conocimiento. Elusuario cuando entre en la aplicacin encontrar a un personaje animado que le ayudarcon pistas sobre cada una de las pruebas, etc.

Visitas recomendadas

Recursos y ejemplos de diseo interactivo:

http://www.uned.es/ntedu/espanol/master/primero/modulos/guion-multimedia/ele-mentos-dinamicos.htm

http://arantxa.ii.uam.es/~castells/publications/interaccion00.pdf

http://jlori.blogia.com/2004/102201-ejemplos-de-interactividad.php

http://www.javeriana.edu.co/cursos/ntae/DisenoInteractivo.htm

http://www.javeriana.edu.co/cursos/ntae/documentos/diseppt0310.ppt


3. Etapa 3: Diseo de la navegacin

3.1. Organizacin de la informacin

Una vez tenemos el diseo de la interactividad, procedemos al diseo de lanavegacin:

Pensar y disear cmo se va a mover el usuario por la aplicacin, cmova a acceder a la informacin.

El acceso a la informacin y las diferentes opciones posibles que tiene el usua-rio (mirar, escuchar, hacer clic, mover el ratn, teclear un mensaje, etc.) debenestructurarse de forma adecuada.

Si una aplicacin est bien estructurada, se facilitar que el usuario pronto sepanavegar por ella y se sienta cmodo. Por tanto, es importante pensar cmo seorganizar la informacin cuando se disea una aplicacin multimedia.

En el grfico adjunto se muestran una serie de fases coherentes para organizary estructurar la informacin.


Clasificacindelainformacinporcategoras

El objetivo de esta fase es generar una lista amplia de las posibles categorasdel contenido de la aplicacin.

Ejemplo de categoras

Estas categoras pueden establecerse por tema o asunto, ubicacin, secuencia narrativa...

Agrupacintemticayredefinicindelosgrupostemticos

A continuacin, una vez generada la lista principal de categoras, se procedea agruparlas temticamente. Estas metacategoras se convertirn en los temasde nivel superior que los usuarios vern al acceder a la aplicacin.


Ejemplo de metacategora

En una pgina web personal, dentro de la metacategora de tiempo libre, podran situarseestas categoras: vacaciones, entretenimientos, etc.

Consiste bsicamente en colocar todos los temas o categoras de la lista prin-cipal en diferentes grupos temticos. Probablemente, habr temas que podrnpertenecer a dos categoras o ms, mientras que otros no se podrn colocarfcilmente.

Es importante asegurarse de que estas categoras temticas estn bien definidasy se diferencian unas de las otras.

Fragmentacindelainformacinen''trozos'',bloquesounidadespeque-as

En esta fase deben concretarse los contenidos de informacin en bloques deinformacin relativamente pequeos dentro de cada tema.

Jerarquizacinyadjudicacindeprioridades

Establecer la jerarqua de importancia de cada tema determinar en cierto mo-do la estructura de navegacin de la aplicacin. En primer lugar, deben defi-nirse las prioridades, qu conceptos son ms importantes y ms generales, ycules son ms especficos u opcionales.

Establecimientoderelaciones

A continuacin, se establecer qu relaciones pueden fijarse entre los distintostemas.

Organizacindentrodeunaestructura

Probablemente, la organizacin de la informacin no ser secuencial. Por estarazn es preciso disear uno o ms caminos especficos. La estructura de laorganizacin debe resultar coherente para que el usuario se encuentre cmodoy navegue fcilmente por la aplicacin.

La manera de organizar el contenido determinar la mayor o menor facilidadpara llegar a todos los contenidos.

Realizacindeldiagramadeflujo

La estructura de la fase anterior es el principio del diagrama de flujo de laaplicacin.

Bibliografa

Kristof,Ray;Satran,Amy(1998). Diseo interactivo(pgs. 32-37). Madrid: AnayaMultimedia.


3.2. Modelos de organizacin de la informacin

Existen distintos modelos para organizar la informacin en la aplicacin inte-ractiva. A continuacin se tratarn los siguientes:

lineal, circular, indexada, jerrquica, lineal jerrquica, ramificada, lineal ramificada, matricial, paralela, concntrica, reticular, contributoria, mixta.

3.2.1. Lineal

Es la ms simple y es propia del soporte del papel tradicional. Representa unasecuencia nica. El usuario no tiene ms opcin que avanzar o retroceder. Estil cuando se precisa que el navegante siga un itinerario fijo. Si bien estemodelo no proporciona mucha interactividad al usuario, garantiza el accesoa la informacin que se considera importante.

Se suele utilizar en tutoriales de formacin o en visitas guiadas en aplicacionesinformticas. Tambin en las secuencias iniciales de los juegos interactivosdonde se realiza una exposicin y planteamiento de objetivos al usuario, obien en una presentacin inicial de un producto.

3.2.2. Circular

A diferencia de la estructura lineal, que tiene un principio y un final, en laestructura lineal el camino es fijo y nico, pero sin inicio ni fin.

Web Style Guide

http://www.webstyleguide.com/index.html?/sites/site_design.html


3.2.3. Indexada

Esta estructura ofrece un men de opciones que llevan a una respuesta, y,despus, de nuevo regresa otra vez al men.

3.2.4. Jerrquica

Consiste en organizar el flujo de la aplicacin bajo la estructura tpica de rbol,donde la raz suele actuar como bienvenida y men para acceder a las distintassecciones. Es un modelo clsico de organizacin temtica de la informacin enel que se refleja el orden que va de lo general a lo particular y de la dependenciade unos conceptos respecto a otros.

Esta estructura es tpica de las aplicaciones educativas y de los buscadores te-mticos de la web (por ejemplo, Yahoo).


3.2.5. Lineal jerrquica

Esta estructura es una solucin mixta a partir de las estructuras lineal y jerr-quica. Permite navegar por un contenido organizado de forma jerrquica, perotambin permite una navegacin lineal. Tambin se utiliza en ciertos tutoria-les, sobre todo en formato web.

3.2.6. Ramificada

Este tipo de estructura consiste en un men de opciones que llevan al siguientesuceso, y ste lleva de nuevo al men hasta acabar o volver al men original.Representa una trayectoria de navegacin en la que se han incluido nodossubordinados para ofrecer mayor interactividad al usuario.

La estructura ramificada puede darse en los cuentos infantiles interactivos enlos que la historia se organiza de manera lineal y obliga al usuario a una lecturasecuencial, a la vez que se ampla la interactividad incorporando, como explicaOrihuela, "las dimensiones ldicas en los nodos subordinados".

3.2.7. Lineal ramificada

Esta estructura consta de una secuencia principal que no vara con ramas oca-sionales que retornan a la secuencia principal.

Bibliografa

Orihuela,JosLuis;Santos,MaraLuisa (1999). Introduc-cin al diseo digital. Concep-cin y desarrollo de proyectos decomunicacin interactiva. Ma-drid: Anaya.


3.2.8. Matricial

Esta estructura forma una especie de matriz. En este caso, al seleccionar un ele-mento se activan una serie de opciones que estn relacionadas. Esta estructurapuede ser difcil de comprender si el usuario no conoce las relaciones entre losdistintos elementos, entre las distintas categoras de informacin.

3.2.9. Paralela

En esta estructura se representan una serie de secuencias lineales en las quees posible:

la navegacin entre ellas, el desplazamiento entre los nodos de un mismo nivel.

Este modelo puede ser de utilidad en ficciones interactivas. Permite organizardiferentes acciones o puntos de vista de una historia que se desarrollan al mis-mo tiempo. As, el usuario podra seleccionar en cada secuencia los puntos devista de diferentes personajes que intervienen en la historia.


3.2.10. Concntrica

Este modelo parte de un nodo de entrada a partir del cual se organizan unaserie de secuencias lineales. A diferencia de la estructura paralela, el modelo deestructura concntrica no permite la navegacin entre los nodos de un mismonivel.

Un ejemplo de estructura concntrica podra ser un juego o ficcin interactivaen el que se propone al usuario diferentes tareas u objetivos como condicinnecesaria para pasar al nivel superior.

3.2.11. Reticular

Esta estructura es una organizacin en la que en apariencia no existe un iti-nerario de navegacin predefinido, y, por tanto, permite el mximo grado deflexibilidad para el usuario en la navegacin.

Es una de las estructuras ms laboriosas, ya que el guionista debe prever todoslos flujos posibles.


3.2.12. Contributoria

En este modelo de estructura, llamada contributoria, el usuario puede aadirsucesos que despus constituirn opciones para los usuarios siguientes.

3.2.13. Mixta

La estructura mixta es aquella que combina dos o ms modelos de estructu-ra. Estas estructuras deben aprovechar las ventajas de cada uno. La estructuramixta se da en la mayora de aplicaciones interactivas.

Bibliografa

Wilson,Stephen (1994)."The aesthetics and practiceof designing interactive com-puter events". En: Multimedia'94. New York: ACM.


3.3. Sistemas de navegacin

Tal como comenta Orihuela,

"la navegacin que permite los interactivos se disea mediante las diversas estructurashipertextuales y el variado sentido de los enlaces, y se orienta mediante el recurso a lasmetforas, en particular a los mapas de orientacin y navegacin y a los sistemas deayuda."

Por tanto, en el diseo de la navegacin deben tenerse en cuenta:

el modelo de estructura de la informacin en hipertexto o hipermedia, las metforas, los sistemas de ayuda, los mapas (de orientacin y de navegacin).

3.3.1. Tipos de navegacin

Bsicamente, los sistemas de navegacin se pueden clasificar en tres tipos:

1)Navegacincerrada

Se entiende como navegacin cerrada aquella en la que el usuario slo puedeascender o descender en la estructura de niveles que se ha creado. Este tipo denavegacin precisa de una estructura jerrquica.

La ventaja evidente es la facilidad de navegacin que tiene el usuario; por elcontrario, la sensacin de falta de libertad de movimiento tambin puede serms patente.

2)Navegacinabierta

En este tipo de navegacin el usuario marca su propio itinerario sin un ordenprefijado. Es el usuario quien salta de un punto de la aplicacin a otro. En estecaso la estructura puede quedar establecida en forma de red.

3)Navegacinmixta

En este tipo de navegacin existe una estructura de mens que condiciona lanavegacin lineal, pero a su vez existe la posibilidad de variar relativamente lanavegacin y generar una estructura lineal pero con jerarquas determinadas,con lo que se permite al usuario salir de la lnea de navegacin establecida enlos mens para pasar de un bloque o seccin a otro.

Otra clasificacin, muy simple, de navegacin es la siguiente:

1)Navegacininterna

Bibliografa

Orihuela,JosLus;Santos,MaraLuisa(1999). Introduc-cin al diseo digital. Concep-cin y desarrollo de proyectos decomunicacin interactiva (pg42). Madrid: Anaya.


La navegacin interna se refiere a la navegacin dentro de nuestra propia apli-cacin (por ejemplo, por nuestra website).

2)Navegacinexterna

En la navegacin externa, en cambio, el usuario sale de la aplicacin, medianteenlaces o links y puede visitar webs externas. Se recomienda que las relacionescon otras pginas externas sean complementarias de la informacin propor-cionada en nuestra aplicacin.

3.4. El diagrama de flujos

"Process improvement starts with an understanding of the process, and flowcharting isthe first step towards process understanding".

Phil Cohen, HCI Consulting.

3.4.1. Definicin

El diagrama de flujos de una aplicacin interactiva es un esquema visual en elque se plasma el contenido, la estructura, organizacin y el acceso de la apli-cacin. Debe reflejar el diseo de todos los posibles flujos, caminos o itinera-rios que se puedan generar en la aplicacin.

Kristof define as un diagrama de flujo:

"es sencillamente un esbozo presentado como diagrama, con lneas que muestran lasrutas de acceso entre sus partes".

En el diagrama de flujos debe verse cmo se relacionan las diferentes partesdel proyecto unas con otras y sirve para ver las diferentes posibilidades denavegacin de los usuarios con la interfaz del proyecto.

"El diagrama de flujo ideal es una especificacin clara y fcil de seguir de las categorastemticas, los niveles y los vnculos del proyecto."

Bibliografa

Kristof,Ray;Satran,Amy(1998). Diseo interactivo. Ma-drid: Anaya.


Ejemplo de diagrama de flujo

Este es un ejemplo de una website ficticia muy sencilla. En la primera pgina se accederaa un men con cuatro opciones (gimnasio, aerbic, musculacin y salud). stas seranlas principales categoras temticas.

Dentro de cada una, habra una serie de categoras secundarias. Por ejemplo, en el gim-nasio la localizacin, las instalaciones, las actividades, etc. Desde aqu se podra accedera las dos actividades de este gimnasio: aerbic y musculacin. Y desde cada actividadpodra accederse al apartado de beneficios mdicos (dentro de salud).

Una versin ms ampliada de este diagrama podra mostrar todas estas categoras secun-darias en lugar de presentarlas slo de forma apilada.

Ventajas

El diagrama de flujos plasma el contenido: la estructura, la organizacin y elacceso de la aplicacin. Adems, permite condensar la informacin y repre-sentarla de forma visual.

Bsicamente, las principales ventajas son:

1) Permite ver las distintas rutas de acceso que tendr el pblico.

Generalmente, en una aplicacin interactiva se pretende que los contenidossean accesibles de forma fcil y comprensible para el usuario. El diagrama deflujo ayuda a planearlos de forma conveniente.

2) Permite tener una visin clara del conjunto de la aplicacin, y esto es muytil para todo el equipo que participa en el proyecto. Por esta razn, el diagra-ma de flujo facilita el proceso de diseo de la aplicacin y, muchas veces, per-mite reducir tiempo y coste de produccin. Adems permite detectar erroresposibles (links que no funcionan, etc.).

Bibliografa

Kristof,Ray;Satran,Amy(1998). Diseo interactivo. Ma-drid: Anaya.


3.4.2. Elaboracin de diagramas de flujos

Existen diversas formas de representar los flujos de una aplicacin interactiva;se suelen utilizar sistemas adoptados y compartidos con otras disciplinas, co-mo la informtica de gestin o el control de eventos, que pueden precisar unacampaa electoral o de relaciones pblicas.

El resultado final de los flujos de la aplicacin puede diferir del inicialmenteideado. Esto es completamente lgico, ya que durante el proceso de produc-cin o incluso en las pruebas pueden surgir alternativas mejores a las inicial-mente previstas.

Como herramienta o software para dibujar flujos de datos, existen varios es-pecficos como el Inspiration, SmartDraw, Flowcharter, Igrafx.

Procesadores de texto muy conocidos, como Microsoft Word, tambin incor-poran en su barra de herramientas la de dibujo, con una librera de autoformasque incluye las especificas del diagrama de flujos.

Recomendaciones para elaborar diagramas de flujos

Elegir nombres significativos.

Numerar los procesos.

Incluir verbos activos y el objeto.

Evitar verbos del tipo: hacer, manejar, procesar.

Evitar diagramas de flujo complejos.

Llegar a ser comprensibles, digeribles y agradables a la vista.

Los flujos de datos se pueden descomponeren la "explosin" del proceso en un DFD hijo.

Evitar en lo posible abreviaturas.

Es importante precisar que, siempre que realicemos un diagrama de flujos,se debera acompaar dicha diagramacin con la leyenda correspondiente yespecificar el sentido de todos los iconos utilizados.

3.4.3. Simbologa en los diagramas de flujos

Como regla general, la simbologa que se utiliza en los diagramas de flujosdebe ser simple y de rpida comprensin.


En funcin del tipo de diagrama de flujo (de un proceso comercial, de unflujo de datos, de una asignacin de procesos, etc.) pueden utilizarse especfi-camente unos smbolos u otros. Incluso algunas empresas utilizan su propiasimbologa.

A continuacin se detallan los smbolos ms generalizados de los diagramas deflujo, que pueden ser de utilidad para crear algunos de ellos en las aplicacionesmultimedia.

Inicioyfin

El smbolo que se utiliza para indicar el inicio o el fin de una aplicacin sueleser uno de los dos:

Contenidotextualogrfico

Para indicar el contenido principal (ya sea textual o grfico) de las pantallaspuede utilizarse el rectngulo (normalmente simboliza un proceso).

Para complementar el contenido, para una explicacin, etctera puede utili-zarse el rectngulo (inacabado por la parte inferior) que simboliza un docu-mento.

Decisin

Para simbolizar una decisin que tiene que tomar el usuario de la aplicacin seutiliza el siguiente smbolo, con las lneas conectoras pertinentes, en funcinde las respuestas.


Conector

Para marcar que desde un punto concreto se accede a otra pgina se utilizaeste smbolo, el conector y se especifica un nmero en l. Este nmero ser elque se usar despus para seguir el camino marcado.

Ejemplo 1

http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/images/flow_final.gif

Ejemplo2

El diagrama de flujo representa este texto:


"Dial 0 then your friend's number. You will hear a tone. If you have a calling card number,dial your home phone number and the PIN number. If you don't have a calling cardnumber, first dial that 800 number (the one they always advertize on TV). When thecomputer voice asks you to say your name, say your name. Then wait for your friendto answer. If you have a calling card number, you can talk to your friend's answeringmachine. If you don't have a calling card number, you can't, so just hang up".

Recursos en Internet

Ms informacin sobre diagramas de flujos:

http://es.wikipedia.org/wiki/Diagrama_de_flujohttp://www.network-press.org/?diagramas_flujohttp://www.mis-algoritmos.com/aprenda-a-crear-diagramas-de-flujohttp://www.elticus.com/?contenido=19

Ms ejemplos de diagramas:

http://www.mis-algoritmos.com/ejemplos/diagramas-flujo.htm

Programas para hacer diagramas:

FreeDFD es un editor e intrprete de diagramas de flujo.http://wiki.freaks-unidos.net/freedfd/


4. Etapa 4. El diseo lgico

4.1. El diseo lgico

En el proceso de elaboracin de un guin multimedia, despus de hacer eldiseo de la navegacin con su correspondiente diagrama de flujo, se procedea la realizacin del diseo lgico.

El diseo lgico es el guin detallado clic a clic. En l se debe explicar todo loque ocurre en la aplicacin paso a paso. Se escribe mediante una descripcintextual de la idea argumental de cada una de las escenas y a continuacin sedescribe cmo debe ser cada una de las pantallas, qu elementos de interac-tividad tiene y cmo son (si hay texto, imagen, sonido, cmo aparecen enpantalla, qu puede hacer o no hacer el usuario...). Es decir, se detallan todosy cada uno de los elementos que intervienen en cada una de las pantallas dela aplicacin.

Este documento se suele redactar igual que un guin literario. Y se utiliza pararealizar el diseo grfico y, posteriormente, la aplicacin informtica.

Este apartado de diseo lgico contiene tambin el guin tcnico de la apli-cacin.

4.2. El guin tcnico

El guin tcnico de un producto multimedia, de la misma manera que el guintcnico de un producto audiovisual, escapa de la responsabilidad del guionistay entra en la del programador de la aplicacin. Pero para que ambos profesio-nales se puedan entender y no quepan dudas sobre la pretensin del guionistase elabora un documento con un lenguaje a caballo entre el vocabulario delguionista y el del informtico.

En el caso un producto multimedia no existe una metodologa nica pararealizar un guin tcnico. En muchas empresas multimedia, por ejemplo, notrabajan con guiones muy extensos, sino que solamente plasman la estructuracon un diagrama de flujos. Pero a medida que el equipo de trabajo crece (ytambin a medida que el proyecto es ms complejo) es imprescindible quehaya un guin bien establecido, manejable y fcilmente inteligible.


A continuacin se explica un ejemplo de realizacin de guin recogido porGuillem Bou en su libro El guin multimedia. ste es un mtodo que puedeservir de ejemplo para la escritura de un guin multimedia, aunque no es elnico.

Guillem Bou propone un mtodo de escritura de guiones basado en una seriede palabras clave; tiene como propsito que todos los miembros de un equipode produccin multimedia puedan entenderse entre s.

Este mtodo es muy til para escribir el guin tcnico de la aplicacin.

En el diseo lgico el guionista debe tener claro lo que ocurre en la aplicacin,y ha de intentar plasmarlo de manera sencilla; tambin han de quedar claraslas ideas de lo que ocurrir en la aplicacin.

Los conceptos ms importantes que recoge el mtodo de Bou son los siguien-tes:

ttulo, fondo, zonas sensibles, comportamiento de las zonas sensibles.

4.2.1. Ttulo

Debemos definir cada una de las escenas con un ttulo, el cual est compuestopor un nmero de escena y un nombre.

Ejemplo

Escena 1. "Playa".

4.2.2. Fondo

Cada escena se define por un fondo. Cuando habla de fondo, Bou se refierea una fotografa o pantalla dibujada que sirve de imagen de base para unaescena. Este fondo se escribe en el guin despus del ttulo de la escena yse seala con el nombre de BMP (bitmaps) que es la extensin habitual delos ficheros de imagen de Windows. A continuacin, ponemos el nombre delfondo. Si este fondo ya est diseado, se seala en el guin con el nombrecon el que hemos guardado el archivo, seguido de la extensin del formatogrfico: PCX, TIF, CIF, BMP...

Ejemplo

BMP: "Arena.tif"


4.2.3. Zonas sensibles

Las zonas sensibles son aquellas regiones de la pantalla que reaccionan al hacerclic o al paso del ratn sobre ellas.

En el guin se hace un inventario de cules son las zonas sensibles. Se utilizanlas siguientes palabras clave:

RAT:(abreviatura de "ratn"). Indica una zona sensible que reacciona a lasrdenes del ratn.

ROL: (abreviatura del ingls "roller"). Indica un rea o zona que reaccionacuando el ratn pasa por encima.

CLIC: Indica que la zona reacciona cuando se hace clic sobre ella. DCLIC: Indica que una zona reacciona cuando se hace doble clic sobre

ella.

4.2.4. Comportamiento de las zonas sensibles

La respuesta de cada una de las zonas sensibles se llama comportamiento. Larespuesta que da una zona sensible al usuario tal vez no sea siempre la misma.

Bou seala cinco tipos de comportamiento de las zonas sensibles:

1)Comportamientoregular: Sucede cuando una zona sensible repite siemprela misma respuesta. No se seala de ninguna forma especial en el guin.

2)Comportamientodeunarespuesta: Se refiere a las zonas que se compor-tan de una manera concreta la primera vez que se hace clic sobre ellas, peroluego dejan de ser de comportamiento regular. Se sealizan en el guin conel smbolo "". Se escribe a continuacin o en un anexo cmo son los otroscomportamientos.

3)Comportamientoydesconexin: Son zonas que, despus de la primerarespuesta, dejan de dar respuesta alguna; la zona se desconecta. Este tipo decomportamiento se seala en el guin con el siguiente smbolo "-". Este sm-bolo tambin se utiliza en el guin para indicar que alguna cosa deja de actuar.Por ejemplo, en la rutina de entrada a una escena (ver rutinas de entrada), siaparece este smbolo, indicar que la segunda vez que el usuario entre en laescena no se ejecutar la rutina.

4)Comportamientoparadiferentesejecuciones: Es el caso de una zona sen-sible que se comporta de diferente manera segn el nmero de veces que elusuario acte sobre ella. As ocurre en una zona que reacciona al tercer intentodel usuario. Para indicar en el guin el nmero de acciones que son necesariaspor parte del usuario con el fin de que esta zona reaccione, se utiliza el smbolo"N"; a continuacin se especifica el tipo de comportamiento.


5)Comportamientoporcondiciones: Sucede en las zonas que se compor-tan de una determinada manera cuando se han cumplido ciertos objetivos. Seanotan con la letra "C" normalmente seguida de la condicin.

4.3. Otros elementos del guin

A continuacin de cada uno de los epgrafes que se utilizan para nombrar laszonas sensibles se seala el elemento concreto que aparece con la reaccin acada uno de los movimientos del ratn. Para ello, Bou propone ms trminosque nos ayudan a sistematizar el vocabulario del guin.

4.3.1. Textos

Son las informaciones escritas que aparecen en la escena; vienen por lo generalenmarcadas en un recuadro. Sirven para indicar en el guin que aparece untexto; se usa la palabra TXT.

Existen ms opciones para indicar textos especiales:

Etiquetas: Son los textos que aparecen cuando el ratn pasa por encima deuna zona sensible y desaparecen cuando el usuario mueve el ratn a otrazona de la pantalla. La funcin de una etiqueta es identificar un objeto yavisar al usuario de que hay una zona sensible. Se indican con la palabraETI.

Bocadillos: Bocadillo es un trmino que procede del cmic. Son textosque aparecen dentro de un recuadro de puntas redondas o una elipsis conuna flecha que indica el personaje que est hablando. Se sealan con lapalabra BOC; entre parntesis se indica el personaje que esta hablando.

Si no se indica lo contrario, los textos desaparecen cuando el usuario hace clicpara indicar que lo ha ledo. En algunas ocasiones los textos desaparecen alcabo de un cierto tiempo; si es as, se debe especificar en el guin.

4.3.2. Iconos

Son figuras o imgenes que se superponen sobre un fondo. Estas imgenessuelen ser temporales, aparecen y despus desaparecen. Se sealan en el guincon la palabra ICN.

4.3.3. Secuencias

El autor entiende por secuencias el conjunto de iconos mviles, es decir, unafamilia de iconos animados. stos se sealan en el guin con la palabra SEC.


4.3.4. Animaciones

Las animaciones son las tramas de vdeo tanto si provienen de la digitalizacinde una seal externa, como si han sido generadas con un programa de ani-macin por ordenador. La principal diferencia entre la secuencia y la anima-cin es que en el caso del objeto animado ste se integra en el fondo, es decir,su propio fondo es transparente; por este motivo se ve el fondo de la escena.En cambio, las animaciones ocupan una zona rectangular de la pantalla. Lasanimaciones se sealan en el guin con la palabra FLI (el formato clsico enanimacin por ordenador).

Un FLI o bien ocupa toda la pantalla, o bien ocupa una parte. Si ocupa unaparte de la pantalla se indica en el guin con una P (parcial); si ocupa toda lapantalla, se seala con una T (total).

Si la animacin lleva un sonido incorporado, entonces se escribe la palabraAVIen lugar de FLI, por ser el formato comn en este tipo de datos.

4.3.5. Sonido

El sonido se indica en el guin con la palabra WAV (formato tpico de sonido)y se especifica en el guin si los sonidos terminan cuando el usuario realizauna accin; por ejemplo, cambiar de escena, si la aplicacin deja que acabeno si han de volver a empezar una vez acabados.

4.3.6. Marcadores

Son los indicadores de los puntos (si es que la aplicacin los utiliza) que tieneel usuario (as, en un juego). En el guin se escriben con la palabra SCO (delingls score). Si existen varios jugadores con varios marcadores, se especificancon una etiqueta o con un nombre para diferenciarlos.

4.3.7. Objetivos

Los objetivos para Bou son elementos concretos que el usuario debe descubriro alcanzar. Se escriben en el guin con el smbolo "$" seguido de un nmeroo un nombre.

4.3.8. Distractores

Los distractores son zonas sensibles que sirven para distraer al usuario; en losjuegos, por ejemplo, no son zonas que contengan ningn objetivo que se hayade conseguir por parte del usuario.


4.3.9. Ejecuciones o rutinas

Son fragmentos del cdigo informtico, hechos a media, que insertan los pro-gramadores entre el flujo de la aplicacin, es decir, trozos de programa que elguionista describe y que el equipo informtico incluye en el lugar indicadode la aplicacin.

A modo de ejemplo, Bou manifiesta que si en un lugar de la aplicacin el usua-rio ha de resolver un crucigrama, el equipo informtico lo programa siguiendolas indicaciones del guin; por lo que se debe incluir un documento anexoque describe el funcionamiento de este juego, mientras que en el guin tanslo aparece la palabra EXE, seguida del nombre del juego y de la indicacindel anexo en que se encuentra la descripcin textual.

Es frecuente incluir EXE en la descripcin del comportamiento de una zonasensible que se bifurca a otra escena. As ocurre cuando nos interesa por ejem-plo que el usuario realice unas pruebas para poder cambiar de escena. En estecaso en el guin se suele sealar con la palabra EXE y una descripcin de larutina que se ha de programar.

4.3.10. Grupos de tareas

Cuando el autor habla de grupos de tareas se refiere a cosas que pasan en lasescenas y que no vienen determinadas por ninguna accin del usuario. Loscasos ms importantes son las tareas de entrada a una escena y las tareas defondo.

4.3.11. Entrada a una escena

En el guin, despus de puntualizar cul es el fondo (BMP), se incluye la pala-bra ENTRADA para especificar una lista de cosas que suceden antes de que elusuario interacte. Estas cosas suelen ser: presentaciones, msica, animacionesy otros elementos, que sirven para presentar o ambientar la parte interactivaque vendr a continuacin.

En el artculo "Introduccin al diseo interactivo de elementos dinmicos" deGuillem Bou se indican algunos ejemplos de tareas de entrada:

Ejemplos de entrada

En una pantalla se coloca la ilustracin de fondo. En una pgina web, se activa una msica inicial que se interrumpe cuando el usuario

hace clic por primera vez. En un juego se extrae una pregunta al azar de un banco de preguntas. En una aplicacin de investigacin psicolgica el ordenador toma nota del tiempo

inicial para saber cunto tiempo tardar el usuario en salir de aquella pantalla. En una escena un texto se desplaza de derecha a izquierda por la pantalla antes de

que aparezca el decorado.

Bibliografa

GuillemBou."Introduccinal diseo interactivo de ele-mentos dinmicos". Revis-ta TdD Temes de Disseny (n.18). Barcelona: Elisava Edi-cions.


De la misma manera que existen tareas de entrada, tambin existen tareas desalida; stas las marcaremos tambin en el guin con la palabra SALIDA.

4.3.12. Tareas de fondo

En el guin tambin se describe lo que pasa cuando el usuario no realiza nin-guna accin. Es el caso de las pantallas vivas: elementos que se mueven sinque el usuario haga nada.

Este grupo de tareas se suma al guin, descritas y precedidas de la palabra ID-LE, la cual tambin aparece en algunas herramientas de generacin de aplica-ciones (en algunos generadores se llama timeline).

4.4. Reglas para la escritura del guin

Bou establece una serie de reglas para escribir el guin definitivo con el fin deque sea til y prctico para todo el equipo. Estas reglas son las siguientes:

Cada escena empieza en una pgina diferente.

Una escena puede constar de los siguientes elementos que aparecen eneste orden: nmero de la escena, ttulo, fondo, rutina de entrada, grupo detareas, grupos de tareas IDLE, zonas sensibles (con sus comportamientos).

El fondo de una escena puede cambiar, pero normalmente el fondo inicialsirve de decorado para identificar la escena. Si el fondo cambia, volveremosa escribir la palabra BMP con su nombre pertinente.

Las zonas sensibles no cambian durante una escena; como mucho, se des-conectan. Si cambian, es conveniente hacer otra escena aunque el fondosea el mismo que el anterior.

4.5. Ejemplo de diseo lgico

Escenan12

Titulo: Hacienda.

Descripcintextual:

Al entrar en la escena aparece un texto que dice: "Bienvenidos a la paz cam-pestre" mientras se ve un pajarraco que se escapa porque estn intentando ca-zarlo. EL ruido de dos disparos suena de fondo.


El usuario tendr un marcador en la pantalla. Sumar puntos cuando la deci-sin tomada sea correcta y los perder cuando se equivoque.

Cuando pulse sobre la puerta de la izquierda saldr un texto que dir "Hala!Cmo se nota que sois urbanos!" "Habis abierto la puerta del gallinero y seestn escapando los animales". Entonces se cambiar el fondo y se ver unaanimacin que ocupar toda la pantalla en la que se escapan gallinas, conejosy toda suerte de animales domsticos. Se le restar un punto. Si se vuelve apulsar sobre la misma puerta, las veces posteriores saldr un texto que dir "Noquedan ya animales en esta granja".

Hay un poste telefnico y cada vez que pulsen sobre l aparecer un texto quediga: "No hay telfono en la casa".

Al intentar subir a la ventana superior aparecer una seora gritando: Ladro-nes! Ladrones!, y el usuario perder un punto.

Mientras el usuario no haga nada, aparecern diversos motivos rurales, comocarros que pasan por el camino, pjaros que vuelan, alguna serpiente que searrastra, etc.

BMP: casacamp.pcx

ENTRADA (!)

TXT: "Bienvenidos a la paz campestre"

SEC: Se ve un pajarraco que se escapa porque estn intentando cazarlo.

(pjaro 01 a pjaro 06)

WAV: disparos.wav (dos disparos)

Zonassensibles:

1) RAT: puerta del almacn

ROL: ETI: "puerta del almacn"

CLIC: TXT: "En el almacn hay una puerta."

ICN "escalera" (sale el dibujo correspondiente)

$ 1

2) RAT: puerta central (d)

Nota

La descripcin textual es loque otros autores llaman dise-o lgico. Se puede colocar enun anexo.


ROL: ETI: "puerta de entrada"

CLIC TXT: "La casa est cerrada. Deberis entrar por una ventana."

3) RAT: ventana superior izquierda (d) (C $1)

ROL: ETI: "ventana"

(sin $1) TXT: "No puedes subir a esa ventana. Est muy arriba."

(con $1)

ICN. "seora. ICN"

BOC (seora) "Ladrones! Ladrones!"

SCO-1

4) RAT: ventana superior derecha (C$1)

ROL: ETI: "ventana"

CLIC:

(sin $1) TXT: "No puedes subir a esa ventana. Est muy arriba."

(con $1):

TXT: "Esta ventana es de la habitacin de Rosa. A travs de ella se puedever la cmara que ests buscando."

5) RAT: puerta izquierda (d) (!)

ROL: ETI: "puerta izquierda"

CLIC:

TXT: "Hala! Cmo se nota que sois urbanos! Habis abierto la puerta delgallinero y se han escapado los animales."

AVI: "granja Avi" (animales de granja que se escapan). (T)

SCO-1

OTRAS:


TXT: "No quedan animales en esta granja."

6) RAT: poste de telfonos (d)

ROL: ETI: "poste de telfonos"

CLIC: TXT: "No hay telfono en la casa."

IDLE: Aparecen diversos motivos rurales (SEC) por este orden:

carro, pjaro, caballo, serpiente.

Ejemplo tomado del libro El guin multimedia de Guillem Bou.

4.6. Recursos y ejemplos de guin multimedia

Recursosyejemplosdediseolgico

http://www.um.es/gtiweb/fjmm/disetesa.htm

http://www.fdi.ucm.es/profesor/milanjm/BDSI0304/Practica01-Tema02.pdf

Recursossobreguinmultimedia

http://www.ucm.es/info/especulo/numero34/guionmu.html

http://www.uned.es/ntedu/espanol/master/primero/modulos/guion-multi-media/elementos-dinamicos.htm

http://reddigital.cnice.mec.es/6/Articulos/pdf/Articulos_5.pdf

http://www.wikilearning.com/tutorial/el_usuario_arquetipico_creacion_y_uso_de_personajes_en_el_diseno_de_productos_interactivos-guiones/4023-7

http://www.iua.upf.es/formats/formats1/a01et.htm

http://mural.uv.es/dieguill/6%20-%20Un%20horizonte%20interactivo%20T3.html

Ejemplosdeguin

Doce sentidos

http://www.iua.upf.es/~ribas/GuioDisseny/ExemplesGuions/DotzeSentits/Guions/CDROMPOE.DOC


CD-ROM Joan Mir

http://www.iua.upf.es/~ribas/GuioDisseny/ExemplesGuions/Miro/GuionsMiro.htm

Aracne. Ciencia en la red

http://www.iua.upf.es/~ribas/GuioDisseny/ExemplesGuions/Aracne/GuionsAracne.htm


5. Etapa 5. El story-board

5.1. El story-board multimedia

La ltima etapa del guin multimedia es el story-board y los esquemas grficosde todos los elementos que aparecen en cada una de las escenas.

La story-board es una herramienta visual prestada del mundo de la comunica-cin audiovisual que constituye una presentacin en forma esquemtica deuna secuencia de dibujos, que son las pantallas del interactivo. En l se repre-senta la idea que se pretende plasmar en la aplicacin. Un story-board es laexpresin de todo lo que contendr la aplicacin, de las interacciones, de losestados y elementos dinmicos.

Bou afirma que:

"en el mundo multimedia la accin no es lineal. El story-board es un diagrama de esce-nas con indicaciones de las posibles rutas que se pueden seguir en la navegacin por laaplicacin".

El story-board expresa todo lo que puede ser visto u odo o experimentado porparte del usuario final de la aplicacin multimedia. Debe contener todas lasespecificaciones necesarias.

Los story-board pueden tomar muchas y diferentes formas y dimensiones enfuncin del proyecto. El story-board es una gua que va a variar a lo largo delproceso de produccin del interactivo. As, una ilustracin inicialmente pre-vista puede variar, ya que se deduce que existe una opcin mejor.

El story-board es una herramienta dinmica que va a sufrir variacionesa lo largo del proceso de produccin.

5.2. Funciones y ventajas del story-board

El story-board cumple bsicamente estas dos funciones:

1) Plasmar de forma grfica la estructura de los contenidos y sus interacciones.

2) Servir de gua, punto de referencia para todo el equipo, incluido el cliente.

Las ventajas del story-board se pueden resumir de esta manera:


Ayuda a catalizar la idea de cmo ser la aplicacin, ayuda a visualizarla.

Fuerza al autor a pensar de forma visual y a desarrollar un documento claroen el que se especifiquen los detalles con imgenes y texto.

Permite transcribir acciones, estructuras, interacciones complicadas de ex-plicar verbalmente y que podran interpretarse de manera equvoca.

Constituye un documento que todos pueden utilizar como punto de re-ferencia. Permite acordar diferentes puntos ("s, es lo que quera decir" o"no, esto es un problema"). Permite comprender y retener mejor la infor-macin visual.

Es un documento flexible que permite al autor y a su equipo mover im-genes, secuencias.

Permite ver los enlaces entre las diferentes partes y discutir las interaccio-nes. El story-board debe plasmar todos los enlaces (links) que hay entre lasdiferentes pantallas del documento.

Puede servir para ensear al cliente y que ste apruebe la lnea antes deseguir con el desarrollo del proceso.

La correccin de los problemas es menos costosa que en estadios ms avan-zados.

Un story-board detallado puede significar un ahorro de tiempo en el pro-ceso de escritura.

Ayuda a ver la estructura general del contenido de la aplicacin y a versu magnitud.

Para producir productos multimedia complejos y con equipos relativamentegrandes es esencial elaborar un story-board.

5.3. Grafo general y grafo exhaustivo

El objetivo principal del story-board es concretar de forma grfica, y lo msaproximada posible, la estructura de la aplicacin y lo que ocurre en concretodentro de cada pantalla.

Por esta razn, es preciso trabajar en dos niveles: el de la aplicacin en sutotalidad y el del detalle de las relaciones entre las escenas.


En una aplicacin multimedia interactiva el story-board est formadopor el grafo general y el grafo exhaustivo.

Grafo general y grafo exhaustivo

Grafo general Una estructura general en un diagrama de flujos de la aplicacin dondese esquematiza la totalidad de la estructura de la aplicacin interactiva.Ofrece una visin global (de la estructura del contenido y del sistemade navegacin).

Grafo exhaustivo Un comentario descriptivo y detallado que acompaa cada escena opantalla en concreto. Por ejemplo, una descripcin detallada de comosern los mens, qu ilustraciones se vern y durante cunto tiempo,qu audio y qu texto acompaarn a las imgenes, qu enlaces habr,etc. Se emplea para visualizar el comportamiento detallado de cada es-cena y de los elementos que la integran.

5.3.1. El grafo general

Es el diagrama de flujos. En l se representan las imgenes y/o contenidossimplificados de las diferentes pantallas de la aplicacin.

Debe estructurarse la informacin de manera coherente y teniendo en cuentalas posibilidades del hipertexto y de las diferentes estructuras posibles que segenerarn.

A continuacin, se recuerdan las fases coherentes para organizar y estructurarla informacin hasta plasmarla en un diagrama de flujos:

Nota

Grafo general y grafo exhausti-vo son trminos utilizados porBou en su libro Guin multime-dia.


5.3.2. El grafo exhaustivo

En el grafo exhaustivo se detalla cmo se distribuyen en la pantalla los diversoselementos, adems de las formas de interaccin que se ofrecen al usuario.

Registros que debe contemplar el grafo exhaustivo

Ilustracin

Texto

Sonido

Vdeo

Interacciones (zonas sensibles)

Efectos-transiciones

Descripcin general


En el grafoexhaustivo se proporciona una descripcin detallada de lo queocurre en cada pantalla, los elementos multimedia que hay (puede incluirseuna relacin de los archivos utilizados, su nombre y ubicacin) y las interac-ciones que se ofrecen al usuario.

En cambio, en el grafogeneral, en un diagrama de flujos se muestra la estruc-tura de la aplicacin y las conexiones entre las pantallas. Tiene la funcin deorientacin global.

En el grafo exhaustivo se marcan las zonassensibles (que, como ya hemosexplicado anteriormente, son aquellas zonas de la pantalla en las que sucedealgo al pulsar o pasar el ratn por encima, o bien al hacer otra accin). En estegrafo debe detallarse dnde se localizan estas zonas sensibles y una descripcinde su comportamiento. A partir de estas zonas sensibles se planificarn lasinteracciones.

En el apartado de guin tcnico se sealaron algunos de los comportamientosde las zonas sensibles y tambin una manera de nombrarlos; pero no es lanica nomenclatura que existe. En la tabla adjunta se muestra una descripcinde los eventosdeJavascript ms comunes:

Descripcin de los eventos de Javascript ms comunes

Eventosderatn

onmouse-down

Al presionar un botn del ratn.

onmousemo-ve

Al mover el puntero del ratn.

onmouseup Al levantar un botn del ratn.

onclick Al hacer clic (una pulsacin completa subida y bajada del botn izquier-do del ratn).

ondblclick Al hacer doble clic.

onmouseover Al pasar el ratn por encima de un elemento o una zona.

onmouseout Al abandonar el elemento o zona.

ondragstart Al iniciar una operacin de arrastre.

onselect Al realizar una seleccin.

Eventos de teclado

onkeydown Al presionar (bajar) una tecla.

onkeypress Al pulsar una tecla ANSI.

Bobadilla,Jess;Alcocer,Alejandro;Alonso,Santiago;Gutirrez,Abraham(1999). HTML Dinmico, ASP y Javascript atravs de ejemplos. Madrid: Ra-Ma.


Eventos de "enfoque"

onblur Al abandonar el mbito de un elemento.

onfocus Al entrar en el mbito de un elemento.

Eventos de formulario

onreset Al inicializar el formulario.

onsubmit Al enviar el formulario.

Eventos de carga de pgina

onload Al cargar la pgina.

onunload Al descargar la pgina.

Bobadilla,Jess;Alcocer,Alejandro;Alonso,Santiago;Gutirrez,Abraham(1999). HTML Dinmico, ASP y Javascript atravs de ejemplos. Madrid: Ra-Ma.

Por ltimo, se ofrecen plantillas para realizar el grafo exhaustivo de un story-board.

Plantillasdestoryboard(grafoexhaustivo)

Story 1

Story 2

Story 3

Story 4

Ejemplos de story-board (grafo exhaustivo).


5.4. El story-board con wireframes

Las webs y los productos interactivos son cada vez ms dinmicos, cambiantesy con elementos que aparecen da a da en el mercado; lo que hace que seadifcil plasmar lo que queremos conseguir en nuestro producto a travs de losstory-board tradicionales. As que los diseadores de web estn usando nuevastcnicas con el fin de plasmar sus ideas sobre los productos (como son el usode wireframes para hacer storyboards), sobre todo en los que usen tecnologasque redunden en la interaccin inmediata con los usuario

Documents

6 - El Guion Multimedia