El guió multimèdia
Índex
- 1.Etapa 1. Procés de creació d'un producte multimèdia
- 2.Etapa 2. Disseny de la interactivitat
- 2.1.Idea
- 2.2.Sinopsi
- 2.3.Disseny de la interactivitat
- 2.4.La seqüencialitat o narració lineal
- 2.4.1.Obres de ficció i jocs
- 2.4.2.Enciclopèdies i obres de consulta
- 2.4.3.Productes didàctics
- 2.5.Estructuració de la comunicació
- 2.6.La temporalitat
- 2.7.Interactivitat i interacció
- 2.8.Regles en el disseny de la interactivitat
- 2.8.1.Regles segons Bou
- 2.8.2.Regles segons Mok
- 2.9.La forma del disseny interactiu
- 3.Etapa 3: Disseny de la navegació
- 3.1.Organització de la informació
- 3.2.Models d'organització de la informació
- 3.2.1.Lineal
- 3.2.2.Circular
- 3.2.3.Indexada
- 3.2.4.Jeràrquica
- 3.2.5.Lineal jeràrquica
- 3.2.6.Ramificada
- 3.2.7.Lineal ramificada
- 3.2.8.Matricial
- 3.2.9.Paral·lela
- 3.2.10.Concèntrica
- 3.2.11.Reticular
- 3.2.12.Contributòria
- 3.2.13.Mixta
- 3.3.Sistemes de navegació
- 3.3.1.Tipus de navegació
- 3.4.El diagrama de fluxos
- 3.4.1.Definició
- 3.4.2.Elaboració de diagrames de fluxos
- 3.4.3.Simbologia en els diagrames de fluxos
- 4.Etapa 4. El disseny lògic
- 4.1.El disseny lògic
- 4.2.El guió tècnic
- 4.2.1.Títol
- 4.2.2.Fons
- 4.2.3.Zones sensibles
- 4.2.4.Comportament de les zones sensibles
- 4.3.Altres elements del guió
- 4.3.1.Textos
- 4.3.2.Icones
- 4.3.3.Seqüències
- 4.3.4.Animacions
- 4.3.5.So
- 4.3.6.Marcadors
- 4.3.7.Objectius
- 4.3.8.Distractors
- 4.3.9.Execucions o rutines
- 4.3.10.Grups de tasques
- 4.3.11.Entrada a una escena
- 4.3.12.Tasques de fons
- 4.4.Regles per a l'escriptura del guió
- 4.5.Exemple de disseny lògic
- 4.6.Recursos i exemples de guió multimèdia
- 5.Etapa 5. El guió il·lustrat
1.Etapa 1. Procés de creació d'un producte multimèdia
1.1.Fases de la producció
-
Equip humà: s'ha de planificar l'equip humà que es necessitarà per a la creació del producte multimèdia.
-
Pla de treball: es procedeix a la divisió del conjunt del treball en mòduls o parts detallades; s'assenyala el responsable i el termini de temps.
-
Equip material necessari: ordinadors, escàner, càmera, programari, etc.
1.2.L'equip humà d'un projecte multimèdia
Àrea
|
Funció
|
---|---|
Producció
|
Coordinació
|
Redacció
|
Documentalista i guionista
|
Artística
|
Direcció d'art i disseny gràfic
|
Tècnica
|
Programació i especialitats (àudio, vídeo, animacions)
|
J. L. Orihuela; M. L. Santos (1999). Introducción al diseño digital. Concepción y desarrollo de proyectos de comunicación interactiva (pàg. 69-74). Madrid: Anaya Multimedia.
T. Vayhan (1994). Todo el poder de multimedia (pàg. 35-49). Osborne, Mèxic: McGraw-Hill.
Àrea de producció
|
|
Perfil
|
Funcions
|
Coordinador
|
Es responsabilitza del desenvolupament total i implementació del projecte. Així mateix,
també assumeix la responsabilitat del contingut i l'estructura del projecte.
Entre les seves tasques hi ha:
|
Productor executiu
|
Segons l'envergadura de l'empresa pot existir aquest perfil, les funcions del qual
són:
|
Director del projecte
|
Segons l'envergadura de l'empresa pot existir aquest altre perfil, responsable de
la producció d'un projecte en particular, les funcions del qual són:
|
Àrea de redacció
|
|
Perfil
|
Funcions
|
Documentalista
|
La seva tasca consisteix a obtenir la informació necessària per a elaborar el contingut
del projecte.
Les seves funcions són:
|
Guionista
|
S'encarrega del contingut global del projecte: estructura el contingut, determina
els elements de disseny que es requereixen per a recolzar aquesta estructura i decideix
els mitjans més apropiats de les diferents parts del contingut.
Les seves funcions són:
|
Àrea artística
|
|
Perfil
|
Funcions
|
Director d'art
|
Les seves funcions són:
|
Dissenyador gràfic
|
S'encarrega de l'aspecte visual del projecte, juntament amb il·lustradors, animadors
i especialistes en processament d'imatges. Entre les seves funcions hi ha:
|
Dissenyador d'interfícies
|
En funció de l'envergadura del projecte, es pot necessitar aquest perfil específic.
S'encarrega de:
Pot ser a més guionista o dissenyador gràfic.
|
Àrea tècnica
|
|
Perfil
|
Funcions
|
Programador multimèdia
|
Usualment, és un enginyer de programari que integra tots els elements del projecte
utilitzat, un sistema de desenvolupament o un llenguatge de programació. Entre les
seves funcions tenim:
|
Especialistes
|
|
1.3.Introducció al guió multimèdia
1.4.Consideracions prèvies
Hipertext
|
L'organització de la informació i la seva estructura considerant les possibilitats
i característiques que ofereix l'hipertext.
|
Interactivitat
|
El disseny de la interactivitat (quantitat d'interacció, qualitat, capacitat de control
per part de l'usuari, etc.).
|
Usuari
|
Les aplicacions multimèdia es conceben per a ser utilitzades per un tipus concret
d'usuari i, per tant, s'han d'adaptar de manera convenient.
A partir d'aquí es dissenyarà l'estructura de navegació i la interactivitat.
|
Recursos tècnics
|
S'ha de preveure la incorporació de recursos tècnics, que serviran per a reforçar
el missatge. És important seleccionar-los de manera encertada per a aconseguir que
l'aplicació transmeti les sensacions previstes.
|
1.5.Fases en el procés d'elaboració del guió
1.6.La concepció del producte multimèdia
1.6.1.Anàlisi, estudi i estratègia
-
quin és el missatge que es comunicarà,
-
a quin públic està dirigit,
-
quin és l'objectiu del producte.
1.6.2.Fitxa del producte
2.Etapa 2. Disseny de la interactivitat
2.1.Idea
2.2.Sinopsi
2.3.Disseny de la interactivitat
-
Didàctica: explica amb detall en què consisteix l'aplicació.
-
Persuasiva: contribueix a "vendre" l'aplicació.
2.4.La seqüencialitat o narració lineal
2.4.1.Obres de ficció i jocs
2.4.2.Enciclopèdies i obres de consulta
2.4.3.Productes didàctics
2.5.Estructuració de la comunicació
2.6.La temporalitat
2.7.Interactivitat i interacció
2.8.Regles en el disseny de la interactivitat
2.8.1.Regles segons Bou
"Adopte la costumbre de imaginarse a sí mismo dialogando con el usuario cuando diseñe un hipertexto. Si se esfuerza en respetar el enunciado anterior evitará los largos monólogos textuales disfrazados de texto interactivo."
2.8.2.Regles segons Mok
-
Mode d'instruccions: dir al sistema que faci alguna cosa, que busqui una paraula, que vagi a una secció.
-
Mode de manipulació: manipular objectes, simular.
-
Mode d'enregistrament: introduir dades, anotacions, etc.
2.9.La forma del disseny interactiu
3.Etapa 3: Disseny de la navegació
3.1.Organització de la informació
3.2.Models d'organització de la informació
-
lineal,
-
circular,
-
indexada,
-
jeràrquica,
-
lineal jeràrquica,
-
ramificada,
-
lineal ramificada,
-
matricial,
-
paral·lela,
-
concèntrica,
-
reticular,
-
contributòria,
-
mixta.
3.2.1.Lineal
3.2.2.Circular
3.2.3.Indexada
3.2.4.Jeràrquica
3.2.5.Lineal jeràrquica
3.2.6.Ramificada
3.2.7.Lineal ramificada
3.2.8.Matricial
3.2.9.Paral·lela
-
la navegació entre aquestes,
-
el desplaçament entre els nodes d'un mateix nivell.
3.2.10.Concèntrica
3.2.11.Reticular
3.2.12.Contributòria
3.2.13.Mixta
3.3.Sistemes de navegació
"La navegación que permite los interactivos se diseña mediante las diversas estructuras hipertextuales y el variado sentido de los enlaces, y se orienta mediante el recurso a las metáforas, en particular a los mapas de orientación y navegación y a los sistemas de ayuda."
-
el model d'estructura de la informació en hipertext o hipermèdia,
-
les metàfores,
-
els sistemes d'ajuda,
-
els mapes (d'orientació i de navegació).
3.3.1.Tipus de navegació
3.4.El diagrama de fluxos
"Process improvement starts with an understanding of the process, and flowcharting is the first step towards process understanding."
Phil Cohen, HCI Consulting
3.4.1.Definició
"Es sencillamente un esbozo presentado como diagrama, con líneas que muestran las rutas de acceso entre sus partes."
"El diagrama de flujo ideal es una especificación clara y fácil de seguir de las categorías temáticas, los niveles y los vínculos del proyecto."
Avantatges
3.4.2.Elaboració de diagrames de fluxos
Triar noms significatius.
|
Numerar els processos.
|
Incloure verbs actius i l'objecte.
|
Evitar verbs com fer, manejar, processar.
|
Evitar diagrames de flux complexos.
|
Han d'arribar a ser comprensibles, digeribles i agradables a la vista.
|
Els fluxos de dades es poden descompondre en l'"explosió" del procés en un DFD fill.
|
Evitar sempre que es pugui les abreviatures.
|
3.4.3.Simbologia en els diagrames de fluxos
"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 card number, first dial that 800 number (the one they always advertize on TV). When the computer voice asks you to say your name, say your name. Then wait for your friend to answer. If you have a calling card number, you can talk to your friend's answering machine. If you don't have a calling card number, you can't, so just hang up."
4.Etapa 4. El disseny lògic
4.1.El disseny lògic
4.2.El guió tècnic
-
títol,
-
fons,
-
zones sensibles,
-
comportament de les zones sensibles.
4.2.1.Títol
4.2.2.Fons
4.2.3.Zones sensibles
-
RAT(abreviatura de ratolí): indica una zona sensible que reacciona a les ordres del ratolí.
-
ROL (abreviatura de l'anglès roller): indica una àrea o zona que reacciona quan el ratolí passa per sobre.
-
CLIC: indica que la zona reacciona quan es fa clic a sobre seu.
-
DCLIC: indica que una zona reacciona quan es fa doble clic a sobre seu.
4.2.4.Comportament de les zones sensibles
4.3.Altres elements del guió
4.3.1.Textos
-
Etiquetes: són els textos que apareixen quan el ratolí passa per sobre d'una zona sensible i desapareixen quan l'usuari mou el ratolí a una altra zona de la pantalla. La funció d'una etiqueta és identificar un objecte i avisar l'usuari que hi ha una zona sensible. S'indiquen amb la paraula ETI.
-
Globus: globus és un terme que procedeix del còmic. Són textos que apareixen dins d'un requadre de puntes rodones o una el·lipsi amb una fletxa que indica el personatge que està parlant. S'assenyalen amb la paraula BOC; entre parèntesis s'indica el personatge que està parlant.
4.3.2.Icones
4.3.3.Seqüències
4.3.4.Animacions
4.3.5.So
4.3.6.Marcadors
4.3.7.Objectius
4.3.8.Distractors
4.3.9.Execucions o rutines
4.3.10.Grups de tasques
4.3.11.Entrada a una escena
4.3.12.Tasques de fons
4.4.Regles per a l'escriptura del guió
-
Cada escena comença en una pàgina diferent.
-
Una escena pot constar dels elements següents, que apareixen en aquest ordre: número de l'escena, títol, fons, rutina d'entrada, grup de tasques, grups de tasques IDLE, zones sensibles (amb els seus comportaments).
-
El fons d'una escena pot canviar, però normalment el fons inicial serveix de decorat per a identificar l'escena. Si el fons canvia, tornarem a escriure la paraula BMP amb el seu nom pertinent.
-
Les zones sensibles no canvien durant una escena; a tot estirar, es desconnecten. Si canvien, és convenient fer una altra escena encara que el fons sigui el mateix que l'anterior.
4.5.Exemple de disseny lògic
ICN "escalera" (sale el dibujo correspondiente)
ICN. "señora. ICN"
BOC (señora) "¡Ladrones! ¡Ladrones!"
SCO-1
(sin $1) TXT: "No puedes subir a esa ventana. Está muy arriba."
(con $1):
TXT: "Esta ventana es de la habitación de Rosa. A través de ella se puede ver la cámara que estás buscando."
TXT: "¡Hala! ¡Cómo se nota que sois urbanos! Habéis abierto la puerta del gallinero 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."
4.6.Recursos i exemples de guió multimèdia
5.Etapa 5. El guió il·lustrat
5.1.El guió il·lustrat multimèdia
"En el mundo multimedia la acción no es lineal. El story-board es un diagrama de escenas con indicaciones de las posibles rutas que se pueden seguir en la navegación por la aplicación."
5.2.Funcions i avantatges del guió il·lustrat
-
Ajuda a catalitzar la idea de com serà l'aplicació, ajuda a visualitzar-la.
-
Força l'autor a pensar de manera visual i a desenvolupar un document clar en el qual s'especifiquin els detalls amb imatges i text.
-
Permet transcriure accions, estructures, interaccions complicades d'explicar verbalment i que es podrien interpretar de manera equívoca.
-
Constitueix un document que tots poden utilitzar com a punt de referència. Permet acordar diferents punts ("sí, és el que volia dir" o "no, això és un problema"). Permet comprendre i retenir millor la informació visual.
-
És un document flexible que permet a l'autor i al seu equip moure imatges, seqüències.
-
Permet veure els enllaços entre les diferents parts i discutir les interaccions. El guió il·lustrat ha de plasmar tots els enllaços que hi ha entre les diferents pantalles del document.
-
Pot servir per a ensenyar-lo al client i que aquest aprovi la línia abans de seguir amb el desenvolupament del procés.
-
La correcció dels problemes és menys costosa que en estadis més avançats.
-
Un guió il·lustrat detallat pot significar un estalvi de temps en el procés d'escriptura.
-
Ajuda a veure l'estructura general del contingut de l'aplicació i a veure'n la magnitud.
5.3.Graf general i graf exhaustiu
Graf general
|
Una estructura general en un diagrama de fluxos de l'aplicació en què s'esquematitza
la totalitat de l'estructura de l'aplicació interactiva. Ofereix una visió global
(de l'estructura del contingut i del sistema de navegació).
|
Graf exhaustiu
|
Un comentari descriptiu i detallat que acompanya cada escena o pantalla en concret.
Per exemple, una descripció detallada de com seran els menús, quines il·lustracions
es veuran i durant quant temps, quin àudio i quin text acompanyaran les imatges, quins
enllaços hi haurà, etc. S'empra per a visualitzar el comportament detallat de cada
escena i dels elements que la integren.
|
5.3.1.El graf general
5.3.2.El graf exhaustiu
Il·lustració
|
Text
|
So
|
Vídeo
|
Interaccions (zones sensibles)
|
Efectes-transicions
|
Descripció general
|
Esdeveniments de ratolí
|
|
onmousedown
|
En pressionar un botó del ratolí.
|
onmousemove
|
En moure el punter del ratolí.
|
onmouseup
|
En aixecar un botó del ratolí.
|
onclick
|
En fer clic (una pulsació completa –pujada i baixada– del botó esquerre del ratolí).
|
ondblclick
|
En fer doble clic.
|
onmouseover
|
En passar el ratolí per sobre d'un element o una zona.
|
onmouseout
|
En abandonar l'element o zona.
|
ondragstart
|
En iniciar una operació d'arrossegament.
|
onselect
|
En fer una selecció.
|
Esdeveniments de teclat
|
|
onkeydown
|
En pressionar (baixar) una tecla.
|
onkeypress
|
En prémer una tecla ANSI.
|
Esdeveniments d'"enfocament"
|
|
onblur
|
En abandonar l'àmbit d'un element.
|
onfocus
|
En entrar en l'àmbit d'un element.
|
Esdeveniments de formulari
|
|
onreset
|
En inicialitzar el formulari.
|
onsubmit
|
En enviar el formulari.
|
Esdeveniments de càrrega de pàgina
|
|
onload
|
En carregar la pàgina.
|
onunload
|
En descarregar la pàgina.
|
5.4.El guió il·lustrat amb wireframes
Definició de wireframe"Son una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar en las pruebas de usuarios."
5.4.1.Narrativa de wireframes guiats
-
jerarquia,
-
estat de la pantalla,
-
convencions de disseny,
-
patrons d'interacció.
5.5.Annexos del guió
5.5.1.Els guions audiovisuals
-
els guions dels audiovisuals que s'han de crear,
-
els textos que apareixen escrits o que una veu emetrà,
-
els guions d'altres documents, com els textos que acompanyen els audiovisuals, vídeos, cinema, animacions o fotografies,
-
els guions il·lustrats dels audiovisuals, animacions, etc.