UNIVERSIDAD NACIONAL DEL ALTIPLANO PUNO

Facultad de Ingeniera Estadstica e Informtica

MTODO DE DISEO DE
HIPERMEDIA ORIENTADO A
OBJETOS
Presentado por:
Karol Pamela Ortega Maquera
Bernarda Quispe Alania
Csar Reynaldo Mamani Turpo
Guido Torres

PUNO PER
2015

Mtodo de diseo de hipermedia orientado a objetos

OOHDM - Mtodo de Diseo de Hipermedia Orientado a

Objetos

Contenido
1.

Historia: ......................................................................................................................... 2

2.

Definicin: ..................................................................................................................... 2

3.

Fases de desarrollo:....................................................................................................... 3

3.1

Obtencin de Requerimientos: ................................................................................. 3

3.2 Diseo conceptual: .......................................................................................................... 3

3.3. Diseo navegacional:...................................................................................................... 4
3.4. Diseo de interfaz abstracta: ......................................................................................... 4
3.5. Ejecucin o Implementacin: ......................................................................................... 4
4.

Ventajas:........................................................................................................................ 4

5.

Desventajas: .................................................................................................................. 4

6.

SymWeb: Modelado de una Aplicacin de Simulacin Web mediante OOHDM: ........5

7.

Bibliografa: ................................................................................................................... 8

Mtodo de diseo de hipermedia orientado a objetos

Object Oriented Hypermedia Design Method

(OOHDM)
1. Historia:
Object Oriented Hypermedia Design Method (Mtodo de Diseo de Hipermedia Orientado
a Objetos) para diseo de aplicaciones hipermedia y para la web, fue diseado por Daniel
Schwabe y Gustavo Rossi. Originalmente surgi como una extensin de del mtodo HDM con
orientacin a objetos, que se est convirtiendo en una de las metodologas ms utilizadas. Fue
utilizada para disear diferentes tipos de aplicaciones hipermedia como galeras interactivas,
presentaciones multimedia, CD-ROM promocionales, enciclopedias, museos virtuales y sobre
todo numerosos sitios web.

2. Definicin:
OOHDM es un mtodo para el desarrollo de aplicaciones Web. Fue uno de los primeros
mtodos para separar de las dificultades que definan diferentes modelos que se separaban en
cinco etapas que son las siguientes fases del diseo:

Obtencin de Requerimientos
Diseo conceptual
Diseo navegacional
Diseo de interfaz abstracta
Ejecucin o implementacin

Mtodo de diseo de hipermedia orientado a objetos

En OOHDM las aplicaciones Web se construyen en las cinco etapas mencionadas, que
permiten un modelo de proceso incremental o basado en prototipos. Cada etapa se centra en
un diseo en particular y se construye un modelo orientado a objeto para cada etapa. Conceptos
como clasificacin, agregacin y generalizacin se utilizan frecuentemente por los procesos de
manera proveer un mayor poder de abstraccin y reutilizacin de componentes. Los principios
utilizados en OOHDM tambin pueden ser aplicados en otra versin del modelo conocido como
SHDM (Schawabe, 2004) en el cual el modelo de datos utilizado se encuentra basado en RDF y
RDFS (Brickley y Guha, 2004). La diferencia principal con OOHDM es que SHDM utiliza tecnologa
basada en Web semntica para representar de sus modelos. A continuacin, se presentan las
cinco actividades propuestas por dicho modelo.

3. Fases de desarrollo:

3.1 Obtencin de Requerimientos:

La herramienta en la cual se fundamenta esta fase son los diagramas de casos de usos,
los cuales son diseados por escenarios con la finalidad de obtener de manera clara los
requerimientos y acciones del sistema.
3.2 Diseo conceptual:
La finalidad principal durante esta fase es capturar el dominio semntico de la aplicacin
teniendo en cuenta el papel de los usuarios y las tareas que desarrollan. Se construye
un modelo del dominio de la aplicacin, a travs de las tcnicas de modelado orientado
a objetos, se puede partir de un modelo E/R. El resultado de esta fase es un modelo de
clases relacionadas que se divide en subsistemas.

