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