UNIVERSIDAD DE MARGARITA

ALMA MATER DEL CARIBE

DECANATO DE INGENIERIA DE SISTEMAS
SEMINARIO METODOLÓGICO DE PASANTÍA.

METODOLOGÍA PARA EL DISEÑO DE SITIOS WEB

(WSDM)

AUTORES:
Fermín, José
Surumay, Juan
Boadas, César.

El Valle del Espíritu Santo, 31 de mayo del 2017.

 ÍNDICE

INTRODUCCIÓN…………………………………………………………………………3

WSDM (WEB SITE DESIGN METHOD)……………………………………………….4

ESPECIFICACIÓN DE LA MISIÓN…………………………………………………….5

MODELADO EN BASE A LA AUDIENCIA……………………………………………5

DISEÑO CONCEPTUAL…………………………………………………………………6

MODELADO DE INFORMACIÓN Y TAREAS………………………………….7

DISEÑO NAVEGACIONAL……………………………………………………….7

DISEÑO DE IMPLEMENTACIÓN……………………………………………………….9

DISEÑO DE LA ESTRUCTURA DEL SITIO………………………………….10

DISEÑO DE PRESENTACIÓN…………………………………………………11

DISEÑO LÓGICO DE DATOS………………………………………………….13

IMPLEMENTACIÓN……………………………………………………………………..15

CONCLUSIONES………………………………………………………………………..16

BIBLIOGRAFÍA………………………………………………………………………….17
 INTRODUCCIÓN

WSDM (Web Site Design Method o Web Semantics Design Method) es una
Metodología de Diseño de Sitios o Semánticas Web desarrollada y propuesta por
Olga De Troyer y Kees Leuneen en el año 1998. Ellos formaban parte del grupo de
investigación “Web & Information System Engineering (WISE)”, un grupo del
departamento de Ciencias de la computación de la Universidad de Bruselas. Esta
metodología tiene como característica principal el acercamiento a los usuarios
(audiencia o público) y la consideración de los mismos durante todo el período de
desarrollo; esto significa que se orienta a la creación de sitios Web basados en los
múltiples requerimientos de los usuarios.

3
 WSDM (Web Site Design Method)

Es un método de diseño o desarrollo basado en la audiencia de aplicaciones

Web. Consta de un diseño de cinco fases, tomando como partida una elicitación
explícita de los usuarios, y terminando con la implementación real, es decir,
generación. WSDM es una metodología, es decir, a diferencia de otros modelos, no
solo proporciona series de primitivas que permiten a un desarrollador web construir
modelos que describan la aplicación Web desde diferentes perspectivas y a distintos
niveles de abstracción, sino que también provee una manera sistemática de
desarrollarla.

FASES MODELOS DE DISEÑO

Especificación de la Misión Declaración de la Misión

Modelado en base a la Audiencia

Modelo para la Audiencia
Clasificación de la Caracterización de
Audiencia la Audiencia

Diseño Conceptual Fragmentos de Objetos

Modelado de Diseño Modelo de Navegación
Información y Tareas Navegacional
Modelos de Tareas

Diseño de Implementación

Diseño de la Diseño de
Estructura del Sitio Presentación Declaración de la Misión

Diseño Lógico de
Datos

Implementación Declaración de la Misión

Modelo de las cinco fases de WSDM, y los modelos de salida que producen.

4
 Especificación de la Misión

En la primera fase del WSDM, se expresa la declaración de la misión para el

sitio Web. En la declaración de la misión, se especifican: propósito, sujeto y niveles
de usuario del sitio web. La declaración de misión establece las fronteras del
proceso de diseño. En el resto del método, se permitirá decidir qué información o
funcionalidad incluir, y cual no, cómo estructurar la información, y cómo presentarla.
Además, la declaración de la misión es útil para la validación, es decir, para
comprobar si el sitio Web ha alcanzado el propósito formulado. La declaración de la
misión se formula en lenguaje natural.

Modelado en base a la Audiencia

La declaración de misión formulada en la primera fase es sólo una y muy

