Tema 2. Los sistemas Interactivos: El ordenador (2013)
-
Upload
miguel-gea -
Category
Documents
-
view
631 -
download
2
description
Transcript of Tema 2. Los sistemas Interactivos: El ordenador (2013)
![Page 1: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/1.jpg)
!
!
Tema 2:
Los Sistemas Interactivos I - El ordenador
Diseño de Interfaces de Usuar io
e d i c i ó n 2 013
Miguel Gea ([email protected] s)Dpt. Lenguajes y S is temas InformáticossGrado en Ingenier ía InformáticaUnivers idad de Granadahttp ://utopo l is.ugr.e s/d iu
![Page 2: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/2.jpg)
I: El ordenadorArquitectura de un Sistema InteractivoDispositivos y tareas de interacciónComponentes interactivos
II: La personaEl Factor Humano
Tema 2. Los Sistemas Interactivos
![Page 3: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/3.jpg)
Tema 2. Los Sistemas Interactivos
• Obtención de datos (del usuario)• Enlace con aplicación• Presentación datos
1. Arquitectura del: Funciones del Interfaz
Subsistema de entrada
Aplicación
Dispositivos físicos
Usu
ario
E
R
E = Entradas del usuario R = Realimentación
![Page 4: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/4.jpg)
• Primera aproximación (1985)• Separación por capas
1. Arquitectura: Modelo de Seeheim
Capa Presentación
Capa Diálogo
Capa Aplicación
Léxico Sintáctico Semántico
Aplicación
Usuario
• Minimizar el efecto de los cambios en el IU sobre la aplicación• Facilitar portabilidad entre diferentes W.S.
Tema 2. Los Sistemas Interactivos
![Page 5: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/5.jpg)
1. Arquitectura: Modelo de Seeheim
Ejemplo: copy c:\doc\fichero1.* d:
<orden> ::= Copiar | …. <copiar> ::= copy <from> <to> <from> ::= [ <disk> : ] [ <Directory> ] < filename> <to> := [ <diskSpec> : ] [ <Directory> ] [< filename> ] …
BNF
Tema 2. Los Sistemas Interactivos
![Page 6: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/6.jpg)
• Aparece con lenguaje Smalltalk• Identifica relaciones entre elementos
1. Arquitectura: Modelo Vista Controlador (MVC)
• Puede haber varias vistas y controladores asociados a un modelo
Modelo
Vista
Controlador
Tema 2. Los Sistemas Interactivos
![Page 7: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/7.jpg)
• Dirigido por aplicación / Usuario
1. Arquitectura: Gestión del Diálogo
Dispositivo Sistema Interactivo Aplicación
Petición
Control
Datos
Main() Dispositivo Sistema Interactivo Aplicación
Evento
Control
add get
Control disposit.
Request (petición) Event (Eventos)
Tema 2. Los Sistemas Interactivos
![Page 8: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/8.jpg)
1. Arquitectura: Eventos
• EventosInformación sobre sucesos Posee información relevante del estado de la aplicación
•Tipos de eventosUsuario
Mouse (botones, movimiento,..)Teclas (pulsación, modificadores) Entrar/Salir componente (foco)Acción (de cada componente)
SistemaVentanas (redimensionamiento, cierre...)De aplicación (insertar nuevos elementos)
Teclas y modificadores
Componente implicado
Información adicional
Coordenadas mouse (x,y)
Instante de tiempo Tipo evento
Evento
Tema 2. Los Sistemas Interactivos
![Page 9: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/9.jpg)
1. Arquitectura del S.I.: Gestión de Eventos
Widgets
Gestión eventos (event loop)
Colas eventos (Sistema)
Colas eventos (dispositivos)
Tema 2. Los Sistemas Interactivos
![Page 10: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/10.jpg)
1. Arquitectura: Gestión de Eventos
proc update { . . . } MOUSE_ENTER
bind .Button_Si <Mouse_enter> { exit(); }
Sistema X Windows (Motif, Tcl/TK)
Ventana 1 A
C
B
MOUSE_ENTER MOUSE_EXIT MOUSE_MOVE MOUSE_DOWN MOUSE_UP ACTION_EVENT
a) Callbacks
Tema 2. Los Sistemas Interactivos
![Page 11: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/11.jpg)
1. Arquitectura: Gestión de Eventos
Ventana 1 A
C
B
Los eventos se pasan a todos los componentesPotencialmente interesados en el mismo
B C
Delivery Ventana1
A
Handle
B C
Ventana1
Java 1.0.2, MacApp, Windows
b) Notificación
Tema 2. Los Sistemas Interactivos
![Page 12: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/12.jpg)
1. Arquitectura: Gestión de Eventos
Ventana 1 A
C
B
Modelo objetos: Java 1.1, Smalltalk, NeXTStep
Receptor Componente fuente
Registrar
Evento
MOUSE_ENTER
Ventana 1
Ventana1.Close();
c) Delegación
Tema 2. Los Sistemas Interactivos
![Page 13: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/13.jpg)
2. Dispositivos y tareas: Configuración WIMP
Configuración base típica (años 80/90)
• Monitor con varias ventanas• Teclado • Ratón/touchpad
• Variaciones• Sobremesa• Portátil• PDA
• Los dispositivos permiten diferentes modos de interacción
Tema 2. Los Sistemas Interactivos
![Page 14: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/14.jpg)
2. Dispositivos y tareas: Análisis
• Diversidad dispositivos• Características
Ergonómicas (adaptación a la persona) Tipo de tareas a realizar -> tareas básicas elementales
Tema 2. Los Sistemas Interactivos
El estudio de los dispositivos está muy relacionado con la tarea con la que se van a usar.
![Page 15: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/15.jpg)
2. Dispositivos: Características ergonómicas
• Absolutos/relativos• Directos/indirectos• Continuos/discretos• Limitados/no limitados
x
y
Funciones medibles• Relación C/D (control/display)
• Ley de Fitts I = log (2D/W)
• Área de trabajo del dispositivo
Dificultad 2 D W
Tema 2. Los Sistemas Interactivos
![Page 16: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/16.jpg)
• Trackball• Joystick• Tableta Gráfica• Touchpad• Lápiz Optico• Voz (micrófono)• Ratón• Teclado• Seguimiento ocular (eye tracking)
Tema 2. Los Sistemas Interactivos2. Dispositivos: Tipos
![Page 17: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/17.jpg)
2. Tareas de interacción básica (BIT)
• Posicionamiento• Valor• Texto • Selección• Arrastre
Dispositivos lógicos
Tareas de interacción básica (BIT)
Tema 2. Los Sistemas Interactivos
![Page 18: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/18.jpg)
• Sistema de coordenadas (2D, 3D, pantalla..)• Resolución • Restricciones (modular/direccional)• Realimentación (espacial/numérica)
TAREA: Posicionamiento
Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)
![Page 19: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/19.jpg)
• Tamaño del conjunto (fijo/variable)• Modos (identificación/ apuntando)
TAREA: SelecciónTema 2. Los Sistemas Interactivos
2. Tareas de interacción básica (BIT)
![Page 20: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/20.jpg)
• Tamaño del texto• Codificación
TAREA: TextoTema 2. Los Sistemas Interactivos
2. Tareas de interacción básica (BIT)
![Page 21: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/21.jpg)
• Tamaño del texto• Codificación• Dispositivos especiales • Gestos / T9
TAREA: Texto
Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)
![Page 22: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/22.jpg)
• Rango • Continuo/discreto
TAREA: ValorTema 2. Los Sistemas Interactivos
2. Tareas de interacción básica (BIT)
![Page 23: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/23.jpg)
• Acción continua • Acciones complejas
TAREA: Arrastre
Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)
![Page 24: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/24.jpg)
Apariencia Individual/jerárquico Palabra (Verbo=acción / Nombre= Objeto)
Comportamiento Click, Click-Click, In/Out
Semántica Acciones Estado
Tema 2. Los Sistemas Interactivos2. Tareas de interacción básica (BIT)
![Page 25: Tema 2. Los sistemas Interactivos: El ordenador (2013)](https://reader036.fdocumento.com/reader036/viewer/2022081717/5494bfbfb479596a4d8b4b81/html5/thumbnails/25.jpg)
3. Componentes: Tipos
Contenedores Ventanas Almacén (recipientes datos) Contenedores (organización)
Componentes Botones Texto Deslizadores ...
Tema 2. Los Sistemas Interactivos
En el seminario se verán este tipos de componentes!