Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de...
-
Upload
eugenio-rey-prado -
Category
Documents
-
view
240 -
download
0
Transcript of Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de...
![Page 1: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/1.jpg)
Javier Sánchez PérezJosé Juan Hernández Cabrera
Ana María Plácido CastroAño 2002
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Componentes de las interfaces
![Page 2: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/2.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Contenido Ventanas de aplicaciones Cuadros de diálogos Menús Controles
![Page 3: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/3.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Ventanas de aplicaciones Las ventanas proporcionan acceso a
diferentes tipos de información Facilitan la interacción con los objetos
![Page 4: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/4.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Elementos de una ventana
Marco Barra de título
Icono Texto Botones
Barra de scroll Barra de menú Barra de estado
![Page 5: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/5.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Ventana principal
Hay dos alternativas para construirla: SDI (Single Document Interface) MDI (Multiple Document Interface)
![Page 6: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/6.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Ventana de documento
Sólo existen en las aplicaciones MDI
![Page 7: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/7.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Ventanas emergentes
![Page 8: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/8.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Operaciones
Abrir y cerrar
Mover
Maximizar, Minimizar, Restaurar Cambiar tamaño
Activar y desactivar
Cambiar el orden Z
Desplazar vista
Dividir vista
![Page 9: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/9.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Cuadros de diálogo
Representan una conversación (diálogo) con el usuario para preguntar como realizar una acción
![Page 10: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/10.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogos modales
Son las más comunes. Hasta que no se cierran no se puede trabajar en otras ventanas. Se pueden desplazar
![Page 11: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/11.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogos no modales
Representan una herramienta o conjunto de herramientas a disposición del usuario para la realización de una tarea
![Page 12: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/12.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Hojas de propiedades
![Page 13: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/13.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogo abrir / guardar
![Page 14: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/14.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogo buscar
![Page 15: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/15.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogo imprimir
![Page 16: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/16.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogo configurar página
![Page 17: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/17.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogo cambiar fuente
![Page 18: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/18.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Dialogo cambiar color
![Page 19: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/19.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Diálogos de mensaje
Información
Advertencia
Error
Confirmación
![Page 20: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/20.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Menús Presentan una lista de comandos
disponibles para el usuario Hacen que los comandos estén visibles y
resulten fáciles de descubrir
![Page 21: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/21.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Barra de menú
Es la forma más habitual de menú. Todas las aplicaciones la integran
Se representa en la parte superior
![Page 22: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/22.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Elementos del menú
Título menú
Divisor
Comando
Comandodeshabilitado
Tecla abreviada
Comandocon diálogo
![Page 23: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/23.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Tipos de menúsDesplegables en cascada Contextuales
Con scroll
Expandibles
![Page 24: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/24.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Controles Objetos gráficos que representan las
propiedades y operaciones de los objetos Todos los controles establecen un
convenio de uso que se debe respetar. No es una práctica recomendada definir
controles propios cuando los estándares del sistema ofrecen la funcionalidad necesaria
![Page 25: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/25.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Botones de comando
Permite establecer comandos que la aplicación lleva a cabo cuando el usuario lo pulsa.
Estados
Normal
Pulsado
Con el foco de entrada
Botón predeterminado
No disponible
![Page 26: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/26.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Cuadros de texto
Simple
EnriquecidoCombinados Desplegables
IncrementalesEstáticos
Permiten la edición y representación de texto por pantalla
![Page 27: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/27.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Botones de opción
Representa una única opción dentro de un conjunto limitado de opciones excluyentes
Tiene utilidad para un número menor de 8 opciones
Etiquetar todas las opciones Deshabilitar una opción cuando no esté
disponible Sin signos de puntuación al final Etiquetas paralelas y de longitud
aproximada Evitar repeticiones de palabras Agrupar las condiciones
![Page 28: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/28.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Casillas de verificación
Representa una opción independiente verdadera o falsa, no excluyente
Puede estar en cualquiera de los estados siguientes: marcada, en blanco, desconocida
Tiene utilidad para un número menor de 8 opciones
Etiquetar todas las opciones Deshabilitar una opción cuando
no esté disponible Sin signos de puntuación al final Etiquetas paralelas y de longitud
aproximada Evitar repeticiones de palabras
![Page 29: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/29.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Cuadros de lista
Representa un gran número de opciones Se permite seleccionar una o varias opciones y
contiene barras de desplazamiento Omitir las opciones no disponibles Ordenar la lista o permitir la ordenación
![Page 30: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/30.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Cuadros de lista: tiposÚnica DesplegableMúltiple
Vista de lista Vista de árbolFecha
![Page 31: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/31.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Cuadros de grupo
Se utilizan para agrupar otros controles
Ficheros de pestañasMarco
Panel
![Page 32: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/32.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Indicadores de progreso
Representan el progreso de un acción del usuario.
Son muy útiles para acciones que tardan más de 5 segundos
![Page 33: Javier Sánchez Pérez José Juan Hernández Cabrera Ana María Plácido Castro Año 2002 Diseño de interfaces humanas. Escuela Universitaria de Informática.](https://reader033.fdocuments.ec/reader033/viewer/2022061612/5665b47a1a28abb57c91cd8b/html5/thumbnails/33.jpg)
Diseño de interfaces humanas. Escuela Universitaria de Informática. Universidad de Las Palmas de G.C.
Otros controles
Barras de desplazamiento Control deslizante
Ficheros de pestañas
Barras de estado