incompleta descripción del sistema que debe desarrollarse. Dado que WSDM es un
método de diseño orientado al público, la primera preocupación que se genera es
el conjunto de usuarios a quien va destinado. WSDM tiene en cuenta el hecho de
que diferentes tipos de visitantes pueden tener necesidades y requerimientos
diferentes y, por lo tanto, pueden requerir un apoyo diferente (por ejemplo, en un
sitio Web universitario, los estudiantes y los investigadores claramente tienen
diferentes propósitos u objetivos para visitar el sitio web). Por lo tanto, los usuarios
objetivo identificados en la declaración de la misión se clasifican en las llamadas
“clases de público”. Esto se hace mediante dos sub-fases: la Clasificación de la
Audiencia y la Caracterización de la Audiencia. Durante la clasificación de la
audiencia, los diferentes tipos de usuarios se identifican con más detalle y se
clasifican: los usuarios con los mismos requisitos (de información y funcionales) se
agrupan en las clases de público. Cuando el conjunto de requisitos de una clase de
público en particular es un subconjunto del conjunto de requisitos de otra clase de
público, llamamos a esta primera clase de público; una subclase de esta audiencia.
Por lo tanto, una subclase de audiencia tiene el mismo, y algunos requisitos
adicionales, como su superclase de audiencia. En base a las relaciones de
subclase, las clases de público se pueden clasificar en una llamada “jerarquía de

5
audiencia”, que posteriormente se utilizará para derivar la estructura de navegación
básica. Para cada clase de público también se indican los requisitos de navegación
y usabilidad. Durante la Caracterización del Público se especifican las
características relevantes para cada clase de público. Junto al hecho de que
diferentes tipos de usuarios pueden tener requisitos de información y funcionales
diferentes, puede ser necesario representar la misma información o funcionalidad
de diferentes maneras, pero dirigidas a diferentes tipos de usuarios. Esto depende
de las características de los mismos.

Diseño Conceptual

Durante las fases anteriores, se identificó la especificación de la misión y el

modelo de audiencia, los requisitos de información, funcionalidad, usabilidad y
navegación, así como las características de los visitantes potenciales; y se
definieron diferentes clases de público. El objetivo del Diseño Conceptual es
convertir estos requerimientos informales en descripciones formales de alto nivel.
Estas luego se pueden utilizar para generar el sistema web. Durante el Diseño
Conceptual, nos concentramos en el "¿qué y cómo?" conceptual, más que en lo
visual. El "qué" conceptual está cubierto por la sub-fase “Modelado de Información
y Tareas" y trata del modelado del contenido y funcionalidad del sistema web; El
"cómo" conceptual está cubierto por la sub-fase “Diseño de Navegación” y
especifica la estructura conceptual del sistema web y la navegación.

Diagrama de Clases (UML)

6
 Modelado de Información y Tareas

El propósito del modelado de información y tareas, es plasmar en detalle las

diferentes tareas que los miembros de cada clase de público necesitan para poder
realizar y describir formalmente los datos y la funcionalidad que se necesitan para
esas tareas. Las tareas que un miembro de una clase de público necesita para
poder realizar se basan en los requisitos formulados para la clase de público durante
la Clasificación de Audiencia, es decir, para cada información y requerimiento
funcional formulado por una clase de audiencia, se define una tarea que permite
satisfacer este requisito. Cada tarea se modela en más detalles usando una versión
adaptada de la técnica de modelado de Árboles de Tareas Concurrentes (CTT);
Originalmente desarrollado en el contexto de Interacción Humano-Computadora
(HCI). Esencialmente, en la técnica de Árboles de Tareas Concurrentes, las tareas
se descomponen en sub-tareas hasta que se obtienen tareas elementales. Además,
las relaciones temporales entre sub-tareas permiten indicar el orden en el que deben
realizarse las sub-tareas (por ejemplo, secuencial, paralelo, etc.). Una vez que se
completa la descomposición de la tarea, cada tarea elemental es modelada por un
llamado “objeto fragmentado”. Una sección del objeto describe formalmente la
información necesaria para completar esta tarea. Inicialmente, se utilizó un Modelo
de Modelado de Objetos (ORM) para este propósito, pero para adaptarse mejor a
las necesidades de la web semántica, WSDM utiliza ahora un Lenguaje de
Ontología Web (OWL) con algunos conceptos de modelado específicos para
soportar la funcionalidad. El uso del Lenguaje de Ontología Web permite el uso de
una o más ontologías existentes y facilita la generación (automática) de sitios web
semánticos, permitiendo efectivamente la Web Semántica.

Diseño Navegacional

El objetivo del diseño de navegación es definir la estructura conceptual del

sistema web y modelar cómo los miembros de las diferentes clases de público
pueden navegar a través del sistema web y realizar sus tareas. Debido al enfoque
orientado al público de WSDM, se crea una vía de navegación para cada clase de

