Dise

1
Diseño de aplicaciones hipermedia una aplicación
a la enseñanza en Internet de segundas lenguas

• Ana Fernández-Pampillón Cesteros
  (apampi_at_filol.ucm.es)
• Departamento de Filología Románica, Eslavas y
  Lingüística.
• Universidad Complutense de Madrid. (España)

() Proyecto GALANET http//agora2.grenet.fr
2
Presentación

• Aplicaciones hipermedia de enseñanza-aprendizaje
• carácter didáctico
• crítico el análisis y diseño
• sistematizar?
• Metodologías
• (1) modelos docentes
• (2) modelos hipermedia

1
3
Un módulo de entrenamiento a la comprensión
escrita e-mail(1)
2
4
Módulo de comprensión escrita e-mail(menú
principal)
5
Módulo de comprensión escrita e-mail(bandeja de
correo electrónico)
6
Módulo de comprensión escrita e-mail(correo
electrónico y acceso a bloques)
7
Módulo de comprensión escrita e-mail(actividad
1 del bloque 1)
5
8
Módulo de comprensión escrita e-mail(actividad
1 del bloque 1 evaluación)
9
Cómo hemos llegado hasta aquí?

• Modelo didáctico el modelo natural de
  aprendizaje
• Modelo de diseño hipermedia el modelo OOHDM

6
10
Modelo natural de aprendizaje y estrategias de
enseñanza
Aprender actuando
Establecer el objetivo
Aprender reflexionando
7
Plantear Preguntas
Elaborar Respuestas
11
Esquema didáctico
8
12
Metodología para el desarrollo de aplicaciones
hipermedia
9
13
Esquema docente
Requisitos técnicos
Análisis
Diseño
Esquema conceptual
Construcción
Esquema de navegación y DAI
Aplicación
Prueba y Evaluación
10
Criterios de evaluación
usuarios
14
Cómo es nuestro dominio?

• Información poco estructurada
• Información estable en el tiempo
• Alto grado de interacción
• Interfaces atractivas
• soporte Internet

11
15
Modelo OOHDM (Object-Oriented Hypermedia Design
Method)
Diseño Conceptual
Documentos de especificación
Diseño de la navegación
Esquema conceptual
Esquema de navegación
12
Diseño abstracto de la interfaz
Diagrama DAI
16
Diseño Conceptual esquema conceptual

• Definición de Clases conceptuales
• Atributos
• Relaciones
• Comportamiento
• Independiente de la navegación
• Independiente de la interfaz
• Independiente del usuario
• Independiente del própósito (función) de la
  aplicación

13
17
15
18
16
19
Diseño de la navegación esquema de navegación

• Definición de espacios de navegación
• Clases de navegación
• Contextos
• Depende del tipo de usuario
• Depende del propósito (función) de la vista
• Independiente de la interfaz

17
20
Clases de Navegación
18
21
Clases de Navegación
19
22
Esquema de navegación (parcial)
Recorrido Guiado Bloques
Menú principal
Ayuda
20
23
Contexto de navegación bloque por título
21
24
Diseño de la interfaz

• cómo se percibe el esquema de navegación?
• un mismo modelo de navegación distintas
  interfaces
• Diseño de Vistas Abstractas de Datos (ADV)
• Diagrama de configuración
• Grafo de eventos

22
25
Diagrama de configuración (contexto Recorrido
Guiado Bloques)
ADV Recorrido Guiado Bloques bloques
Menú desplegable
ADV Email cabeceratexto estático
23
26
Grafo de eventos (ADV Recorrido Guiado)
onMouse(Down) mostrar (ADV bloques por título)
ADV Recorrido Guiado Bloques bloques
Menú desplegable
ADV Email cabeceratexto estático
onLoad(Email) mostrar(texto) letra por letra
24
on
off
27
Resultados

• Esquema de clases (evitar la redundancia)
• Esquema de navegación
• claro (evita desorientación)
• consistente(evita sobresaturación de información)
• adaptado al usuario y función
• Esquema de la interfaz
• simplifica modificaciones de percepción
• permite mútiples vistas de un mismo esquema.

25
28
Contexto de clase Nodo Bloque en Recorrido
Guiado Bloques y Bloques por título
contexto Bloque-Actividad PrevioAncla(ACTIVIDAD)
AnteriorAncla(ACTIVIDAD) actividadACTIVIDAD ámbi
toRecorrido guiado Bloques Bloques por
título parte-deNodo Bloque
29
Múltiples interfaces para un mismo esquema de
navegación