Documentos
para el desarrollo de proyectos de comunicación interactiva
por
José Luis Orihuela y María Luisa Santos
Universidad de Navarra
Diagrama
del hipertexto - Guión de contenidos - Storyboard
1. Diagrama del hipertexto
- Es la representación
gráfica de la estructura hipertextual (nodos y enlaces)
- Ilustra los
trayectos de navegación
- Cada nodo se
representa mediante una caja o rectángulo en el que se incluye su codificación
(ej.: A1, A2, B1, etc.)
- Los enlaces
se representan mediante líneas o flechas que unen las cajas
- Las líneas
(sin punta de flecha) representan enlaces de doble senido.
- Las flechas
representan enlaces de un sólo sentido.
Elaboración
del diagrama del hipertexto
Es conveniente
seguir los siguientes pasos:
- Fragmentación
del contenido en nodos
- Establecimiento
de los enlaces (contemplar todas las opciones de navegación)
- Planteamiento
del modelo de estructura
- Dibujo del
diagrama hipertextual:
- codificación
de los nodos
- estandarización
de tipos de enlaces (flechas, colores, líneas punteadas, etc.)
- anotaciones
complementarias
subir
2. Guión de contenidos
Refleja el
contenido editorial de cada nodo mediante:
- transcripción
de textos en pantalla
- transcripción
de locuciones sonoras
- indicaciones
sobre música y efectos sonoros
- descripción
de imágenes (fotografías, ilustraciones, gráficos, etc.)
- descripción
de animaciones
- descripción
de vídeos
Indica las
opciones de navegación
- especifica
el elemento origen del enlace (una palabra, un icono, un botón, una
imagen, etc.)
- especifica
el nodo de destino del enlace
Para cada nodo
es necesario indicar:
- Nombre:
codificación según el diagrama hipertextual (A / B ; A1, A2
/ B1, B2, etc.)
- Exposición
(descripción del nodo)
- Resumen descriptivo
de los contenidos del nodo
- Redacción
literal del texto
- Descripción
de las imágenes
- Alternativas
de navegación: (si … luego … / if … then …
/ when … go to …)
- Ejemplos:
- si clic
en Facultades, va a
- F1.1. clic
en botón Facultades conduce a nodo F.1.1
- botón
Facultades ---> nodo F.1.1.
Ejemplo
|
Proyecto:
sitio web promocional de la Selva de Irati
N2 (Codificación)
(Resumen
descriptivo de los contenidos del nodo y de las imágenes)
Presentación de la Selva de Irati y de la zona en la que ésta
se ubica.
Imagen fotográfica de la Selva de Irati en otoño. Imágenes
correspondientes a los botones de: alojamientos, restaurantes, excursiones
y otras actividades.
(Texto
literal que se puede ver en pantalla)
“Bienvenido al hayedo más septentrional de Europa, situado
en una de las zonas más bonitas de la Península Ibérica.
En pleno Pirineo Oriental Navarro, entre los pueblos de Ochagavía
y Orbaizeta, se halla este magnífico bosque de abetos y hayas.”
Alternativas de navegación:
(indica origen y destino del enlace)
- Pirineo Oriental
Navarro: enlace a sitio web del Consorcio del PON
- Ochagavía:
enlace a sitio web del ayuntamiento de Ochagavía
- Botón alojamientos:
enlace a AL1
- Botón restaurantes:
enlace a Rest1
- Botón excursiones:
enlace a Exc1
- Botón otras
actividades: enlace a Act1 volver
|
subir
3. Storyboard
- Constituye
el guión gráfico del proyecto
- Ilustra el
aspecto de los nodos y la funcionalidad de sus elementos
Requisitos para su elaboración
- Codificación
de cada nodo (según el diagrama)
- Boceto de pantalla
- Identificación
elementos presentes en el nodo (elementos visuales y sonoros)
- Funcionalidad
de los elementos: programación (activación de sonidos o animaciones,
opciones de navegación, etc.)
Ver de forma complementaria
nuestra Guía para el Diseño
y Evaluación de Proyectos de Comunicación Digital
Documentos
para el desarrollo de proyectos de comunicación interactiva
(c) 2004
José Luis Orihuela y María Luisa Santos (Universidad de Navarra)
http://www.unav.es/digilab/forms/docs_proyectos.htm