Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Hi Per Media Web
Hi Per Media Web
Objetivos
• Definir el concepto de hipermedia, hipertexto y multimedia
• Profundizar en los distintos elementos que pueden incluirse en un sistema
hipermedia y en las características de los mismos
• Ofrecer reglas y consejos para construir sistemas hipermedia
• Analizar el proceso de desarrollo de sistemas hipermedia
• Mostrar un método de desarrollo para hipermedia
Introducción
La hipermedia pretende combinar las ventajas del hipertexto con las de la multime-
dia con el fin de dar lugar a sistemas útiles y fáciles de utilizar. El hipertexto orga-
niza la información de forma asociativa de manera que el usuario navega por con-
4 ♦ La interacción persona-ordenador
1 El concepto de hipermedia
La hipermedia es el resultado de la combinación de otras dos tecnologías: el hiper-
texto y la multimedia. Aunque todas ellas han sido utilizadas con bastante frecuen-
cia en distintos campos, tales como la educación, la escritura, el marketing, el co-
mercio o el entretenimiento, en muchas ocasiones no parece quedar clara la dife-
rencia entre unas y otras y, de hecho, frecuentemente se utilizan los términos hi-
permedia e hipertexto de forma poco rigurosa. Por ello, esta sección se inicia con
una definición de estos tres conceptos, tratando de poner de manifiesto sus dife-
rencias, que quedan ilustradas en la Figura 1
Pese a que todas las ventajas enumeradas en el apartado anterior hacen prever
que la hipermedia se puede considerar una solución más ventajosa que otros tipos
de sistemas informáticos en diversos campos y tipos de aplicaciones, esta tecnolo-
gía también tiene algunas desventajas. Analizando el tamaño y topología del espa-
cio de información así como el proceso de búsqueda en él, se ha comprobado que
comprender y utilizar las técnicas de recuperación de información de un hiperdo-
cumento puede suponer un gran esfuerzo para el usuario. Así, la desorientación y
los problemas de sobrecarga de conocimiento constituyen los dos inconvenientes
básicos en la utilización de este tipo de tecnología [CON87].
El nodo
Un nodo puede considerarse como una unidad de información en la que una serie
de contenidos de diversa índole se combinan para transmitir una idea o concepto.
El nodo es pues una unidad de visualización autocontenida pudiendo identificarse,
por ejemplo, con una página web o con cada uno de los marcos (frames) que la
componen.
Según la forma en que los nodos se visualicen en la pantalla se puede diferenciar
entre nodos basados en marcos o en ventanas [NIE90]. En el primer caso, ca-
da nodo tiene asignada un tamaño exacto y la información que contiene el nodo
debe adaptarse a él. Por otra parte, los nodos basados en ventanas ocupan todo el
espacio que necesiten para su presentación, por lo que en algunos casos tendrán
que hacer uso de barras de desplazamiento por la ventana, mecanismo que se
puede ver reforzado con otras facilidades como la posibilidad de tener un mapa que
indique la posición del usuario dentro del nodo o la de cambiar el factor de escala
de visualización [BEA90]. Como puede verse, el concepto de nodo basado en mar-
cos nada tiene que ver con los marcos de una página web aunque se emplee el
mismo término. De hecho, una página web es siempre un nodo basado en ventanas
puesto que el usuario casi siempre puede cambiar el tamaño del nodo y hacer que
aparezcan las barras de desplazamiento.
Aparte de decidir el tipo de nodo que se va a utilizar, para lo cual habrá que tener
en cuenta el objetivo del hiperdocumento y los recursos disponibles, existen otros
factores sobre los nodos que hay que considerar en cuenta al desarrollar un hiper-
documento, entre los que cabe destacar su tamaño, el tiempo de recuperación, la
legibilidad y la tangibilidad [RAD91].
Parece evidente que el tamaño de los nodos, entendido como la cantidad de
contenidos que incluyen, y el tiempo de recuperación son directamente propor-
cionales. Cuando los nodos son demasiado grandes el tiempo que se tarda en recu-
perarlos se incrementa, lo cual puede provocar la incertidumbre en el usuario, que
no sabe si el sistema está respondiendo a su petición o no, y, además, supone una
considerable pérdida de eficiencia. En el extremo opuesto, nodos muy pequeños
pueden dar lugar una fragmentación de la información excesiva que no sólo la hace
perder su sentido, sino que también provoca el aburrimiento del lector.
Tanto la legibilidad como la tangibilidad, o medida en que el sistema es percep-
tible y modificable a través de medios físicos, dependen del diseño que se haga de
la interfaz. De cara a potenciar la legibilidad del hiperdocumento, en este diseño,
realizado en función de los recursos técnicos disponibles, se debería tener en
cuenta tanto la forma de fragmentar y organizar la información como la calidad de
la presentación final. Así por ejemplo, es importante tener en cuenta que si bien no
existe ninguna restricción teórica en el número y diversidad de contenidos multi-
8 ♦ La interacción persona-ordenador
El contenido
Cada nodo puede incluir diferentes elementos de información o contenidos que
pueden ser de naturaleza muy diversa. Así, un mismo nodo puede incluir todos
aquellos textos, imágenes, sonidos, videos, animaciones, etc., que el autor consi-
dere necesarios para transmitir el concepto asociado a dicho nodo.
Los contenidos pueden embeberse como parte del nodo o bien almacenarse aparte
en la base de información y asociarse dinámicamente al nodo cuando éste se activa
[DIA97] [DIA01]. Esta última solución permite que el mismo contenido aparezca en
distintos nodos evitando inconsistencias que pueden producirse cuando un conteni-
do se copia varias veces en distintos nodos (ver la parte izquierda de la Figura 2).
Cuando los contenidos se almacenan de forma separada se mantiene una única
copia de los mismos en la base de información, que se asocia a cada uno de los
nodos en que el contenido debe aparecer (ver la parte derecha de la Figura 2). Esta
solución permite, además, que un mismo contenido pueda tener distintas caracte-
rísticas de presentación en distintos nodos. Por ejemplo, el mismo texto puede
presentarse con una tipografía mayor para ayudar a usuarios con deficiencias vi-
suales.
A la hora de ubicar los contenidos en un nodo habrá que tener en cuenta que si se
desea generar una presentación dinámica y, al mismotiempo, estética habrá que
establecer relaciones espaciales y temporales entre los contenidos que determinen
dónde o cuándo debe aparecer un contenido en función de dónde o cuándo aparece
otro. Por ejemplo, se puede desear que una presentación multimedia se inicie con
un vídeo que al acabar de paso a una introducción textual compaginada con una
serie de imágenes que ilustran el texto. Este tipo de presentación multimedia re-
quiere que se puedan definir alineamientos y sincronizaciones entre los contenidos
como, de hecho, puede hacerse con lenguajes como SMIL [W3C98] o modelos for-
males como Labyrinth [DIA01].
Tampoco hay que olvidar que los contenidos deben ser legibles. Así, por ejemplo, el
autor deberá tener en cuenta que el tipo y el tamaño de la letra, o la resolución de
las imágenes, deben dar lugar a nodos muy nítidos y poco densos, pues la resolu-
ción de la pantalla no es la misma que la de la página de papel, y la actitud del
lector ante el monitor es radicalmente distinta a la que adopta frente a los textos
tradicionales. Del mismo modo, todos aquellos contenidos que tienen una duración
explícita distinta de la del nodo, tales como animaciones, vídeos o sonidos, deberán
presentarse a una velocidad que permita al usuario asimilarlos.
Hipermedia y web ♦ 9
El enlace
Los enlaces son el elemento más importante y característico de un hipertexto. Un
enlace es una conexión entre dos nodos que proporciona una forma de seguir re-
ferencias entre conceptos relacionados. Al activar un enlace se puede dar lugar a
una gran variedad de resultados, como son: trasladarse a un nuevo tema; mostrar
una referencia, una anotación o una definición; presentar una ilustración o esque-
ma; ver un índice, etc. Los enlaces, indicados normalmente en la pantalla por me-
dio de palabras remarcadas, gráficos o iconos, deben ser fáciles de activar (v.g.,
apuntando con el ratón y seleccionando) y producir una rápida respuesta, ya que
en caso contrario el usuario tenderá a no utilizarlos, minimizando el valor del hi-
pertexto.
Atendiendo a diferentes criterios de clasificación existen diversos tipos de enlaces
[DIA96] que se comentan a continuación.
• Enlaces entre posiciones de nodos. El origen y el destino pueden consi-
derarse bien como nodos (enlaces entre nodos), o bien como puntos espe-
cíficos dentro de los nodos (enlaces entre posiciones). Los primeros expre-
san una relación semántica entre todo el contenido de un nodo y otro con-
cepto, y suelen representarse en el origen mediante un icono, de forma
que esta conexión global se localiza físicamente en una zona de la pantalla.
En los enlaces entre posiciones se conecta un elemento de información in-
cluido dentro de un nodo con otro contenido o nodo relacionado. En este
caso, se suele emplear el término ancla para designar el punto de engan-
che del enlace dentro del nodo. La forma de presentar este tipo de enlaces
en la pantalla depende de las implementaciones, siendo lo más usual re-
marcar de algún modo la zona afectada en el origen y situarse o resaltar el
punto de destino.
• Enlaces embebidos. Son aquellos en los que el origen y el destino del
enlace se definen en el mismo nodo, permitiendo el desplazamiento a tra-
vés de los contenidos del mismo. Estas conexiones resultan muy útiles en
el caso de las anotaciones incluidas en un mismo nodo, especialmente si
éste está basado en ventanas.
• Enlaces bidireccionales. Cuando los puntos entre los que se define un
enlace pueden actuar indistintamente como origen o destino se dice que el
enlace es bidireccional. Un enlace bidireccional es más fácil de mantener
que dos unidireccionales puesto que en el caso de que uno de los nodos
cambie de nombre, sólo hay que cambiar una referencia y no dos como se
puede ver en la Figura 3.
Herramientas de navegación
La navegación por un hipertexto no es una tarea por sí misma, sino un medio para
realizar una tarea (v.g., consultar un contenido), por lo que la carga cognitiva aso-
ciada al proceso de navegación debería ser la más baja posible. Sin embargo, suele
suceder que la navegación introduce una carga cognitiva nueva y no familiar. De
hecho, la gran cantidad de comandos que suele necesitarse para realizar la navega-
ción demuestra que en muchas ocasiones los usuarios de un hipertexto se sienten
confusos y perdidos en el espacio de información.
Diversos factores pueden producir la desorientación del usuario en el hiperespacio,
entre los que se incluyen la escritura confusa y mal organizada del contenido origi-
nal, la ineficiencia del sistema, y la mala organización de la información en la es-
tructura del hipertexto, es decir, en forma de nodos y enlaces. Todos estos proble-
mas dan lugar a la denominada pérdida en el hiperespacio, que, como ya se dijo,
se produce cuando un usuario llega a un punto en la estructura que no tiene senti-
do para él, y en el que no sabe cómo ir a un lugar que le sea familiar.
Debido a que la hipermedia es un concepto relativamente nuevo, no está claro có-
mo facilitar la comprensión a sus lectores. No obstante, existen una serie de he-
rramientas que se suelen utilizar como ayudas en la navegación, y que se describen
en las siguientes secciones.
Visitas guiadas
Una visita guiada es un camino lineal a través del espacio de información que pue-
de utilizarse, por ejemplo, para ayudar a los usuarios a familiarizarse con los conte-
nidos del hipertexto. Normalmente se ofrecen varias visitas guiadas, entre las que
el usuario puede elegir una [BAR93]. Una característica interesante de este meca-
nismo es que el usuario puede dejarla cuando quiera y continuar navegando por el
espacio del hipertexto; también puede retomarla en el punto en el que la interrum-
pió.
Mapas
El uso de mapas, basados en la metáfora del mapa turístico, constituye otra opción
para proporcionar orientación en el espacio de información. Los mapas proporcio-
nan una representación esquemática de la estructura del hipertexto, indicando los
principales conceptos incluidos en el espacio de información y las interrelaciones
existentes entre ellos. Se pueden presentar como tablas de contenidos bidimensio-
nales o tridimensionales o buscar representaciones más relacionadas con el con-
texto. Así por ejemplo, algunos museos interactivos, como por ejemplo la versión
web del museo del Centro Georges Pompidou (http://www.cnac-
gp.fr/pompidou/home. nsf/docs/fhome), ofrecen la planta del propio museo como
mapa por el que el usuario navegará para acceder a la colección.
12 ♦ La interacción persona-ordenador
Puesto que en la mayor parte de los casos, el espacio de información es tan grande
que no es posible mostrar todos los nodos y enlaces en un único mapa sin que se
produzca el problema del spaghetti visual, es preciso representar la estructura del
hipertexto en distintos niveles. Una solución bastante frecuente es emplear diagra-
mas globales que cubran todos los temas tratados en el espacio de información, y
diagramas locales que abarcan, más en detalle, sólo uno de los temas. La adopción
de diagramas locales, especialmente si están organizados en varios niveles, puede
ser contraproducente, puesto que, aunque proporcionan información detallada so-
bre un concepto concreto, pierden el contexto global. Una alternativa a los diagra-
mas globales y locales es el empleo de vistas de ojo de pez (fish–eye views), que
en un único gráfico muestran todo el espacio de información en distintos niveles de
detalle, proporcionando más información sobre la posición actual del usuario y dis-
minuyendo los detalles gradualmente según están más alejadas las partes.
En los mapas se pueden incluir huellas (footprints), que indican tanto la posición
actual del usuario como las previas. Otra facilidad que deberían ofrecer los mapas
son las denominadas marcas (landmarks), con las que se señalan nodos especial-
mente interesantes.
Recuperación de la información
Es importante proporcionar mecanismos de búsqueda que complementen la nave-
gación en el espacio de información puesto que en algunos casos el usuario no de-
sea navegar por el hiperdocumento hasta encontrar algo sino acceder a ello direc-
tamente.
Una búsqueda consiste en los siguientes pasos: el usuario introduce uno o más
términos o patrones de búsqueda; el sistema busca los términos, empleando nor-
malmente índices; el sistema responde mostrando el resultado de la búsqueda. Se
pueden emplear diferentes técnicas para mostrar los resultados. La más simple
devuelve al usuario la primera ocurrencia del término, pero su principal inconve-
niente es que el usuario no puede saber en qué otras partes y cuántas veces apa-
Hipermedia y web ♦ 13
rece. Como alternativa, se puede mostrar una lista de sus apariciones a partir de la
cual el usuario pueda elegir la que prefiera aunque dicha lista no proporciona mu-
cha información sobre qué nodo es el más relacionado con el patrón buscado aun-
que se ordene de acuerdo a algún criterio. También se pueden integrar los resulta-
dos de la búsqueda en el mapa del hiperdocumento, resaltando los nodos en los
que aparece dicho término.
Metáforas
Como última herramienta para facilitar la navegación, se puede mencionar el em-
pleo de metáforas [HAM93]. El principio básico consiste en utilizar conceptos y mo-
delos del mundo real, con los cuales los usuarios están familiarizados, para repre-
sentar información electrónica haciendo que el hiperdocumento sea más compren-
sible.
La creación de un hipertexto
Es importante tener en cuenta que el papel de un autor de hiperdocumentos es
bastante diferente que el de un escritor tradicional. El autor del hipertexto pierde
parcialmente su autoridad para determinar cómo debe leerse su obra y qué secuen-
cia debe seguirse hasta alcanzar un determinado tema, ya que estos sistemas son
mucho más flexibles que el papel y sus lectores son libres de explorar la informa-
ción como deseen. En consecuencia, los autores hipertextuales deben ofrecer otras
oportunidades a sus lectores aparte de un orden estricto.
Las principales acciones que un autor debe llevar a cabo para crear un documento
son las siguientes:
• preparación del material multimedia que formará parte del hiperdocumen-
to, ya sea escribiendo o importando texto, dibujando o importando imáge-
nes, o bien capturando y editando sonido y vídeo;
14 ♦ La interacción persona-ordenador
que cuenta con un pequeño prototipo, con lo que su utilización se ve muy restringi-
da. En este contexto se presenta una metodología para el desarrollo de aplicaciones
hipermedia, llamada Ariadne y su herramienta CASE, denominada AriadneTool.
para que se puedan crear prototipos del sistema; e identificar tipos y grupos de
usuarios a partir del diagrama de usuarios para asignarles usuarios específicos.
Evaluación
Debido a la naturaleza interactiva de la hipermedia es necesario el desarrollo de
prototipos durante las fases anteriores para poder realizar una evaluación que nos
permita obtener información sobre la potencial usabilidad del sistema y mejorar las
características y funcionalidades de su interfaz. Esta fase permite llevar a cabo un
diseño iterativo.
Referencias
[BAR93] BARKER P. Exploring Hypermedia. Kogan Page, Londres, 1993
[BEA90] BEARD D. V. y WALKER J. Q. «Navigational techniques to improve the
display of large two–dimensional spaces» en Behaviour & Information
Technology, Núm. 9 (6), Pág. 451-466, 1990
[BRA92] BRA P. DE, HOUBEN G. y KORNATZKY Y. «An Extensible Data Model for Hy-
perdocuments» en Actas de ACM Conference on Hypertext (LUCARELLA
D., NANARD J., NANARD M. y PAOLINI, P., eds.), ECHT'92, Milán, Italia.
ACM Press, New York, Pág. 222-231, Noviembre–Diciembre 1992
[CON87] CONKLIN J. «Hypertext: an Introduction and Survey» en IEEE Computer,
Pág. 17-41, Septiembre 1987
[DIA96] DÍAZ P., CATENAZZI N. y AEDO I. De la multimedia a la hipermedia. Ed.
Rama, Madrid, 1996
[DIA97] DÍAZ P., AEDO I. y PANETSOS F. «Labyrinth, an abstract model for hyper-
media applications. Description of its static components» en Informa-
tion Systems, Núm. 22 (8), Pág. 447-464, 1997
[DIA99] DÍAZ P., AEDO I. y PANETSOS F. «A methodological framework for the
conceptual design of hypermedia systems» en Actas de the Fifth Con-
ference on "Hypertexts and Hypermedia: Products, Tools and Meth-
ods", H2PTM’99, París, Pág. 213-228, Septiembre 1999
[DIA01] DÍAZ P., AEDO I. y PANETSOS F. «Modeling the dynamic behavior of hy-
permedia applications» en IEEE Transactions on Software Engineering,
Núm. 27 (6), Pág. 550-572, 2001.
[GRØ94] GRØNBAEK K. y TRIGG R. H. «Design Issues for a Dexter–Based Hyper-
media System» en Communications of the ACM, Núm. 37 (2), Pág. 40-
49, Febrero 1994
[HAL88] HALASZ F. G. «Reflection on NoteCards: Seven Issues for The Next Gen-
eration of Hypermedia Systems» en Communications of the ACM, Núm.
31 (7), Pág. 836-852, Julio 1988
[HAM93] HAMMOND N. «Learning with Hypertext: Problems, Principles and Pros-
pects» en Hypertext a psychological perspective (MCKNIGHT C., DILLON
A. y RICHARDSON J. eds.). Ellis Horwood, Nueva York, Pág. 51-70, 1993
[HAR93] HARDMAN L., BULTERMAN D. y VAN ROSSUM G. «The Amsterdam Hyperme-
dia Model: Adding Time and Context to the Dexter Model» en Commu-
nications of the ACM, Núm. 37 (2), Pág. 50-62, Febrero 1993
[HAR98] HARDMAN L. Modelling and Authoring Hypermedia Documents. Tesis
Doctoral. Universidad de Amsterdam, 1998
[LAN90] LANGE D. B. «A Formal Model of Hypertext» en Actas de NIST Hypertext
Standardization Workshop (MOLINE J., BENINGNI D. y BARONAS J. eds.),
18 ♦ La interacción persona-ordenador
Bibliografía
AEDO I. y DÍAZ P. «Applying software engineering methods for hypermedia systems»
en Actas de ITICSE, Canterbury, Reino Unido, Pág. 5-8, Junio 2001.
BARKER P. Exploring Hypermedia. Kogan Page. Londres, 1993
BEARD D. V. y WALKER J. Q. «Navigational techniques to improve the display of large
two–dimensional spaces» en Behaviour & Information Technology, Núm. 9 (6), Pág.
451-466, 1990
BRA P. DE, HOUBEN G. y KORNATZKY Y. «An Extensible Data Model for Hyperdocu-
ments» en Actas de ACM Conference on Hypertext (LUCARELLA D., NANARD J., NANARD
M. y PAOLINI, P., eds.) , ECHT'92, Milán, Italia. ACM Press, Nueva York, Pág. 222-
231, Noviembre–Diciembre 1992
BROWN H. «Standards for Structured Documents» en The Complete Journal, Núm.
32 (6), Pág. 505-514, 1989
BRYAN M. SGML: an author's guide to the Standard Generalized Markup Language.
Addison Wesley, Londres, 1988
CONKLIN J. «Hypertext: an Introduction and Survey» en IEEE Computer, Pág. 17-41,
Septiembre 1987
DEROSE S. J. y DURAND D. G. Making Hypermedia Work: HyTime. Kluwer Academic
Publishers, Boston, 1994
DÍAZ P., AEDO I. y PANETSOS F. «A methodological framework for the conceptual de-
sign of hypermedia systems» en Actas de the Fifth Conference on "Hypertexts and
Hypermedia: Products, Tools and Methods", H2PTM’99, París, Pág. 213-228, Sep-
tiembre 1999
DÍAZ P., AEDO I. y PANETSOS F. «Labyrinth, an abstract model for hypermedia appli-
cations. Description of its static components» en Information Systems, Núm. 22
(8), Pág. 447-464, 1997
DÍAZ P., AEDO I. y PANETSOS F. «Modeling the dynamic behavior of hypermedia appli-
cations» en IEEE Transactions on Software Engineering, Núm. 27(6), Pág. 550-572,
2001
DÍAZ P., CATENAZZI N. y AEDO I. De la multimedia a la hipermedia. Ed. Rama, Madrid,
1996
GARZOTTO F., PAOLINI P. y SCHWABE D. «HDM – A Model–Based Approach to Hypertext
Application Design» en ACM Transactions on Information Systems, Núm. 11 (1),
Pág. 1-26, Enero 1993
GRØNBAEK K. y TRIGG R. H. «Design Issues for a Dexter–Based Hypermedia System»
Communications of the ACM, Núm. 37 (2), Pág. 40-49, Febrero 1994
Hipermedia y web ♦ 19