Productos: Diagrama de Clases, Divisin en subsistemas y relaciones.

Herramientas: Tcnicas de modelado O.O, patrones de diseo.
Mecanismos: Clasificacin, agregacin, generalizacin y especializacin.
Objetivo de diseo: Modelo semntico de la aplicacin

Mtodo de diseo de hipermedia orientado a objetos

3.3. Diseo navegacional:

La estructura de navegacin de una aplicacin hipermedia est definida por un esquema
de clases de navegacin especfica, que refleja una posible vista elegida. Para construir
la estructura navegacional se debe tener en cuenta:

Nodos que sern navegables, establecer los atributos que poseen y sus
relaciones.
Contextos en que el usuario navegar para organizar el espacio
navegacional.
Vistas de los objetos navegacionales
Estructuras que permitirn acceder a los nodos, por ejemplo: mens, ndices,
guas de ruta, entre otros.

3.4. Diseo de interfaz abstracta:

En esta etapa se define la forma en la que sern percibidos los objetos a travs de la
interfaz de usuario y tambin la apariencia que tendrn. Esto consiste en definir:

Qu objetos de interfaz va a percibir el usuario

El camino en el cul aparecern los diferentes objetos de navegacin
Qu objeto de interfaz actuarn en la navegacin
La forma de sincronizacin de los objetos multimedia y el interfaz de
transformaciones.

3.5. Ejecucin o Implementacin:

Una vez cumplidas las 4 fases anteriores solo queda llevar los objetos a un lenguaje
concreto de programacin. A partir de los modelos diseados, se deben escoger las
correspondencias con los objetos concretos de la plataforma de implementacin. Es
una etapa totalmente dependiente de la plataforma de implementacin escogida.

4. Ventajas:
Separacin clara entre lo conceptual, lo navegacional y lo visual. Esta
independencia hace que el mantenimiento de la aplicacin sea mucho ms
sencillo.
Hace un estudio profundo de los aspectos de interfaz, esencial no solo en las
aplicaciones multimedia, sino que es un punto crtico en cualquiera de los
sistemas que se desarrollan actualmente.
Hace uso tambin de la orientacin a objetos y de un diagrama tan
estandarizado como el de clases, para representar el aspecto de la navegacin
a travs de las clases navegacionales.

5. Desventajas:
o
o

Ha dejado fuera de su mbito un aspecto esencial que es el tratamiento de la

funcionalidad del sistema.
No ofrece ningn mecanismo para trabajar con mltiples actores.

Mtodo de diseo de hipermedia orientado a objetos

6. SymWeb: Modelado de una Aplicacin de Simulacin Web mediante

OOHDM:
SymWeb est enfocado a la simulacin de modelos matemticos veterinarios por parte
de personas interesadas en el tema, se definieron los roles dependiendo de las
caractersticas particulares que puede poseer un usuario. El listado de roles (omitiendo
tareas por cuestin de espacio) se presenta en el siguiente cuadro:

El rol bsico es el Usuario No Registrado. Este tipo de actor puede cambiar de rol dependiendo
del evento denominado Registro de Usuario, en donde este actor pasa ahora a ser parte
de otro grupo (Usuario Registrado). Por otra parte, algunos de estos usuarios registrados tienen
la capacidad de poder ejecutar otro rol de manera simultanea: Usuario Publicador. Existe
el actor de la aplicacin que le indica a un Usuario Registrado cuando puede desempear
el rol alterno, ste es el Administrador, quien al fin y al cabo es un actor multifactico,
ya que puede desempear todos los roles dentro de la aplicacin.
Segn el anlisis realizado en los requerimientos, se obtuvieron 10 especificaciones
de escenarios que se consideraron bsicas para el modelado de la aplicacin, las cuales
van desde navegar SymWeb hasta salirse de SymWeb, entre otros. En consecuencia, se
realizaron 12 CU, los cuales se enlistan a continuacin: Registro de Usuario, Inicio de
Sesin, Actualizacin de Datos del Usuario, Simulacin de Modelos Matemticos,
Graficacin de Resultados, Publicacin de Modelos Matemticos, Bsqueda Interna General,
Bsqueda Interna Avanzada, Dar de baja a un Usuario, Dar de baja a un Modelo, Darse de baja
como Usuario y Salirse de SymWeb.
Para el desarrollo de SymWeb se enriqueci el significado de las elipses que componen
los UID para sealar el lugar (fsico o abstracto) que se ve afectado por el procesamiento de
informacin. Tambin se adaptaron stos con etiquetas aadidas a las elipses para facilitar
su lectura. En la Figura 1 se presenta el UID para el Registro de Usuario. Los UID en SymWeb se
realizaron en el orden determinado por los CU.

Mtodo de diseo de hipermedia orientado a objetos

Para abstraer las clases involucradas con SymWeb hay que tener en cuenta que sta es una
aplicacin que consiste en simular modelos matemticos que generen resultados
grficos por usuarios que probablemente tendrn la capacidad de publicar tales modelos bajo
el control de un administrador, quin por defecto publica los modelos. El enunciado
anterior encierra los puntos sealados en los escenarios realizados previamente. De esta
forma se obtuvieron las clases preliminares: Modelos Matemticos, Grficas, Usuarios y
Administrador. Como resultado de un diseo detallado, se abstrajeron 17 clases
(presentadas sintticamente en la Figura 2) que definen 11 enuncia dos que describen
SymWeb de manera conceptual. La definicin de los nodos en SymWeb se bas en realizar
preguntas concretas sobre los eventos y acciones asociados a la clase conceptual. Como
resultado se obtuvo 8 tipos de nodos diferentes. Como puede observarse en la Figura
3 correspondiente al nodo Administrador, el nodo admin es una instancia de la clase Admin
que se reconoce dentro de la aplicacin con la variable admin. Este nodo hereda los
atributos (e.g. login) y mtodos (e.g. Darse_de_baja()) de la clase Usuario. Diseando de
manera similar los dems nodos, se establecen 4 esquemas de clases navegacionales para
SymWeb, donde cada una est relaciona con el usuario actual de la aplicacin.

En el caso de SymWeb se concluy el diseo navegacional con tan solo un esquema de

contexto navegacional. Esto se debe a que modelamos la aplicacin SymWeb de manera
particular, por lo que no llegamos a un esquema conceptual adaptable a todas las
aplicaciones de hipermedia que hagan simulacin. Para poder realizar este esquema fue
necesario instanciar los contextos genricos en contextos particulares dentro de los nodos.
En el esquema de contexto navegacional se pueden observar ciertos detalles.
Primeramente, se tiene un ndice general denominado Opciones de SymWeb que procede
segn el tipo de usuario que navegue (i.e. registrado o no registrado). Los usuarios no
registrados solo acceden a los nodos generales del modelo y de grfica. Si un usuario es
6

Mtodo de diseo de hipermedia orientado a objetos

