1 / 29

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

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).

amos-martin
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related