Introducción a la Comunicación...
Transcript of Introducción a la Comunicación...
Introducción a la Comunicación Persona-Máquina
Cuaderno Nº 42
Mª del Carmen Suárez TorrenteAna 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 INTRODUCCIÓN. ORÍGENES DE LA DISCIPLINA .............................................................................................. 3 1.2 DEFINICIÓN...................................................................................................................................................... 5 1.3 OBJETIVOS........................................................................................................................................................ 8 1.4 CONCEPTOS Y PRINCIPIOS BÁSICOS RELACIONADOS CON LA INTERACCIÓN ............................................... 11 1.5 FACTORES QUE AFECTAN................................................................................................................................25 1.6 DISCIPLINAS QUE CONTRIBUYEN ..................................................................................................................26 1.7 EL FACTOR HUMANO.......................................................................................................................................36
1.7.1 Canales de Entrada y Salida ..............................................................................................................40 1.7.1.1 Ejemplos de restricciones impuestas por la visión........................................................................................41
1.7.2 Memoria..................................................................................................................................................44 1.7.2.1 Tipos......................................................................................................................................................................... 44 1.7.2.2 Repercusión para CPM.......................................................................................................................................... 44
2 INTERFACES GRÁFICAS DE USUARIO: PRINCIPALES ELEMENTOS ...........................50
2.1 OPERACIONES CON TECLADO..........................................................................................................................52 2.1.1 Empleo de Mnemotécnicos .................................................................................................................53 2.1.2 Empleo de Shortcuts...........................................................................................................................56 2.1.3 Navegación y activación por teclado................................................................................................60
2.2 COMPONENTES BÁSICOS ................................................................................................................................ 61 2.2.1 Botones...................................................................................................................................................62
2.2.1.1 Comando (Command)............................................................................................................................................. 62 2.2.1.2 Conmutación (Toggle)........................................................................................................................................... 67 2.2.1.3 Cajas de chequeo (Check Boxes)....................................................................................................................... 70 2.2.1.4 Radio (Radio Buttons) ...........................................................................................................................................71
2.2.2 Combo Box .............................................................................................................................................73 2.2.3 Listas ......................................................................................................................................................77 2.2.4 Slider ......................................................................................................................................................80 2.2.5 Barras de Progreso ..............................................................................................................................83
2.3 COMPONENTES PARA TEXTO...........................................................................................................................86 2.3.1 Etiquetas (Label) ..................................................................................................................................87 2.3.2 Text Field ..............................................................................................................................................89 2.3.3 Password Field ...................................................................................................................................... 91 2.3.4 Text Area ..............................................................................................................................................93
2.4 MENÚS.............................................................................................................................................................95 2.4.1 Barras de Menú.....................................................................................................................................97 2.4.2 Menús Drop-Down ................................................................................................................................98 2.4.3 Submenús ...............................................................................................................................................99 2.4.4 Menus Contextuales (pop-up) ......................................................................................................... 100 2.4.5 Elementos de menú (menuItems).................................................................................................... 102 2.4.6 Checkbox y Radio Menú Items........................................................................................................ 107 2.4.7 Menús Comunes (Archivo, Edición, Ayuda, …) .............................................................................. 109
2.5 CONTENEDORES .............................................................................................................................................114 2.5.1 Barras de Herramientas (ToolBars)................................................................................................115 2.5.2 Paneles (Panels)....................................................................................................................................119 2.5.3 TabbedPane ..........................................................................................................................................121 2.5.4 ScrollPane ............................................................................................................................................ 125
2.6 DIÁLOGOS ..................................................................................................................................................... 126 2.6.1 JOptionPane ........................................................................................................................................ 129 2.6.2 JFileChooser ....................................................................................................................................... 133 2.6.3 JColorChooser .................................................................................................................................... 137
2.7 TABLAS .......................................................................................................................................................... 140 2.8 TOOLTIPS...................................................................................................................................................... 143
3 ESTILOS DE INTERACCIÓN Y METÁFORAS .................................................... 145
3.1 ESTILOS Y PARADIGMAS DE INTERACCIÓN................................................................................................. 147 3.1.1 Introducción........................................................................................................................................ 148 3.1.2 Estilos de Interacción....................................................................................................................... 148
3.1.2.1 Interfaz de línea de comandos ....................................................................................................................... 149 3.1.2.2 Menús y formularios........................................................................................................................................... 152 3.1.2.3 Manipulación directa .......................................................................................................................................... 158 3.1.2.4 Interacción Asistida .......................................................................................................................................... 162
3.1.3 Paradigmas de Interacción .............................................................................................................. 165 3.1.3.1 Ordenador de Sobremesa................................................................................................................................. 166 3.1.3.2 Entornos virtuales y realidad virtual ............................................................................................................. 167 3.1.3.3 Computación ubicua ............................................................................................................................................ 169
3.2 METÁFORAS................................................................................................................................................... 170 3.2.1 Introducción.........................................................................................................................................171 3.2.2 Objetivos de los diseñadores .......................................................................................................... 173 3.2.3 Metáfora de la Interfaz .................................................................................................................. 174
3.2.3.1 Tipos....................................................................................................................................................................... 175 3.2.3.2 Ejemplos............................................................................................................................................................ 179
4 GUÍAS Y ESTÁNDARES ............................................................................ 187
4.1 INTRODUCCIÓN............................................................................................................................................. 189 4.2 PRINCIPIOS ................................................................................................................................................... 190 4.3 REGLAS............................................................................................................................................................191
4.3.1 Estándares........................................................................................................................................... 192 4.3.1.1 Clasificación ......................................................................................................................................................... 193 4.3.1.2 Organismos implicados....................................................................................................................................... 194 4.3.1.3 Ejemplos ................................................................................................................................................................ 195
4.3.2 Guías...................................................................................................................................................... 196 4.3.2.1 De estilo ................................................................................................................................................................ 196 4.3.2.2 Ejemplos............................................................................................................................................................ 198
5 SOPORTE AL USUARIO ............................................................................ 215
5.1 INTRODUCCIÓN............................................................................................................................................. 217 5.2 SOPORTE BÁSICO PARA EL USUARIO ............................................................................................................ 218 5.3 REQUERIMIENTOS DE LA AYUDA.................................................................................................................. 219 5.4 HIPERTEXTO E HIPERMEDIA........................................................................................................................ 226
5.4.1 Lenguajes de marcas ......................................................................................................................... 231
5.5 AYUDA EN LÍNEA.......................................................................................................................................... 243 5.6 ESTRUCTURA DE LA AYUDA .......................................................................................................................... 248 5.7 ORGANIZACIÓN DEL TEXTO DE LA AYUDA .................................................................................................. 255 5.8 EJEMPLO ....................................................................................................................................................... 263
5.8.1 Construcción de ficheros de ayuda para Java con JavaHelp .................................................. 263 5.8.2 Pasos en la construcción de la ayuda ............................................................................................ 269 5.8.3 Incorporación de la ayuda en la aplicación .................................................................................. 289
6 INTERNACIONALIZACIÓN ........................................................................ 300
6.1 INTRODUCCIÓN............................................................................................................................................ 302 6.2 DEFINICIÓN................................................................................................................................................. 303
6.2.1 Internacionalización y localización................................................................................................ 303 6.2.2 Elementos específicos de la localización ..................................................................................... 306
6.3 PROCESO DE INTERNACIONALIZACIÓN....................................................................................................... 313 6.4 VENTAJAS DE CONSTRUIR APLICACIONES INTERNACIONALIZADAS ........................................................ 315 6.5 EJEMPLO ........................................................................................................................................................ 317
7 BIBLIOGRAFÍA ...................................................................................... 327
1Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
1. Fundamentos de la Interacción Persona-Ordenador
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle2Introducción a la Comunicación Persona-Máquina
1. Contenidosn 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 Humanon Canales de Entrada y Salida
n Memoria
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle3Introducción a la Comunicación Persona-Máquina
Orígenes
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle4Introducción a la Comunicación Persona-Máquina
Orígenes (II)
http://www.baddesigns.com/
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle5Introducción a la Comunicación Persona-Máquina
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/
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle6Introducción a la Comunicación Persona-Máquina
Definición (II)
En resumen, CHM abarcaDiseño de interfaces de usuario
Y además otra serie de factoresPsicoló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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle7Introducción a la Comunicación Persona-Máquina
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 produceReducción de productividadTiempos de aprendizaje inaceptablesNiveles de errores que producen frustraciónY como consecuencia: rechazo del sistema
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle8Introducción a la Comunicación Persona-Máquina
Objetivos de CPM
El objetivo de CPM es desarrollar o mejorar laSeguridadUtilidadEfectividadEficienciaY sobre todo la USABILIDAD
de los sistemas interactivos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle9Introducción a la Comunicación Persona-Máquina
UsabilidadUn sistema es usable si
Es fácil de aprender yEs 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álogosEnlace cognitivo entre usuario y sistemaCalidad de la documentaciónIncorporación de ayuda en línea….
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle10Introducción a la Comunicación Persona-Máquina
Usabilidad (II)
El empleo de unos principios de diseño basados en la usabilidadtienen como consecuencia:
Reducción en los costes de producciónReducción en los costes de mantenimiento y apoyoReducción en los costes de usoMejora en la calidad del producto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle11Introducción a la Comunicación Persona-Máquina
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 AprendizajeFlexibilidadSolidez
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle12Introducción a la Comunicación Persona-Máquina
Facilidad de Aprendizaje
La facilidad de aprendizaje tiene como objetivo reducir el esfuerzoque 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ónSíntesisFamiliaridadConsistencia
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle13Introducción a la Comunicación Persona-Máquina
PredicciónUn sistema es predecible cuando los conocimientos adquiridos por el usuario por sus interacciones previas son suficientes para poderdeterminar 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle14Introducción a la Comunicación Persona-Máquina
SíntesisUn 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 serInmediata. Es la ideal. Muestra los cambios sin necesidad de que el usuario lo solicite. Eventual. Muestra los cambios si lo solicita el usuario.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle15Introducción a la Comunicación Persona-Máquina
FamiliaridadEs 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle16Introducción a la Comunicación Persona-Máquina
ConsistenciaImplica 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 necesarioEmplear 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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle17Introducción a la Comunicación Persona-Máquina
FlexibilidadHace referencia a las diferentes formas en las que el usuario y el sistema intercambian información
Principios que contribuyenIniciativa en el diálogoMigración de tareasCapacidad de sustituciónCapacidad de configuración
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle18Introducción a la Comunicación Persona-Máquina
Iniciativa en el diálogoEstá 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 sistemaCuadro de diálogo modal, ya que impide al usuario utilizar ninguna otra ventana de la aplicación hasta que no se cierre.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle19Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle20Introducción a la Comunicación Persona-Máquina
Solidez
La solidez de una interacción incluye las características para poder cumplir los objetivos y su evaluación
Principios que contribuyenCapacidad de observaciónCapacidad de recuperaciónTiempos de respuestaAdecuación de las tareas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle21Introducción a la Comunicación Persona-Máquina
ObservabilidadPermite al usuario evaluar el estado interno del sistema por medio de su representación percibida en la interfaz
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle22Introducción a la Comunicación Persona-Máquina
Recuperabilidad
Hace referencia a la capacidad de conseguir el objetivo deseado después de reconocer un error en la interacción
“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
Borrar Fichero: Difícil de deshacer
Renombrar Fichero: Fácil de deshacer
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle23Introducción a la Comunicación Persona-Máquina
Tiempos de respuestaRepresenta el tiempo que necesita el sistema para expresar los cambios de estado al usuario
Han de ser lo menores posibleEn 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle24Introducción a la Comunicación Persona-Máquina
Adecuación de las tareasHace 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle25Introducción a la Comunicación Persona-Máquina
Factores que afectan a la CPMFactores Organizativos
Entrenamiento, diseño del local de trabajo, política, cargos, organización del trabajo
Factores del EntornoRuidos, ventilación, calefacción, iluminación, ventilación
Factores de Salud y SeguridadStress, dolores de cabeza, desordenes musculares
Factores de Capacidad y Proceso Cognitivo del UsuarioMotivación, satisfacción, personalidad, nivel de experiencia
Factores de ConfortSilla, diseño del equipamiento
Interfaz de UsuarioDispositivos 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 TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle26Introducción a la Comunicación Persona-Máquina
Disciplinas que contribuyen
CHM
Programación
Inteligencia Artificial
Ingeniería del SoftwareErgonomía
Diseño Gráfico
Sociología
Psicología
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle27Introducción a la Comunicación Persona-Máquina
Ingeniería del Software
A n á lis is y d e f in ic ió n d e lo s
re q u e r im ie n to s
1
D ise ñ o d e l s is te m a y d e l S o f tw a re
2
Im p le m e n ta c ió n y te s t u n ita r io
3
In te g ra c ió n y te s t d e l s is te m a
4
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle28Introducción a la Comunicación Persona-Máquina
Ingeniería del Software (II)
Pensar como usuario90% 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 usuariosObservando su práctica habitual de trabajoIncluyéndolos en el equipo de diseño
Hacer el proceso de diseño iterativoPrototipos. Sistemas de prueba que simulan o tienen implementadas partes del sistema final
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle29Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle30Introducción a la Comunicación Persona-Máquina
Ergonomía (II)Organización de los controles y las pantallas
Entorno físico de la interacción
Colores
Aspectos de salud
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle31Introducción a la Comunicación Persona-Máquina
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ípicaFrecuencia. Se agrupan de acuerdo a su frecuencia de uso. Los más usados deben ser los más fácilmente accesibles.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle32Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle33Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle34Introducción a la Comunicación Persona-Máquina
Inteligencia ArtificialDiseña programas que simulen diferentes aspectos del comportamiento de la inteligencia humana
• Tutores y Sistemas Expertos• Interfaces de Lenguaje Natural empleando la voz• ...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle35Introducción a la Comunicación Persona-Máquina
Psicología Contribuye a CHM mediante conocimientos y teorías acerca de cómo los sujetos
se comportanprocesan la información yactú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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle36Introducción a la Comunicación Persona-Máquina
El Factor Humano
n Introducción
n Canales de entrada y salidan Ejemplos de restricciones impuestas por la visión
n Memoria n Tipos
n Repercusión para CPM
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle37Introducción a la Comunicación Persona-Máquina
IntroducciónA 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle38Introducción a la Comunicación Persona-Máquina
Introducción (II)
La Psicología cognitiva estudia como comprender y representar la manera en la que los seres humanos interaccionan con el ordenador.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle39Introducción a la Comunicación Persona-Máquina
Introducción (III)
Modelo de procesamiento humanoRepresenta 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 exteriorSistema motor, controla las accionesSistema cognitivo, proporciona el procesamiento necesario para conectar los dos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle40Introducción a la Comunicación Persona-Máquina
Canales de Entrada y SalidaEn 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ídoTactoOlfatoGusto
La salida se produce mediante el movimiento de los dedos, extremidades, ojos, cabeza y el sistema vocal
Básicos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle41Introducción a la Comunicación Persona-Máquina
Restricciones Impuestas por el sistema visual
Tamaño de letra >= 12
Espaciado proporcional entre líneas
Fuentes no complicadas
No mayúsculas
TextoTexto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle42Introducción a la Comunicación Persona-Máquina
El color
Todos Sin azul Sin rojo Sin verde
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle43Introducción a la Comunicación Persona-Máquina
Restricciones (II)Impuestas por el sistema visual
Elegir combinaciones de colores compatibles. Evitar rojo-verde, 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).
ColorColor
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle44Introducción a la Comunicación Persona-Máquina
La Memoria Humana
Almacenamientosensorial
Almacén de memoria a corto plazo
Almacén de memoria a largo plazo
Existen tres tipos de memoria que interactuan:Almacenamiento sensorialAlmacén de memoria a corto plazoAlmacén de memoria a largo plazo
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle45Introducción a la Comunicación Persona-Máquina
Almacenamiento SensorialExiste 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle46Introducción a la Comunicación Persona-Máquina
Memoria a Corto Plazo (MCP) Es la memoria de trabajo
Es la que se emplea, por ejemplo, al multiplicar mentalmente 35x6
CaracterísticasTiene una capacidad limitada de tiempo y cantidad (7+2 elementos)La velocidad de acceso es elevada
Técnicas para estimular la MCPEnsayo (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...)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle47Introducción a la Comunicación Persona-Máquina
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 rehacerMantener los últimos datos introducidosCortar, copiar y pegar del portapapeles
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle48Introducción a la Comunicación Persona-Máquina
Memoria a Largo Plazo (MLP)Es un almacén de
Capacidad y duración ilimitadaVelocidad de acceso baja
Su principal problema es la recuperación de la información almacenada
Técnicas para estimular la MLPAcudir al reconocimiento
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle49Introducción a la Comunicación Persona-Máquina
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ónEmplear ‘tooltips’ y ayuda sensible al contextopara ayudar a reconocer la informaciónOpción de volver a las opciones por defecto del sistema
50Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
2. Interfaces Gráficas de Usuario:Principales Elementos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle51Introducción a la Comunicación Persona-Máquina
2. Contenidosn Operaciones con teclado
n Componentes básicos
n Componentes para texto
n Menús
n Contenedores
n Diálogos
n Tablas
n ToolTips
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle52Introducción a la Comunicación Persona-Máquina
Operaciones con TecladoRecomendaciones para el uso de operaciones de teclado:
Empleo de MnemotécnicosEmpleo de ShortcutsNavegación y activación por teclado
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle53Introducción a la Comunicación Persona-Máquina
MnemotécnicosEs 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”
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle54Introducción a la Comunicación Persona-Máquina
Mnemotécnicos (II)Algunas propiedades y métodos relacionados con los Mnemotécnicos
Propiedades para asignar mnemotécnicos en tiempo de diseñomnemonic 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ónsetMnemonic, para botones, checkboxes, radio botones, botones de conmutación y títulos y elementos de menúsetDisplayedMnemonic, para etiquetas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle55Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle56Introducción a la Comunicación Persona-Máquina
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
EjemploPara copiar siempre Ctrl+CPara imprimir Ctrl+P...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle57Introducción a la Comunicación Persona-Máquina
Foco de TecladoA veces llamado “foco de entrada”Indica la ventana activa o el componente donde tendrá efecto la siguiente pulsación del usuarioCuando 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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle58Introducción a la Comunicación Persona-Máquina
Foco de Teclado (II)Algunas propiedades y métodos relacionados con el foco
Propiedades de los componentesrequestFocusEnabled
True, puede recibir el focoFalse, no puede recibir el foco
nextFocusableComponent, permite señalar cual es el siguiente componente en recibir el foco.
MétodosrequestFocus, asigna el foco al componente que lo invocagetNextFocusableComponent, devuelve el siguiente componente que puede recibir el focosetNextFocusableComponent, 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle59Introducción a la Comunicación Persona-Máquina
Foco de Teclado (III)- Ejemplo
jTextField1.requestFocus();
click
FocojTextField1
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle60Introducción a la Comunicación Persona-Máquina
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 componentesShitf-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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle61Introducción a la Comunicación Persona-Máquina
Componentes BásicosBotones
Comando (Command)Conmutación (Toggle)Cajas de chequeo (Check Boxes)Radio (Radio Buttons)
Combo BoxListas SliderBarras de Progreso
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle62Introducción a la Comunicación Persona-Máquina
Botones de comando (JButton)
Es un botón que puede contener texto, gráficos o ambosGeneralmente 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écnicoPara los que no llevan texto conviene asociarles tooltips que describan su nombre o función
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle63Introducción a la Comunicación Persona-Máquina
Botones de comando (II)Los botones que sólo contienen texto, éste debe estar centradodentro del botónLos botones que contienen texto y gráficos:
El texto debe ir colocado después o debajo del gráficoHay que incluir mnemotécnicos en el texto (excepto en el botón por defecto y de cancelación)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle64Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle65Introducción a la Comunicación Persona-Máquina
Botones de comando (IV)Fijándonos en algunas propiedades interesantes de los botones de comando:
Relacionadas con la imagendisabledIcon // imagen cuando el botón está deshabilitadoicon // imagen cuando el botón está en estado normalpressedIcon // imagen si el botón está pulsadorolloverIcon //imagen cuando pasa el ratón por encima del botónselectedIcon // imagen si el botón está seleccionado
Relacionadas con el colorbackground // color del fondo foreground // color del texto
Relacionadas con la alineaciónhorizontalAligment y verticalAlignment-> alineación del contenido del botónverticalTextPosition y horizontalTextPosition -> como está situado el texto respecto a la imagen
OtrasactionCommandenabledfontmarginmnemonicnextFocusableComponenttexttoolTipText
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle66Introducción a la Comunicación Persona-Máquina
Botones de comando (V)Botón por defecto:
Aparece en los cuadros de diálogoSe 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.
Botón de cancelación:Se activa al pulsar la tecla Escape y provoca la ejecución de las acciones asociadas al botón identificado como de cancelaciónA 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle67Introducción a la Comunicación Persona-Máquina
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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle68Introducción a la Comunicación Persona-Máquina
Botones de conmutación (II)Opciones independientes
Se comportan como un checkboxAunque 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 exclusivasUn 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 toolbarscomo en cuadros de diálogo.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle69Introducción a la Comunicación Persona-Máquina
Botones de conmutación (III)Fijándonos en algunas propiedades y métodos interesantes:
Propiedadselected,
True si él botón está ONFalse si el botón está OFF
buttonGrouppara agrupar los botones y garantizar que presenten opciones mutuamente exclusivas
MétodosisSelected, devuelve el estado del botón (true si está on)setSelected, asigna un estado al botón
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle70Introducción a la Comunicación Persona-Máquina
CheckBox (JCheckBox)
Es un control que representa dos estados: on y off
Algunas propiedades y métodos interesantes:Propiedades:
selectedbuttonGroup
Métodos: isSelected y setSelectedsetMnemonic puede emplearse para asignar mnemotécnicos.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle71Introducción a la Comunicación Persona-Máquina
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 momentoAunque 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle72Introducción a la Comunicación Persona-Máquina
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 panelal que se le indica un borde y un título.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle73Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle74Introducción a la Comunicación Persona-Máquina
Combo Boxes (II)No Editables
A veces llamados List BoxesMuestran una lista de la que el usuario puede elegir un elementoSe suelen emplear en vez de un grupo de botones de radio cuando
El espacio en la aplicación es limitado y/oEl número de opciones posibles es grande
EditablesCombina un campo de texto con un botón (flecha) que se emplea para mostrar una lista de opcionesEl usuario puede teclear, seleccionar o editar textoSe suelen emplear para ahorrar tiempo al usuario permitiéndole teclear directamente un valor (además de por supuesto seleccionarlo de la lista)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle75Introducción a la Comunicación Persona-Máquina
Combo Boxes (III)Algunas propiedades y métodos interesantes:
Propiedadeseditable // indica si el Combo es Editable o no
MétodosaddItem // añade un nuevo ítem al Combo
getSelectedItem // devuelve el ítem seleccionado
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle76Introducción a la Comunicación Persona-Máquina
Combo Boxes - Ejemplo
String nombre= (String) jComboBox1.getSelectedItem();jTextField1.setText("Esto es un " + nombre);jLabel2.setIcon(new ImageIcon("imagenes/"+nombre+".gif"));
Cada vez que se selecciona un ítem de la lista
// inicialización del contenido del ComboBoxprivate String[] contenidos = {"Caballito","Manzana","Naranja","Platano","Tiburon","Tomate","Trucha"};...
private JComboBox jComboBox1 = new JComboBox(contenidos);
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle77Introducción a la Comunicación Persona-Máquina
Listas (JList)Es un componente que muestra un conjunto de ítems de texto, gráfico o ambos.
Permite tres modos de selecciónÍtem sencilloRango simpleRangos múltiples
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle78Introducción a la Comunicación Persona-Máquina
Listas (II)Algunas propiedades y métodos interesantes:
PropiedadesselectionMode // indica el modo de selección (SINGLE_SELECTION, SINGLE_INTERVAL_SELECTION, MULTIPLE_INTERVAL_SELECTION)
MétodosgetSelectedValue // devuelve el valor seleccionado para la selección simple
getSelectedIndexgetSelectedValuesgetSelectedIndicesgetModel
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle79Introducción a la Comunicación Persona-Máquina
Listas - Ejemplo// inicialización del contenido de la listaprivate 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());
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle80Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle81Introducción a la Comunicación Persona-Máquina
Sliders (II)Algunas propiedades y métodos interesantes:
Propiedadesmaximum 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étodosgetValue // devuelve el valor seleccionado
createStandardLabels // crea las etiquetas estándar (números)
setLabelTable // asigna las etiquetas al Slider
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle82Introducción a la Comunicación Persona-Máquina
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()));
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle83Introducción a la Comunicación Persona-Máquina
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 progresoPuede emplearse con un texto que indique por ejemplo el porcentaje completado
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle84Introducción a la Comunicación Persona-Máquina
Progress Bar (II)Algunas propiedades y métodos interesantes:
Propiedadesmaximum 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étodossetValue // asigna un valor a la barra de progreso
setString // asigna la cadena que aparecerá en la barra de progreso
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle85Introducción a la Comunicación Persona-Máquina
Progress Bar - Ejemplo
cont=cont+10;
jProgressBar1.setValue(cont);
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle86Introducción a la Comunicación Persona-Máquina
Componentes para TextoPermiten a los usuarios ver y editar texto en una aplicaciónPosibilidades
LabelText FieldPassword FieldText Area...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle87Introducción a la Comunicación Persona-Máquina
Label (JLabel)
Muestra texto, gráficos o ambos, pero de sólo lecturaNo puede ser seleccionada por el usuarioEl texto que contienen ha de ser breve y la terminología empleada ha de ser familiar para los usuariosLa etiqueta ha de estar inactiva cuando el componente que describe esté inactivoLas 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle88Introducción a la Comunicación Persona-Máquina
Label (II)Tiene dos funciones en una aplicación:
Identificar componentesComunicar 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle89Introducción a la Comunicación Persona-Máquina
Text Field (JTextField)
Muestra una línea de texto. Puede ser 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 enterMueva el foco fuera de este campo
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle90Introducción a la Comunicación Persona-Máquina
Text Field (II)Algunas propiedades y métodos interesantes:
Propiedadeseditable // indica si es editable o no el TextField
text // valor que contiene
tooTipText // tooltip asociado
MétodossetText // Asigna el valor a la propiedad Text del JTextField
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle91Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle92Introducción a la Comunicación Persona-Máquina
Password Field (II)Algunas propiedades y métodos interesantes (además de los vistos para el jTextField)
PropiedadesechoChar // para indicar el carácter de máscara
MétodossetEchoChar //cambia el carácter de máscara
getPassword // devuelve el valor introducido en el PassworField. Se emplea en vez de del getText de jTextField
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle93Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle94Introducción a la Comunicación Persona-Máquina
Text Area (II)Algunas propiedades y métodos interesantes:
PropiedadeslineWrap->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étodosappend // 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle95Introducción a la Comunicación Persona-Máquina
MenúsBarras de MenúMenús Drop-DownSubmenúsMenus Contextuales (pop-up)Elementos de menú (menuItems)Checkbox y Radio Menú ItemsMenús Comunes (Archivo, Edición, Ayuda, …)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle96Introducción a la Comunicación Persona-Máquina
MenúsMuestran 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ú )SubmenuContextuales
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle97Introducción a la Comunicación Persona-Máquina
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ú
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle98Introducción a la Comunicación Persona-Máquina
Menús drop-downUn 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 TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle99Introducción a la Comunicación Persona-Máquina
SubmenusSon 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 shortcutsHay 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle100Introducción a la Comunicación Persona-Máquina
Menús Contextuales (JPopupMenu)
También llamados menús pop-upOfrecen elementos de menú que son aplicables al objeto o región en la que está localizado el puntero del ratón
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle101Introducción a la Comunicación Persona-Máquina
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 drop-down.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle102Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle103Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle104Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle105Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle106Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle107Introducción a la Comunicación Persona-Máquina
Checkbox Menú ItemsSe emplean para presentar a los usuarios elementos de menú con opciones
no exclusivasHay 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle108Introducción a la Comunicación Persona-Máquina
Radio Button Menú ItemsSe 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle109Introducción a la Comunicación Persona-Máquina
Menús comunesOrganizació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 AyudaSi 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle110Introducción a la Comunicación Persona-Máquina
Menús comunesArchivo
ArchivoMuestra 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle111Introducción a la Comunicación Persona-Máquina
Menús comunesEdición
EdiciónMuestra ítems que permiten a los usuarios cambiar o editar el contenido de sus documentos u otros datos.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle112Introducción a la Comunicación Persona-Máquina
Menús comunesFormato y Ver
FormatoIncorpora ítems que permiten a los usuarios cambiar el formato de los elementos en sus documentos, como por ejemplo fuentes, tamaños, estilos, ....
VerProporciona posibilidades para que los usuarios ajusten la visión de los datos en una ventana
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle113Introducción a la Comunicación Persona-Máquina
Menús comunesAyuda
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 productoVersiónLogo de la compañíaLogo del productoNombre de los autores
Antes del Acerca de siempre hay un separador
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle114Introducción a la Comunicación Persona-Máquina
ContenedoresBarras de Herramientas (ToolBars)Paneles (Panels)TabbedPaneScrollPane
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle115Introducción a la Comunicación Persona-Máquina
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 componentesCuando 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle116Introducción a la Comunicación Persona-Máquina
Barra de Herramientas (II)Por lo general aparecen dispuestas horizontalmente pero pueden ser arrastradas a cualquier lugar de la ventana o a una ventana separadaSe puede especificar que la Toolbar se puede mover (propiedad floatable)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle117Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle118Introducción a la Comunicación Persona-Máquina
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étodossetFloatableisFloatableaddSeparator // añade un separador al final de la toolbar
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle119Introducción a la Comunicación Persona-Máquina
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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle120Introducción a la Comunicación Persona-Máquina
Paneles (II)Algunas propiedades y métodos interesantes:
Propiedadesborder // 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étodosadd // 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle121Introducción a la Comunicación Persona-Máquina
Tabbed Pane (JTabbedPane)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle122Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle123Introducción a la Comunicación Persona-Máquina
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 bastanteinformación y se dispone de poco espacio
Presentación de diferentes vistas de la misma información
…
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle124Introducción a la Comunicación Persona-Máquina
Tabbed Pane (IV)Algunas propiedades y métodos interesantes:
PropiedadestabPlacement // indica la ubicación de las pestañas:TOP,LEFT, BOTTOM, RIGHT
MétodosaddTab // 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle125Introducción a la Comunicación Persona-Máquina
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 horizontalScrollBarPolicyLo normal es que aparezcan cuando sean sean necesarias
Las barras de Scroll se obtienen cuando se coloca el componente dentro del Scroll Pane
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle126Introducción a la Comunicación Persona-Máquina
JOptionPaneJFileChooserJColorDialog
Diálogos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle127Introducción a la Comunicación Persona-Máquina
DiálogosLos 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle128Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle129Introducción a la Comunicación Persona-Máquina
JOptionPanePermite 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle130Introducción a la Comunicación Persona-Máquina
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 generalsiempre es un frame (this) y por tanto el cuadro de diálogo siempre aparece desplegado sobre el centro delframe. Sin embargo, se puede especificar como parentalgún otro componente que esté dentro del frame(ej. jButton) y esto hará que el cuadro de diálogo sedespliegue centrado sobre ese componente.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle131Introducción a la Comunicación Persona-Máquina
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) {
. . .
}
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle132Introducción a la Comunicación Persona-Máquina
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);
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle133Introducción a la Comunicación Persona-Máquina
JFileChooser
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle134Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle135Introducción a la Comunicación Persona-Máquina
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());
}elsejTextField1.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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle136Introducción a la Comunicación Persona-Máquina
JFileChooser (IV)Algunas propiedades y métodos interesantes:
PropiedadesdialogTitle // título para el diálogo
multiSelectionEnabled // permite múltiple selección de ficheros
MétodosgetSelectedFile // devuelve el fichero actualmente seleccionado
setCurrentDirectory // cambia el directorio
showDialogshowOpenDialogshowSaveDialog
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle137Introducción a la Comunicación Persona-Máquina
JColorChooser
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle138Introducción a la Comunicación Persona-Máquina
JColorChooserEs 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 showDialogdevuelve el color, por el contrario, si el usuario cancela o cierra la ventana showDialog devuelve null.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle139Introducción a la Comunicación Persona-Máquina
JColorChooserEjemplo
Color nColor = JColorChooser.showDialog (this,”Titulo”,jLabel1.getBackground());
If (nColor!= null)
jLabel1.setBackground(nColor); // asigna el color seleccionado en el cuadro a la etiqueta
Padre (parent) del Componente
Título del cuadro de diálogo
Color inicialmente seleccionado
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle140Introducción a la Comunicación Persona-Máquina
Tablas (JTable)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle141Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle142Introducción a la Comunicación Persona-Máquina
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étodosgetEditingColumn() // 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle143Introducción a la Comunicación Persona-Máquina
ToolTipsProporcionan 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle144Introducción a la Comunicación Persona-Máquina
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
145Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
3. Estilos de Interacción y Metáforas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle146Introducción a la Comunicación Persona-Máquina
3. Contenidosn Estilos y Paradigmas de Interacción
n Introducción
n Estilos de Interacción
n Paradigmas de Interacción
n Metáforas n Introducción
n Objetivos de los diseñadores
n Metáfora de la Interfaz
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle147Introducción a la Comunicación Persona-Máquina
Estilos y Paradigmas de InteracciónIntroducciónEstilos de Interacción
Interfaz de línea de comandosMenús y formulariosManipulación directaInteracción Asistida
Paradigmas de InteracciónOrdenador de SobremesaEntornos virtuales y realidad virtualComputación ubicuaRealidad aumentada
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle148Introducción a la Comunicación Persona-Máquina
Introducción
Estilo de InteracciónTermino 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 comandosMenús y formulariosManipulación directaInteracción asistida
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle149Introducción a la Comunicación Persona-Máquina
Interfaz de línea de comandos
C:\Ejemplo>javac HolaMundoJavac: invalid argument: HolaMundouse: javac [-g] [-O] [-classpath path] [-d dir] file.java...C:\Ejemplo>javac HolaMundo.javaC:\Ejemplo>java HolaMundo¡¡Hola Mundo!!C:\Ejemplo>
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle150Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle151Introducción a la Comunicación Persona-Máquina
Línea de comandos (III)Ventajas:
Es potente ya que ofrece acceso directo a la funcionalidad del sistemaEs 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle152Introducción a la Comunicación Persona-Máquina
MenúsSe 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle153Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle154Introducción a la Comunicación Persona-Máquina
Menús de Pantalla Completa• El principal problema de estos menús de pantalla completa es que ocupaban mucho espacio en la pantalla
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle155Introducción a la Comunicación Persona-Máquina
Menús de Barra• Con el fin de resolver este problema surgieron los menús desplegables (de barra) y los menús pop-up
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle156Introducción a la Comunicación Persona-Máquina
Menús en Cascada
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle157Introducción a la Comunicación Persona-Máquina
Menús Contextuales (Pop-Up)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle158Introducción a la Comunicación Persona-Máquina
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).
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle159Introducción a la Comunicación Persona-Máquina
Interfaces Manipulación Directa (II) Beneficios
Sintaxis mas sencilla, reduce los erroresAprendizaje más rápido y mejor retenciónIncita a la exploración por parte del usuario
ProblemasSe necesitan más recursos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle160Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle161Introducción a la Comunicación Persona-Máquina
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, etcEj. Escritorio de Windows
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle162Introducción a la Comunicación Persona-Máquina
Interacción AsistidaTiene 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle163Introducción a la Comunicación Persona-Máquina
AgentesPrograma 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 agentesLiberar a los usuarios de tareas rutinarias tales como:
Copias de seguridadBúsquedas de determinadas noticias
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle164Introducción a la Comunicación Persona-Máquina
AsistentesSon 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 hacerPueden 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle165Introducción a la Comunicación Persona-Máquina
Paradigmas de interacciónLos paradigmas de interacción representan los ejemplos o modelos de los que se derivan todos los sistemas de interacciónLos paradigmas interactivos actuales son:
Ordenador de Sobremesa
Entornos virtuales y realidad virtual
Computación ubicua
Realidad aumentada
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle166Introducción a la Comunicación Persona-Máquina
Ordenador de sobremesaEs 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle167Introducción a la Comunicación Persona-Máquina
Entornos virtuales y realidad virtualDescriben 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
BeneficiosPermiten realizar simulaciones imposibles de realizar en otro sitio
Problemas:Alto costeCansancio del usuario
Ejemplos de uso de realidad virtualEntrenamiento de operarios en una central nuclearEntrenamiento de bomberosReconstrucciones virtuales de patrimonio histórico
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle168Introducción a la Comunicación Persona-Máquina
Entornos virtuales y realidad virtual (II)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle169Introducción a la Comunicación Persona-Máquina
Computación ubicuaMark 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle170Introducción a la Comunicación Persona-Máquina
MetáforasIntroducciónObjetivos de los diseñadoresMetáfora de la Interfaz
TiposEjemplos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle171Introducción a la Comunicación Persona-Máquina
IntroducciónEl 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)Hace referencia al color, animación, sonidos, gráficos, texto, etc. empleados para presentar la información al usuarioRepresenta el 10% del trabajo del diseñador
Interacción (feel)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 usuarioRepresenta el 60% del trabajo del diseñador
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle172Introducción a la Comunicación Persona-Máquina
Introducción (II)
10%
30%
60%
PresentaciónInteracción
Interrelaciones entre Objetos
Look and Feel Iceberg Chart (D. Liddle)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle173Introducción a la Comunicación Persona-Máquina
Objetivos de los DiseñadoresEl objetivo principal de los diseñadores es diseñar y facilitar el proceso de desarrollo de un modelo mental efectivo en los usuariosPara 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle174Introducción a la Comunicación Persona-Máquina
Metáfora de la InterfazEl 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle175Introducción a la Comunicación Persona-Máquina
Metáfora de la Interfaz. Tipos Hay diferentes tipos de metáforas
Verbales
Visuales
...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle176Introducción a la Comunicación Persona-Máquina
Metáforas VerbalesSon 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle177Introducción a la Comunicación Persona-Máquina
Metáforas Visuales - OrígenesRepresentan 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle178Introducción a la Comunicación Persona-Máquina
Metáforas VisualesLas 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 decomprensión importantes
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle179Introducción a la Comunicación Persona-Máquina
Ejemplos de Metáforas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle180Introducción a la Comunicación Persona-Máquina
Metáfora de EscritorioFue 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
Es una metáfora que nos da el marco para todas las otras
metáforas del sistema
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle181Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle182Introducción a la Comunicación Persona-Máquina
Agenda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle183Introducción a la Comunicación Persona-Máquina
CortarSe emplear para cortar un trozo de documento, una parte de un dibujo,...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle184Introducción a la Comunicación Persona-Máquina
PapeleraIdea 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle185Introducción a la Comunicación Persona-Máquina
PintarEl 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle186Introducción a la Comunicación Persona-Máquina
CorreoElemento 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.
187Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
4. Guías y Estándares
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle188Introducción a la Comunicación Persona-Máquina
4.Contenidosn Introducción
n Principios
n Reglasn Estándares
n Clasificación
n Organismos implicados
n Ejemplos
n Guíasn De estilo
n Ejemplos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle189Introducción a la Comunicación Persona-Máquina
IntroducciónEs 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle190Introducción a la Comunicación Persona-Máquina
PrincipiosEstá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
...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle191Introducción a la Comunicación Persona-Máquina
ReglasSon 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 obligatoriocumplirlo.
Guías de Estilo.
Son reglas que sugieren en vez de obligar.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle192Introducción a la Comunicación Persona-Máquina
EstándaresUn 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle193Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle194Introducción a la Comunicación Persona-Máquina
Comités implicados en la creación de EstándaresISO (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 webDisponibilidad totalmente gratuita: http://www.w3c.org
...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle195Introducción a la Comunicación Persona-Máquina
Ejemplos de EstándaresUno 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle196Introducción a la Comunicación Persona-Máquina
Guías de estiloLas guías especifican
Cuándo usar los elementos y controles (widgets) de la interfazCómo presentarlosY cuáles son las técnicas usadas para interaccionar con ellos
Ej. Los RadioBotonesDeben emplearse para opciones mutuamente exclusivasSuelen 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle197Introducción a la Comunicación Persona-Máquina
Guías. TiposLas 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle198Introducción a la Comunicación Persona-Máquina
Guías de Estilo ComercialesSun
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle199Introducción a la Comunicación Persona-Máquina
Botones de comandoLos botones que sólo contienen texto, éste debe estar centradodentro del botónLos botones que contienen texto y gráficos:
El texto debe ir colocado después o debajo del gráficoHay que incluir mnemotécnicos en el texto (excepto en el botón por defecto y de cancelación)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle200Introducción a la Comunicación Persona-Máquina
Label (JLabel)
Muestra texto, gráficos o ambos, pero de sólo lecturaNo puede ser seleccionada por el usuarioEl texto que contienen ha de ser breve y la terminología empleada ha de ser familiar para los usuariosLa etiqueta ha de estar inactiva cuando el componente que describe esté inactivoLas 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle201Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle202Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle203Introducción a la Comunicación Persona-Máquina
Menús comunesAyuda
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 productoVersiónLogo de la compañíaLogo del productoNombre de los autores
Antes del Acerca de siempre hay un separador
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle204Introducción a la Comunicación Persona-Máquina
Consideraciones de la guía de estilo de Java sobre los diálogos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle205Introducción a la Comunicación Persona-Máquina
Elementos de un Diálogo
Título
Elementos de la IU
Fila de Botones
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle206Introducción a la Comunicación Persona-Máquina
Características GeneralesEl 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle207Introducción a la Comunicación Persona-Máquina
Orden de TabulaciónEl orden de tabulación debería concordar con el orden de lectura (del último pasar al primero)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle208Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle209Introducción a la Comunicación Persona-Máquina
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)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle210Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle211Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle212Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle213Introducción a la Comunicación Persona-Máquina
Botón de Cancelación en un Cuadro de Diálogo con JBuilder - Ejemplo
click
Se invoca al método muestra()
jTextArea1
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle214Introducción a la Comunicación Persona-Máquina
Botón de Cancelación en un Cuadro de Diálogo con JBuilder – Ejemplo (II)
if (e.getKeyCode()==KeyEvent.VK_ESCAPE)muestra();
}
void jTextArea1_keyPressed(KeyEvent e) {
• 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()
215Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
5. Soporte al Usuario
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle216Introducción a la Comunicación Persona-Máquina
5. Contenidosn Introducción
n Soporte básico para el usuario
n Requerimientos de la ayuda
n Hipertexto e Hipermedian Lenguajes de marcas
n Ayuda en línea
n Estructura de la ayuda
n Organización del texto de la ayuda
n Ejemplo
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle217Introducción a la Comunicación Persona-Máquina
IntroducciónLa documentación de un producto forma parte de la interfaz de usuario La documentación debe considerarse al diseñar los testde usabilidadLa documentación incluye
Información de la instalaciónAyuda en líneaMensajesTutorialesCualquier otra información de soporte para el producto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle218Introducción a la Comunicación Persona-Máquina
Soporte Básico al UsuarioLa documentación básica para el usuario (o soporte básico) está constituida por:
Guía de Referencia RápidaRecordatorio al usuario de determinadas acciones con herramientas con las que ya estáfamiliarizado
Ayuda en línea Solicitada por ejemplo cuando el usuario ha encontrado un problema al realizar una tarea
Explicación Completa (Manual)Explicación completa sobre una herramienta o comando
TutorialParticularmente útil para los nuevos usuarios de una herramienta. Proporciona instrucciones paso-a-paso de cómo usar la herramienta
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle219Introducción a la Comunicación Persona-Máquina
Requerimientos de la AyudaDisponibilidadPrecisión y DetalleConsistenciaRobustezFlexibilidadNo Obstructiva
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle220Introducción a la Comunicación Persona-Máquina
DisponibilidadEl 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle221Introducción a la Comunicación Persona-Máquina
Precisión y DetalleLa ayuda ha de estar acorde con la versión actual del productoHa 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle222Introducción a la Comunicación Persona-Máquina
ConsistenciaTodas las partes de la ayuda (y la documentación) han de ser consistentes en términos de
ContenidosTerminologíaEstilo
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle223Introducción a la Comunicación Persona-Máquina
RobustezLos 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle224Introducción a la Comunicación Persona-Máquina
FlexibilidadEn 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle225Introducción a la Comunicación Persona-Máquina
No ObstructivaLa ayuda no se debe interponer en el uso normal de la aplicación
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle226Introducción a la Comunicación Persona-Máquina
Hipertexto e Hipermedia
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle227Introducción a la Comunicación Persona-Máquina
Hipertexto - IntroducciónPresentar 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.
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.
Lineal
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle228Introducción a la Comunicación Persona-Máquina
Hipertexto- DefiniciónEl 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle229Introducción a la Comunicación Persona-Máquina
Hipermedia -IntroducciónTí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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle230Introducción a la Comunicación Persona-Máquina
HipermediaLos 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle231Introducción a la Comunicación Persona-Máquina
Lenguajes de Marcas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle232Introducción a la Comunicación Persona-Máquina
HTMLHMTL (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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle233Introducción a la Comunicación Persona-Máquina
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.
Estructura de un documentoEtiquetas HTML
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle234Introducción a la Comunicación Persona-Máquina
<HTML><!-- Esto es un comentario -->
<HEAD><TITLE> Título de la página </TITLE>
</HEAD>
<BODY>Contenido de la página
</BODY>
</HTML>
<etiqueta atributo1 atributo2=valor2> .. </etiqueta>
Estructura de un documentoLa Estructura
Incluye el contenidodel documento
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle235Introducción a la Comunicación Persona-Máquina
TítulosHTML dispone de 6 niveles:
<H1> Título nivel 1 </H1><H2> Título nivel 2 </H2>...<H6> Título nivel 6 </H6>
Saltos de línea Etiqueta <BR> (no es necesaria etiqueta de cierre)
Línea divisoria Etiqueta <HR>(no es necesaria etiqueta de cierre)
Párrafos<P>.... </P>
Estructura de un documentoJerarquía del Documento
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle236Introducción a la Comunicación Persona-Máquina
Estilos Lógicos:
Ejemplo
Estructura de un documentoUtilización de Estilos
Negrita Cursiva Subrayado TeletipoEtiqueta <B>... </B> <I>... </I> <U>...</U> <TT>... </TT>
<B>ejemplo sencillo</B>
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle237Introducción a la Comunicación Persona-Máquina
Creación de ListasListas Ordenadas y no Ordenadas
O rd e n a d a N o O rd e n a d aE tiq u e ta < O L >
< L I> U n o < L I> D o s < L I> T r e s< /O L >
< U L > < L I> U n o < L I> D o s < 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><LI> Nuevo<LI> Abrir<LI> Guardar
</UL>
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle238Introducción a la Comunicación Persona-Máquina
Para establecer enlaces se emplea la etiqueta <A>..</A> con el atributoHREF que toma como valor el identificador del recurso al que se desea apuntar.
Ejemplo:
<A HREF=”fuentes/guardar.html”> enlace </A>
Uso de Enlaces
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle239Introducción a la Comunicación Persona-Máquina
Atributos para la etiqueta <BODY>:BGCOLOR: color de fondo de la páginaTEXT: color del texto
Color para el Cuerpo del Documento
<BODY BGCOLOR=BLACK TEXT=WHITE>...</BODY>
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle240Introducción a la Comunicación Persona-Máquina
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>
Control del Texto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle241Introducción a la Comunicación Persona-Máquina
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>
Inclusión de las Imágenes
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle242Introducción a la Comunicación Persona-Máquina
XMLXML (Extensible Markup Language) es otro lenguaje de marcas pero extensible, es decir, en el que el usuario establece que marcas o etiquetas emplear.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle243Introducción a la Comunicación Persona-Máquina
Ayuda en Línea
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle244Introducción a la Comunicación Persona-Máquina
Asistencia en LíneaLa 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 contextoTutorialesWizards
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle245Introducción a la Comunicación Persona-Máquina
Ayuda en LíneaA la hora de implementar la ayuda en línea hay que desarrollar un plan teniendo en cuenta los siguientes apartados
Audiencia de la aplicaciónContenidos de las preguntasEstructura de las preguntas
Referencias cruzadasDefinición de términos
Uso de preguntas sensibles al contexto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle246Introducción a la Comunicación Persona-Máquina
Audiencia de la AplicaciónEl 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 Completamente inexperto en informática
Usuario Novel en la aplicaciónTiene algunos conocimientos de informática, pero completamente nuevo en la aplicación
Usuario Intermedio en la aplicaciónTiene conocimientos de la aplicación
Usuario Experto en la aplicaciónTiene una amplia experiencia.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle247Introducción a la Comunicación Persona-Máquina
Contenidos de las PreguntasLos 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle248Introducción a la Comunicación Persona-Máquina
Estructura de la Ayuda
Organización JerárquicaTabla de contenidosÍndice
Recorrido SecuencialReferencias CruzadasDefinición de TérminosBúsqueda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle249Introducción a la Comunicación Persona-Máquina
Organización JerárquicaTabla de contenidos
•Tanto la tabla de contenidos como el índice proporcionan una lista de todas las cuestiones a disposición del usuario
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle250Introducción a la Comunicación Persona-Máquina
Organización JerárquicaIndice
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle251Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle252Introducción a la Comunicación Persona-Máquina
Referencias Cruzadas• Permiten el hipertexto
•Son palabras que están enlazadas con otras páginas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle253Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle254Introducción a la Comunicación Persona-Máquina
Opción de Búsqueda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle255Introducción a la Comunicación Persona-Máquina
Organización del Texto de la AyudaLenguajeCantidad de textoLongitud de los párrafosEspacios en blancoSobreindicar el textoGráficos e IconosDiseño consistente
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle256Introducción a la Comunicación Persona-Máquina
LenguajeSe 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle257Introducción a la Comunicación Persona-Máquina
Cantidad de TextoLa 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle258Introducción a la Comunicación Persona-Máquina
Longitud de los párrafosHay que utilizar párrafos cortos, ya que mejora la velocidad de lectura
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle259Introducción a la Comunicación Persona-Máquina
Espacios en blancoSon importantes para hacer el texto de la ayuda más legible.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle260Introducción a la Comunicación Persona-Máquina
Sobreindicar el TextoSe 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle261Introducción a la Comunicación Persona-Máquina
Gráficos e IconosLa 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle262Introducción a la Comunicación Persona-Máquina
Diseño ConsistenteLos contenidos de la ayuda deben ser presentados de forma consistente:
Títulos con el mismo formato
Destacar de la misma manera el texto,
Etc.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle263Introducción a la Comunicación Persona-Máquina
Ejemplo:
Construcción de ficheros de ayuda para Java con JavaHelp
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle264Introducción a la Comunicación Persona-Máquina
JavaHelpQué 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle265Introducción a la Comunicación Persona-Máquina
Qué es JavaHelpSistema 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle266Introducción a la Comunicación Persona-Máquina
Características Básicas
Visor de Ayuda Panel de contenidosPanel de navegación
Tabla de contenidosÍndiceBúsqueda
Distintas vistas de la información
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle267Introducción a la Comunicación Persona-Máquina
Herramientashsviewer
Permite visualizar ficheros HelpSet. Puede invocarse desde línea de comandos o desde Windows
jhindexerPrograma de línea de comandos que crea la base de datos de búsqueda
jhsearchPrograma de línea de comandos que busca en la base de datos creada con jhindexer.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle268Introducción a la Comunicación Persona-Máquina
Libreríasjh.jar
Librería estándar que incluye todo lo necesario para el visor de ayuda y los navegadores
jhbasic.jarSubconjunto de la anterior que no soporta la búsqueda
jhtools.jarIncluye las herramientas para construir y consultar la base de datos
jhall.jarContiene todas las clases de JavaHelp.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle269Introducción a la Comunicación Persona-Máquina
Pasos en la Construcción de la Ayuda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle270Introducción a la Comunicación Persona-Máquina
Pasos - Resumen1. Creación de los temas de ayuda para el usuario (topicsHTML)
2. Creación de los ficheros de metadatos que JavaHelpemplea para presentar la información
HelpSetMapTabla de contenidosIndice...
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle271Introducción a la Comunicación Persona-Máquina
Pasos Detallados1. Crear topics HTML2. Crear fichero map3. Crear fichero HelpSet4. Crear fichero tabla de contenidos5. Crear fichero índice6. Crear base de datos de búsqueda7. Comprimir y encapsular ficheros de ayuda en ficheros JAR (Este paso no será necesario).
Imprescindibles
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle272Introducción a la Comunicación Persona-Máquina
Organización..\help
mi_helpset.hsmi_map.jhmmi_toc.xmlmi_index.xml
\ fuentes\\JavaHelpSearch
Topic1.htmlTopic2.htmlTopic3.html.....
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle273Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle274Introducción a la Comunicación Persona-Máquina
2. Fichero MapAsocia identificadores a los ficheros HTML que contienen los topics.Tiene extensión .jhmSintaxis basada en XML
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle275Introducción a la Comunicación Persona-Máquina
Fichero Map (II)<...
<map version="1.0">
<mapID target="introduccion" url="fuentes/introduccion.html" />
<mapID target="nuevo" url="fuentes/nuevo.html" /><mapID target="abrir" url="fuentes/abrir.html" /><mapID target="guardar" url="fuentes/guardar.html" />
<mapID target="guardarcomo" url="fuentes/guardarcomo.html" /><mapID target="colorfondo" url="fuentes/colorfondo.html" /><mapID target="colortexto" url="fuentes/colortexto.html" />
</map>
Fichero html asociadoIdentificador
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle276Introducción a la Comunicación Persona-Máquina
3. Fichero HelpSetEs 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle277Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle278Introducción a la Comunicación Persona-Máquina
Fichero HelpSet (III)<.....<helpset>
<title> Ejemplo de Ayuda </title>
<maps><homeID>introduccion</homeID>
<mapref location="Map.jhm"/></maps>
<!-- views --><view><name>Tabla de contenidos</name> // nombre de la vista<label>Tabla de Contenidos</label> // etiqueta asociada con la vista<type>javax.help.TOCView</type> //camino a la clase navegador<data>TOC.xml</data> //fichero que contiene la tabla de contenidos
</view> ..../helpset>
Fichero map
Título
Página a visualizar por defecto
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle279Introducción a la Comunicación Persona-Máquina
Visualización del HelpSetEn línea de comandos
hsviewer –helpset c:\ejercicios\ayudas\ayuda.hshsviewer –helpset c:\ejercicios\ayudas\ejemplo.jar
En Windows
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle280Introducción a la Comunicación Persona-Máquina
4. Fichero TOCEste fichero describe el contenido y la distribución de la tabla de contenidosSintaxis basada en XML
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle281Introducción a la Comunicación Persona-Máquina
Fichero TOC (II)
Especifica el texto para la entrada en la tabla de contenidos
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
<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" target="colortexto"/><tocitem text="Cambiar color fondo" target="colorfondo"/>
</tocitem></tocitem>
</tocitem></toc>
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle282Introducción a la Comunicación Persona-Máquina
5. Fichero Índice
Este fichero describe la distribución y contenido del índiceSintaxis basada en XML
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle283Introducción a la Comunicación Persona-Máquina
Fichero Índice (II)<....<index version="1.0">
<indexitem text="abrir documento" target="abrir"/><indexitem text="cambiar color texto" target="colortexto" /><indexitem text="cambiar color fondo" target="colorfondo" /><indexitem text="crear documento" 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" target="colorfondo"/><indexitem text="color del texto" target="colortexto"/>
</indexitem>
<indexitem text="guardar documento" target="guardar" />
</index>
Especifica el texto para la entrada en la tabla de contenidos
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 TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle284Introducción a la Comunicación Persona-Máquina
6. BúsquedaEs 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle285Introducción a la Comunicación Persona-Máquina
Búsqueda (II)Para crear la base de datos de búsqueda
jhindexer fuentesSe supone que fuentes es el directorio donde están almacenados todos los topics html
jhindexer fuentes1 fuentes2Si tenemos más de un directorio donde estén almacenados los topics html. En este caso serían dos:fuentes1 yfuentes2
Funcionamientojhindexer desciende recursivamente por la jerarquía de directorios indexando todos los ficheros que encuentraCrea la carpeta JavaHelpSearch dónde almacena la base de datos de búsqueda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle286Introducción a la Comunicación Persona-Máquina
Búsqueda (III)Para verificar la validez de la búsqueda
En línea de comandosjhsearch JavaHelpSearch
Desde el visor de ayuda
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle287Introducción a la Comunicación Persona-Máquina
7. Construcción ficheros JARUna 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle288Introducción a la Comunicación Persona-Máquina
Construcción ficheros JARCreación de ficheros jar
C:\ejercicios\ayudas> jar –cvf miayuda.jar *
Para ver los ficheros incluidos en un jar
jar –tvf miayuda.jar
Para extraer los ficheros del jar
jar –xvf miayuda.jar
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle289Introducción a la Comunicación Persona-Máquina
Incorporación de la Ayuda en la Aplicación
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle290Introducción a la Comunicación Persona-Máquina
Clases Básicas ImplicadasClase URL
Paquete a importar: import java.net.*;
Esta clase se utiliza para representar una URL (UniformResource 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle291Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle292Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle293Introducción a la Comunicación Persona-Máquina
Pasos para incorporar la ayuda en la aplicación
1. Incorporar la librería jhall.jar a la aplicaciónProyecto->Propiedades->Vías de acceso->Bibliotecas necesarias
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle294Introducción a la Comunicación Persona-Máquina
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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle295Introducción a la Comunicación Persona-Máquina
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"); // localiza el fichero helpset
hs= new HelpSet(null,hsURL); // crea un objeto HelpSet
} catch (Exception ee){
JOptionPane.showMessageDialog(this,“Fichero HelpSet no encontrado”);return;
}
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle296Introducción a la Comunicación Persona-Máquina
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 ();
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle297Introducción a la Comunicación Persona-Máquina
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)
jButton1
click
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle298Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle299Introducción a la Comunicación Persona-Máquina
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);
300Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
6. Internacionalización
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle301Introducción a la Comunicación Persona-Máquina
6. Contenidosn Introducción
n Definiciónn 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle302Introducción a la Comunicación Persona-Máquina
IntroducciónHace 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, hanproliferado 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle303Introducción a la Comunicación Persona-Máquina
Internacionalización
InternacionalizaciónProceso 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
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle304Introducción a la Comunicación Persona-Máquina
LocalizaciónLocalización
Adaptación de un producto software al lenguaje y a las convenciones locales y culturales de una región particularCada 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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle305Introducción a la Comunicación Persona-Máquina
Localización (II)En Windows se puede especificar una localización concreta acudiendo a Panel de Control
Configuración Regional
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle306Introducción a la Comunicación Persona-Máquina
Elementos Específicos de la LocalizaciónA 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 traducidosY además, los elementos que son específicos de una localización
Calendarios, formatos de fechas, horas, etc.Formatos de números y monedasUnidades de medida
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle307Introducción a la Comunicación Persona-Máquina
Elementos Específicos de la Localización (II)
Calendarios. Existen diferentes estilos de calendarios:
Gregoriano, budista, chino, hebreoDiferentes formatos en el gregoriano
aa/mm/ddaadddaaaa/mm/dddd/mm/aamm/dd/aa
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle308Introducción a la Comunicación Persona-Máquina
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ña4/19/70 ----------- Reino Unido19/4/70 ----------- Dinamarca1970-04-19 ----------- Suecia
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle309Introducción a la Comunicación Persona-Máquina
Elementos Específicos de la Localización (IV)
Los Formatos Monetarios varían también de un país a otro
USA --------------- $1,234.56Noruega --------------- Kr1.234,56 Suiza --------------- sFr1234,56Alemania --------------- 1.234,56DM
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle310Introducción a la Comunicación Persona-Máquina
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 --------------- 8:32Canadá --------------- 20:32Suiza --------------- 20,32,00Alemania --------------- 20.32 UhrNoruega --------------- KI 20.32
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle311Introducción a la Comunicación Persona-Máquina
Elementos Específicos de la Localización (VI)Números y Símbolos numéricos
EEUU Billón, uno seguido de nueve cerosLa coma separa miles
América Latina y EuropaBillón, uno seguido de doce cerosLa coma separa decimales
Unidades de medidaLa mayoría sistema métrico decimal (Km, cm,...)EEUU emplea la milla y la pulgada
TemperaturaCelsius (mayoría) pero también se emplea Farenheit
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle312Introducción a la Comunicación Persona-Máquina
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ónAlgunos símbolos no utilizados: ¿, ¡,...Griegos: signo de interrogación parecido al ;
ColoresOccidentales: rojo parar, verde proseguirConvención no válida en China
Iconos
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle313Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle314Introducción a la Comunicación Persona-Máquina
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
Código de la Aplicación+
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle315Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle316Introducción a la Comunicación Persona-Máquina
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.
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle317Introducción a la Comunicación Persona-Máquina
Ejemplo de Internacionalización en Javan Clases principales implicadas en la internacionalización en
Javan Locale
n ResourceBundle
n Ejemplo sencillo para internacionalizar una aplicación Java que únicamente contiene cadenas
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle318Introducción a la Comunicación Persona-Máquina
Clases Java para InternacionalizaciónClase Locale
Identifica un idioma y un país concreto, es decir, una localización.en US -> inglés Estados Unidosen UK -> ingles Reino Unidoes ES -> español EspañaTodos estos códigos están disponibles en las siguientes direcciones web:
http://www.ics.uci.edu/pub/ietf/http/related/iso639.txthttp://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html
Clase ResourceBundleContiene objetos específicos a la localización
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle319Introducción a la Comunicación Persona-Máquina
EjemploA continuación vamos a ver un ejemplo de internacionalización en Java en el que se incluyen como elementos a localizar únicamente cadenas (Strings)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle320Introducción a la Comunicación Persona-Máquina
Ejemplo - DescripciónPartimos 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) .
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle321Introducción a la Comunicación Persona-Máquina
Clase de la que partimosEsta 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”);
}
}
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle322Introducción a la Comunicación Persona-Máquina
Pasos a seguir1. 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 les asignará un nombre (el que queramos)
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle323Introducción a la Comunicación Persona-Máquina
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 todoscadena2 = Departamento de Informáticacadena3 = Universidad de Oviedo
//Contenido del fichero MisDatos_en_US.properties
cadena1 = Hello Everybody!cadena2 = Department of Computer Sciencecadena3 = University of Oviedo
Localización Inglés (en) EEUU (US)
Localización Español (es) España (ES)
Nombres por los que después recuperaremos los mensajes
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle324Introducción a la Comunicación Persona-Máquina
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"));
MisDatos_en_US.properties o bien MisDatos_es_ES.properties
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle325Introducción a la Comunicación Persona-Máquina
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"));}
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle326Introducción a la Comunicación Persona-Máquina
Nuevas localizacionesSi 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.
327Introducción a la Comunicación Persona-Máquina
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle
7. Bibliografía
Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto
Juan Manuel Cueva Lovelle328Introducción a la Comunicación Persona-Máquina
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 DesignAlan Cooper.IDG Books, 1995
4. The Elements of User Interface DesignTheo Mandel. John Wiley & Sons, Inc, 1997