Introducción a la Comunicación Persona-Máquina
Anuncio
Introducción a la
Comunicación
Persona-Máquina
Cuaderno Nº 42
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Profesores de la Universidad de Oviedo
Oviedo, Septiembre 2004
Cuaderno Nº 42
Introducción a la Comunicación Persona-Máquina
Autores:
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Universidad de Oviedo - España
Editorial:
SERVITEC
ISBN: 84-688-8362-X
Deposito Legal: AS-4254-04
1ª Edición : Oviedo, Septiembre 2004
Tabla de Contenidos
1 FUNDAMENTOS DE LA INTERACCIÓN PERSONA-ORDENADOR ................................. 1
1.1
1.2
1.3
1.4
1.5
1.6
1.7
INTRODUCCIÓN. ORÍGENES DE LA DISCIPLINA .............................................................................................. 3
DEFINICIÓN ...................................................................................................................................................... 5
OBJETIVOS........................................................................................................................................................ 8
CONCEPTOS Y PRINCIPIOS BÁSICOS RELACIONADOS CON LA INTERACCIÓN ............................................... 11
FACTORES QUE AFECTAN ................................................................................................................................25
DISCIPLINAS QUE CONTRIBUYEN ..................................................................................................................26
EL FACTOR HUMANO.......................................................................................................................................36
1.7.1
Canales de Entrada y Salida ..............................................................................................................40
1.7.2
Memoria..................................................................................................................................................44
1.7.1.1
1.7.2.1
1.7.2.2
Ejemplos de restricciones impuestas por la visión........................................................................................ 41
Tipos......................................................................................................................................................................... 44
Repercusión para CPM.......................................................................................................................................... 44
2 INTERFACES GRÁFICAS DE USUARIO: PRINCIPALES ELEMENTOS ...........................50
2.1
OPERACIONES CON TECLADO ..........................................................................................................................52
2.2
COMPONENTES BÁSICOS ................................................................................................................................ 61
2.1.1
2.1.2
2.1.3
Empleo de Mnemotécnicos .................................................................................................................53
Empleo de Shortcuts...........................................................................................................................56
Navegación y activación por teclado................................................................................................60
2.2.1
Botones...................................................................................................................................................62
2.2.2
2.2.3
2.2.4
2.2.5
Combo Box .............................................................................................................................................73
Listas ......................................................................................................................................................77
Slider ......................................................................................................................................................80
Barras de Progreso ..............................................................................................................................83
2.3.1
2.3.2
2.3.3
2.3.4
Etiquetas (Label) ..................................................................................................................................87
Text Field ..............................................................................................................................................89
Password Field ...................................................................................................................................... 91
Text Area ..............................................................................................................................................93
2.4.1
2.4.2
2.4.3
2.4.4
2.4.5
2.4.6
2.4.7
Barras de Menú.....................................................................................................................................97
Menús Drop-Down ................................................................................................................................98
Submenús ...............................................................................................................................................99
Menus Contextuales (pop-up) ......................................................................................................... 100
Elementos de menú (menuItems).................................................................................................... 102
Checkbox y Radio Menú Items........................................................................................................ 107
Menús Comunes (Archivo, Edición, Ayuda, …) .............................................................................. 109
2.2.1.1
2.2.1.2
2.2.1.3
2.2.1.4
Comando (Command)............................................................................................................................................. 62
Conmutación (Toggle)........................................................................................................................................... 67
Cajas de chequeo (Check Boxes)....................................................................................................................... 70
Radio (Radio Buttons) ........................................................................................................................................... 71
2.3
COMPONENTES PARA TEXTO ...........................................................................................................................86
2.4
MENÚS .............................................................................................................................................................95
2.5
CONTENEDORES .............................................................................................................................................114
2.6
DIÁLOGOS ..................................................................................................................................................... 126
2.7
2.8
TABLAS .......................................................................................................................................................... 140
TOOLTIPS ...................................................................................................................................................... 143
2.5.1
2.5.2
2.5.3
2.5.4
Barras de Herramientas (ToolBars)................................................................................................115
Paneles (Panels)....................................................................................................................................119
TabbedPane ..........................................................................................................................................121
ScrollPane ............................................................................................................................................ 125
2.6.1
2.6.2
2.6.3
JOptionPane ........................................................................................................................................ 129
JFileChooser ....................................................................................................................................... 133
JColorChooser .................................................................................................................................... 137
3 ESTILOS DE INTERACCIÓN Y METÁFORAS .................................................... 145
3.1
ESTILOS Y PARADIGMAS DE INTERACCIÓN................................................................................................. 147
3.1.1
3.1.2
Introducción........................................................................................................................................ 148
Estilos de Interacción....................................................................................................................... 148
3.1.3
Paradigmas de Interacción .............................................................................................................. 165
3.1.2.1
3.1.2.2
3.1.2.3
3.1.2.4
3.2
3.1.3.1
3.1.3.2
3.1.3.3
Interfaz de línea de comandos ....................................................................................................................... 149
Menús y formularios........................................................................................................................................... 152
Manipulación directa .......................................................................................................................................... 158
Interacción Asistida .......................................................................................................................................... 162
Ordenador de Sobremesa................................................................................................................................. 166
Entornos virtuales y realidad virtual ............................................................................................................. 167
Computación ubicua ............................................................................................................................................ 169
METÁFORAS................................................................................................................................................... 170
3.2.1
3.2.2
3.2.3
3.2.3.1
3.2.3.2
Introducción.........................................................................................................................................171
Objetivos de los diseñadores .......................................................................................................... 173
Metáfora de la Interfaz .................................................................................................................. 174
Tipos....................................................................................................................................................................... 175
Ejemplos............................................................................................................................................................ 179
4 GUÍAS Y ESTÁNDARES ............................................................................ 187
4.1
4.2
4.3
INTRODUCCIÓN ............................................................................................................................................. 189
PRINCIPIOS ................................................................................................................................................... 190
REGLAS............................................................................................................................................................191
4.3.1
Estándares........................................................................................................................................... 192
4.3.2
Guías...................................................................................................................................................... 196
4.3.1.1
4.3.1.2
4.3.1.3
4.3.2.1
4.3.2.2
Clasificación ......................................................................................................................................................... 193
Organismos implicados....................................................................................................................................... 194
Ejemplos ................................................................................................................................................................ 195
De estilo ................................................................................................................................................................ 196
Ejemplos............................................................................................................................................................ 198
5 SOPORTE AL USUARIO ............................................................................ 215
5.1
5.2
5.3
5.4
INTRODUCCIÓN ............................................................................................................................................. 217
SOPORTE BÁSICO PARA EL USUARIO ............................................................................................................ 218
REQUERIMIENTOS DE LA AYUDA .................................................................................................................. 219
HIPERTEXTO E HIPERMEDIA........................................................................................................................ 226
5.4.1
Lenguajes de marcas ......................................................................................................................... 231
5.5
5.6
5.7
5.8
AYUDA EN LÍNEA .......................................................................................................................................... 243
ESTRUCTURA DE LA AYUDA .......................................................................................................................... 248
ORGANIZACIÓN DEL TEXTO DE LA AYUDA .................................................................................................. 255
EJEMPLO ....................................................................................................................................................... 263
5.8.1
5.8.2
5.8.3
Construcción de ficheros de ayuda para Java con JavaHelp .................................................. 263
Pasos en la construcción de la ayuda ............................................................................................ 269
Incorporación de la ayuda en la aplicación .................................................................................. 289
6 INTERNACIONALIZACIÓN ........................................................................ 300
6.1
6.2
INTRODUCCIÓN ............................................................................................................................................ 302
DEFINICIÓN ................................................................................................................................................. 303
6.3
6.4
6.5
PROCESO DE INTERNACIONALIZACIÓN ....................................................................................................... 313
VENTAJAS DE CONSTRUIR APLICACIONES INTERNACIONALIZADAS ........................................................ 315
EJEMPLO ........................................................................................................................................................ 317
6.2.1
6.2.2
Internacionalización y localización................................................................................................ 303
Elementos específicos de la localización ..................................................................................... 306
7 BIBLIOGRAFÍA ...................................................................................... 327
1. Fundamentos de la Interacción
Persona-Ordenador
Introducción a la Comunicación Persona-Máquina
1
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
1. Contenidos
n
Introducción. Orígenes de la disciplina
n
Definición
n
Objetivos
n
Conceptos y principios básicos relacionados con la
interacción
n
Factores que afectan
n
Disciplinas que contribuyen
n
El Factor Humano
n
Canales de Entrada y Salida
n
Memoria
Introducción a la Comunicación Persona-Máquina
2
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Orígenes
Introducción a la Comunicación Persona-Máquina
3
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Orígenes (II)
http://www.baddesigns.com/
Introducción a la Comunicación Persona-Máquina
4
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Definición
En Inglés HCI (Human Computer Interaction)
Comunicación Hombre-Máquina es una disciplina relacionada
con el diseño, evaluación e implementación de sistemas
informáticos interactivos para ser usados por personas, y
con el estudio de los fenómenos más importantes que
están involucrados.
Definición de ACM - SIGCHI (1992, p6)
http://www.acm.org/sigchi/
Introducción a la Comunicación Persona-Máquina
5
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Definición (II)
En resumen, CHM abarca
Diseño de interfaces de usuario
Y además otra serie de factores
Psicológicos (motivación, satisfacción,…)
Ergonómicos (diseño del equipamiento,…)
Organizativos (entrenamiento, política, cargos,…)
…
En este curso nos centraremos en la interfaz de usuario (diseño
e implementación principalmente)
Introducción a la Comunicación Persona-Máquina
6
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
La Interfaz de Usuario
La interfaz de usuario es el principal punto de contacto entre el
usuario y el ordenador.
Una interfaz de usuario pobre produce
Reducción de productividad
Tiempos de aprendizaje inaceptables
Niveles de errores que producen frustración
Y como consecuencia: rechazo del sistema
Introducción a la Comunicación Persona-Máquina
7
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Objetivos de CPM
El objetivo de CPM es desarrollar o mejorar la
Seguridad
Utilidad
Efectividad
Eficiencia
Y sobre todo la USABILIDAD
de los sistemas interactivos
Introducción a la Comunicación Persona-Máquina
8
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Usabilidad
Un sistema es usable si
Es fácil de aprender y
Es fácil de utilizar
Por tanto, la usabilidad es mucho más que la selección de colores
o tipos de letra. Incluye
Diseño de los diálogos
Enlace cognitivo entre usuario y sistema
Calidad de la documentación
Incorporación de ayuda en línea
….
Introducción a la Comunicación Persona-Máquina
9
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Usabilidad (II)
El empleo de unos principios de diseño basados en la usabilidad
tienen como consecuencia:
Reducción en los costes de producción
Reducción en los costes de mantenimiento y apoyo
Reducción en los costes de uso
Mejora en la calidad del producto
Introducción a la Comunicación Persona-Máquina
10
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Usabilidad (III)
Principios Generales
Los principios generales de diseño de interfaces que ayudan a
conseguir la usabilidad de un sistema interactivo pueden agruparse
en tres categorías:
Facilidad de Aprendizaje
Flexibilidad
Solidez
Introducción a la Comunicación Persona-Máquina
11
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Facilidad de Aprendizaje
La facilidad de aprendizaje tiene como objetivo reducir el esfuerzo
que tiene que hacer un usuario novel para trabajar con un sistema
interactivo y para llegar a convertirse en un usuario experto.
Algunos de los principios que contribuyen a ello son:
Predicción
Síntesis
Familiaridad
Consistencia
Introducción a la Comunicación Persona-Máquina
12
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Predicción
Un sistema es predecible cuando los conocimientos adquiridos por el
usuario por sus interacciones previas son suficientes para poder
determinar los resultados de sus futuras interacciones
Para ayudar en la predicción conviene garantizar la Visibilidad de
Operaciones:
Permite que el usuario sepa, mirando la interfaz, si la operación que
le interesa puede realizarla o no
No tiene que memorizar cuando puede hacerla y cuando no
Un sistema es poco predecible, por ejemplo, cuando se le obliga al
usuario a recordar lo que contenía una pantalla anterior de la aplicación
Introducción a la Comunicación Persona-Máquina
13
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Síntesis
Un sistema sintetizable permite que cuando una
operación cambie algún aspecto del sistema ese
cambio sea captado por el usuario
La notificación de esos cambios puede ser
Inmediata. Es la ideal. Muestra los cambios sin
necesidad de que el usuario lo solicite.
Eventual. Muestra los cambios si lo solicita el usuario.
Introducción a la Comunicación Persona-Máquina
14
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Familiaridad
Es la correlación que existe entre los conocimientos que posee el usuario y los
conocimientos requeridos para la interacción en un sistema nuevo
Se facilita en gran medida empleando metáforas del mundo real a las que el usuario ya
está acostumbrado.
Introducción a la Comunicación Persona-Máquina
15
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Consistencia
Implica que todos los mecanismos tienen que ser usados de la misma manera sea cuando
sea que se utilicen.
Es un principio fundamental en el diseño de interfaces
Cara a garantizar la consistencia es necesario
Emplear guías de estilo (siempre que sea posible)
No cambiar aquellas cosas que no es necesario cambiar (Ej. técnicas de interacción)
Al añadir nuevas técnicas evitar cambiar las que el usuario ya conoce (ej. F1 para la ayuda)
Introducción a la Comunicación Persona-Máquina
16
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Flexibilidad
Hace referencia a las diferentes formas en las que el usuario y
el sistema intercambian información
Principios que contribuyen
Iniciativa en el diálogo
Migración de tareas
Capacidad de sustitución
Capacidad de configuración
Introducción a la Comunicación Persona-Máquina
17
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Iniciativa en el diálogo
Está relacionado con quien lleva la iniciativa en el diálogo
entre el usuario y la aplicación (sistema)
Lo ideal es que la tenga el usuario
Ejemplo de interacción guiada por el sistema
Cuadro de diálogo modal, ya que impide al usuario utilizar ninguna otra
ventana de la aplicación hasta que no se cierre.
Introducción a la Comunicación Persona-Máquina
18
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Capacidad de Configuración
Es la posibilidad de adecuar la
interfaz de usuario bien por parte
del usuario o bien por parte del
propio sistema
Introducción a la Comunicación Persona-Máquina
19
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Solidez
La solidez de una interacción incluye las características para
poder cumplir los objetivos y su evaluación
Principios que contribuyen
Capacidad de observación
Capacidad de recuperación
Tiempos de respuesta
Adecuación de las tareas
Introducción a la Comunicación Persona-Máquina
20
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Observabilidad
Permite al usuario evaluar el estado interno del
sistema por medio de su representación percibida
en la interfaz
Introducción a la Comunicación Persona-Máquina
21
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Recuperabilidad
Hace referencia a la capacidad de
conseguir el objetivo deseado después de
reconocer un error en la interacción
Borrar Fichero:
Difícil de deshacer
“Principio de esfuerzo proporcionado”
Si un efecto es difícil de deshacer entonces
también debe ser más difícil de llevar a
cabo
Renombrar Fichero:
Fácil de deshacer
Introducción a la Comunicación Persona-Máquina
22
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tiempos de respuesta
Representa el tiempo que necesita el sistema para expresar los
cambios de estado al usuario
Han de ser lo menores posible
En caso de que no lo sean, es necesario notificar al usuario que se ha recibido
su petición y que se está trabajando en ella
Introducción a la Comunicación Persona-Máquina
23
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Adecuación de las tareas
Hace referencia al grado en que el sistema soporta todas las
tareas que el usuario quiere hacer y la manera en que el
usuario las comprende
Introducción a la Comunicación Persona-Máquina
24
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Factores que afectan a la CPM
Factores Organizativos
Factores del Entorno
Motivación, satisfacción, personalidad, nivel de experiencia
Factores de Confort
Stress, dolores de cabeza, desordenes musculares
Factores de Capacidad y Proceso Cognitivo del Usuario
Ruidos, ventilación, calefacción, iluminación, ventilación
Factores de Salud y Seguridad
Entrenamiento, diseño del local de trabajo, política, cargos, organización del
trabajo
Silla, diseño del equipamiento
Interfaz de Usuario
Dispositivos de entrada, pantallas de salida, estructuras de dialogo, uso del
color, iconos, ordenes, gráficos, lenguaje natural, 3-D, materiales de soporte
del usuario, multimedia
Mª del Carmen Suárez Torrente
Introducción a la Comunicación Persona-Máquina
...
25
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Disciplinas que contribuyen
Diseño Gráfico
Programación
Sociología
Inteligencia
Artificial
CHM
Psicología
Ingeniería del
Software
Ergonomía
Introducción a la Comunicación Persona-Máquina
26
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ingeniería del Software
1
A n á lis is y
d e f in ic ió n d e lo s
r e q u e r im ie n t o s
2
D is e ñ o d e l s is te m a
y d e l S o f tw a re
3
I m p le m e n ta c ió n y
te s t u n it a r io
4
In t e g r a c ió n y te s t
d e l s is te m a
Introducción a la Comunicación Persona-Máquina
27
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ingeniería del Software (II)
Pensar como usuario
90% de cualquier técnica de diseño es forzar al diseñador a recordar que alguien
más que él usará el sistema
Poner a prueba
Implicar a los usuarios
Observando su práctica habitual de trabajo
Incluyéndolos en el equipo de diseño
Hacer el proceso de diseño iterativo
Prototipos. Sistemas de prueba que simulan o tienen
implementadas partes del sistema final
Introducción a la Comunicación Persona-Máquina
28
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ergonomía
Es el estudio de las características físicas de la
interacción : entorno físico del puesto de trabajo,
forma y características físicas de la pantalla, etc.
Introducción a la Comunicación Persona-Máquina
29
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ergonomía (II)
Organización de los controles y las pantallas
Entorno físico de la interacción
Colores
Aspectos de salud
Introducción a la Comunicación Persona-Máquina
30
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ergonomía
(III)
Organización de los controles y las pantallas
Los controles y la información
deben estar organizados para
permitir un acceso rápido al
usuario. Posibles agrupaciones:
Funcional . Se agrupan controles e
información funcionalmente
relacionados.
Secuencial. Se agrupan reflejando el
orden de uso en una interacción típica
Frecuencia. Se agrupan de acuerdo a
su frecuencia de uso. Los más usados
deben ser los más fácilmente accesibles.
Introducción a la Comunicación Persona-Máquina
31
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ergonomía
(IV)
Aspectos de salud
Afectan a la calidad de la interacción y a las prestaciones de
los usuarios
Posición física
Temperatura
Iluminación
Ruido
Tiempo
Introducción a la Comunicación Persona-Máquina
32
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Sociología
Es la ciencia que estudia las costumbres y tradiciones de los
pueblos.
Muchas compañías están convencidas que las herramientas
de investigación etnográfica(observación detallada,
documentación sistemática,...) pueden responder a
cuestiones sobre organizaciones y mercados que otros
métodos no pueden.
Introducción a la Comunicación Persona-Máquina
33
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Inteligencia Artificial
Diseña programas que simulen diferentes aspectos del
comportamiento de la inteligencia humana
•
•
•
Tutores y Sistemas Expertos
Interfaces de Lenguaje Natural empleando la voz
...
Introducción a la Comunicación Persona-Máquina
34
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Psicología
Contribuye a CHM mediante conocimientos y teorías acerca
de cómo los sujetos
se comportan
procesan la información y
actúan en grupos y organizaciones
También proporciona metodologías y herramientas para
evaluar y determinar el grado de satisfacción de los usuarios
con nuestros diseños.
Proporciona, por tanto, una forma de comprobar que nuestros
interfaces son tan efectivos como deseamos.
Introducción a la Comunicación Persona-Máquina
35
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
El Factor Humano
n
Introducción
n
Canales de entrada y salida
n
n
Ejemplos de restricciones impuestas por la visión
Memoria
n
Tipos
n
Repercusión para CPM
Introducción a la Comunicación Persona-Máquina
36
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
A la hora de diseñar una interfaz de usuario hay que tener
en cuenta los factores humanos
Para ello es necesario conocer como trabajan nuestras
mentes, como pensamos, como recordamos y como
aprendemos. Esto lo estudia la psicología cognitiva.
Introducción a la Comunicación Persona-Máquina
37
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción (II)
La Psicología cognitiva estudia como
comprender y representar la manera en la que los
seres humanos interaccionan con el ordenador.
Introducción a la Comunicación Persona-Máquina
38
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción (III)
Modelo de procesamiento humano
Representa una visión simplificada del procesamiento
humano involucrado en la interacción con los ordenadores.
Comprende tres subsistemas:
Sistema perceptual, maneja los estímulos sensoriales del mundo
exterior
Sistema motor, controla las acciones
Sistema cognitivo, proporciona el procesamiento necesario para
conectar los dos
Introducción a la Comunicación Persona-Máquina
39
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Canales de Entrada y Salida
En una interacción con el ordenador el usuario recibe información que es
generada por el ordenador, y responde proporcionando una entrada al
ordenador
La entrada en el ser humano se produce a través de los sentidos:
Vista
Oído
Tacto
Olfato
Gusto
Básicos
La salida se produce mediante el movimiento de los dedos, extremidades,
ojos, cabeza y el sistema vocal
Introducción a la Comunicación Persona-Máquina
40
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Restricciones
Impuestas por el sistema visual
Tamaño de letra >= 12
Espaciado proporcional entre líneas
Fuentes no complicadas
No mayúsculas
Texto
Introducción a la Comunicación Persona-Máquina
41
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
El color
Todos
Sin azul
Introducción a la Comunicación Persona-Máquina
Sin rojo
42
Sin verde
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Restricciones (II)
Impuestas por el sistema visual
Color
Elegir combinaciones de colores compatibles. Evitar rojoverde, azul-amarillo, verde-azul, rojo-azul
Evitar colores brillantes en grandes porciones de la
pantalla
Usar códigos redundantes (ej. formas) ya que hay
muchas enfermedades que afectan a la visión:
daltonismo (8% de los hombres y 1% de las mujeres).
Introducción a la Comunicación Persona-Máquina
43
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
La Memoria Humana
Existen tres tipos de memoria que interactuan:
Almacenamiento sensorial
Almacén de memoria a corto plazo
Almacén de memoria a largo plazo
Almacenamiento
sensorial
Introducción a la Comunicación Persona-Máquina
Almacén de
memoria a
corto plazo
44
Almacén de
memoria a
largo plazo
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Almacenamiento Sensorial
Existe uno para cada sentido
Es constantemente actualizado con nueva información
La información que están procesando estos almacenes es la que reciben sin
prestar atención
Cuando ocurre algo que ocasione que se le presté más atención esa
información es trasladada a la memoria a corto plazo.
Una estimulación constante y repetida cansa los mecanismos sensoriales y
hace que seamos menos capaces de percibir cambios. (HABITUACIÓN).
Hay que evitar la habituación. Ej. una pantalla cuyo fondo parpadea todo el
tiempo.
Introducción a la Comunicación Persona-Máquina
45
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Memoria a Corto Plazo (MCP)
Es la memoria de trabajo
Características
Es la que se emplea, por ejemplo, al multiplicar mentalmente 35x6
Tiene una capacidad limitada de tiempo y cantidad (7+2 elementos)
La velocidad de acceso es elevada
Técnicas para estimular la MCP
Ensayo (repetir constantemente un número de teléfono, un número de
dni, ...)
Trocear o partir la información (agrupar porciones de información por
asociación, orden, significado...)
Introducción a la Comunicación Persona-Máquina
46
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Memoria a Corto Plazo (II)
Es necesario tener en cuenta las limitaciones de la
memoria a corto plazo a la hora de diseñar
interfaces:
Evitando diseñar interfaces en las que sea necesario
recordar información de una pantalla a otra o haya
que volver a teclearla
Proporcionando elementos que alivien la carga de la
(MCP)
Deshacer y rehacer
Mantener los últimos datos introducidos
Cortar, copiar y pegar del portapapeles
Introducción a la Comunicación Persona-Máquina
47
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Memoria a Largo Plazo (MLP)
Es un almacén de
Capacidad y duración ilimitada
Velocidad de acceso baja
Su principal problema es la recuperación de la información
almacenada
Técnicas para estimular la MLP
Acudir al reconocimiento
Introducción a la Comunicación Persona-Máquina
48
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Memoria a Largo Plazo (II)
Es necesario diseñar interfaces teniendo en
cuenta las limitaciones de la MLP.
Para ello es conveniente acudir al
reconocimiento:
Ej. Poner los ShortCuts al lado de las opciones de
menú que representan.
Emplear listas y menús para seleccionar en vez de
campos donde los usuarios tengan que teclear la
información
Emplear ‘tooltips’ y ayuda sensible al contexto
para ayudar a reconocer la información
Opción de volver a las opciones por defecto del
sistema
Introducción a la Comunicación Persona-Máquina
49
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
2. Interfaces Gráficas de Usuario:
Principales Elementos
Introducción a la Comunicación Persona-Máquina
50
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
2. Contenidos
n
Operaciones con teclado
n
Componentes básicos
n
Componentes para texto
n
Menús
n
Contenedores
n
Diálogos
n
Tablas
n
ToolTips
Introducción a la Comunicación Persona-Máquina
51
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Operaciones con Teclado
Recomendaciones para el uso de operaciones de teclado:
Empleo de Mnemotécnicos
Empleo de Shortcuts
Navegación y activación por teclado
Introducción a la Comunicación Persona-Máquina
52
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Mnemotécnicos
Es una letra subrayada que
aparece típicamente en un título o
en un elemento de menú, en el
texto de un botón, etc.
La letra subrayada recuerda al
usuario como activar el comando
equivalente:
“ Presionar la tecla ALT y el
carácter subrayado”
Introducción a la Comunicación Persona-Máquina
53
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Mnemotécnicos (II)
Algunas propiedades y métodos relacionados con los Mnemotécnicos
Propiedades para asignar mnemotécnicos en tiempo de diseño
mnemonic para botones, checkboxes, radio botones, botones de conmutación y títulos y
elementos de menú
displayedMnemonic, para etiquetas
Métodos para asignar mnemotécnicos en tiempo de ejecución
setMnemonic, para botones, checkboxes, radio botones, botones de conmutación y títulos y
elementos de menú
setDisplayedMnemonic, para etiquetas
Introducción a la Comunicación Persona-Máquina
54
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Mnemotécnicos (III)
Elegir mnemotécnicos evitando conflictos
Ej. No se puede emplear C, como mnemotécnico, para las dos opciones: Cortar y
Copiar
A la hora de asignar mnemotécnicos hay que seguir las siguientes guías:
Elegir la primera letra del elemento de menú
Si la primera letra entra en conflicto con la de otro elemento de menú hay que elegir
una consonante prominente (T,X, Z,...)
Ej. Para cortar la t (Cortar)
Si la primera letra entra en conflicto y también entra el empleo de una consonante
prominente, entonces hay que elegir una vocal prominente
Introducción a la Comunicación Persona-Máquina
55
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Shortcuts (Atajos)
Es una secuencia de teclas que
activan una opción de menú
La combinación de teclas está
constituida por
El modificador Control (y
opcionalmente otro modificador
como Shift)
Y un carácter
Deben ser consistentes con los
ShortCuts empleados en la
plataforma
Ejemplo
Para copiar siempre Ctrl+C
Para imprimir Ctrl+P
...
Introducción a la Comunicación Persona-Máquina
56
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Foco de Teclado
A veces llamado “foco de entrada”
Indica la ventana activa o el componente donde tendrá efecto
la siguiente pulsación del usuario
Cuando se abre una ventana por primera vez hay que asignar
el foco al componente que normalmente es usado en primer
lugar.
Por lo general es el componente que aparece en la esquina superior
izquierda de la ventana.
Esta asignación es especialmente importante para aquellas personas
que sólo emplean el teclado para navegar por la aplicación (ej.
usuarios con problemas motores)
Introducción a la Comunicación Persona-Máquina
57
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Foco de Teclado (II)
Algunas propiedades y métodos relacionados con el foco
Propiedades de los componentes
requestFocusEnabled
True, puede recibir el foco
False, no puede recibir el foco
nextFocusableComponent, permite señalar cual es el siguiente componente en
recibir el foco.
Métodos
requestFocus, asigna el foco al componente que lo invoca
getNextFocusableComponent, devuelve el siguiente componente que puede recibir
el foco
setNextFocusableComponent, especifica cual es el siguiente componente en recibir
el foco después de éste (el que lo está invocando). Hay que especificar para cada
componente cual es el siguiente en la secuencia.
Introducción a la Comunicación Persona-Máquina
58
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Foco de Teclado (III)- Ejemplo
jTextField1
Foco
click
jTextField1.requestFocus();
Introducción a la Comunicación Persona-Máquina
59
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Navegación y Activación por
Teclado
La navegación y activación por teclado permite a los usuarios
mover el foco desde un componente de la interfaz a otro por
medio del teclado
Tab-> mueve el foco entre los componentes
Shitf-Tab-> mueve el foco en la dirección inversa
Hay que asegurarse que todas las funciones de la aplicación
estén accesibles mediante teclado
Para ello desconectar el ratón y comprobarlo
Introducción a la Comunicación Persona-Máquina
60
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Componentes Básicos
Botones
Comando (Command)
Conmutación (Toggle)
Cajas de chequeo (Check Boxes)
Radio (Radio Buttons)
Combo Box
Listas
Slider
Barras de Progreso
Introducción a la Comunicación Persona-Máquina
61
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando (JButton)
Es un botón que puede contener texto, gráficos o ambos
Generalmente se emplea una única palabra para identificar la
acción que representa el botón:
Los botones que llevan texto deben tener asignado un
mnemotécnico
Para los que no llevan texto conviene asociarles tooltips que
describan su nombre o función
Introducción a la Comunicación Persona-Máquina
62
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando (II)
Los botones que sólo contienen texto, éste debe estar centrado
dentro del botón
Los botones que contienen texto y gráficos:
El texto debe ir colocado después o debajo del gráfico
Hay que incluir mnemotécnicos en el texto (excepto en el botón por
defecto y de cancelación)
Introducción a la Comunicación Persona-Máquina
63
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando (III)
Si el usuario debe visualizar un cuadro de diálogo para finalizar
la especificación de un comando iniciado con un botón de
comando puede emplear ... después del texto del botón
Click
Necesita más información
para completar la
ejecución
Introducción a la Comunicación Persona-Máquina
64
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando (IV)
Fijándonos en algunas propiedades interesantes de los botones de comando:
Relacionadas con la imagen
// imagen cuando el botón está en estado normal
// imagen si el botón está pulsado
//imagen cuando pasa el ratón por encima del botón
// imagen si el botón está seleccionado
background // color del fondo
foreground // color del texto
Relacionadas con la alineación
// imagen cuando el botón está deshabilitado
Relacionadas con el color
disabledIcon
icon
pressedIcon
rolloverIcon
selectedIcon
horizontalAligment y verticalAlignment-> alineación del contenido del botón
verticalTextPosition y horizontalTextPosition -> como está situado el texto respecto a la imagen
Otras
actionCommand
enabled
font
margin
mnemonic
nextFocusableComponent
text
toolTipText
Introducción
a la Comunicación Persona-Máquina
65
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando (V)
Botón por defecto:
Botón de cancelación:
Aparece en los cuadros de diálogo
Se activa cuando el usuario presiona Enter, y desencadena la ejecución de las
acciones asociadas a dicho botón (las realizadas más a menudo).
Una opción no segura (que ocasione la pérdida de datos) nunca puede ser el
botón por defecto.
Se activa al pulsar la tecla Escape y provoca la ejecución de las acciones
asociadas al botón identificado como de cancelación
A diferencia del anterior, es necesario implementar este comportamiento, es
decir, al pulsar la tecla Escape no se ejecuta automáticamente el código asociado
al botón de cancelación.
No deben proporcionarse mnemotécnicos para ninguno de estos botones.
Introducción a la Comunicación Persona-Máquina
66
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de conmutación(JToggleButton)
Es un botón que representa dos estados on y off
Al igual que un botón de comando puede incluir texto y gráficos
El gráfico y el texto han de ser los mismos independientemente
de que el botón esté on u off
Estos botones pueden emplearse para representar opciones
independientes (como checkboxes) y opciones exclusivas (como
radio botones)
Introducción a la Comunicación Persona-Máquina
67
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de conmutación (II)
Opciones independientes
Se comportan como un checkbox
Aunque se comporta igual que los checkboxes por lo general los checkboxes se
emplean en cuadros de diálogo y los botones de conmutación (con gráficos) en
las barras de herramientas (toolbars).
Opciones exclusivas
Un botón de conmutación puede emplearse como parte de un grupo para
representar una opción exclusiva dentro de un conjunto.
Los botones de conmutación agrupados pueden emplearse tanto en toolbars
como en cuadros de diálogo.
Introducción a la Comunicación Persona-Máquina
68
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de conmutación (III)
Fijándonos en algunas propiedades y métodos interesantes:
Propiedad
selected,
buttonGroup
True si él botón está ON
False si el botón está OFF
para agrupar los botones y garantizar que presenten opciones mutuamente
exclusivas
Métodos
isSelected, devuelve el estado del botón (true si está on)
setSelected, asigna un estado al botón
Introducción a la Comunicación Persona-Máquina
69
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
CheckBox
(JCheckBox)
Es un control que representa dos estados: on y off
Algunas propiedades y métodos interesantes:
Propiedades:
selected
buttonGroup
Métodos:
isSelected y setSelected
setMnemonic puede emplearse para asignar mnemotécnicos.
Introducción a la Comunicación Persona-Máquina
70
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Radio Botones
(JRadioButton)
Permiten seleccionar una única opción dentro de un conjunto de opciones
relacionadas
Sólo una opción puede estar seleccionada en cada momento
Aunque los radio botones y los botones de conmutación agrupados tienen la
misma función conviene emplear los radio botones en cuadros de diálogo.
Los botones de conmutación agrupados pueden emplearse tanto en los
cuadros de diálogo como en las barras de herramientas.
Propiedades y métodos relevantes son similares al CheckBox.
Introducción a la Comunicación Persona-Máquina
71
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Radio Botones (II)
Los botones de radio (al igual que los checkboxes) suelen aparecer a veces
agrupados, con una leyenda que indica a que hacen referencia:
Una forma para conseguir esta agrupación en Swing es mediante un panel
al que se le indica un borde y un título.
Introducción a la Comunicación Persona-Máquina
72
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Combo Boxes
(JComboBox)
Es un componente con una flecha que al hacer click sobre ella nos permite
seleccionar entre un conjunto de opciones mutuamente exclusivas
Hay que emplear capitalización para el texto de los ítems que aparecen en el
combo box.
Hay que facilitar el acceso por teclado, proporcionando etiquetas con
mnemotécnicos.
Introducción a la Comunicación Persona-Máquina
73
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Combo Boxes (II)
No Editables
A veces llamados List Boxes
Muestran una lista de la que el usuario puede elegir un elemento
Se suelen emplear en vez de un grupo de botones de radio cuando
El espacio en la aplicación es limitado y/o
El número de opciones posibles es grande
Editables
Combina un campo de texto con un botón (flecha) que se emplea para mostrar
una lista de opciones
El usuario puede teclear, seleccionar o editar texto
Se suelen emplear para ahorrar tiempo al usuario permitiéndole teclear
directamente un valor (además de por supuesto seleccionarlo de la lista)
Introducción a la Comunicación Persona-Máquina
74
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Combo Boxes (III)
Algunas propiedades y métodos interesantes:
Propiedades
editable // indica si el Combo es Editable o no
Métodos
addItem // añade un nuevo ítem al Combo
getSelectedItem // devuelve el ítem seleccionado
Introducción a la Comunicación Persona-Máquina
75
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Combo Boxes - Ejemplo
// inicialización del contenido del ComboBox
private String[] contenidos = {"Caballito","Manzana","Naranja","Platano","Tiburon","Tomate","Trucha"};
...
private JComboBox jComboBox1 = new JComboBox(contenidos);
Cada vez que se selecciona un ítem de la lista
String nombre= (String) jComboBox1.getSelectedItem();
jTextField1.setText("Esto es un " + nombre);
jLabel2.setIcon(new ImageIcon("imagenes/"+nombre+".gif"));
Introducción a la Comunicación Persona-Máquina
76
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Listas
(JList)
Es un componente que muestra un conjunto de ítems de texto,
gráfico o ambos.
Permite tres modos de selección
Ítem sencillo
Rango simple
Rangos múltiples
Introducción a la Comunicación Persona-Máquina
77
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Listas (II)
Algunas propiedades y métodos interesantes:
Propiedades
selectionMode // indica el modo de selección (SINGLE_SELECTION, SINGLE_INTERVAL_SELECTION,
MULTIPLE_INTERVAL_SELECTION)
Métodos
getSelectedValue // devuelve el valor seleccionado para la selección simple
getSelectedIndex
getSelectedValues
getSelectedIndices
getModel
Introducción a la Comunicación Persona-Máquina
78
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Listas - Ejemplo
// inicialización del contenido de la lista
private String[] contenidos={"Juan Fernández", "Sonia Álvarez","Javier Martínez","Isabel Suáres",
"Raquel Rodríguez","Enrique González"};
...
private JList jList1 = new JList(contenidos);
Cada vez que se selecciona un ítem de la lista
jTextField1.setText((String)jList1.getSelectedValue());
Introducción a la Comunicación Persona-Máquina
79
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Sliders
(JSlider)
Permiten al usuario seleccionar un valor numérico entre un rango continuo o
discontinuo de valores.
La posición del indicador refleja el valor actual
Si el slider representa un rango continuo de valores o un gran número de
valores discretos y el valor elegido es importante que sea exacto, hay que
proporcionar un campo de texto donde se pueda mostrar el valor
seleccionado. Es conveniente en estos casos dar a los usuarios la opción de
teclear directamente el valor.
Introducción a la Comunicación Persona-Máquina
80
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Sliders (II)
Algunas propiedades y métodos interesantes:
Propiedades
maximum y minimum // (valor máximo y mínimo)
majorTickSpacing y minorTickSpacing // espaciado entre las marcas grandes y pequeñas
paintTicks // muestra las marcas
paintLabels // muestra las etiquetas
Orientation // horizontal o vertical
Métodos
getValue // devuelve el valor seleccionado
createStandardLabels // crea las etiquetas estándar (números)
setLabelTable // asigna las etiquetas al Slider
Introducción a la Comunicación Persona-Máquina
81
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Sliders - Ejemplo
//crea las etiquetas estándar(numéricas) y las asigna al slider
jSlider1.setLabelTable(jSlider1.createStandardLabels(50));
. . .
Cada vez que se desplaza el slider
jTextField1.setText(Integer.toString(jSlider1.getValue()));
Introducción a la Comunicación Persona-Máquina
82
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Progress Bar
(JProgressBar)
Permiten indicar que una o más operaciones están bajo
desarrollo, mostrando al usuario que parte de la operación ha
sido completada.
El usuario no puede interactuar con una barra de progreso
Puede emplearse con un texto que indique por ejemplo el
porcentaje completado
Introducción a la Comunicación Persona-Máquina
83
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Progress Bar (II)
Algunas propiedades y métodos interesantes:
Propiedades
maximum y minimum // valor máximo y minimo
stringPainted // indica si se pintará una cadena en vez de un porcentaje numérico en la barra de progreso
string // cadena que aparecerá en la barra de progreso
Métodos
setValue // asigna un valor a la barra de progreso
setString // asigna la cadena que aparecerá en la barra de progreso
Introducción a la Comunicación Persona-Máquina
84
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Progress Bar - Ejemplo
cont=cont+10;
jProgressBar1.setValue(cont);
Introducción a la Comunicación Persona-Máquina
85
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Componentes para Texto
Permiten a los usuarios ver y editar texto en una
aplicación
Posibilidades
Label
Text Field
Password Field
Text Area
...
Introducción a la Comunicación Persona-Máquina
86
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Label
(JLabel)
Muestra texto, gráficos o ambos, pero de sólo lectura
No puede ser seleccionada por el usuario
El texto que contienen ha de ser breve y la terminología empleada ha
de ser familiar para los usuarios
La etiqueta ha de estar inactiva cuando el componente que describe
esté inactivo
Las etiquetas siempre deben ir antes o encima del componente que
describen. Para los lenguajes que leen de izquierda a derecha, antes
es a la izquierda del componente.
Hay que emplear la capitalización en el texto de la etiqueta y colocar :
al final del texto.
Introducción a la Comunicación Persona-Máquina
87
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Label (II)
Tiene dos funciones en una aplicación:
Identificar componentes
Comunicar el estado o dar instrucciones a los usuarios
Se pueden emplear mnemotécnicos en las etiquetas
(displayedMnemonic). Cuando el mnemotécnico es
activado, sitúa el foco en el componente que describe la
etiqueta (labelFor).
Propiedades interesantes
displayedMnemonic// para indicar el mnemotécnico
labelFor //para indicar el componente que está etiquetando
text // representa la leyenda de la etiqueta
Introducción a la Comunicación Persona-Máquina
88
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Text Field
Muestra una línea de texto. Puede ser
(JTextField)
Editable.Los usuarios pueden editar o escribir una línea de texto
simple.
No editable. Los usuarios pueden seleccionar y copiar el texto, pero no
pueden cambiarlo. El texto únicamente puede ser modificado por la
aplicación.
Para asociarle un mnemotécnico debe asociársele una
etiqueta.
Realizar acciones cuando el usuario
Teclee enter
Mueva el foco fuera de este campo
Introducción a la Comunicación Persona-Máquina
89
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Text Field (II)
Algunas propiedades y métodos interesantes:
Propiedades
editable // indica si es editable o no el TextField
text // valor que contiene
tooTipText // tooltip asociado
Métodos
setText // Asigna el valor a la propiedad Text del JTextField
Introducción a la Comunicación Persona-Máquina
90
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Password Field
(JPasswordField)
Es un Text Field editable que muestra unos caracteres
enmascarados en lugar de los caracteres que teclea el
usuario.
Es empleado en los cuadros de diálogo que se emplean
para entrar en un sistema.
Proporciona algunas de las capacidades de edición de un
Text Field pero no las operaciones de cortar y copiar.
Introducción a la Comunicación Persona-Máquina
91
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Password Field (II)
Algunas propiedades y métodos interesantes (además de los
vistos para el jTextField)
Propiedades
echoChar // para indicar el carácter de máscara
Métodos
setEchoChar //cambia el carácter de máscara
getPassword // devuelve el valor introducido en el PassworField. Se emplea en vez de del getText de
jTextField
Introducción a la Comunicación Persona-Máquina
92
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Text Area
(JTextArea)
Es un componente que proporciona un espacio rectangular
en el que los usuarios pueden ver, teclear y editar múltiples
líneas de texto.
Emplea fuentes, tamaño y estilo simple.
Para que aparezcan las barras de Scroll hay que colocar el
Text Area dentro de un Scroll Pane.
Introducción a la Comunicación Persona-Máquina
93
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Text Area (II)
Algunas propiedades y métodos interesantes:
Propiedades
lineWrap->True // cuando se llegue al borde escribiendo, salte de línea
wrapStyleWord-> True //rellena las líneas con espacios en blanco para justificar el texto.
Métodos
append // añade texto al final del documento
insert // añade texto en una posición específica
setFont //cambia el tipo de letra
getLineCount // devuelve el número de líneas contenidas en el TextArea
Introducción a la Comunicación Persona-Máquina
94
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús
Barras de Menú
Menús Drop-Down
Submenús
Menus Contextuales (pop-up)
Elementos de menú (menuItems)
Checkbox y Radio Menú Items
Menús Comunes (Archivo, Edición, Ayuda, …)
Introducción a la Comunicación Persona-Máquina
95
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús
Muestran una lista de opciones (menú ítems) que pueden ser
recorridas o seleccionadas por el usuario
Pueden ser:
Drop-down (menú cuyos títulos aparecen en una barra de menú )
Submenu
Contextuales
Introducción a la Comunicación Persona-Máquina
96
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Barras de Menú (JMenuBar)
Aparecen en la parte superior de una ventana primaria y contienen títulos
de menú que describen el contenido de cada menú
Los títulos del menú generalmente aparecen como texto pero es posible
que usen un gráfico o un gráfico con texto
No hay que mostrar barras de menú en una ventana secundaria salvo que
haya una razón justificada para ello
Hay que asegurarse de incluir mnemotécnicos para cada título de menú en
la barra
Hay que emplear palabras simples para los títulos de menú
Introducción a la Comunicación Persona-Máquina
97
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús drop-down
Un menú drop-down aparece cuando el usuario selecciona un título de
menú en la barra de menú
Las barras de menú contienen todos los menús drop-down y submenús de
la aplicación
Mª del Carmen Suárez Torrente
Introducción a la Comunicación Persona-Máquina
98
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Submenus
Son menús que los usuarios abren al hacer click o arrastrar el ratón
sobre un elemento de menú
También incluyen mnemotécnicos y shortcuts
Hay que evitar el uso de un segundo nivel de submenús
Si hay que presentar un conjunto de opciones grande o complejo será
conveniente emplear un cuadro de diálogo
Introducción a la Comunicación Persona-Máquina
99
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús Contextuales
(JPopupMenu)
También llamados menús pop-up
Ofrecen elementos de menú que son aplicables al objeto o
región en la que está localizado el puntero del ratón
Introducción a la Comunicación Persona-Máquina
100
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menus Contextuales
(JPopupMenu) (II)
Incluyen también mnemotécnicos y shortcuts, que además
deben ser coincidentes con las correspondientes opciones
empleadas en el menú drop-down.
Hay que asegurarse de que las características que se presentan
en un menú contextual están además disponibles en lugares
más visibles y accesibles, como por ejemplo en menús dropdown.
Introducción a la Comunicación Persona-Máquina
101
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menú (MenuItems)
Composición y Creación
Un ítem de menú (menú ítem) representa una orden u opción a realizar
(copiar, cortar, abrir,...)
Los ítems de los menús deben ser breves y aparecer en una única línea
Hay que incluir mnemotécnicos para todos los elementos de menú
Hay que ofrecer shortcuts para los ítems de menú empleados más
frecuentemente
Hay que emplear el mismo shortcut si el mismo elemento de menú aparece
en varios menús.
Introducción a la Comunicación Persona-Máquina
102
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menú (MenuItems)
Composición y Creación (II)
Se deben emplear (...) para indicar que el comando detallado por el
elemento de menú necesita más información para poder ser completado.
Ej. Guardar como...
No deben emplearse (...) para indicar que aparecerá otra ventana
secundaria o de utilidad.
Ej. Propiedades
Introducción a la Comunicación Persona-Máquina
103
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menú (MenuItems)
Disponibilidad
Si una característica de una aplicación no está disponible en una
ventana pero los usuarios pueden hacer algo para hacerla disponible,
hay que poner el elemento de menú como no disponible (enabled>false)
Si todos los ítems en un menú no están actualmente disponibles hay
que hacer el título de menú original como disponible de forma que
igualmente se puedan ver las opciones que contiene
Introducción a la Comunicación Persona-Máquina
104
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menú (MenuItems)
Disponibilidad (II)
En definitiva
Hacer un elemento de menú no disponible implica que el usuario puede
hacer alguna cosa para hacer el ítem disponible (enabled->true).
Esta regla debe aplicarse también a los ítems de submenus y de menús
contextuales
Introducción a la Comunicación Persona-Máquina
105
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menú (MenuItems)
Organización
Para ayudar al usuario a localizar opciones y a entender el conjunto de
posibilidades hay que emplear separadores
Si el número de elementos del menú es (o puede llegar a ser) muy grande
hay que emplear un grid layout de forma que se puedan mostrar las
opciones en múltiples columnas
Introducción a la Comunicación Persona-Máquina
106
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Checkbox Menú Items
Se emplean para presentar a los usuarios elementos de menú con opciones
no exclusivas
Hay que utilizarlos con cuidado, ya que cuando el usuario selecciona una opción el menú se
cierra. Para elegir otro ítem el usuario debe reabrir el menú
Por tanto, si los usuarios tienen que tomar más de una o dos de las opciones es
conveniente colocarlas en un cuadro de diálogo
Introducción a la Comunicación Persona-Máquina
107
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Radio Button Menú Items
Se emplean para presentar a los usuarios elementos de menú con opciones
exclusivas
Para indicar que los radio botones son parte de un conjunto hay que
agruparlos y emplear separadores que permitan distinguirlos de otros
elementos de menú
Al igual que con los checkbox menu items hay que utilizarlos con
precaución, y si el número de opciones a seleccionar es superior a dos hay
que presentar las opciones mediante un cuadro de diálogo
Introducción a la Comunicación Persona-Máquina
108
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Organización
Hay menús drop-down, tales como Archivo, Edición y Ayuda que se
utilizan en muchas aplicaciones
Si la aplicación necesita estos menús, usados típicamente, el orden de
colocación es:
Archivo, Objeto, Edición, Formato, Ver y Ayuda
Si es necesario añadir nuevos menús se harán entre Ver y Ayuda
A continuación se muestran los principales elementos (menú ítems) que
suelen llevar estos menús
Introducción a la Comunicación Persona-Máquina
109
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Archivo
Archivo
Muestra opciones que se aplican al
documento completo o a la aplicación
como un todo.
Si la aplicación no maneja ficheros a
esta primera opción se le puede dar
otro nombre siempre que
corresponda al tipo de objeto que
representa la aplicación. Ej. Proyecto
La opción de Salir cierra todas las
ventanas asociadas y finaliza la
aplicación
Introducción a la Comunicación Persona-Máquina
110
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Edición
Edición
Muestra ítems que permiten a los
usuarios cambiar o editar el contenido
de sus documentos u otros datos.
Introducción a la Comunicación Persona-Máquina
111
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Formato y Ver
Formato
Incorpora ítems que permiten a los usuarios cambiar el formato de los
elementos en sus documentos, como por ejemplo fuentes, tamaños, estilos, ....
Ver
Proporciona posibilidades para que los usuarios ajusten la visión de los datos
en una ventana
Introducción a la Comunicación Persona-Máquina
112
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Ayuda
Proporciona acceso (en línea) a información sobre las características de una
aplicación
Proporciona acceso al cuadro Acerca de, que muestra información básica sobre la
aplicación
El Acerca de incluye:
Nombre del producto
Versión
Logo de la compañía
Logo del producto
Nombre de los autores
Antes del Acerca de siempre hay un separador
Introducción a la Comunicación Persona-Máquina
113
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Contenedores
Barras de Herramientas (ToolBars)
Paneles (Panels)
TabbedPane
ScrollPane
Introducción a la Comunicación Persona-Máquina
114
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Barra de Herramientas
(JToolBar)
Proporcionan un acceso rápido y conveniente a un conjunto de opciones
empleadas con frecuencia
Por lo general contienen botones, pero pueden contener también otros
componentes (combo boxes, text fields,...)
Cuando se emplean con menús, van situadas inmediatamente debajo de
éste, e incluyen los elementos de menú empleados más frecuentemente en
forma de botones o componentes
Cuando se emplean sin menús, hay que prestar especial atención al tema de
la accesibilidad. Para ello hay que incluir texto en el botón y asegurarse de
proporcionar mnemotécnico para dicho texto
Introducción a la Comunicación Persona-Máquina
115
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Barra de Herramientas (II)
Por lo general aparecen dispuestas horizontalmente pero pueden ser
arrastradas a cualquier lugar de la ventana o a una ventana separada
Se puede especificar que la Toolbar se puede mover (propiedad floatable)
Introducción a la Comunicación Persona-Máquina
116
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Los Botones
de la Barra de Herramientas
Son botones de comando o de conmutación
Suelen emplear gráficos para especificar la operación que realizan
Los gráficos de los botones son de 16x16 o 24x24 pixels (aunque no deben
aparecer ambos en la misma barra de herramientas)
Para facilitar el acceso por teclado hay que definir mnemotécnicos para cada
botón de la Toolbar que tenga texto
Hay que incluir Tooltips para todos los elementos de la barra de
herramientas que no incluyen identificadores de texto
Introducción a la Comunicación Persona-Máquina
117
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Barra de Herramientas
(JToolBar)
Algunas propiedades y métodos interesantes:
Propiedades
floatable // ->True,
indica que el usuario puede arrastrar la toolbar. Para que funcione correctamente es
necesario que el contenedor en el que está la toolbar emplee BorderLayout.
Métodos
setFloatable
isFloatable
addSeparator // añade un separador al final de la toolbar
Introducción a la Comunicación Persona-Máquina
118
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Paneles (JPanel)
Es un contenedor que agrupa componentes dentro de una
ventana u otro panel
Los ‘layouts managers’ permiten posicionar visualmente los
componentes dentro de ellos
Se suelen emplear también para poner bordes a grupos de
componentes (ej. Radio Botones)
Introducción a la Comunicación Persona-Máquina
119
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Paneles (II)
Algunas propiedades y métodos interesantes:
Propiedades
border // permite especificar un borde para el panel y también un título
layout // especifica el tipo de layout a emplear sobre el panel
Métodos
add // añade un componente al panel
setLayout // asigna un layout manager para el panel
getComponentCount // indica el número de componentes en el panel
getComponents/ devuelve un array con referencias a los componentes que contiene el panel
Introducción a la Comunicación Persona-Máquina
120
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tabbed Pane
Introducción a la Comunicación Persona-Máquina
(JTabbedPane)
121
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tabbed Pane (II)
Es un contenedor que permite tener varios componentes
(normalmente paneles) compartiendo el mismo espacio
El usuario selecciona que componente desea ver seleccionando
la pestaña correspondiente
Las pestañas por lo general contienen texto, pero también
pueden contener imágenes o ambas cosas
Introducción a la Comunicación Persona-Máquina
122
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tabbed Pane (III)
Generalmente las pestañas aparecen en la parte superior. Sin embargo,
pueden aparecer también en la parte inferior, derecha o izquierda
(tabPlacement)
Si las pestañas no entran en una única fila automáticamente se crean
nuevas filas. Sin embargo, hay que evitar múltiples filas de pestañas. Si
fueran necesarias, es mejor acudir a una reorganización del contenido en
varios cuadros de diálogo o componentes
No se permiten tabbed pane anidados
Hay que emplear mnemotécnicos en las pestañas
Usos adecuados de este componente:
Cuadros de diálogo de preferencias donde, por lo general, se requiere bastante
información y se dispone de poco espacio
Presentación de diferentes vistas de la misma información
…
Introducción a la Comunicación Persona-Máquina
123
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tabbed Pane (IV)
Algunas propiedades y métodos interesantes:
Propiedades
tabPlacement
// indica la ubicación de las pestañas:TOP,LEFT, BOTTOM, RIGHT
Métodos
addTab // añade una nueva pestaña al Tabbed Pane
getSelectedIndex // devuelve el índice de la pestaña seleccionada actualmente
getSelectedComponent // devuelve el componente actualmente seleccionado en el tabbed Pane.
setToolTipTextAt (int, String) // asigna un tooltip a la pestaña cuya posición se le indica
setIconAt (int, Icon) // asigna un icono a la pestaña cuya posición se le indica
setTitleAt (int,String) // asigna un título a la pestaña cuya posición se le indica
setEnabledAt (int,boolean) //habilita o deshabilita la pestaña cuya posición se le indica
Introducción a la Comunicación Persona-Máquina
124
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Paneles de Scroll
(JScrollPane)
Es un contenedor especializado que ofrece barras de desplazamiento (scroll)
horizontales y verticales y que permiten a los usuarios cambiar la parte
visible del contenido de las ventanas
Se puede especificar que las barras de Scroll (horizontales y verticales)
aparezcan siempre (ALWAYS) o bien solo cuando sean necesarias
(AS_NEEDED)
Propiedad: verticalScrollBarPolicy y horizontalScrollBarPolicy
Lo normal es que aparezcan cuando sean sean necesarias
Las barras de Scroll se obtienen cuando se coloca el componente dentro del
Scroll Pane
Introducción a la Comunicación Persona-Máquina
125
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Diálogos
JOptionPane
JFileChooser
JColorDialog
Introducción a la Comunicación Persona-Máquina
126
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Diálogos
Los diálogos son ventanas más limitadas que los Frames
Cada diálogo es dependiente de un Frame. Cuando el Frame es destruido
también lo son los diálogos dependientes
Los diálogos pueden ser
No modales. No impiden a los usuarios interactuar con la aplicación con la que
están, o con otras, mientras el cuadro esté abierto.
Modales. Impiden que los usuarios interactuen con la aplicación hasta que el
diálogo sea cerrado, sin embargo, no impiden la interacción con otras
aplicaciones mientras el diálogo está abierto.
Introducción a la Comunicación Persona-Máquina
127
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Diálogos (II)
En Swing hay varias clases que soportan los diálogos estándar:
JOptionPane
JColorChooser
JFileChooser
Todos ellos son modales
Para crear diálogos a medida, y que si se desea no sean modales, hay que
emplear la clase JDialog.
Introducción a la Comunicación Persona-Máquina
128
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JOptionPane
Permite crear y adaptar varias clases de diálogos, especificando por ejemplo
los iconos (propio, ninguno o uno de los cuatro estándar), el título y texto
de los diálogos y también el texto de los botones. Se puede especificar
también donde aparecerá sobre la pantalla
Los iconos estándar son: question, information, warning y error
Métodos estáticos principales:
showMessageDialog
showConfirmDialog
showInputDialog y
showOptionDialog // permite mayor personalización especificando por ejemplo el título de los botones
Introducción a la Comunicación Persona-Máquina
129
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JOptionPane.showMessageDialog
Muestra un cuadro de diálogo modal con un solo botón etiquetado como ‘Aceptar’
Permite especificar el mensaje, el icono y el título que muestra el diálogo
Ejemplos de uso:
JOptionPane.showMessageDialog(this, “Mensaje”);
JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.WARNING_MESSAGE);
JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.ERROR_MESSAGE);
JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.INFORMATION_MESSAGE);
JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.QUESTION_MESSAGE);
JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.PLAIN_MESSAGE);
Especifica el componente padre (parent). Por lo general
siempre es un frame (this) y por tanto el cuadro de
diálogo siempre aparece desplegado sobre el centro del
frame. Sin embargo, se puede especificar como parent
algún otro componente que esté dentro del frame
(ej. jButton) y esto hará que el cuadro de diálogo se
despliegue centrado sobre ese componente.
Introducción a la Comunicación Persona-Máquina
130
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JOptionPane.showConfirmDialog
Muestra un cuadro de diálogo modal para pedir una confirmación al usuario
Permite especificar el mensaje, el icono y el título que muestra el diálogo y el
número de botones (dentro de un conjunto fijo de ellos)
Ejemplos de uso:
int resp = JOptionPane.showConfirmDialog(this, “Mensaje”);
int resp = JOptionPane.showConfirmDialog(this,”Mensaje”,”Titulo”, JOptionPane.YES_NO_OPTION);
int resp = JOptionPane.showConfirmDialog(this,”Mensaje”,”Titulo”,JOptionPane.YES_NO_CANCEL_OPTION);
int resp = JOptionPane.showConfirmDialog(this,”Mensaje”,”Titulo”, JOptionPane.OK_CANCEL_OPTION);
int resp = JOptionPane.showConfirmDialog(this,”Mensaje”,”Titulo”, JOptionPane.DEFAULT_OPTION);
if (resp == JOptionPane.YES_OPTION) {
. . .
}
Introducción a la Comunicación Persona-Máquina
131
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JOptionPane.showInputDialog
Muestra un cuadro de diálogo modal que toma una cadena introducida por el
usuario.
Este cuadro debe emplearse con bastante prudencia, ya que la validación del
dato sólo se puede realizar cuando se cierra el cuadro de diálogo.
Ejemplos de uso:
String valor = JOptionPane.showInputDialog(this, mensaje);
String valor = JOptionPane.showInputDialog(this,”Mensaje”,”Titulo”,JOptionPane.PLAIN_MESSAGE);
String valor = JOptionPane.showInputDialog(this,”Mensaje”,”Titulo”,JOptionPane.INFORMATION_MESSAGE);
String valor = JOptionPane.showInputDialog(this,”Mensaje”,”Titulo”,JOptionPane.WARNING_MESSAGE);
String valor = JOptionPane.showInputDialog(this,”Mensaje”,”Titulo”,JOptionPane.QUESTION_MESSAGE);
String valor = JOptionPane.showInputDialog(this,”Mensaje”,”Titulo”,JOptionPane.ERROR_MESSAGE);
Introducción a la Comunicación Persona-Máquina
132
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JFileChooser
Introducción a la Comunicación Persona-Máquina
133
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JFileChooser (II)
Es un componente que permite navegar por el sistema de ficheros y
seleccionar un fichero o conjunto de ficheros
Únicamente permite seleccionar el fichero, es responsabilidad del
programa tratarlo (abrirlo, guardarlo, imprimirlo,...)
Una de las posibilidades de trabajo con el JFileChooser viene del empleo de
los métodos siguientes que muestran un cuadro de diálogo modal:
showDialog
showOpenDialog
showSaveDialog
Introducción a la Comunicación Persona-Máquina
134
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JFileChooser (III)
• Ejemplo con el showOpenDialog
private JFileChooser jFileChooser1 = new JFileChooser();
. . .
if (jFileChooser1.showOpenDialog(this)==jFileChooser1.APPROVE_OPTION)
{
jTextField1.setText("APPROVE_OPTION");
jTextField2.setText(jFileChooser1.getSelectedFile().getName());
}
else
jTextField1.setText("CANCEL_OPTION");
showOpenDialog devuelve APPROVE_OPTION si se ha
seleccionado un fichero y se sale con la opción de Abrir, y
CANCEL_OPTION si se sale con la opción de Cancelar
Introducción a la Comunicación Persona-Máquina
135
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JFileChooser (IV)
Algunas propiedades y métodos interesantes:
Propiedades
dialogTitle // título para el diálogo
multiSelectionEnabled // permite múltiple selección de ficheros
Métodos
getSelectedFile // devuelve el fichero actualmente seleccionado
setCurrentDirectory // cambia el directorio
showDialog
showOpenDialog
showSaveDialog
Introducción a la Comunicación Persona-Máquina
136
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JColorChooser
Introducción a la Comunicación Persona-Máquina
137
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JColorChooser
Es una clase que proporciona a los usuarios una paleta de
colores donde pueden elegir un color
Una posible forma de uso es el empleo del método estático
showDialog que muestra un cuadro de diálogo modal
Si el usuario selecciona un color y pulsa el botón OK showDialog
devuelve el color, por el contrario, si el usuario cancela o cierra la
ventana showDialog devuelve null.
Introducción a la Comunicación Persona-Máquina
138
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Padre (parent) del
Componente
JColorChooser
Título del cuadro de
diálogo
Ejemplo
Color nColor = JColorChooser.showDialog (this,”Titulo”,jLabel1.getBackground());
If (nColor!= null)
jLabel1.setBackground(nColor); // asigna el color seleccionado en el cuadro a la etiqueta
Color inicialmente
seleccionado
Introducción a la Comunicación Persona-Máquina
139
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tablas (JTable)
Introducción a la Comunicación Persona-Máquina
140
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tablas (II)
Organizan la información en series de filas y columnas
No contienen ni almacenan datos, simplemente proporcionan una vista de
nuestros datos
Por defecto la celdas contienen un campo de texto, pero pueden contener
gráficos u otros componentes
Permiten a los usuarios redimensionar las columnas de la tabla
Permiten diferentes modelos de selección: no selección, una celda, un
conjunto de celdas, una fila,...
Se suelen insertar dentro de un Scroll Pane
Introducción a la Comunicación Persona-Máquina
141
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Tablas (III)
Algunas propiedades y métodos interesantes:
Propiedades
autoResizeMode // indica como actúa la tabla cuando se redimensionan las columnas (OFF, LAST_COLUMN, NEXT_COLUMN,…)
rowSelectionAllowed // permite la selección de filas
columnSelectionAllowed // permite la selección de columnas
cellSelectionEnabled // permite la selección de una celda
showHorizontalLines y showVerticalLines //permiten visualizar las líneas horizontales y verticales
selectionBackground // especifica el color de fondo de las celdas seleccionadas
selectionForeground // especifica el color del texto de las celdas seleccionadas
Métodos
getEditingColumn() // indica la columna de la celda que está siendo editada
getEditingRow() // indica la fila de la celda que está siendo editada
getValueAt(fila,columna) // devuelve el valor de la celda especificada por fila y columna
setValueAt (aValor,fila,columna) //asigna aValor para la celda especificada por fila y columna
Introducción a la Comunicación Persona-Máquina
142
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
ToolTips
Proporcionan información acerca de un componente o área
cuando el usuario se detiene sobre él
Suelen proporcionar una descripción corta de la función del
componente
Se especifican en el componente asociado (jbutton,
jtextfield,…)
Pueden emplearse con gráficos para ayudar a describirlos
Introducción a la Comunicación Persona-Máquina
143
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
ToolTips (II)
Los tooltips deben estar activos por defecto, pero hay que
proporcionar al usuario una manera de desactivarlos
Por ejemplo, presentando una opción (checkbox) en un cuadro de
diálogo de propiedades o preferencias
Introducción a la Comunicación Persona-Máquina
144
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
3. Estilos de Interacción y Metáforas
Introducción a la Comunicación Persona-Máquina
145
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
3. Contenidos
n
n
Estilos y Paradigmas de Interacción
n
Introducción
n
Estilos de Interacción
n
Paradigmas de Interacción
Metáforas
n
Introducción
n
Objetivos de los diseñadores
n
Metáfora de la Interfaz
Introducción a la Comunicación Persona-Máquina
146
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estilos y Paradigmas de Interacción
Introducción
Estilos de Interacción
Interfaz de línea de comandos
Menús y formularios
Manipulación directa
Interacción Asistida
Paradigmas de Interacción
Ordenador de Sobremesa
Entornos virtuales y realidad virtual
Computación ubicua
Realidad aumentada
Introducción a la Comunicación Persona-Máquina
147
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
Estilo de Interacción
Termino genérico para agrupar las diferentes maneras en que
los usuarios se comunican o interaccionan con el ordenador
Estilos predominantes son:
Interfaz por línea de comandos
Menús y formularios
Manipulación directa
Interacción asistida
Introducción a la Comunicación Persona-Máquina
148
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interfaz de línea de comandos
C:\Ejemplo>javac HolaMundo
Javac: invalid argument: HolaMundo
use: javac [-g] [-O] [-classpath path] [-d dir] file.java...
C:\Ejemplo>javac HolaMundo.java
C:\Ejemplo>java HolaMundo
¡¡Hola Mundo!!
C:\Ejemplo>
Introducción a la Comunicación Persona-Máquina
149
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Línea de comandos (II)
Fue el primer estilo de diálogo interactivo en ser
ampliamente utilizado
Indica instrucciones al ordenador directamente
mediante teclas de función, caracteres simples,
abreviaturas y comandos de palabra-completa
C:> dir *.*
Hoy en día representa un acceso suplementario a las
interfaces basadas en menús para usuarios expertos
Introducción a la Comunicación Persona-Máquina
150
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Línea de comandos (III)
Ventajas:
Es potente ya que ofrece acceso directo a la funcionalidad del sistema
Es flexible, ya que por ejemplo a un comando pueden aplicársele
muchos modificadores (ej. dir *.* /s /p...)
Desventajas:
Es difícil de aprender y carga la memoria del usuario
Requiere una memorización y entrenamiento importante
Introducción a la Comunicación Persona-Máquina
151
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús
Se muestran las opciones disponibles para el usuario en pantalla
La selección se hace mediante la tecla inicial, introduciendo el
número asociado o moviéndose mediante las teclas de cursor
Con el empleo de menús se intenta que el usuario tenga que
reconocer las opciones en vez de recordarlas.
Son ineficientes cuando tienen demasiados ítems
Introducción a la Comunicación Persona-Máquina
152
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús (II)
Las opciones deben ser significativas y estar agrupadas. El
problema principal es que ítems incluir y cómo agruparlos (no
por orden alfabético)
Serán utilizados en conjunción con otros estilos de interfaz
Introducción a la Comunicación Persona-Máquina
153
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús de Pantalla Completa
• El principal problema de estos menús de pantalla completa es que
ocupaban mucho espacio en la pantalla
Introducción a la Comunicación Persona-Máquina
154
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús de Barra
• Con el fin de resolver este problema surgieron los menús
desplegables (de barra) y los menús pop-up
Introducción a la Comunicación Persona-Máquina
155
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús en Cascada
Introducción a la Comunicación Persona-Máquina
156
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús Contextuales (Pop-Up)
Introducción a la Comunicación Persona-Máquina
157
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interfaces Manipulación Directa
Las pantallas gráficas de alta resolución y los dispositivos
apuntadores, como el ratón, han permitido la creación de los
entornos de manipulación directa
Estas interfaces suponen un cambio de una sintaxis de comandos
compleja, como es la de línea de comandos, a una manipulación
de objetos y acciones:
Selección iconos, botones, etc.
El entorno más común de manipulación directa es la interfaz WIMP
(Windows Icons Menus Pointers).
Introducción a la Comunicación Persona-Máquina
158
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interfaces Manipulación Directa (II)
Beneficios
Sintaxis mas sencilla, reduce los errores
Aprendizaje más rápido y mejor retención
Incita a la exploración por parte del usuario
Problemas
Se necesitan más recursos
Introducción a la Comunicación Persona-Máquina
159
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interfaces Gráficas –
WIMP (Windows Icons Menus Pointers)
Características principales:
Posee un monitor gráfico de alta resolución y un dispositivo apuntador
(generalmente ratón)
Incorpora elementos de interfaz estándar como ventanas, iconos,
menús y diálogos.
Existen controles gráficos (widgets) como campos de texto, etiquetas,
etc. para la selección e introducción de la información
Puede manipular en la pantalla directamente los objetos y la
información
Promueve la consistencia de la interfaz entre programas
Introducción a la Comunicación Persona-Máquina
160
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interfaces Gráficas - WIMP (II)
Emplean metáforas de la vida real que se adaptan al
modelo mental del usuario: escritorio, sala de juegos,
agenda, cámara, etc
Ej. Escritorio de Windows
Introducción a la Comunicación Persona-Máquina
161
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Interacción Asistida
Tiene como objetivo hacer los ordenadores más usables para la
gente a la que no le gusta la tecnología
Se basa en la metáfora de un asistente personal o agente que
colabora con el usuario en el mismo ambiente de trabajo para
facilitarle su trabajo
Puede provenir del empleo de
Agentes o de
Asistentes
Introducción a la Comunicación Persona-Máquina
162
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Agentes
Programa que ayuda al usuario. No se le considera una herramienta desde
el punto de vista de manipulación directa. Son programas que actúan en un
segundo plano.
Estos programas tienen que tener algunas de las características que
asociamos a la inteligencia humana: capacidad de aprender, inferencia,
adaptabilidad,.. Y su implementación es complicada.
Utilidad de los agentes
Liberar a los usuarios de tareas rutinarias tales como:
Copias de seguridad
Búsquedas de determinadas noticias
Introducción a la Comunicación Persona-Máquina
163
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Asistentes
Son entidades computacionales que nos asisten en el uso de las
aplicaciones existentes:
Exponen de una manera fácil que es lo que se ha de hacer
Pueden entender palabras escritas o habladas
Son bastante habituales en las aplicaciones actuales y a veces
tienen más de uno.
Ej. Asistente de PowerPoint, InstallAnywhere, etc.
Introducción a la Comunicación Persona-Máquina
164
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Paradigmas de interacción
Los paradigmas de interacción representan los ejemplos o
modelos de los que se derivan todos los sistemas de interacción
Los paradigmas interactivos actuales son:
Ordenador de Sobremesa
Entornos virtuales y realidad virtual
Computación ubicua
Realidad aumentada
Introducción a la Comunicación Persona-Máquina
165
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ordenador de sobremesa
Es el paradigma dominante actualmente
Características de la interacción
Se realiza aislada del entorno, sentado en una mesa con un
ordenador e interfaces de manipulación directa
Introducción a la Comunicación Persona-Máquina
166
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Entornos virtuales y realidad virtual
Describen una amplia variedad de estilos de interacción desde interfaces
tridimensionales con los que se puede interaccionar y actualizar en tiempo
real hasta sistemas en los que la sensación de presencia es prácticamente
igual al mundo real
Beneficios
Problemas:
Permiten realizar simulaciones imposibles de realizar en otro sitio
Alto coste
Cansancio del usuario
Ejemplos de uso de realidad virtual
Entrenamiento de operarios en una central nuclear
Entrenamiento de bomberos
Reconstrucciones virtuales de patrimonio histórico
Introducción a la Comunicación Persona-Máquina
167
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Entornos virtuales y realidad virtual (II)
Introducción a la Comunicación Persona-Máquina
168
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Computación ubicua
Mark Weisser (1991)
Trata de extender la capacidad computacional al entorno
del usuario
Permitiendo que la capacidad de información esté presente en
todas partes en forma que pequeños dispositivos muy diversos
conectados en red a servidores de información, y que permiten
interacciones de poca dificultad.
El diseño de estos dispositivos debe realizarse acorde a la
tarea objeto de la interacción
Introducción a la Comunicación Persona-Máquina
169
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáforas
Introducción
Objetivos de los diseñadores
Metáfora de la Interfaz
Tipos
Ejemplos
Introducción a la Comunicación Persona-Máquina
170
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
El diseñador de una aplicación software, con una interfaz de usuario ,se encarga
de describir los objetos con los que trabaja el usuario, su presentación al
usuario, así como las técnicas de interacción empleadas para manipular los
objetos por parte del usuario.
Se identifican, por tanto, tres grandes apartados en su trabajo:
Presentación (look)
Interacción (feel)
Hace referencia al color, animación, sonidos, gráficos, texto, etc. empleados para presentar la información al usuario
Representa el 10% del trabajo del diseñador
Hace referencia a las diferentes formas en que se puede interaccionar con la aplicación (sólo teclado, teclado y ratón,
permite otros dispositivos como trackball, joystick, etc). También incluye la realimentación (mensajes, avisos,..) que el
sistema da a las acciones de los usuarios.
Representa el 30% del trabajo del diseñador
Interrelaciones entre objetos
Incluye la selección de las metáforas a emplear para encajar con el modelo mental del usuario
Mª del Carmen Suárez Torrente
Representa el 60% del trabajo del diseñador
Ana Belén Martínez Prieto
171
Introducción a la Comunicación Persona-Máquina
Juan Manuel Cueva Lovelle
Introducción (II)
Presentación
10%
Interacción
30%
60%
Interrelaciones entre Objetos
Look and Feel Iceberg Chart (D. Liddle)
Introducción a la Comunicación Persona-Máquina
172
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Objetivos de los Diseñadores
El objetivo principal de los diseñadores es diseñar y facilitar el
proceso de desarrollo de un modelo mental efectivo en los
usuarios
Para ello tratan de transferir el conocimiento del mundo real
que les rodea al mundo de los ordenadores de forma que a los
usuarios les resulte más sencillo interactuar con el ordenador
Para ello los diseñadores acuden al empleo de
Metáforas en la Interfaz
Introducción a la Comunicación Persona-Máquina
173
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáfora de la Interfaz
El término metáfora está tradicionalmente asociado con
el uso del lenguaje
En el diseño de interfaces actuales las metáforas tienen
un papel dominante
Los diseñadores adoptan metáforas porque ayudan a
representar la interfaz en términos más familiares y
comunes del dominio
Introducción a la Comunicación Persona-Máquina
174
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáfora de la Interfaz. Tipos
Hay diferentes tipos de metáforas
Verbales
Visuales
...
Introducción a la Comunicación Persona-Máquina
175
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáforas Verbales
Son metáforas empleadas de forma verbal (hablada) a las que acudimos cuando
nos encontramos con una nueva herramienta tecnológica y queremos
compararla con alguna cosa ya conocida
Ejemplos
Cuando se utiliza un ordenador por primera vez se compara metafóricamente con una
máquina de escribir
Cuando se quiere explicar el funcionamiento de los ficheros se acude a la metáfora de
funcionamiento de un archivador real
Las metáforas verbales pueden ser herramientas útiles para ayudar a los
usuarios a iniciarse en el aprendizaje de un nuevo sistema
Introducción a la Comunicación Persona-Máquina
176
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáforas Visuales - Orígenes
Representan un paso más que las interfaces verbales
Xerox fue de las primeras empresas que se dio cuenta de la importancia de
diseñar interfaces simulando el mundo físico concreto con el que estamos
familiarizado, y en los 70 desarrolló una interfaz visual basada en la oficina física.
El primer proyecto, liderado por Alan Key, fue un fracaso comercial.
En 1984, y tras varios intentos apareció el Macintosh alcanzando un éxito
excepcional debido a su facilidad de uso.
Con posterioridad ya fue aplicado a los ordenadores personales Windows para
MSDOS, Presentation Manager para OS/2, y en las estaciones de trabajo UNIX
con los sistemas X-Windows.
Introducción a la Comunicación Persona-Máquina
177
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáforas Visuales
Las metáforas visuales pueden variar desde pequeñas imágenes
puestas en los botones hasta pantallas completas en algunos
programas.
Inconvenientes de las metáforas:
Las metáforas se basan en asociaciones percibidas de manera similar por el
diseñador y por el usuario final de la aplicación.
Si el usuario no tiene la misma base cultural que el desarrollador es fácil que
la metáfora falle. Incluso teniendo la misma base puede haber faltas de
comprensión importantes
Introducción a la Comunicación Persona-Máquina
178
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplos de Metáforas
Introducción a la Comunicación Persona-Máquina
179
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Es una metáfora
que nos da el marco
para todas las otras
metáforas del
sistema
Metáfora de Escritorio
Fue la primera metáfora global y está siendo utilizada
prácticamente en todas las interfaces gráficas
La idea era reproducir una sobremesa de oficina y todos los objetos
que tenemos en ella y en sus alrededores.
La base de la metáfora consiste en crear objetos electrónicos que
simulan los objetos físicos en una oficina, lo que incluye papel,
carpetas, bandejas, archivadores,etc.
Fijémonos por ejemplo en las carpetas
Introducción a la Comunicación Persona-Máquina
180
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Metáfora de Escritorio (II)
En esta metáfora del escritorio, los ficheros y las carpetas se transforman en
representaciones gráficas en substitución de entidades abstractas con nombres
arbitrarios (tal y como ocurría en MS-DOS).
En la metáfora de las carpetas hay que tener en cuenta que:
Las carpetas son contenedores de documentos en el mundo real y en el virtual:
Puedes abrir una carpeta para coger o dejar alguna cosa
Se pueden poner carpetas dentro de carpetas
Se pueden mover las carpetas por todo el escritorio
Sin embargo, también tienen propiedades mágicas
Se puede poner el mismo documento en dos carpetas a la vez
Se puede reproducir un conjunto de carpetas y sus documentos automáticamente
Se pueden ordenar las carpetas por orden alfabético, etc.
Introducción a la Comunicación Persona-Máquina
181
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Agenda
Introducción a la Comunicación Persona-Máquina
182
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Cortar
Se emplear para cortar un trozo de documento, una parte de un
dibujo,...
Introducción a la Comunicación Persona-Máquina
183
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Papelera
Idea habitual en la mayoría de las culturas avanzadas. Sirve para
depositar todos los papeles u otros elementos que no nos sirven y
después tirarlos como basura.
Esto nos permite ver una papelera que permite reciclar los objetos
que ponemos en ella.
Introducción a la Comunicación Persona-Máquina
184
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pintar
El bote de pintura es muy común y de fácil comprensión.
El hecho de que el bote de pintura se esté vaciando es para hacer
comprender al usuario que lo que hace es llenar de color un
determinado objeto.
Introducción a la Comunicación Persona-Máquina
185
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Correo
Elemento habitual en nuestra cultura que nos sirve para enviar
información escrita con papel a un destinatario.
Utilizamos esta metáfora para la mensajería de correo electrónico.
Introducción a la Comunicación Persona-Máquina
186
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
4. Guías y Estándares
Introducción a la Comunicación Persona-Máquina
187
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
4.Contenidos
n
Introducción
n
Principios
n
Reglas
n
n
Estándares
n
Clasificación
n
Organismos implicados
n
Ejemplos
Guías
n
De estilo
n
Ejemplos
Introducción a la Comunicación Persona-Máquina
188
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
Es necesario que los diseñadores (nosotros) cuenten con
ayuda a la hora de diseñar una interfaz de usuario.
Esta ayuda a los diseñadores les viene dada en forma de:
Principios y
Reglas
Introducción a la Comunicación Persona-Máquina
189
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Principios
Están basados en ideas de alto nivel y de aplicación muy
general.
Son bastante abstractos.
Principios son, por ejemplo, todos los vistos en el tema 2
(“Principios fundamentales para el diseño de IGU”). Algunos de
esos principios son:
Hay que mostrar texto y mensajes descriptivos
Hay que proporcionar realimentación al usuario
Hay que aliviar la memoria a corto plazo
...
Introducción a la Comunicación Persona-Máquina
190
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Reglas
Son más específicas que los principios y requieren menos
experiencia para entenderlas e interpretarlas.
Las reglas pueden clasificarse en
Estándares.
Son reglas altas en en autoridad. Es decir, lo que dicen es obligatorio
cumplirlo.
Guías de Estilo.
Son reglas que sugieren en vez de obligar.
Introducción a la Comunicación Persona-Máquina
191
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estándares
Un estándar es un requisito, regla o recomendación basada en
principios probados y en la práctica.
Representa un acuerdo de un grupo de profesionales oficialmente
autorizados a nivel local, nacional o internacional
El objetivo de los estándares es hacer las cosas más fáciles
definiendo características de objetos y sistemas que se utilizan
cotidianamente:
Teclado de ordenador (QWERTY)
El trabajar con un ordenador sería sumamente costoso si, por ejemplo, cada
fabricante de teclados colocase las teclas en su teclado de una forma distinta.
Teclado del teléfono
Introducción a la Comunicación Persona-Máquina
192
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estándares (II)
Los estándares pueden abarcar aspectos de
hardware y de software
Los estándares para hardware suelen reflejar la
importancia de la ergonomía en las interfaces de
usuario.
Ej. La inclinación del teclado debe estar entre 0 y 25 grados
Introducción a la Comunicación Persona-Máquina
193
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Comités implicados en la creación de Estándares
ISO (International Organization for Standardization , Organización Internacional para Estándares)
Es la que tiene más estándares publicados relacionados con la interfaz de
usuario
ANSI (American National Standards Institute, Instituto Nacional Americano para Estándares)
IEEE (Institute of Electrical and Electronics Engineers,Instituto de Ingenieros Eléctricos y
Electrónicos Americano. Asociación para Estándares)
CEN (Comité Européen de Normalisation ,Comité Europeo para la Estandarización)
W3C (Consorcio para el World Wide Web)
Publica recomendaciones para la web
Disponibilidad totalmente gratuita: http://www.w3c.org
...
Introducción a la Comunicación Persona-Máquina
194
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplos de Estándares
Uno de los estándares más conocidos relacionado con interfaces
de usuario es el Estándar ISO 9241 titulado “Requerimientos
ergonómicos para trabajo de oficina con terminales de
presentación visual “
Este estándar tiene como objetivo promover la seguridad y garantizar la
salud de los usuarios que trabajan con monitores de ordenadores. Incluye
tanto requisitos que ha de cumplir el software como requisitos que ha de
cumplir el hardware para conseguirlo.
Otro estándar, el ISO 9995, indica por ejemplo las características
de un teclado: distribución y etiquetas de las teclas, teclas de
edición, etc.
Introducción a la Comunicación Persona-Máquina
195
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Guías de estilo
Las guías especifican
Ej. Los RadioBotones
Cuándo usar los elementos y controles (widgets) de la interfaz
Cómo presentarlos
Y cuáles son las técnicas usadas para interaccionar con ellos
Deben emplearse para opciones mutuamente exclusivas
Suelen presentarse agrupados
Se pueden interaccionar con ellos presionándoles con el ratón o bien mediante teclado
empleando el mnemotécnico asociado.
La ventaja más evidente de las guías de estilo es que aseguran
una mejor usabilidad mediante la consistencia que imponen.
Introducción a la Comunicación Persona-Máquina
196
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Guías. Tipos
Las guías de estilo pueden ser:
Guías de Estilo Comerciales, diseñadas por las empresas de
software.
Las guías de estilo más relevantes son las creadas por las empresas
informáticas más importantes (Apple, IBM, Microsoft, Sun...). Cada
una de ellas ha publicado su guía de estilo propia.
Guías de Estilo Corporativas, confeccionadas por las
empresas para su propio uso.
Introducción a la Comunicación Persona-Máquina
197
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Guías de Estilo Comerciales
Sun
Sun desarrolló una guía de estilo conocida como “Java Look and Feel
Design Guidelines”, cuya segunda versión ha sido publicada en el
año 2001.
Dicha guía está disponible en Internet en la dirección
http://java.sun.com/products/jlf/guidelines.html
Lo principal de lo propuesto por esta guía se ha ido viendo en el
tema 2 a medida que se estudiaban los principales elementos de la
interfaz de usuario y es la que ha de seguirse a la hora de construir
una aplicación Java.
A continuación únicamente vamos a repetir algunas de las
indicaciones realizadas por la guía y que hemos visto en el tema 2,
así como algunas consideraciones relativas a los diálogos.
Introducción a la Comunicación Persona-Máquina
198
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de comando
Los botones que sólo contienen texto, éste debe estar centrado
dentro del botón
Los botones que contienen texto y gráficos:
El texto debe ir colocado después o debajo del gráfico
Hay que incluir mnemotécnicos en el texto (excepto en el botón por
defecto y de cancelación)
Introducción a la Comunicación Persona-Máquina
199
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Label
(JLabel)
Muestra texto, gráficos o ambos, pero de sólo lectura
No puede ser seleccionada por el usuario
El texto que contienen ha de ser breve y la terminología empleada ha
de ser familiar para los usuarios
La etiqueta ha de estar inactiva cuando el componente que describe
esté inactivo
Las etiquetas siempre deben ir antes o encima del componente que
describen. Para los lenguajes que leen de izquierda a derecha, antes
es a la izquierda del componente.
Hay que emplear la capitalización en el texto de la etiqueta y colocar :
al final del texto.
Introducción a la Comunicación Persona-Máquina
200
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menu (MenuItems)
Composición y Creación
Un ítem de menú (menú ítem) representa una orden u opción a realizar
(copiar, cortar, abrir,...)
Los ítems de los menús deben ser breves y aparecer en una única línea
Hay que incluir mnemotécnicos para todos los elementos de menú
Hay que ofrecer shortcuts para los ítems de menú empleados más
frecuentemente
Hay que emplear el mismo shortcut si el mismo elemento de menú aparece
en varios menús.
Introducción a la Comunicación Persona-Máquina
201
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de Menu (MenuItems)
Composición y Creación (II)
Se deben emplear (...) para indicar que el comando detallado por el
elemento de menú necesita más información para poder ser completado.
Ej. Guardar como...
No deben emplearse (...) para indicar que aparecerá otra ventana
secundaria o de utilidad.
Ej. Propiedades
Introducción a la Comunicación Persona-Máquina
202
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Menús comunes
Ayuda
Proporciona acceso (en línea) a información sobre las características de una
aplicación
Proporciona acceso al cuadro Acerca de, que muestra información básica sobre la
aplicación
El Acerca de incluye:
Nombre del producto
Versión
Logo de la compañía
Logo del producto
Nombre de los autores
Antes del Acerca de siempre hay un separador
Introducción a la Comunicación Persona-Máquina
203
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Consideraciones de la guía de
estilo de Java sobre los diálogos
Introducción a la Comunicación Persona-Máquina
204
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos de un Diálogo
Título
Elementos de
la IU
Fila de
Botones
Introducción a la Comunicación Persona-Máquina
205
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Características Generales
El título del cuadro de diálogo, mostrado en la barra del título,
debe tener la forma:
“Nombre de la aplicación: Título del cuadro”
Hay que incluir mnemotécnicos para todos los elementos
excepto el botón por defecto y el botón de cancelación
Al abrir un cuadro de diálogo el foco debe aparecer sobre el
componente sobre el que se espera actuar en primer lugar
Introducción a la Comunicación Persona-Máquina
206
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Orden de Tabulación
El orden de tabulación debería
concordar con el orden de
lectura (del último pasar al
primero)
Introducción a la Comunicación Persona-Máquina
207
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botones de Comando en el Cuadro de Diálogo
Los botones de comando más comunes a utilizar en un cuadro
de diálogo son Ayuda, Cerrar, Cancelar, Ok, Aplicar.
Si se emplean otros botones, el mensaje de la etiqueta debe
describir claramente la acción a realizar por dicho botón
Introducción a la Comunicación Persona-Máquina
208
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Situación de los Botones de Comando en el
Cuadro de Diálogo
Los botones que se aplican a todo el cuadro de diálogo deben
colocarse en una fila en la parte inferior del cuadro de diálogo y
alineados a la derecha
Si se emplea botón de Ayuda, para mostrar información
adicional sobre el cuadro de diálogo,éste debe ser el último (el
de más a la derecha)
Introducción a la Comunicación Persona-Máquina
209
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botón por Defecto en un Cuadro de Diálogo
El botón por defecto es el botón que activa la aplicación cuando el usuario
presiona Enter o Return
El botón por defecto no necesita tener el foco cuando el usuario presiona
Enter
Si el cuadro de diálogo tiene botón por defecto éste debe ser el primer
botón de comando en el grupo de botones del cuadro.
El botón por defecto no lleva mnemotécnico
No es obligatorio tener un botón por defecto en cada cuadro de diálogo
Introducción a la Comunicación Persona-Máquina
210
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botón por Defecto en un Cuadro de Diálogo
con JBuilder (II)
public Marco1() {
.....
try {
jbInit();
getRootPane().setDefaultButton(jButton1);
}
catch(Exception e) {
.....
Convierte jButton1 en el botón por
}
defecto en la ventana representada por
la clase Marco1
}
Introducción a la Comunicación Persona-Máquina
211
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botón de Cancelación en un Cuadro de Diálogo
El botón de cancelación es el botón que activa la aplicación cuando el
usuario presiona Escape
A diferencia del anterior es necesario implementar este comportamiento, es
decir, no existe una única instrucción que permita indicar de forma sencilla
cual es el botón de cancelación en un diálogo.
Solución: comprobar en cada momento si la tecla pulsada es Escape y si
es así invocar el código asociado al botón de cancelación
Introducción a la Comunicación Persona-Máquina
212
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botón de Cancelación en un Cuadro de Diálogo con
JBuilder - Ejemplo
jTextArea1
Se invoca al
método
muestra()
click
Introducción a la Comunicación Persona-Máquina
213
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Botón de Cancelación en un Cuadro de Diálogo con
JBuilder – Ejemplo (II)
• Comprobar sobre cada componente, en este caso sobre
el área de texto (evento KeyPressed), , si se ha
pulsado la tecla Escape. Si es así hay que invocar al
método muestra()
void jTextArea1_keyPressed(KeyEvent e) {
}
if (e.getKeyCode()==KeyEvent.VK_ESCAPE)
muestra();
Introducción a la Comunicación Persona-Máquina
214
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
5. Soporte al Usuario
Introducción a la Comunicación Persona-Máquina
215
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
5. Contenidos
n
Introducción
n
Soporte básico para el usuario
n
Requerimientos de la ayuda
n
Hipertexto e Hipermedia
n
Lenguajes de marcas
n
Ayuda en línea
n
Estructura de la ayuda
n
Organización del texto de la ayuda
n
Ejemplo
Introducción a la Comunicación Persona-Máquina
216
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
La documentación de un producto forma parte de la
interfaz de usuario
La documentación debe considerarse al diseñar los test
de usabilidad
La documentación incluye
Información de la instalación
Ayuda en línea
Mensajes
Tutoriales
Cualquier otra información de soporte para el producto
Mª del Carmen Suárez Torrente
Introducción a la Comunicación Persona-Máquina
217
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Soporte Básico al Usuario
La documentación básica para el usuario (o soporte
básico) está constituida por:
Guía de Referencia Rápida
Ayuda en línea
Solicitada por ejemplo cuando el usuario ha encontrado un problema al realizar una
tarea
Explicación Completa (Manual)
Recordatorio al usuario de determinadas acciones con herramientas con las que ya está
familiarizado
Explicación completa sobre una herramienta o comando
Tutorial
Particularmente útil para los nuevos usuarios de una herramienta.
Proporciona instrucciones paso-a-paso de cómo usar la herramienta
Introducción a la Comunicación Persona-Máquina
218
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Requerimientos de la Ayuda
Disponibilidad
Precisión y Detalle
Consistencia
Robustez
Flexibilidad
No Obstructiva
Introducción a la Comunicación Persona-Máquina
219
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Disponibilidad
El usuario ha de poder acceder a la ayuda en
cualquier momento de la interacción con el sistema
sin tener que salir de la aplicación
Introducción a la Comunicación Persona-Máquina
220
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Precisión y Detalle
La ayuda ha de estar acorde con la versión actual del
producto
Ha de abarcar todo el sistema, ya que si el usuario
no encuentra ayuda en un tema concreto se
decepcionará
Además, a priori no se conoce que partes de la ayuda
serán más necesitadas por el usuario
Introducción a la Comunicación Persona-Máquina
221
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Consistencia
Todas las partes de la ayuda (y la documentación)
han de ser consistentes en términos de
Contenidos
Terminología
Estilo
Introducción a la Comunicación Persona-Máquina
222
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Robustez
Los sistemas de ayuda son utilizados a menudo
cuando el usuario se encuentra en dificultades
Ej. si el sistema no se comporta correctamente
Es importante que la ayuda proporcione un buen
soporte incluso cuando la aplicación no se comporta
correctamente
Introducción a la Comunicación Persona-Máquina
223
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Flexibilidad
En muchos sistemas la ayuda es rígida, es decir, se
muestra siempre el mismo mensaje
independientemente de la experiencia de la persona
que busca la ayuda.
La ayuda ha de permitir que los diferentes tipos de
usuarios interaccionen de manera apropiada según
sus necesidades.
Para ello emplearemos hipertexto
Introducción a la Comunicación Persona-Máquina
224
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
No Obstructiva
La ayuda no se debe interponer en el uso normal de
la aplicación
Introducción a la Comunicación Persona-Máquina
225
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Hipertexto e Hipermedia
Introducción a la Comunicación Persona-Máquina
226
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Hipertexto - Introducción
Presentar texto en una forma lineal, una página después de
otra, no es apropiado para el recorrido de una ayuda en línea,
ya que fuerza al lector a seguir la idea del autor sobre el orden
en que deberían mostrarse las cosas.
Lineal
Si el usuario está siguiendo una línea particular de interés,
puede desear saltar de una parte de la ayuda a otra, y esto
puede ser difícil con una estructura lineal.
Introducción a la Comunicación Persona-Máquina
227
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Hipertexto- Definición
El hipertexto intenta evitar estas limitaciones del texto estructurándolo en
una malla más que en una línea. Esto permite acceder desde una página a
diferentes páginas.
Hipertexto se puede definir como una forma no lineal de presentar
información, en principio, textual; de esa manera el usuario puede navegar
del modo que prefiera a través de dicha información
En definitiva, un sistema hipertexto consta de un número de páginas y un
conjunto de enlaces que son usados para conectar páginas. Los enlaces pueden
unir cualquier página a cualquier otra, y puede haber más de un enlace por página.
Introducción a la Comunicación Persona-Máquina
228
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Hipermedia -Introducción
Típicamente, los sistemas hipertexto incorporan diagramas, fotografías, y
otros medios además del texto. Tales sistemas son conocidos como
sistemas hipermedia.
Hipermedia es el resultado de la combinación del hipertexto y la
multimedia.
Introducción a la Comunicación Persona-Máquina
229
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Hipermedia
Los sistemas hipermedia son idealmente apropiados para manuales en
línea y para la ayuda. De hecho, muchos sistemas de ayuda comerciales
emplean un sistema de ayuda estilo hipermedia. Ejemplos de esto es la
ayuda de Microsoft Windows (empleada por la mayoría de aplicaciones
Windows).
Los primeros trabajos con este tema fueron realizados por Ted Nelson
(1967) en el proyecto Xanadu, que fue el primero en utilizar la palabra
hipertexto. Douglas Engelbert (1968) fue el primero en presentar un
sistema hipertexto operacional, y este se popularizó con el sistema
Hypercard de Apple.
Introducción a la Comunicación Persona-Máquina
230
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Lenguajes de Marcas
Introducción a la Comunicación Persona-Máquina
231
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
HTML
HMTL (Hypertext Mark-Up Language) es un lenguaje que
permite el desarrollo de documentos hipertextuales, es decir,
es un lenguaje estandarizado para describir documentos de
texto que contienen referencias a otros documentos.
Introducción a la Comunicación Persona-Máquina
232
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estructura de un documento
Etiquetas HTML
HTML describe la estructura y el contenido del documento y
no el formato de la página y su apariencia.
Para ello encierra cada porción de texto entre un par de
etiquetas, una de apertura y otra de cierre, que no son visibles
en el momento de visualizar el documento, aunque si afectan
a su visualización.
Las etiquetas se delimitan por los signos < y >.
<H1> Esto es un encabezamiento </H1>
Esto no.
Introducción a la Comunicación Persona-Máquina
233
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estructura de un documento
La Estructura
<HTML>
<!-- Esto es un comentario -->
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
Contenido de la página
</BODY>
Incluye el contenido
del documento
</HTML>
<etiqueta atributo1 atributo2=valor2> .. </etiqueta>
Introducción a la Comunicación Persona-Máquina
234
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estructura de un documento
Jerarquía del Documento
Títulos
HTML dispone de 6 niveles:
Saltos de línea
Etiqueta <BR>
(no es necesaria etiqueta de cierre)
Línea divisoria
<H1> Título nivel 1 </H1>
<H2> Título nivel 2 </H2>
...
<H6> Título nivel 6 </H6>
Etiqueta <HR>(no
es necesaria etiqueta de cierre)
Párrafos
<P>.... </P>
Introducción a la Comunicación Persona-Máquina
235
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estructura de un documento
Utilización de Estilos
Estilos Lógicos:
Etiqueta
Negrita
<B>... </B>
Cursiva
<I>... </I>
Subrayado
<U>...</U>
Teletipo
<TT>... </TT>
Ejemplo
<B>ejemplo sencillo</B>
Introducción a la Comunicación Persona-Máquina
236
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Creación de Listas
Listas Ordenadas y no Ordenadas
E tiq u e ta
O rd e n a d a
<O L>
< L I> U n o
< L I> D os
< L I> T re s
< /O L >
N o O rd e n a d a
<UL>
< L I> U n o
< L I> D os
< L I> T r e s
< /U L >
T Y P E = 1 ,a ,A ,i,I
T Y P E = D I S C , C I R C L E ,S Q U A R E
•Ejemplo:
<UL>
</UL>
Introducción a la Comunicación Persona-Máquina
237
<LI> Nuevo
<LI> Abrir
<LI> Guardar
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Uso de Enlaces
Para establecer enlaces se emplea la etiqueta <A>..</A> con el atributo
HREF que toma como valor el identificador del recurso al que se desea
apuntar.
Ejemplo:
<A HREF=”fuentes/guardar.html”> enlace </A>
Introducción a la Comunicación Persona-Máquina
238
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Color para el Cuerpo del Documento
Atributos para la etiqueta <BODY>:
BGCOLOR: color de fondo de la página
TEXT: color del texto
<BODY BGCOLOR=BLACK TEXT=WHITE>
...
</BODY>
Introducción a la Comunicación Persona-Máquina
239
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Control del Texto
Fuente y Color. Etiqueta <FONT>
<FONT FACE=ARIAL SIZE=12 COLOR=BLUE>
...
</FONT>
Alineación. Se consigue mediante el atributo ALIGN de la etiqueta <P>.
Valores posibles son: LEFT, RIGHT, JUSTIFY y CENTER.
<P ALIGN=CENTER> Ejemplo de párrafo centrado </P>
Introducción a la Comunicación Persona-Máquina
240
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Inclusión de las Imágenes
La etiqueta <IMG> permite la inclusión de gráficos en un documento
HTML.
Atributos:
SRC: gráfico a visualizar.
ALIGN: Alineación de la imagen respecto al texto que la rodea (TOP,
MIDDLE y BOTTOM).
<P>
<IMG SRC=“imagen.gif” ALIGN=BOTTOM>
<!-- No es necesario cerrar la etiqueta ->
</P>
Introducción a la Comunicación Persona-Máquina
241
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
XML
XML (Extensible Markup Language) es otro lenguaje de
marcas pero extensible, es decir, en el que el usuario
establece que marcas o etiquetas emplear.
Introducción a la Comunicación Persona-Máquina
242
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ayuda en Línea
Introducción a la Comunicación Persona-Máquina
243
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Asistencia en Línea
La ayuda es necesaria en toda aplicación
Proporciona soporte cuando existe un problema durante el trabajo
Es una parte importante del diseño de un producto y puede
proporcionarse de una gran cantidad de formas:
Ayuda textual (hipertexto e hipermedia)
Ayuda sensible al contexto
Tutoriales
Wizards
Introducción a la Comunicación Persona-Máquina
244
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ayuda en Línea
A la hora de implementar la ayuda en línea hay que
desarrollar un plan teniendo en cuenta los siguientes
apartados
Audiencia de la aplicación
Contenidos de las preguntas
Estructura de las preguntas
Referencias cruzadas
Definición de términos
Uso de preguntas sensibles al contexto
Introducción a la Comunicación Persona-Máquina
245
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Audiencia de la Aplicación
El usuario al que va dirigida la aplicación determina la
información que tiene que aparecer en el sistema de ayuda y
como ha de ser presentada:
Usuario Novel
Usuario Novel en la aplicación
Tiene algunos conocimientos de informática, pero completamente nuevo en
la aplicación
Usuario Intermedio en la aplicación
Completamente inexperto en informática
Tiene conocimientos de la aplicación
Usuario Experto en la aplicación
Tiene una amplia experiencia.
Introducción a la Comunicación Persona-Máquina
246
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Contenidos de las Preguntas
Los usuarios noveles necesitan la ayuda para aprender las
tareas y las definiciones de los términos
Ej. Si se trata de un juego será necesario explicarle las reglas del
juego, es decir, en que consiste el juego, así como cual es la
forma de jugar con esta aplicación
Los usuarios intermedios acudirán a la ayuda más a modo
de recordatorio de órdenes y funciones
El experto solamente pide ayuda en la sintaxis de ordenes
y funciones, teclas aceleradoras o atajos para
desenvolverse más rápidamente
Introducción a la Comunicación Persona-Máquina
247
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Estructura de la Ayuda
Organización Jerárquica
Tabla de contenidos
Índice
Recorrido Secuencial
Referencias Cruzadas
Definición de Términos
Búsqueda
Introducción a la Comunicación Persona-Máquina
248
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Organización Jerárquica
Tabla de contenidos
•Tanto la tabla de
contenidos como
el índice
proporcionan una
lista de todas las
cuestiones a
disposición del
usuario
Introducción a la Comunicación Persona-Máquina
249
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Organización Jerárquica
Indice
Introducción a la Comunicación Persona-Máquina
250
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Recorrido Secuencial
• Permite una
navegación
secuencial por la
ayuda
•Proporciona una
visión de las
funcionalidades del
sistema
•Es especialmente
útil para usuarios
noveles
Introducción a la Comunicación Persona-Máquina
251
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Referencias Cruzadas
• Permiten el
hipertexto
•Son palabras que
están enlazadas con
otras páginas
Introducción a la Comunicación Persona-Máquina
252
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Definición de Términos
• El sistema de ayuda
ha de permitir la
aparición de ventanas
en las que se realice
la definición de
ciertos términos sin
que sea necesario
buscarla en otras
partes de la ayuda
Introducción a la Comunicación Persona-Máquina
253
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Opción de Búsqueda
Introducción a la Comunicación Persona-Máquina
254
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Organización del Texto de la Ayuda
Lenguaje
Cantidad de texto
Longitud de los párrafos
Espacios en blanco
Sobreindicar el texto
Gráficos e Iconos
Diseño consistente
Introducción a la Comunicación Persona-Máquina
255
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Lenguaje
Se debe emplear un lenguaje apropiado para los
usuarios que van a utilizar la aplicación
Si el lenguaje es demasiado complicado puede frustrar
a los usuarios, que deberán aprender la definición de
los conceptos y términos que no le son familiares
Introducción a la Comunicación Persona-Máquina
256
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Cantidad de Texto
La velocidad de lectura es un 30% más lenta cuando
se realiza sobre una pantalla. Por ello la cantidad de
texto no debe ser excesiva
Introducción a la Comunicación Persona-Máquina
257
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Longitud de los párrafos
Hay que utilizar párrafos cortos, ya que mejora la
velocidad de lectura
Introducción a la Comunicación Persona-Máquina
258
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Espacios en blanco
Son importantes para hacer el texto de la ayuda más
legible.
Introducción a la Comunicación Persona-Máquina
259
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Sobreindicar el Texto
Se puede hacer uso de los tipos de letra, tamaños,
color, etc. para destacar conceptos
No se debe exagerar porque la sobrecarga reduce la
efectividad
Introducción a la Comunicación Persona-Máquina
260
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Gráficos e Iconos
La utilización de gráficos en la ayuda mejora la
presentación de los conceptos, ya que los gráficos
siempre se asimilan más rápidamente que el texto
Conviene emplear imágenes que ayuden a explicar las
funciones de los iconos y demás elementos de la
pantalla
Introducción a la Comunicación Persona-Máquina
261
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Diseño Consistente
Los contenidos de la ayuda deben ser presentados de
forma consistente:
Títulos con el mismo formato
Destacar de la misma manera el texto,
Etc.
Introducción a la Comunicación Persona-Máquina
262
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplo:
Construcción de ficheros de ayuda
para Java con JavaHelp
Introducción a la Comunicación Persona-Máquina
263
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
JavaHelp
Qué es JavaHelp
Características Básicas
Herramientas
Librerías
Pasos en la construcción de la ayuda
Incorporación de la ayuda en la aplicación
Introducción a la Comunicación Persona-Máquina
264
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Qué es JavaHelp
Sistema que facilita el desarrollo de ayuda on-line
Es independiente de la plataforma (implementado en
Java )
Evita que cada usuario tenga que crear su propio
sistema de ayuda propietario
Introducción a la Comunicación Persona-Máquina
265
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
CaracterísticasDistintas
Básicas
vistas de la información
Visor de Ayuda
Panel de contenidos
Panel de navegación
Tabla de contenidos
Índice
Búsqueda
Introducción a la Comunicación Persona-Máquina
266
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Herramientas
hsviewer
jhindexer
Permite visualizar ficheros HelpSet. Puede invocarse desde línea de
comandos o desde Windows
Programa de línea de comandos que crea la base de datos de búsqueda
jhsearch
Programa de línea de comandos que busca en la base de datos creada
con jhindexer.
Introducción a la Comunicación Persona-Máquina
267
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Librerías
jh.jar
jhbasic.jar
Subconjunto de la anterior que no soporta la búsqueda
jhtools.jar
Librería estándar que incluye todo lo necesario para el visor de ayuda y
los navegadores
Incluye las herramientas para construir y consultar la base de datos
jhall.jar
Contiene todas las clases de JavaHelp.
Introducción a la Comunicación Persona-Máquina
268
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos en la Construcción de la Ayuda
Introducción a la Comunicación Persona-Máquina
269
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos - Resumen
1. Creación de los temas de ayuda para el usuario (topics
HTML)
2. Creación de los ficheros de metadatos que JavaHelp
emplea para presentar la información
HelpSet
Map
Tabla de contenidos
Indice
...
Introducción a la Comunicación Persona-Máquina
270
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos Detallados
1.
2.
3.
4.
5.
6.
Crear
Crear
Crear
Crear
Crear
Crear
topics HTML
Imprescindibles
fichero map
fichero HelpSet
fichero tabla de contenidos
fichero índice
base de datos de búsqueda
7. Comprimir y encapsular ficheros de ayuda en ficheros JAR (Este paso
no será necesario).
Introducción a la Comunicación Persona-Máquina
271
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Organización
..\help
mi_helpset.hs
mi_map.jhm
mi_toc.xml
mi_index.xml
\ fuentes\
\JavaHelpSearch
Introducción a la Comunicación Persona-Máquina
Topic1.html
Topic2.html
Topic3.html
.....
272
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
1. Topics HTML
Para crear topics se puede emplear cualquier
herramienta (o bien directamente) que genere HTML
Conviene agrupar topics relacionados y disponerlos
jerárquicamente.
Si no, al menos, es altamente recomendable crear un
subdirectorio donde se incluyan todos los topics html.
Introducción a la Comunicación Persona-Máquina
273
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
2. Fichero Map
Asocia identificadores a los ficheros HTML que
contienen los topics.
Tiene extensión .jhm
Sintaxis basada en XML
Introducción a la Comunicación Persona-Máquina
274
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Fichero Map (II)
<...
<map version="1.0">
<mapID
<mapID
<mapID
<mapID
<mapID
<mapID
<mapID
target="introduccion"
target="nuevo"
target="abrir"
target="guardar"
target="guardarcomo"
target="colorfondo"
target="colortexto"
url="fuentes/introduccion.html" />
url="fuentes/nuevo.html" />
url="fuentes/abrir.html" />
url="fuentes/guardar.html" />
url="fuentes/guardarcomo.html" />
url="fuentes/colorfondo.html" />
url="fuentes/colortexto.html" />
</map>
Identificador
Introducción a la Comunicación Persona-Máquina
Fichero html asociado
Mª del Carmen Suárez Torrente
275
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
3. Fichero HelpSet
Es el único fichero del sistema de ayuda que es referenciado
explícitamente por la aplicación.
Es el primero que se carga cuando se activa el sistema de
ayuda
Contiene toda la información necesaria para ejecutar el
sistema de ayuda
Tiene la extensión .hs
Sintaxis basada en XML
Introducción a la Comunicación Persona-Máquina
276
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Fichero HelpSet (II)
Contiene, al menos, la siguiente información:
Fichero map, empleado para asociar identificadores a los nombre de
las páginas html que constituyen la ayuda.
Vistas. Información que describe los navegadores que van a
emplearse en el HelpSet (tabla de contenidos, índice, búsqueda)
Título del HelpSet
<Home ID> Identificador de la página a ser mostrada cuando se
invoca el visor de ayuda sin especificar ningún identificador de página
concreto
Introducción a la Comunicación Persona-Máquina
277
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Fichero HelpSet (III)
<.....
<helpset>
<title> Ejemplo de Ayuda </title>
Título
<maps>
<homeID>introduccion</homeID>
Página a visualizar por defecto
<mapref location="Map.jhm"/>
</maps>
<!-- views -->
<view>
<name>Tabla de contenidos</name>
<label>Tabla de Contenidos</label>
<type>javax.help.TOCView</type>
<data>TOC.xml</data>
</view>
....
/helpset>
Introducción a la Comunicación Persona-Máquina
Fichero map
// nombre de la vista
// etiqueta asociada con la vista
//camino a la clase navegador
//fichero que contiene la tabla de contenidos
278
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Visualización del HelpSet
En línea de comandos
hsviewer –helpset c:\ejercicios\ayudas\ayuda.hs
hsviewer –helpset c:\ejercicios\ayudas\ejemplo.jar
En Windows
Introducción a la Comunicación Persona-Máquina
279
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
4. Fichero TOC
Este fichero describe el contenido y la distribución de la
tabla de contenidos
Sintaxis basada en XML
Introducción a la Comunicación Persona-Máquina
280
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Fichero TOC (II)
<toc version="1.0">
<tocitem text="Mi Editor ">
<tocitem text="Introducción" target="introduccion"/>
<tocitem text="Utilizar Mi Editor">
<tocitem text="Crear documento" target="nuevo"/>
<tocitem text="Abrir documento" target="abrir"/>
<tocitem text="Guardar documento">
<tocitem text="Guardar"
target="guardar"/>
<tocitem text="Guardar como" target="guardarcomo"/>
</tocitem>
<tocitem text="Formato del editor">
<tocitem text="Cambiar color texto"
<tocitem text="Cambiar color fondo"
</tocitem>
</tocitem>
target="colortexto"/>
target="colorfondo"/>
</tocitem>
</toc>
Especifica el texto para la entrada en la
tabla de contenidos
Introducción a la Comunicación Persona-Máquina
281
Especifica el identificador del topic a mostrar cuando la entrada
es seleccionada por el usuario. El identificador ha de estar
definido en el fichero map
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
5. Fichero Índice
Este fichero describe la distribución y contenido del
índice
Sintaxis basada en XML
Introducción a la Comunicación Persona-Máquina
282
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Fichero Índice (II)
<....
<index version="1.0">
<indexitem text="abrir documento"
<indexitem text="cambiar color texto"
<indexitem text="cambiar color fondo"
<indexitem text="crear documento"
target="abrir"/>
target="colortexto"
target="colorfondo"
target="nuevo" />
/>
/>
<indexitem text="documento">
<indexitem text="abrir documento" target="abrir" />
<indexitem text="crear documento" target="nuevo" />
<indexitem text="guardar"
target="guardarcomo" />
</indexitem>
<indexitem text="formato editor">
<indexitem text="color de fondo"
<indexitem text="color del texto"
</indexitem>
target="colorfondo"/>
target="colortexto"/>
<indexitem text="guardar documento"
target="guardar" />
</index>
Especifica el texto para la entrada en la
tabla de contenidos
Introducción a la Comunicación Persona-Máquina
Especifica el identificador del topic a mostrar cuando la entrada
es seleccionada por el usuario. El identificador ha de estar
Mª del Carmen Suárez Torrente
definido en el fichero map
Ana Belén Martínez Prieto
283
Juan Manuel Cueva Lovelle
6. Búsqueda
Es necesario emplear el jhindexer para generar la
base de datos de búsqueda
La base de datos está formada por seis ficheros
localizados en la carpeta JavaHelpSearch
Introducción a la Comunicación Persona-Máquina
284
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Búsqueda (II)
Para crear la base de datos de búsqueda
jhindexer fuentes
jhindexer fuentes1 fuentes2
Se supone que fuentes es el directorio donde están almacenados todos los
topics html
Si tenemos más de un directorio donde estén almacenados los topics html.
En este caso serían dos:fuentes1 yfuentes2
Funcionamiento
jhindexer desciende recursivamente por la jerarquía de directorios
indexando todos los ficheros que encuentra
Crea la carpeta JavaHelpSearch dónde almacena la base de datos de
búsqueda
Introducción a la Comunicación Persona-Máquina
285
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Búsqueda (III)
Para verificar la validez de la búsqueda
En línea de comandos
jhsearch JavaHelpSearch
Desde el visor de ayuda
Introducción a la Comunicación Persona-Máquina
286
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
7. Construcción ficheros JAR
Una vez creada la ayuda se pueden encapsular los
ficheros en un único fichero para entregar a los
usuarios
El formato empleado por JavaHelp para encapsular
y comprimir es JAR (Java ARchive)
Para ello se emplea el comando jar.
Introducción a la Comunicación Persona-Máquina
287
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Construcción ficheros JAR
Creación de ficheros jar
Para ver los ficheros incluidos en un jar
C:\ejercicios\ayudas> jar –cvf miayuda.jar *
jar –tvf miayuda.jar
Para extraer los ficheros del jar
jar –xvf miayuda.jar
Introducción a la Comunicación Persona-Máquina
288
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Incorporación de la Ayuda en la
Aplicación
Introducción a la Comunicación Persona-Máquina
289
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clases Básicas Implicadas
Clase URL
Paquete a importar: import java.net.*;
Esta clase se utiliza para representar una URL (Uniform
Resource Locator), es decir, para identificar un recurso.
Un recurso puede ser algo tan simple como un fichero o un
directorio, o bien puede ser un objeto más complejo.
Introducción a la Comunicación Persona-Máquina
290
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clases Básicas Implicadas (II)
Clase HelpSet
Paquete a importar: import javax.help.*;
Clase que permite tratar desde una aplicación Java el conjunto de datos que
constituyen el sistema de ayuda (fichero helpset, fichero map, tabla de
contenidos, indice y topics)
Principales métodos
findHelpSet // método estático que localiza el fichero helpset y devuelve su URL
createHelpBroker // crea un objeto HelpBroker para este HelpSet
Introducción a la Comunicación Persona-Máquina
291
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clases Básicas Implicadas (III)
Clase HelpBroker
Paquete a importar: import javax.help.*;
Esta clase es la encargada de gestionar la visualización del contenido de la
ayuda en la aplicación
Proporciona los métodos apropiados para incorporar ayuda a la aplicación de una
forma sencilla
Principales métodos
enableHelpKey // Habilita la tecla de ayuda sobre un componente
enableHelpOnButton // Hace que se despliegue la ayuda cuando se presiona un determinado botón o
elemento de menú.
enableHelp // Indica el topic a mostrar cuando se pulse la tecla de ayuda sobre un determinado
componente
Introducción a la Comunicación Persona-Máquina
292
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación
1. Incorporar la librería jhall.jar a la aplicación
Proyecto->Propiedades->Vías de acceso->Bibliotecas necesarias
Introducción a la Comunicación Persona-Máquina
293
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (II)
2. Importar los paquetes que son necesarios en la
aplicación
import javax.help.*;
import java.net.*; // para la clase URL
Introducción a la Comunicación Persona-Máquina
294
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (III)
3. Encontrar el fichero HelpSet y crear un objeto HelpSet
Try{
hsURL = HelpSet.findHelpSet(null,“ayuda/ayuda.hs");
hs= new HelpSet(null,hsURL);
// localiza el fichero helpset
// crea un objeto HelpSet
} catch (Exception ee){
JOptionPane.showMessageDialog(this,“Fichero HelpSet no encontrado”);
return;
}
Introducción a la Comunicación Persona-Máquina
295
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (IV)
4. Crear un objeto HelpBroker que facilita la
visualización de la ayuda en la aplicación
hb = hs.createHelpBroker ();
Introducción a la Comunicación Persona-Máquina
296
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (V)
5. Asociar la ayuda a un botón o elemento de menú
hb.enableHelpOnButton(jButton1,”introduccion”,hs)
click
jButton1
Introducción a la Comunicación Persona-Máquina
297
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (VI)
6. Asociar ayuda sensible al contexto a un componente
Se basa en asociar topics de ayuda con objetos en la interfaz gráfica de
usuario: menús, botones, textfield y ventanas.
Se asignan identificadores (ID) a cada uno de estos elementos
Estos identificadores (ID) deben estar especificados en el fichero map.
Introducción a la Comunicación Persona-Máquina
298
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos
para incorporar la ayuda en la aplicación (VII)
6. Asociar ayuda sensible al contexto a un componente. Para
ello:
Hacer que un componente responda a la pulsación de la tecla de ayuda
(F1)
hb.enableHelpkey(getRootPane(),”introduccion”,hs);
// responden a la tecla F1 todos los componentes situados en la ventana
Asociar a cada componente una página que será la que se muestre
cuando se pulse la tecla de ayuda (F1) sobre él
hb.enableHelp(jButton1,”guardar”,hs);
hb.enableHelp(jButton2,"abrir",hs);
Introducción a la Comunicación Persona-Máquina
299
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
6. Internacionalización
Introducción a la Comunicación Persona-Máquina
300
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
6. Contenidos
n
Introducción
n
Definición
n
Internacionalización y localización
n
Elementos específicos de la localización
n
Proceso de Internacionalización
n
Ventajas de construir aplicaciones internacionalizadas
n
Ejemplo muy sencillo con Java
Introducción a la Comunicación Persona-Máquina
301
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Introducción
Hace unos años el software se producía en un único lenguaje, normalmente
inglés. Si una persona hablaba otro idioma, tenía que aceptar el programa
como estaba.
Actualmente, debido sobre todo a los ordenadores personales, han
proliferado los usuarios con una formación muy diversa. Esto ha obligado a
hacer las aplicaciones más usables y también, como una parte del proceso
de usabilidad, a hacer las aplicaciones en las lenguas propias de los
usuarios.
Introducción a la Comunicación Persona-Máquina
302
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Internacionalización
Internacionalización
Proceso de construir un producto para que sea utilizado en
el mercado internacional, especificándolo en el diseño de sus
características y en el código
Introducción a la Comunicación Persona-Máquina
303
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Localización
Localización
Adaptación de un producto software al lenguaje y a las
convenciones locales y culturales de una región particular
Cada país tiene una localización única. De hecho, una lengua
puede ser hablada en más de un país, por ejemplo el
castellano es hablado en España y en la mayor parte de los
países de América Latina, pero hay diferencias nacionales
con la moneda, entre otras cosas. Por ello cada país
representa una localización única.
Introducción a la Comunicación Persona-Máquina
304
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Localización (II)
En Windows se puede
especificar una
localización concreta
acudiendo a
Panel de Control
Configuración Regional
Introducción a la Comunicación Persona-Máquina
305
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización
A la hora de internacionalizar una aplicación hay que
tener en cuenta:
Los mensajes y texto que aparecen en una aplicación y que
deben ser traducidos
Y además, los elementos que son específicos de una
localización
Calendarios, formatos de fechas, horas, etc.
Formatos de números y monedas
Unidades de medida
Introducción a la Comunicación Persona-Máquina
306
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (II)
Calendarios. Existen diferentes estilos de
calendarios:
Gregoriano, budista, chino, hebreo
Diferentes formatos en el gregoriano
aa/mm/dd
aaddd
aaaa/mm/dd
dd/mm/aa
mm/dd/aa
Introducción a la Comunicación Persona-Máquina
307
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (III)
Los Formatos de Fecha varían de un país a
otro
19 de abril de 1970 ----------- España
4/19/70
----------- Reino Unido
19/4/70
----------- Dinamarca
1970-04-19
----------- Suecia
Introducción a la Comunicación Persona-Máquina
308
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (IV)
Los Formatos Monetarios varían también de un
país a otro
USA
Noruega
Suiza
Alemania
---------------------------------------------------------
Introducción a la Comunicación Persona-Máquina
309
$1,234.56
Kr1.234,56
sFr1234,56
1.234,56DM
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (V)
Tiempo Horario, al igual que los anteriores
también varia de una localización a otra
USA
Canadá
Suiza
Alemania
Noruega
-----------------------------------------------------------------------
Introducción a la Comunicación Persona-Máquina
310
8:32
20:32
20,32,00
20.32 Uhr
KI 20.32
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (VI)
Números y Símbolos numéricos
EEUU
América Latina y Europa
Billón, uno seguido de nueve ceros
La coma separa miles
Billón, uno seguido de doce ceros
La coma separa decimales
Unidades de medida
La mayoría sistema métrico decimal (Km, cm,...)
EEUU emplea la milla y la pulgada
Temperatura
Celsius (mayoría) pero también se emplea Farenheit
Introducción a la Comunicación Persona-Máquina
311
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Elementos Específicos de la Localización (VII)
Tamaños de papel
Mayoría: DIN A-3, DIN A-4
EEUU: legal, letter, ledger
Formato direcciones postales
Mayoría: nombre de la calle + número
EEUU: número + nombre de la calle
Signos de puntuación
Colores
Algunos símbolos no utilizados: ¿, ¡,...
Griegos: signo de interrogación parecido al ;
Occidentales: rojo parar, verde proseguir
Convención no válida en China
Iconos
Introducción a la Comunicación Persona-Máquina
312
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Proceso de Internacionalización
• A la hora de internacionalizar una aplicación la idea
perseguida es básicamente separar en la aplicación los
datos del código. Dónde:
Los datos hacen referencia a todos aquellos elementos
(cadenas, mensajes, íconos, etc) que cambian de un país a otro
(es decir, de una localización a otra).
El código hace referencia a la lógica de la aplicación, es decir,
es el código de la aplicación que se ejecuta igualmente para
todos los países y lenguas.
Introducción a la Comunicación Persona-Máquina
313
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Proceso de Internacionalización (II)
• La idea se basa en tener :
• Un único bloque de código, es decir, el código de la aplicación
siempre va a ser único y el mismo.
• Y varios bloques de datos, uno por cada país (localización).
Datos
en español
+
Datos
en inglés
Datos
en francés
Introducción a la Comunicación Persona-Máquina
314
Código de la
Aplicación
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ventajas de hacer Aplicaciones
Internacionalizadas
Tradicionalmente, el desarrollo de software internacional se ha hecho en dos
etapas:
En primer lugar se desarrollaba la aplicación en una versión determinada,
castellano, inglés, etc.
Posteriormente, se hacía la versión a otro idioma duplicando el código de la
aplicación para traducirlo y adaptarlo. Al final había tantos códigos de la
aplicación como adaptaciones a diferentes países se hubiesen realizado.
Sin embargo, si se considera desde el diseño de la aplicación la posibilidad de
que ésta tenga que adaptarse a diferentes mercados las ventajas que se
obtienen son varias. A continuación las veremos brevemente.
Introducción a la Comunicación Persona-Máquina
315
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ventajas de hacer Aplicaciones
Internacionalizadas (II)
Se pueden crear versiones localizadas más fácil y
rápidamente
Únicamente hay que preocuparse de cambiar el bloque de datos.
El código de la aplicación no es necesario tocarlo.
Mantenimiento del código menos costoso
El mantenimiento del código (cualquier modificación) es más fácil,
ya que sólo hay una versión del mismo, lo que también conlleva
un mejor aprovechamiento de los recursos.
Introducción a la Comunicación Persona-Máquina
316
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplo de Internacionalización en Java
n
n
Clases principales implicadas en la internacionalización en
Java
n
Locale
n
ResourceBundle
Ejemplo sencillo para internacionalizar una aplicación Java
que únicamente contiene cadenas
Introducción a la Comunicación Persona-Máquina
317
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clases Java para Internacionalización
Clase Locale
Identifica un idioma y un país concreto, es decir, una localización.
en US -> inglés Estados Unidos
en UK -> ingles Reino Unido
es ES -> español España
Todos estos códigos están disponibles en las siguientes direcciones web:
http://www.ics.uci.edu/pub/ietf/http/related/iso639.txt
http://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html
Clase ResourceBundle
Contiene objetos específicos a la localización
Introducción a la Comunicación Persona-Máquina
318
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplo
A continuación vamos a ver un ejemplo de
internacionalización en Java en el que se incluyen como
elementos a localizar únicamente cadenas (Strings)
Introducción a la Comunicación Persona-Máquina
319
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Ejemplo - Descripción
Partimos de una clase Strings1 que únicamente muestra tres
mensajes por pantalla.
Queremos:
Que estos mensajes aparezcan en español si la configuración regional
del ordenador está como Español (España)
Que aparezcan en inglés si la configuración regional del ordenador está
como Inglés (EEUU)
Y además, el código de la clase ha de ser único y siempre el mismo para
todos los casos (es decir, sólo debemos tener un Strings1.java) .
Introducción a la Comunicación Persona-Máquina
320
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clase de la que partimos
Esta clase es de la que partimos inicialmente, y muestra tres
mensajes por pantalla.
public class Strings1{
static public void main(String [] args){
System.out.println(“Hola a todos”);
System.out.println(“Departamento de Informática”);
System.out.println(“Universidad de Oviedo”);
}
}
Introducción a la Comunicación Persona-Máquina
321
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Pasos a seguir
1. Identificar los elementos a localizar, es decir, identificar el bloque de datos. En
este caso son los tres mensajes:
Hola a todos
Departamento de Informática
Universidad de Oviedo
2. Crear un fichero de propiedades, de texto, que contenga dichos datos.
Habrá un fichero para cada localización
El fichero tendrá un nombre especial que identifica la localización
NombreFichero_en_US.properties ( para localización Inglés EEUU)
NombreFichero_en_UK.properties ( para localización Inglés Reino Unido)
NombreFichero_es_ES.properties (para localizacion Español España)
...
Este fichero sólo puede contener cadenas (Strings) y a cada una de las cadenas se
Mª del Carmen Suárez Torrente
les asignará un nombre (el que queramos)
Introducción a la Comunicación Persona-Máquina
322
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Nombres por los que después recuperaremos los mensajes
Pasos a seguir (II)
En este caso, por tanto, se crearán dos ficheros, con nombre, MisDatos cuyo
contenido es el siguiente.
//Contenido del fichero MisDatos_es_ES.properties
cadena1 = Hola a todos
cadena2 = Departamento de Informática
cadena3 = Universidad de Oviedo
Localización
Español (es) España (ES)
//Contenido del fichero MisDatos_en_US.properties
cadena1 = Hello Everybody!
cadena2 = Department of Computer Science
cadena3 = University of Oviedo
Introducción a la Comunicación Persona-Máquina
323
Localización
Inglés (en) EEUU (US)
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
MisDatos_en_US.properties o bien
MisDatos_es_ES.properties
Pasos a seguir (III)
3. Internacionalizar la clase, es decir, adaptarla para que seleccione los datos del fichero
adecuado en función de la localización que esté seleccionada en el ordenador. Para ello
3.1 Obtener la localización seleccionada en el ordenador:
Locale localizacion = Locale.getDefault();
3.2 Cargar los datos del fichero de propiedades(llamado MisDatos) correspondiente, en función de la
localización obtenida en el paso anterior:
ResourceBundle mensajes =ResourceBundle.getBundle("MisDatos",localizacion);
3.3 Extraer cada uno de los mensajes en función del nombre que se les asignó en el fichero de
propiedades:
System.out.println(mensajes.getString("cadena1"));
System.out.println(mensajes.getString("cadena2"));
System.out.println(mensajes.getString("cadena3"));
Introducción a la Comunicación Persona-Máquina
324
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Clase Internacionalizada
La clase ya internacionaliza tendría, por tanto, este aspecto:
import java.util.*;
class Strings2{
Locale localizacion = Locale.getDefault();
ResourceBundle mensajes = ResourceBundle.getBundle("MisDatos",localizacion);
System.out.println(mensajes.getString("cadena1"));
System.out.println(mensajes.getString("cadena2"));
System.out.println(mensajes.getString("cadena3"));
}
Introducción a la Comunicación Persona-Máquina
325
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Nuevas localizaciones
Si ahora deseáramos que nuestra aplicación respondiese a
nueva nueva localización, como por ejemplo, francés
(Francia), únicamente sería necesario crear un nuevo fichero
de propiedades de nombre MisDatos_fr_FR.properties con las
cadenas traducidas a francés.
La clase Strings2 no sería necesario tocarla ni añadirle
ningún cambio.
Introducción a la Comunicación Persona-Máquina
326
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
7. Bibliografía
Introducción a la Comunicación Persona-Máquina
327
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
Bibliografía Básica
1. La Interacción Persona Ordenador
J. Abascal y otros. Edición en CD-ROM, 2001.
2. Human Computer Interaction ( Second Edition)
Alan Dix, et al. Prentice Hall,1998
3. About Face:The Essentials of User Interface Design
Alan Cooper.IDG Books, 1995
4. The Elements of User Interface Design
Theo Mandel. John Wiley & Sons, Inc, 1997
Introducción a la Comunicación Persona-Máquina
328
Mª del Carmen Suárez Torrente
Ana Belén Martínez Prieto
Juan Manuel Cueva Lovelle