7
público. Dicha vía para la audiencia puede considerarse como un sub-sitio que
contiene toda la información y funcionalidad que necesitan los miembros de la clase
de audiencia asociada. La estructura interna de una vía de audiencia se deriva de
los modelos de tareas hechas para esta clase de público. Se crea un modelo de
navegación por medio de componentes (también llamados nodos) y enlaces: los
componentes son entidades de navegación conceptual, que se refieren a la
información/funcionalidad, mediante los fragmentos de objetos, que pertenecen
lógicamente entre sí; Los enlaces son conexiones entre componentes. WSDM
distingue cuatro tipos de enlaces: enlaces estructurales (que denotan estructura
pura), enlaces semánticos (basados en relaciones semánticas), enlaces de ayuda
a la navegación (accesos directos) y enlaces de lógica de proceso (parte de un flujo
de trabajo). Estos tipos de enlaces pueden ser utilizados, por ejemplo, al generar la
presentación de los enlaces: dependiendo de su propósito, los enlaces pueden tener
una presentación diferente.

Representación Gráfica de Componentes y Enlaces.

Cada componente de información se corresponde con una perspectiva de los

tipos de objetos (POT). Es decir, una visión particular de la información. Los
componentes de información pueden estar relacionados entre ellos a través de
enlaces. Los componentes

8
 Modelo Navegacional de Tareas (Búsqueda de Alumno)

Diseño de Implementación

El objetivo del diseño de la implementación es complementar el diseño

conceptual con los detalles necesarios para la implementación. En principio, sería
posible generar una implementación desde el diseño conceptual, pero esto no es
realista por varias razones.

En primer lugar, la Web está muy orientada visualmente y los estándares de

presentación se han vuelto muy altos en los últimos años. Especialmente los
sistemas web profesionales necesitan tener una apariencia profesional y por lo
general diseñadores gráficos están involucrados para lograr esto. Si el sistema web
se genera directamente desde el diseño conceptual, sólo se pueden obtener
presentaciones estándar y más bien simplistas. Por lo tanto, se necesita un diseño
de presentación.

En segundo lugar, la información proporcionada en el sistema web puede

estar ya disponible desde algún origen de datos (por ejemplo, una base de datos
relacional). En este caso, no se necesita crear ninguna fuente de datos nueva, sino

9
que se debe definir una asignación desde la descripción conceptual de la
información (los fragmentos de objeto) hasta el origen de datos real. En tercer lugar,
a los usuarios de la Web no les gusta hacer clics innecesarios (clics que no
conducen a nueva información), pero por otro lado demasiada información sobre
una sola página sobrecargará la página y también disminuirá la usabilidad. Por lo
tanto, la información y la funcionalidad deben agruparse en páginas de tal manera
que se alcance un buen equilibrio entre la cantidad de información en una página y
el número de clics necesarios para llegar a la información.

Por estas razones, WSDM tiene una fase de diseño de implementación que
consta de tres sub-fases: el diseño de la estructura del sitio, el diseño de la
presentación y el diseño lógico de los datos. Las subsecciones siguientes describen
estas sub fases con mayor detalle.

Diseño de la Estructura del Sitio

Durante el diseño de la estructura del sitio, el diseñador decide cómo se

agruparán los componentes del modelo de navegación en páginas. Las
características de las diferentes clases de público se pueden tener en cuenta al
decidir qué información agrupar en una página. Por ejemplo, para una clase de
público con la característica de que la edad es mayor de 50 años, el diseñador
puede querer limitar la cantidad de información en una sola página. También es
posible definir diferentes estructuras de sitio para el mismo diseño, cada una
soportando un dispositivo diferente. Para un dispositivo con una pantalla pequeña,
puede ser necesario distribuir la información relacionada con un solo componente
en diferentes páginas.

De forma predeterminada, cada componente (con sus fragmentos de objetos

y vínculos asociados) se coloca en una sola página. Sin embargo, el diseñador
puede decidir agrupar diferentes componentes en una sola página o utilizar
diferentes páginas para un solo componente. Cuando los componentes están
agrupados en una página, el diseñador debe respetar la estructura conceptual

10
expresada por medio de los diferentes enlaces, por ejemplo, si un componente no
puede ser accesado por un enlace desde otro componente, estos dos componentes
no se pueden colocar en la misma página.

Diseño de Presentación

Durante el diseño de la presentación se define el aspecto del sistema web,

