INSTITUTO TECNOLÓGICO
MARCELO QUIROGA SANTA CRUZ
CARRERA DE SISTEMAS INFORMÁTICOS
INFORME DE INVESTIGACIÓN
METODOLOGÍA OOHDM
ESTUDIANTE : Quispe Gonzales Alex Antonio
ESTUDIANTE : Paredes Morales Ruben
DOCENTE : Lic. Lourdes Beltrán Colque
LA PAZ – BOLIVIA
2025
1
Introducción
El modelo OOHDM (Object-Oriented Hypermedia Design Method) es una de las
metodologías más utilizadas en el diseño de aplicaciones web e hipermedia. Propuesto por
Daniel Schwabe, Gustavo Rossi y S. D. J. Barbosa, OOHDM es una extensión orientada a
objetos del HDM (Hypermedia Design Model), y su principal fortaleza radica en la
organización por etapas que permiten separar claramente el contenido, la navegación, la
interfaz y la implementación del sistema.
OOHDM ha sido aplicado en una gran variedad de proyectos: galerías interactivas,
presentaciones multimedia, sistemas informativos y sitios web complejos, mostrando su
versatilidad y potencia metodológica.
Fundamentos del modelo OOHDM. - Se basa en la orientación a objetos.
● Utiliza diagramas UML como lenguaje estandarizado.
● Se divide en cuatro fases principales:
● Diseño Conceptual
● Diseño Navegacional
● Diseño de Interfaz Abstracta
● Implementación
● Cada fase introduce nuevos elementos (clases, nodos, enlaces, contextos, vistas).
● Se permite especialización y adaptación del modelo a cada proyecto.
Fases del Modelo OOHDM
Diseño Conceptual
● Representa el modelo del dominio: clases, atributos y relaciones.
● Puede usarse un enfoque UML o entidad-relación.
● Es la base para las fases posteriores.
Diseño Navegacional
● Define la estructura de navegación para el usuario.
Componentes clave:
● Nodos: vistas lógicas sobre clases.
2
● Enlaces: caminos entre nodos, inducidos de relaciones conceptuales.
● Contextos navegacionales: agrupaciones de nodos (menús, listados, guías).
Se pueden adaptar nodos según el contexto (similar a “perspectivas”).
Diseño de Interfaz Abstracta (Fase que desarrollo)
● Especifica cómo deben mostrarse los elementos navegacionales al usuario.
● Define la apariencia, interacción y comportamiento sin depender aún del código.
● Usa los ADV (Abstract Data Views):
○ Son objetos abstractos que representan entradas, salidas, botones, tablas,
formularios, etc.
○ Permiten validar la usabilidad antes de la implementación.
● Ventaja principal: separación de diseño visual y lógica de navegación.
Implementación
● Traduce los modelos anteriores en una aplicación funcional.
● El diseñador asigna objetos reales (HTML, PHP, JS, CSS, etc.) a los elementos
abstractos.
● Se definen las tecnologías concretas (frameworks, bases de datos, servidores).
● Requiere programación, conexión a base de datos, control de sesiones, y pruebas.
Fase IV: Diseño de Interfaz Abstracta
Objetivo de la Fase
La Fase IV tiene como objetivo definir cómo los usuarios visualizarán e interactuarán con
la aplicación. A diferencia de la fase navegacional, que se enfoca en los recorridos posibles
del usuario, aquí se especifican los elementos visuales e interactivos que aparecerán en
pantalla, sin implementar aún el código definitivo.
3
Este diseño se considera "abstracto" porque no está ligado a una tecnología o framework en
particular. Sirve como puente entre el modelo navegacional y la implementación técnica,
permitiendo validar la usabilidad, accesibilidad y funcionalidad visual antes de programar.
¿Qué se define en esta fase?
En esta fase se identifican y diseñan los componentes visuales de la interfaz de usuario, tales
como:
● Formularios para el ingreso o edición de información.
● Botones de acción (ej. Guardar, Eliminar, Editar, Cancelar).
● Listas desplegables, casillas de verificación y radios.
● Tablas o estructuras de datos visuales para mostrar registros.
● Mensajes de error, alertas y confirmaciones que faciliten la experiencia del usuario.
Además, se asocian las acciones del usuario (clics, entradas de datos, navegación, etc.) con
respuestas del sistema, para garantizar una interacción lógica y eficiente.
Elementos clave que se modelan
● ADV (Abstract Data Views): objetos abstractos que representan los elementos
visuales y sus comportamientos esperados. Por ejemplo:
○ Un ADV de "Usuario" puede tener campos como nombre, correo y contraseña,
junto con botones de "Guardar" o "Cancelar".
● Controles de navegación: menús, submenús, paginadores y enlaces lógicos.
● Indicadores de estado: barras de progreso, iconos de validación, mensajes de carga.
Herramientas utilizadas para el diseño abstracto
El diseño de la interfaz abstracta puede realizarse con diversas herramientas, desde técnicas
manuales hasta plataformas digitales:
4
● Bocetos a mano: útil para prototipos rápidos o ideas preliminares.
Herramientas gráficas profesionales: como Figma, Balsamiq, Lucidchart o Adobe
XD, que permiten crear maquetas navegables (mockups o wireframes).
● Prototipado navegable: simulaciones interactivas de las pantallas, utilizadas para
pruebas con usuarios antes de la codificación.
Estas herramientas permiten que el cliente o los usuarios finales visualicen el sistema antes
de su desarrollo, lo cual reduce errores de interpretación y mejora la toma de decisiones.
Fase V: Implementación
Objetivo de la Fase
La fase de implementación es la etapa final del proceso OOHDM. Su objetivo es transformar
todos los modelos diseñados previamente (conceptual, navegacional e interfaz abstracta)
en una aplicación web funcional y operativa.
Esta fase implica la programación real del sistema, utilizando lenguajes, frameworks y
tecnologías específicas. Aquí se materializa todo lo planificado: se desarrollan las interfaces
reales, se aplica la lógica del negocio, se conectan las bases de datos, y se realizan pruebas
para asegurar que todo funcione correctamente.
Actividades principales de la implementación
1. Selección de tecnologías
○ Frontend: diseño visual (HTML, CSS, JS, Bootstrap, React, Vue).
○ Backend: lógica y procesamiento de datos (PHP, Laravel, Python/Django, Java
Spring, Node.js).
○ Base de datos: almacenamiento (MySQL, PostgreSQL, MongoDB).
○ Control de versiones: Git, GitHub o GitLab para trabajo colaborativo y control
de cambios.
2. Codificación de componentes:
○ Interfaces gráficas de usuario, replicando los diseños abstractos.
5
○ Funcionalidades CRUD (Crear, Leer, Actualizar, Eliminar).
○ Validaciones de entrada.
○ Autenticación, autorización y gestión de sesiones.
○ Navegación real entre pantallas (routing).
3. Conexión con bases de datos:
○ Crear estructuras de tablas, relaciones y consultas.
○ Gestionar conexiones seguras y eficientes.
4. Pruebas y ajustes:
○ Pruebas funcionales, de usabilidad y rendimiento.
○ Depuración de errores.
○ Optimización del código y de la experiencia de usuario.
5. Despliegue y mantenimiento:
○ Subir el sistema a un servidor web.
○ Hacer ajustes de seguridad, escalabilidad y respaldo.
Ventajas y Desventajas de OOHDM
Ventajas
1. Modularidad clara. - cada fase tiene su propósito y puede desarrollarse de forma
independiente.
2. Uso de estándares UML. - mejora la documentación y la comunicación entre equipos.
3. Separación de preocupaciones. - contenido, navegación, interfaz y lógica están
claramente diferenciados.
4. Enfoque visual. - permite validar ideas con usuarios antes de codificar.
5. Reutilización. - los modelos orientados a objetos facilitan el uso de componentes
comunes en diferentes módulos.
Desventajas
1. Falta de herramientas CASE específicas. - no hay software dedicado 100% a
OOHDM, lo que obliga a adaptar otras herramientas.
6
2. Poca gestión de lógica interna del sistema. - no aborda directamente el modelado
detallado de funciones del backend.
3. No maneja actores múltiples de forma explícita. - requiere adaptaciones cuando hay
roles de usuario complejos.
4. Puede resultar rígida o pesada para proyectos pequeños o que usan metodologías ágiles
como SCRUM.
Conclusión
La metodología OOHDM ofrece un enfoque sólido y estructurado para el diseño y desarrollo
de aplicaciones web, particularmente útil en proyectos de mediana a alta complejidad. Su
división por fases permite que los equipos de desarrollo trabajen con orden, claridad y una
visión centrada en el usuario final.
Las fases IV y V, que desarrollé en profundidad, representan la transición del diseño a la
realidad. La Fase IV permite visualizar la interacción del usuario de forma anticipada,
mientras que la Fase V convierte esos diseños en un sistema real y funcional. Juntas, aseguran
que la aplicación sea tanto técnicamente coherente como visualmente intuitiva.
OOHDM, bien aplicada, no solo produce software funcional, sino que mejora la calidad, la
usabilidad y el mantenimiento de los sistemas web en el largo plazo.
