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

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@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. Enseñanza mediante casos Aprender explorando Modelo natural de aprendizaje y estrategias de enseñanza Aprender actuando Establecer el objetivo Aprenderreflexionando 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. BLOQUE título:texto descripción:texto tipo:enum{formaC, formaL,Semántica} actividades: { . . . } mail: . recursosGramaticales: { . . } recursosEjercicios: { . . . } EMAIL código: texto cabecera: STRUCT{ de: texto, a: texto, fecha: texto, asunto: texto} cuerpo: texto actividades: { . . . } bloques: {. . .} Recursos Gramaticales .............. Recursos Ejercicios .............. ACTIVIDAD pregunta: STRUCT {cuestión:texto, explicación: texto} mensaje: evaluar(Evaluación.resultado) idioma: char(2) recursosGramaticales: { . . . } recursosEjercicios: { . . . } evaluación: . mail: . bloque: . correspondeCon: { . . . } evaluar(bolean): string inicializar() EVALUACIÓN resultado: boolean elementosDeEvaluacion: { . . . } actividad: . ..... iniciar() getResultado() guardar() 15

18. ARRASTRE origen: STRUCT {x: float, y: float} destino: STRUCT{ x: float, y: float} estado: boolean inicializar() setEstado() getEstado() accion(estado) CAJA TEXTO tipo: enum {dinámica |estática |entrada} texto: Texto nombreDeInstancia: texto inicializar() setTexto() getTexto() ELEMENTO icono:Imagen tipo: Caja Texto | Selección | Botón | Arrastre nombreDeInstancia: texto usadoEnEval: actividades: { . . . } SELECCIÓN etiqueta: texto estado: boolean inicializar() setEstado() getEstado() accion(Estado) BOTÓN etiqueta: texto estado: boolean inicializar() getEstado() accion(estado) 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. Nodo Bloque título:Texto (BLOQUE.titulo) descripción:Texto (BLOQUE.descripción) email: Ancla (EMAIL) recursosGramaticales: Ancla(Recursos Gramaticales) recursosEjercicios: Ancla (Recursos Ejercicios) MenuPP: Ancla BLOQUE título:texto descripción:texto tipo:enum{formaC, formaL,Semántica} actividades: { . . . } mail: . recursosGramaticales: { . . } recursosEjercicios: { . . . } Clases de Navegación 18

21. Nodo Email cabecera:Texto (EMAIL.cabecera.de  EMAIL.cabecera.a  EMAIL.cabecera.fecha  EMAIL..asunto) texto:Texto (EMAIL.texto) EMAIL código: texto cabecera: STRUCT{ de: texto, a: texto, fecha: texto, asunto: texto} cuerpo: texto actividades: { . . . } bloques: {. . .} Clases de Navegación 19

22. Bloque por título Bloque por título Email Recursos Plataforma Bloque-Actividad Esquema de navegación (parcial) Recorrido Guiado Bloques Menú principal Ayuda 20

23. Bloque por título Bloque por título incluye: ( b1,b2  Nodo Bloque) ( B1,B2  BLOQUE) (B1. titulo = b1.titulo)^ ^ (B2. titulo = b2.titulo)^ (B1.codigo< B2.codigo  b1 anterior b2) recorrido: índice comportamiento: selección 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. texto texto dinámico botón Diagrama de configuración (contexto Recorrido Guiado Bloques) ADV Recorrido Guiado Bloques bloques: Menú desplegable ADV Email cabecera:texto estático 23

26. texto texto dinámico botón Grafo de eventos (ADV Recorrido Guiado) onMouse(Down) {mostrar (ADV “bloques por título”)} ADV Recorrido Guiado Bloques bloques: Menú desplegable ADV Email cabecera:texto 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 Previo:Ancla(ACTIVIDAD) Anterior:Ancla(ACTIVIDAD) actividad:ACTIVIDAD ámbito:”Recorrido guiado Bloques” & “Bloques por título” parte-de:Nodo Bloque

29. Múltiples interfaces para un mismo esquema de navegación