así como el diseño de las páginas, es decir, el posicionamiento de los elementos de
la página. Para mejorar el aspecto, se utilizan plantillas. Por lo tanto, necesitan
definirse. Típicamente, un sistema web puede requerir diferentes tipos de páginas,
por ejemplo, una página de inicio, una página de título, una página de hoja. Para
cada uno de esos tipos de página se puede crear una plantilla. Estas plantillas se
utilizan posteriormente en el diseño de la página, cuando para cada una de las
páginas definidas en el modelo de estructura del sitio se define el diseño. El diseño
describe cómo la información y la funcionalidad (modelada por medio de los
fragmentos de objeto, y asignados a una página mediante los componentes) deben
ser establecidas en la página. Para el diseño de la plantilla y de la página se dispone
de una serie de conceptos de modelado de presentación. Para la información de
posición, se utiliza el concepto de cuadrícula. Una cuadrícula contiene filas con
celdas. Una celda contiene un valor multimedia, otra cuadrícula (anidamiento de
cuadrículas) o un referente de un fragmento de objeto asignado a la página. La
altura y anchura absolutas y relativas se pueden especificar para las cuadrículas,
las filas y las celdas. Al anidar las cuadrículas, especificando el ancho y la altura de
las diferentes cuadrículas, filas y celdas, la información se puede colocar en la
página.

Los formularios son ampliamente utilizados en el sistema web. Se apoyan en

los siguientes conceptos de control: un control de selección para modelar que una
selección puede estar hecha o compuesta de múltiples opciones, un control de
entrada para modelar que se puede introducir un valor y un control de acción para
especificar que se debe realizar una acción. Estos controles pueden estar asociados

11
con un concepto de presentación. Entre los tipos de controles para selección se
encuentran: RadioButton, CheckBox, ListBox, DropDown.

Estos controles pueden estar asociados con un concepto de presentación.

Los tipos de controles selectos son un RadioButton, un CheckBox, un ListBox y un
cuadro DropDown. Un control de entrada es un TextBox o un SecretTextBox
(normalmente utilizado para introducir contraseñas). Un control de acción típico es
un PushButton. El comportamiento asociado con un control de acción se define
asociando un evento y una acción al control. Expresa el hecho de que cuando se
produce el evento especificado para el concepto de presentación asociado, se
realizará la acción especificada. Los eventos posibles son OnClick, OnLoad,
onHoover; Las posibles acciones son PopUp, Mostrar, Desplazar, Restablecer,
Enviar y Cancelar. Por ejemplo, un menú emergente se puede definir utilizando el
concepto de presentación de menú con el evento OnClick asociado y la acción
PopUp asociada; un menú expandible se puede definir utilizando el concepto de
presentación de menús donde los elementos del menú están asociados con el
evento OnClick y la acción Mostrar.

Las plantillas se especifican utilizando los conceptos de modelado de

presentación mencionados. Una plantilla también puede estar compuesta por un
Encabezado, Pie de página, SideBar y/o ContentPanel. Cada plantilla contiene
además al menos una región editable. Una región editable denota un área que se
necesita especificar más cuando se usa la plantilla para un diseño de página. Una
región editable se puede colocar en cualquier lugar de una cuadrícula.

Para especificar el estilo, WSDM se basa actualmente en Cascading Style

Sheets (CSS). Esto permite la especificación de estilo para cualquier elemento en
particular y tiene suficiente poder expresivo para describir la mayoría de los estilos
comúnmente encontrados en los sistemas web.

Para cada página, el diseñador elige una plantilla y luego especifica cómo se
colocarán los enlaces y la información (especificada mediante los fragmentos de

12
objetos) en las regiones editables de la plantilla. Esto se hace utilizando los
conceptos de modelado de presentación mencionados. Para cada trozo de objeto
conectado a un componente incluido en la página, se construye una cuadrícula.
Cada propiedad de tipo de datos de un fragmento de objeto se coloca en una celda
de la cuadrícula. Para la funcionalidad, se utilizan conceptos de control. Si es
necesario, se pueden agregar valores multimedia para mejorar la presentación (por
ejemplo, títulos, etiquetas, gráficos, etc.). Para cada enlace contenido en la página,
el diseñador debe especificar el ancla. Esto se hace agregando el enlace a la celda
relevante de la cuadrícula. Observe cómo este mecanismo de vinculación no
distingue entre el tipo de ancla (por ejemplo, un elemento de texto, una imagen, una
tabla): un vínculo se especifica uniformemente en una celda de una cuadrícula,
independientemente de cuál sea su contenido.

Las características y los requisitos de usabilidad de las clases de público