registrado, entonces accede al nodo de login donde dispara el mtodo inicio_de_sesion() para
despus acceder al Men General que est representado por un ndice (i.e. una lista de
enlaces a las opciones). Adjunto a este ndice estn el de Men Publicacin y Men
Administracin, los cuales estn etiquetados con un ovalo negro a su izquierda; este ovalo
indica que son ndices de acceso restringido y que en nuestro caso solo estn disponibles para
un usuario con permiso de publicar y para un usuario que tenga adems permiso de
administrador, respectivamente. Se observa tambin que todos los usuarios pueden acceder a
un ndice de Bsqueda, el cual devuelve informacin tanto de modelos encontrados, as
como de archivos relacionados a stos, almacenados en el servidor.
Durante el proceso de AID, se definieron varios ADV, los cuales indicaban que
componentes de informacin seran utilizados en secciones particulares de la navegacin.
Con respecto a la implementacin, se defini que SymWeb fuera una aplicacin basada en
pginas web dinmicas que interactan entre ellas. Estas pginas fueron desarrolladas con
la tecnologa de Pginas de Servidor Activas (ASP) de Microsoft, incluyndose tambin
JavaScript para analizar rutinas de validacin y otras funciones en el lado del cliente. La decisin
de utilizar ASP se bas en la tecnologa disponible al momento de iniciar el proyecto. Sin
embargo, se tiene contemplado realizar futuros trabajos que permitan comparar la tecnologa
empleada con otras existentes. El acceso por parte de los usuarios se realiza a travs de
sesiones. La entrada de toda la informacin se hace a travs de elementos de formulario, la
cual es procesada siempre del lado del servidor.
El proceso de publicacin de un modelo se realiza a travs del pre procesamiento de
un archivo de texto que contiene ecuaciones diferenciales generadas a partir de un
software de simulacin para PC. Este proceso se auxilia con un componente para cargar
archivos en el servidor. Cuando se realiza la simulacin de un modelo, la tabulacin de
resultados se establece en un archivo XML que es pasado como parmetro a un componente de
graficacin. Se cuida que ninguna grfica se presentada hasta que algn modelo se simule. El
manejo de los datos del lado del servidor se realiza utilizando tres tablas: Una para los
usuarios, otra para los modelos y una tercera para archivos que contengan
informacin sobre los modelos.
El sitio est compuesto por una raz denominada SymWeb y que ser el elemento final de
la cadena correspondiente al URL. En esta carpeta se encuentran todas las pginas a las
que accede el usuario. En adicin, se encuentran otras carpetas de propsito especfico
(e.g. carpeta de modelos). Vista (sintetizada) de Datos Abstracto correspondiente a la
graficacin de resultados de un usuario registrado:

Mtodo de diseo de hipermedia orientado a objetos

Se conceptualiza la GUI tomando en cuenta los cinco atributos de definicin de la usabilidad

segn Nielsen. Se utiliz un smil de carpetas. Cuando fue necesario, se present al usuario
retroalimentacin o mensajes de error procurando ser siempre claros. Se consider una GUI
en tonalidades verdosas debido al perfil del usuario potencial y se emple tipografa fcil de leer
en monitor con el fin de incrementar la satisfaccin subjetiva que marca la usabilidad web [9].
Incluso se emple en el diseo de interfaz los principios de la psicologa Gestalt.
Portal de acceso Interfaz Grfica de Usuario de SymWeb:

7. Bibliografa:

Anay Carrillo Ramos (2009), Enseanza de la metodologa rup de ingeniera del

software
[Internet].
Disponible
en:
http://www.eumed.net/librosgratis/2009c/587/Metodologias%20y%20Tecnologias%20Actuales%20para%2
0la%20construccion%20de%20Sistemas%20Multimedia.htm
Aime Ros (2015), OOHDM (Modelo de Diseo de Hipermedia Orientado a
Objetos [Internet]. Disponible en: https://prezi.com/awcjzx3xucxq/oohdmmodelo-de-diseno-de-hipermedia-orientado-a-objetos-/
OOHDM(2014)[Internet]. Disponible en: https://es.wikipedia.org/wiki/OOHDM
Omar Sosa-Tzec, Vctor Menndez-Domnguez, Luis Vargas-Villamil (2014),
SymWeb: Modelado de una Aplicacin de Simulacin Web mediante OOHDM
[Internet]. Disponible en: https://www.researchgate.net/publication/2
60782194_SymWeb_Modelado_de_una_Aplicacion_de_Simulacion_Web_mdi
ante_OOHDM