Dise o de aplicaciones hipermedia una aplicaci n a la ense anza en internet de segundas lenguas
This presentation is the property of its rightful owner.
Sponsored Links
1 / 29

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


  • 345 Views
  • Uploaded on
  • Presentation posted in: General

Diseño de aplicaciones hipermedia: una aplicación a la enseñanza en Internet de segundas lenguas*. Ana Fernández-Pampillón Cesteros ( [email protected] ) Departamento de Filología Románica, Eslavas y Lingüística. Universidad Complutense de Madrid. (España).

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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 ([email protected])

Departamento de Filología Románica, Eslavas y Lingüística.

Universidad Complutense de Madrid. (España)

(*) Proyecto GALANET [http://agora2.grenet.fr]


Presentaci n

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


Un m dulo de entrenamiento a la comprensi n escrita e mail 1

Un módulo de entrenamiento a la comprensión escrita: e-mail(1)

2


M dulo de comprensi n escrita e mail men principal

Módulo de comprensión escrita: e-mail(menú principal)


M dulo de comprensi n escrita e mail bandeja de correo electr nico

Módulo de comprensión escrita: e-mail(bandeja de correo electrónico)


M dulo de comprensi n escrita e mail correo electr nico y acceso a bloques

Módulo de comprensión escrita: e-mail(correo electrónico y acceso a bloques)


M dulo de comprensi n escrita e mail actividad 1 del bloque 1

Módulo de comprensión escrita: e-mail(actividad 1 del bloque 1)

5


M dulo de comprensi n escrita e mail actividad 1 del bloque 1 evaluaci n

Módulo de comprensión escrita: e-mail(actividad 1 del bloque 1 evaluación)


C mo hemos llegado hasta aqu

¿Cómo hemos llegado hasta aquí?

  • Modelo didáctico: el modelo natural de aprendizaje

  • Modelo de diseño hipermedia: el modelo OOHDM

6


Modelo natural de aprendizaje y estrategias de ense anza

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


Esquema did ctico

Esquema didáctico

8


Metodolog a para el desarrollo de aplicaciones hipermedia

Metodología para el desarrollo de aplicaciones hipermedia

9


Dise o de aplicaciones hipermedia una aplicaci n a la ense anza en internet de segundas lenguas

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


C mo es nuestro dominio

¿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


Modelo oohdm object oriented hypermedia design method

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


Dise o conceptual esquema conceptual

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


Dise o de aplicaciones hipermedia una aplicaci n a la ense anza en internet de segundas lenguas

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


Dise o de aplicaciones hipermedia una aplicaci n a la ense anza en internet de segundas lenguas

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


Dise o de la navegaci n esquema de navegaci n

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


Clases de navegaci n

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


Clases de navegaci n1

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


Esquema de navegaci n parcial

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


Contexto de navegaci n bloque por t tulo

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


Dise o de la interfaz

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


Diagrama de configuraci n contexto recorrido guiado bloques

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


Grafo de eventos adv recorrido guiado

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


Resultados

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


Contexto de clase nodo bloque en recorrido guiado bloques y bloques por t tulo

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


M ltiples interfaces para un mismo esquema de navegaci n

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


  • Login