deben tenerse en cuenta al diseñar las diferentes plantillas y páginas. El resultado
de esta fase es el modelo de presentación que consiste en un conjunto de plantillas,
un conjunto de estilos y para cada página definida en el modelo de estructura del
sitio, un modelo de página.

Diseño Lógico de Datos

La información proporcionada por el sistema Web se describe mediante los

diferentes fragmentos de objetos realizados durante la Tarea y el Modelo de
Información. Los diferentes fragmentos de objetos están relacionados por medio de
la ontología de referencia que contiene los diferentes conceptos utilizados en los
diferentes fragmentos de objetos. Los fragmentos de objetos son vistas de la
ontología de referencia que se construye de forma incremental durante el modelado
de información. La ontología de referencia puede basarse en una o más ontologías
externas o crearse desde cero. Esta ontología de referencia puede considerarse
como el esquema conceptual de los datos que debe proporcionar el sistema web.
En caso de que ya no se disponga de almacenamiento de datos, se debe crear un
esquema de datos lógicos a partir de este esquema conceptual. Esto es comparable

13
con la creación de un esquema de base de datos relacional a partir de un esquema
Modelo Entidad-Relación (MER) conceptual o esquema de Lenguaje Unificado de
Modelado (UML). El esquema de datos lógicos puede ser un esquema de base de
datos relacional, de Lenguaje de Marcado Extensible (XML), de Marco de
Descripción de Recursos (RDF) o incluso el esquema OWL de la propia ontología
de referencia. Mientras se genera el esquema de datos lógicos, es importante
realizar un seguimiento de la asignación entre la ontología de referencia y el
esquema de datos lógicos, porque más adelante, en la fase de implementación, las
consultas conceptuales y las actualizaciones expresadas en los fragmentos de
objeto deben traducirse en Consultas y actualizaciones en el esquema de la base
de datos lógica. Normalmente, este proceso debe ser soportado por una
herramienta de Ingeniería de Software Asistida por computadora (CASE), en cuyo
caso el diseñador no está sobrecargado con la creación del esquema de datos
lógicos y las asignaciones.

En un segundo escenario, un almacén de datos existente está disponible. En

este caso sólo es necesario definir el mapeo entre la ontología de referencia y este
almacén de datos.

Modelo Entidad-Relación (Notación Chen)

14
 Implementación

La implementación real puede generarse automáticamente desde la

Información recogida durante las diferentes fases de diseño mediante los diferentes
modelos de diseño. Como prueba de concepto, se ha definido una tubería de
transformación (usando Transformaciones de Lenguaje de Estilo Extensible
(XSLT)), que toma como entrada los módulos de objetos (con correlación de fuente
de datos correspondiente; navegación, estructura de sitio, estilo, plantilla, modelos
de página y salidas, implementación real para la plataforma elegida y el lenguaje de
implementación.

Es importante darse cuenta de que, basándose en la información de diseño

recogida, se pueden generar anotaciones semánticas. Más en particular, el uso de
una o más ontologías externas durante el Diseño Conceptual permite expresar
explícitamente la semántica de los datos presentados por medio de anotaciones
semánticas relacionadas con el contenido utilizando estas ontologías. Sin embargo,
también es posible anotar el sistema web de tal manera que también se hace
explícita la semántica de su estructura.

15
 CONCLUSIONES

En teoría, la propuesta de la metodología WSDM se puede tornar de mucho

interés, dado que garantiza una visión totalmente fresca en el aspecto del
tratamiento al usuario final. Está dirigida en su totalidad a desarrollar las
aplicaciones teniendo como base al usuario final desde el primer momento o la
primera fase de diseño. Cabe destacar que no resalta absolutamente nada, o es
prácticamente vacía en cuanto a aspectos que pueden ser importantes si partimos
de esta idea. Por colocar un ejemplo, existe la posibilidad de que la misma
información se presente a diversos usuarios, pero de distinta forma. En muchos
casos, puede resultar difícil para el implementador detectar que se trata del mismo
contenido.

Añadido a todo lo antes mencionado, como muchos autores indican, solo

sirve para desarrollar “kioskos Web”, es decir, aplicaciones que muestren
información. No trabaja áreas como la funcionalidad, seguridad, etc. necesarias en
las aplicaciones Web. Está enfocado única y exclusivamente en como presentarle,
la información a los distintos usuarios.

16
 BIBLIOGRAFÍA

- Gustavo Rossi, Oscar Pastor, Daniel Schwabe, Luis Olsina:

Web Engineering: Modelling and Implementing Web Applications. Human-
Computer Interaction Series, Springer 2008, ISBN 978-1-84628-922-4

17