introducción a la comunicación...

Introducción a la Comunicación Persona-Máquina

Cuaderno Nº 42

Mª del Carmen Suárez TorrenteAna Belén Martínez Prieto

Juan Manuel Cueva Lovelle

Profesores de la Universidad de Oviedo

Oviedo, Septiembre 2004

Cuaderno Nº 42 Introducción a la Comunicación Persona-Máquina Autores:

Mª del Carmen Suárez Torrente Ana Belén Martínez Prieto Juan Manuel Cueva Lovelle Universidad de Oviedo - España

Editorial:

SERVITEC ISBN: 84-688-8362-X Deposito Legal: AS-4254-04 1ª Edición : Oviedo, Septiembre 2004

Tabla de Contenidos

1 FUNDAMENTOS DE LA INTERACCIÓN PERSONA-ORDENADOR................................. 1

1.1 INTRODUCCIÓN. ORÍGENES DE LA DISCIPLINA .............................................................................................. 3 1.2 DEFINICIÓN...................................................................................................................................................... 5 1.3 OBJETIVOS........................................................................................................................................................ 8 1.4 CONCEPTOS Y PRINCIPIOS BÁSICOS RELACIONADOS CON LA INTERACCIÓN ............................................... 11 1.5 FACTORES QUE AFECTAN................................................................................................................................25 1.6 DISCIPLINAS QUE CONTRIBUYEN ..................................................................................................................26 1.7 EL FACTOR HUMANO.......................................................................................................................................36

1.7.1 Canales de Entrada y Salida ..............................................................................................................40 1.7.1.1 Ejemplos de restricciones impuestas por la visión........................................................................................41

1.7.2 Memoria..................................................................................................................................................44 1.7.2.1 Tipos......................................................................................................................................................................... 44 1.7.2.2 Repercusión para CPM.......................................................................................................................................... 44

2 INTERFACES GRÁFICAS DE USUARIO: PRINCIPALES ELEMENTOS ...........................50

2.1 OPERACIONES CON TECLADO..........................................................................................................................52 2.1.1 Empleo de Mnemotécnicos .................................................................................................................53 2.1.2 Empleo de Shortcuts...........................................................................................................................56 2.1.3 Navegación y activación por teclado................................................................................................60

2.2 COMPONENTES BÁSICOS ................................................................................................................................ 61 2.2.1 Botones...................................................................................................................................................62

2.2.1.1 Comando (Command)............................................................................................................................................. 62 2.2.1.2 Conmutación (Toggle)........................................................................................................................................... 67 2.2.1.3 Cajas de chequeo (Check Boxes)....................................................................................................................... 70 2.2.1.4 Radio (Radio Buttons) ...........................................................................................................................................71

2.2.2 Combo Box .............................................................................................................................................73 2.2.3 Listas ......................................................................................................................................................77 2.2.4 Slider ......................................................................................................................................................80 2.2.5 Barras de Progreso ..............................................................................................................................83

2.3 COMPONENTES PARA TEXTO...........................................................................................................................86 2.3.1 Etiquetas (Label) ..................................................................................................................................87 2.3.2 Text Field ..............................................................................................................................................89 2.3.3 Password Field ...................................................................................................................................... 91 2.3.4 Text Area ..............................................................................................................................................93

2.4 MENÚS.............................................................................................................................................................95 2.4.1 Barras de Menú.....................................................................................................................................97 2.4.2 Menús Drop-Down ................................................................................................................................98 2.4.3 Submenús ...............................................................................................................................................99 2.4.4 Menus Contextuales (pop-up) ......................................................................................................... 100 2.4.5 Elementos de menú (menuItems).................................................................................................... 102 2.4.6 Checkbox y Radio Menú Items........................................................................................................ 107 2.4.7 Menús Comunes (Archivo, Edición, Ayuda, …) .............................................................................. 109

2.5 CONTENEDORES .............................................................................................................................................114 2.5.1 Barras de Herramientas (ToolBars)................................................................................................115 2.5.2 Paneles (Panels)....................................................................................................................................119 2.5.3 TabbedPane ..........................................................................................................................................121 2.5.4 ScrollPane ............................................................................................................................................ 125

2.6 DIÁLOGOS ..................................................................................................................................................... 126 2.6.1 JOptionPane ........................................................................................................................................ 129 2.6.2 JFileChooser ....................................................................................................................................... 133 2.6.3 JColorChooser .................................................................................................................................... 137

2.7 TABLAS .......................................................................................................................................................... 140 2.8 TOOLTIPS...................................................................................................................................................... 143

3 ESTILOS DE INTERACCIÓN Y METÁFORAS .................................................... 145

3.1 ESTILOS Y PARADIGMAS DE INTERACCIÓN................................................................................................. 147 3.1.1 Introducción........................................................................................................................................ 148 3.1.2 Estilos de Interacción....................................................................................................................... 148

3.1.2.1 Interfaz de línea de comandos ....................................................................................................................... 149 3.1.2.2 Menús y formularios........................................................................................................................................... 152 3.1.2.3 Manipulación directa .......................................................................................................................................... 158 3.1.2.4 Interacción Asistida .......................................................................................................................................... 162

3.1.3 Paradigmas de Interacción .............................................................................................................. 165 3.1.3.1 Ordenador de Sobremesa................................................................................................................................. 166 3.1.3.2 Entornos virtuales y realidad virtual ............................................................................................................. 167 3.1.3.3 Computación ubicua ............................................................................................................................................ 169

3.2 METÁFORAS................................................................................................................................................... 170 3.2.1 Introducción.........................................................................................................................................171 3.2.2 Objetivos de los diseñadores .......................................................................................................... 173 3.2.3 Metáfora de la Interfaz .................................................................................................................. 174

3.2.3.1 Tipos....................................................................................................................................................................... 175 3.2.3.2 Ejemplos............................................................................................................................................................ 179

4 GUÍAS Y ESTÁNDARES ............................................................................ 187

4.1 INTRODUCCIÓN............................................................................................................................................. 189 4.2 PRINCIPIOS ................................................................................................................................................... 190 4.3 REGLAS............................................................................................................................................................191

4.3.1 Estándares........................................................................................................................................... 192 4.3.1.1 Clasificación ......................................................................................................................................................... 193 4.3.1.2 Organismos implicados....................................................................................................................................... 194 4.3.1.3 Ejemplos ................................................................................................................................................................ 195

4.3.2 Guías...................................................................................................................................................... 196 4.3.2.1 De estilo ................................................................................................................................................................ 196 4.3.2.2 Ejemplos............................................................................................................................................................ 198

5 SOPORTE AL USUARIO ............................................................................ 215

5.1 INTRODUCCIÓN............................................................................................................................................. 217 5.2 SOPORTE BÁSICO PARA EL USUARIO ............................................................................................................ 218 5.3 REQUERIMIENTOS DE LA AYUDA.................................................................................................................. 219 5.4 HIPERTEXTO E HIPERMEDIA........................................................................................................................ 226

5.4.1 Lenguajes de marcas ......................................................................................................................... 231

5.5 AYUDA EN LÍNEA.......................................................................................................................................... 243 5.6 ESTRUCTURA DE LA AYUDA .......................................................................................................................... 248 5.7 ORGANIZACIÓN DEL TEXTO DE LA AYUDA .................................................................................................. 255 5.8 EJEMPLO ....................................................................................................................................................... 263

5.8.1 Construcción de ficheros de ayuda para Java con JavaHelp .................................................. 263 5.8.2 Pasos en la construcción de la ayuda ............................................................................................ 269 5.8.3 Incorporación de la ayuda en la aplicación .................................................................................. 289

6 INTERNACIONALIZACIÓN ........................................................................ 300

6.1 INTRODUCCIÓN............................................................................................................................................ 302 6.2 DEFINICIÓN................................................................................................................................................. 303

6.2.1 Internacionalización y localización................................................................................................ 303 6.2.2 Elementos específicos de la localización ..................................................................................... 306

6.3 PROCESO DE INTERNACIONALIZACIÓN....................................................................................................... 313 6.4 VENTAJAS DE CONSTRUIR APLICACIONES INTERNACIONALIZADAS ........................................................ 315 6.5 EJEMPLO ........................................................................................................................................................ 317

7 BIBLIOGRAFÍA ...................................................................................... 327

1Introducción a la Comunicación Persona-Máquina



1. Fundamentos de la Interacción Persona-Ordenador


Juan Manuel Cueva Lovelle2Introducción a la Comunicación Persona-Máquina

1. Contenidosn Introducción. Orígenes de la disciplina

n Definición

n Objetivos

n Conceptos y principios básicos relacionados con la interacción

n Factores que afectan

n Disciplinas que contribuyen

n El Factor Humanon Canales de Entrada y Salida

n Memoria



Orígenes



Orígenes (II)

http://www.baddesigns.com/



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/



Definición (II)

En resumen, CHM abarcaDiseño de interfaces de usuario

Y además otra serie de factoresPsicológicos (motivación, satisfacción,…)Ergonómicos (diseño del equipamiento,…)Organizativos (entrenamiento, política, cargos,…)…

En este curso nos centraremos en la interfaz de usuario (diseño e implementación principalmente)



La Interfaz de Usuario

La interfaz de usuario es el principal punto de contacto entre el usuario y el ordenador.

Una interfaz de usuario pobre produceReducción de productividadTiempos de aprendizaje inaceptablesNiveles de errores que producen frustraciónY como consecuencia: rechazo del sistema



Objetivos de CPM

El objetivo de CPM es desarrollar o mejorar laSeguridadUtilidadEfectividadEficienciaY sobre todo la USABILIDAD

de los sistemas interactivos



UsabilidadUn sistema es usable si

Es fácil de aprender yEs fácil de utilizar

Por tanto, la usabilidad es mucho más que la selección de colores o tipos de letra. Incluye

Diseño de los diálogosEnlace cognitivo entre usuario y sistemaCalidad de la documentaciónIncorporación de ayuda en línea….



Usabilidad (II)

El empleo de unos principios de diseño basados en la usabilidadtienen como consecuencia:

Reducción en los costes de producciónReducción en los costes de mantenimiento y apoyoReducción en los costes de usoMejora en la calidad del producto



Usabilidad (III)Principios Generales

Los principios generales de diseño de interfaces que ayudan a conseguir la usabilidad de un sistema interactivo pueden agruparse en tres categorías:

Facilidad de AprendizajeFlexibilidadSolidez



Facilidad de Aprendizaje

La facilidad de aprendizaje tiene como objetivo reducir el esfuerzoque tiene que hacer un usuario novel para trabajar con un sistema interactivo y para llegar a convertirse en un usuario experto.

Algunos de los principios que contribuyen a ello son:PredicciónSíntesisFamiliaridadConsistencia



PredicciónUn sistema es predecible cuando los conocimientos adquiridos por el usuario por sus interacciones previas son suficientes para poderdeterminar los resultados de sus futuras interacciones

Para ayudar en la predicción conviene garantizar la Visibilidad de Operaciones:

Permite que el usuario sepa, mirando la interfaz, si la operación que le interesa puede realizarla o no

No tiene que memorizar cuando puede hacerla y cuando no

Un sistema es poco predecible, por ejemplo, cuando se le obliga al usuario a recordar lo que contenía una pantalla anterior de la aplicación



SíntesisUn sistema sintetizable permite que cuando una operación cambie algún aspecto del sistema ese cambio sea captado por el usuario

La notificación de esos cambios puede serInmediata. Es la ideal. Muestra los cambios sin necesidad de que el usuario lo solicite. Eventual. Muestra los cambios si lo solicita el usuario.



FamiliaridadEs la correlación que existe entre los conocimientos que posee el usuario y los conocimientos requeridos para la interacción en un sistema nuevo

Se facilita en gran medida empleando metáforas del mundo real a las que el usuario ya está acostumbrado.



ConsistenciaImplica que todos los mecanismos tienen que ser usados de la misma manera sea cuando sea que se utilicen.

Es un principio fundamental en el diseño de interfaces

Cara a garantizar la consistencia es necesarioEmplear guías de estilo (siempre que sea posible)No cambiar aquellas cosas que no es necesario cambiar (Ej. técnicas de interacción)Al añadir nuevas técnicas evitar cambiar las que el usuario ya conoce (ej. F1 para la ayuda)



FlexibilidadHace referencia a las diferentes formas en las que el usuario y el sistema intercambian información

Principios que contribuyenIniciativa en el diálogoMigración de tareasCapacidad de sustituciónCapacidad de configuración



Iniciativa en el diálogoEstá relacionado con quien lleva la iniciativa en el diálogo entre el usuario y la aplicación (sistema)

Lo ideal es que la tenga el usuario

Ejemplo de interacción guiada por el sistemaCuadro de diálogo modal, ya que impide al usuario utilizar ninguna otra ventana de la aplicación hasta que no se cierre.



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



Solidez

La solidez de una interacción incluye las características para poder cumplir los objetivos y su evaluación

Principios que contribuyenCapacidad de observaciónCapacidad de recuperaciónTiempos de respuestaAdecuación de las tareas



ObservabilidadPermite al usuario evaluar el estado interno del sistema por medio de su representación percibida en la interfaz



Recuperabilidad

Hace referencia a la capacidad de conseguir el objetivo deseado después de reconocer un error en la interacción

“Principio de esfuerzo proporcionado”Si un efecto es difícil de deshacer entonces también debe ser más difícil de llevar a cabo

Borrar Fichero: Difícil de deshacer

Renombrar Fichero: Fácil de deshacer



Tiempos de respuestaRepresenta el tiempo que necesita el sistema para expresar los cambios de estado al usuario

Han de ser lo menores posibleEn caso de que no lo sean, es necesario notificar al usuario que se ha recibido su petición y que se está trabajando en ella



Adecuación de las tareasHace referencia al grado en que el sistema soporta todas las tareas que el usuario quiere hacer y la manera en que el usuario las comprende



Factores que afectan a la CPMFactores Organizativos

Entrenamiento, diseño del local de trabajo, política, cargos, organización del trabajo

Factores del EntornoRuidos, ventilación, calefacción, iluminación, ventilación

Factores de Salud y SeguridadStress, dolores de cabeza, desordenes musculares

Factores de Capacidad y Proceso Cognitivo del UsuarioMotivación, satisfacción, personalidad, nivel de experiencia

Factores de ConfortSilla, diseño del equipamiento

Interfaz de UsuarioDispositivos de entrada, pantallas de salida, estructuras de dialogo, uso del color, iconos, ordenes, gráficos, lenguaje natural, 3-D, materiales de soporte del usuario, multimedia

...



Disciplinas que contribuyen

CHM

Programación

Inteligencia Artificial

Ingeniería del SoftwareErgonomía

Diseño Gráfico

Sociología

Psicología



Ingeniería del Software

A n á lis is y d e f in ic ió n d e lo s

re q u e r im ie n to s

1

D ise ñ o d e l s is te m a y d e l S o f tw a re

2

Im p le m e n ta c ió n y te s t u n ita r io

3

In te g ra c ió n y te s t d e l s is te m a

4



Ingeniería del Software (II)

Pensar como usuario90% de cualquier técnica de diseño es forzar al diseñador a recordar que alguien más que él usará el sistema

Poner a prueba

Implicar a los usuariosObservando su práctica habitual de trabajoIncluyéndolos en el equipo de diseño

Hacer el proceso de diseño iterativoPrototipos. Sistemas de prueba que simulan o tienen implementadas partes del sistema final



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.



Ergonomía (II)Organización de los controles y las pantallas

Entorno físico de la interacción

Colores

Aspectos de salud



Ergonomía (III)Organización de los controles y las pantallas

Los controles y la información deben estar organizados para permitir un acceso rápido al usuario. Posibles agrupaciones:

Funcional . Se agrupan controles e información funcionalmente relacionados.Secuencial. Se agrupan reflejando el orden de uso en una interacción típicaFrecuencia. Se agrupan de acuerdo a su frecuencia de uso. Los más usados deben ser los más fácilmente accesibles.



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



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.



Inteligencia ArtificialDiseña programas que simulen diferentes aspectos del comportamiento de la inteligencia humana

• Tutores y Sistemas Expertos• Interfaces de Lenguaje Natural empleando la voz• ...



Psicología Contribuye a CHM mediante conocimientos y teorías acerca de cómo los sujetos

se comportanprocesan la información yactúan en grupos y organizaciones

También proporciona metodologías y herramientas para evaluar y determinar el grado de satisfacción de los usuarios con nuestros diseños.

Proporciona, por tanto, una forma de comprobar que nuestros interfaces son tan efectivos como deseamos.



El Factor Humano

n Introducción

n Canales de entrada y salidan Ejemplos de restricciones impuestas por la visión

n Memoria n Tipos

n Repercusión para CPM



IntroducciónA la hora de diseñar una interfaz de usuario hay que tener en cuenta los factores humanos

Para ello es necesario conocer como trabajan nuestras mentes, como pensamos, como recordamos y como aprendemos. Esto lo estudia la psicología cognitiva.



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 (III)

Modelo de procesamiento humanoRepresenta una visión simplificada del procesamiento humano involucrado en la interacción con los ordenadores.Comprende tres subsistemas:

Sistema perceptual, maneja los estímulos sensoriales del mundo exteriorSistema motor, controla las accionesSistema cognitivo, proporciona el procesamiento necesario para conectar los dos



Canales de Entrada y SalidaEn una interacción con el ordenador el usuario recibe información que es generada por el ordenador, y responde proporcionando una entrada al ordenador

La entrada en el ser humano se produce a través de los sentidos:Vista OídoTactoOlfatoGusto

La salida se produce mediante el movimiento de los dedos, extremidades, ojos, cabeza y el sistema vocal

Básicos



Restricciones Impuestas por el sistema visual

Tamaño de letra >= 12

Espaciado proporcional entre líneas

Fuentes no complicadas

No mayúsculas

TextoTexto



El color

Todos Sin azul Sin rojo Sin verde



Restricciones (II)Impuestas por el sistema visual

Elegir combinaciones de colores compatibles. Evitar rojo-verde, azul-amarillo, verde-azul, rojo-azul

Evitar colores brillantes en grandes porciones de la pantalla

Usar códigos redundantes (ej. formas) ya que hay muchas enfermedades que afectan a la visión: daltonismo (8% de los hombres y 1% de las mujeres).

ColorColor



La Memoria Humana

Almacenamientosensorial

Almacén de memoria a corto plazo

Almacén de memoria a largo plazo

Existen tres tipos de memoria que interactuan:Almacenamiento sensorialAlmacén de memoria a corto plazoAlmacén de memoria a largo plazo



Almacenamiento SensorialExiste uno para cada sentido

Es constantemente actualizado con nueva información

La información que están procesando estos almacenes es la que reciben sin prestar atención

Cuando ocurre algo que ocasione que se le presté más atención esa información es trasladada a la memoria a corto plazo.

Una estimulación constante y repetida cansa los mecanismos sensoriales y hace que seamos menos capaces de percibir cambios. (HABITUACIÓN).

Hay que evitar la habituación. Ej. una pantalla cuyo fondo parpadea todo el tiempo.



Memoria a Corto Plazo (MCP) Es la memoria de trabajo

Es la que se emplea, por ejemplo, al multiplicar mentalmente 35x6

CaracterísticasTiene una capacidad limitada de tiempo y cantidad (7+2 elementos)La velocidad de acceso es elevada

Técnicas para estimular la MCPEnsayo (repetir constantemente un número de teléfono, un número de dni, ...)Trocear o partir la información (agrupar porciones de información por asociación, orden, significado...)



Memoria a Corto Plazo (II)Es necesario tener en cuenta las limitaciones de la memoria a corto plazo a la hora de diseñar interfaces:

Evitando diseñar interfaces en las que sea necesario recordar información de una pantalla a otra o haya que volver a teclearla

Proporcionando elementos que alivien la carga de la (MCP)

Deshacer y rehacerMantener los últimos datos introducidosCortar, copiar y pegar del portapapeles



Memoria a Largo Plazo (MLP)Es un almacén de

Capacidad y duración ilimitadaVelocidad de acceso baja

Su principal problema es la recuperación de la información almacenada

Técnicas para estimular la MLPAcudir al reconocimiento



Memoria a Largo Plazo (II)Es necesario diseñar interfaces teniendo en cuenta las limitaciones de la MLP. Para ello es conveniente acudir al reconocimiento:

Ej. Poner los ShortCuts al lado de las opciones de menú que representan.Emplear listas y menús para seleccionar en vez de campos donde los usuarios tengan que teclear la informaciónEmplear ‘tooltips’ y ayuda sensible al contextopara ayudar a reconocer la informaciónOpción de volver a las opciones por defecto del sistema




2. Interfaces Gráficas de Usuario:Principales Elementos



2. Contenidosn Operaciones con teclado

n Componentes básicos

n Componentes para texto

n Menús

n Contenedores

n Diálogos

n Tablas

n ToolTips



Operaciones con TecladoRecomendaciones para el uso de operaciones de teclado:

Empleo de MnemotécnicosEmpleo de ShortcutsNavegación y activación por teclado



MnemotécnicosEs una letra subrayada que aparece típicamente en un título o en un elemento de menú, en el texto de un botón, etc.La letra subrayada recuerda al usuario como activar el comando equivalente:

“ Presionar la tecla ALT y el carácter subrayado”



Mnemotécnicos (II)Algunas propiedades y métodos relacionados con los Mnemotécnicos

Propiedades para asignar mnemotécnicos en tiempo de diseñomnemonic para botones, checkboxes, radio botones, botones de conmutación y títulos y elementos de menúdisplayedMnemonic, para etiquetas

Métodos para asignar mnemotécnicos en tiempo de ejecuciónsetMnemonic, para botones, checkboxes, radio botones, botones de conmutación y títulos y elementos de menúsetDisplayedMnemonic, para etiquetas



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



Shortcuts (Atajos)Es una secuencia de teclas que activan una opción de menúLa combinación de teclas estáconstituida por

El modificador Control (y opcionalmente otro modificador como Shift) Y un carácter

Deben ser consistentes con los ShortCuts empleados en la plataforma

EjemploPara copiar siempre Ctrl+CPara imprimir Ctrl+P...



Foco de TecladoA veces llamado “foco de entrada”Indica la ventana activa o el componente donde tendrá efecto la siguiente pulsación del usuarioCuando se abre una ventana por primera vez hay que asignar el foco al componente que normalmente es usado en primer lugar.

Por lo general es el componente que aparece en la esquina superior izquierda de la ventana.Esta asignación es especialmente importante para aquellas personas que sólo emplean el teclado para navegar por la aplicación (ej. usuarios con problemas motores)



Foco de Teclado (II)Algunas propiedades y métodos relacionados con el foco

Propiedades de los componentesrequestFocusEnabled

True, puede recibir el focoFalse, no puede recibir el foco

nextFocusableComponent, permite señalar cual es el siguiente componente en recibir el foco.

MétodosrequestFocus, asigna el foco al componente que lo invocagetNextFocusableComponent, devuelve el siguiente componente que puede recibir el focosetNextFocusableComponent, especifica cual es el siguiente componente en recibir el foco después de éste (el que lo está invocando). Hay que especificar para cada componente cual es el siguiente en la secuencia.



Foco de Teclado (III)- Ejemplo

jTextField1.requestFocus();

click

FocojTextField1



Navegación y Activación por Teclado

La navegación y activación por teclado permite a los usuarios mover el foco desde un componente de la interfaz a otro por medio del teclado

Tab-> mueve el foco entre los componentesShitf-Tab-> mueve el foco en la dirección inversa

Hay que asegurarse que todas las funciones de la aplicación estén accesibles mediante teclado

Para ello desconectar el ratón y comprobarlo



Componentes BásicosBotones

Comando (Command)Conmutación (Toggle)Cajas de chequeo (Check Boxes)Radio (Radio Buttons)

Combo BoxListas SliderBarras de Progreso



Botones de comando (JButton)

Es un botón que puede contener texto, gráficos o ambosGeneralmente se emplea una única palabra para identificar la acción que representa el botón:

Los botones que llevan texto deben tener asignado un mnemotécnicoPara los que no llevan texto conviene asociarles tooltips que describan su nombre o función



Botones de comando (II)Los botones que sólo contienen texto, éste debe estar centradodentro del botónLos botones que contienen texto y gráficos:

El texto debe ir colocado después o debajo del gráficoHay que incluir mnemotécnicos en el texto (excepto en el botón por defecto y de cancelación)



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



Botones de comando (IV)Fijándonos en algunas propiedades interesantes de los botones de comando:

Relacionadas con la imagendisabledIcon // imagen cuando el botón está deshabilitadoicon // imagen cuando el botón está en estado normalpressedIcon // imagen si el botón está pulsadorolloverIcon //imagen cuando pasa el ratón por encima del botónselectedIcon // imagen si el botón está seleccionado

Relacionadas con el colorbackground // color del fondo foreground // color del texto

Relacionadas con la alineaciónhorizontalAligment y verticalAlignment-> alineación del contenido del botónverticalTextPosition y horizontalTextPosition -> como está situado el texto respecto a la imagen

OtrasactionCommandenabledfontmarginmnemonicnextFocusableComponenttexttoolTipText



Botones de comando (V)Botón por defecto:

Aparece en los cuadros de diálogoSe activa cuando el usuario presiona Enter, y desencadena la ejecución de las acciones asociadas a dicho botón (las realizadas más a menudo). Una opción no segura (que ocasione la pérdida de datos) nunca puede ser el botón por defecto.

Botón de cancelación:Se activa al pulsar la tecla Escape y provoca la ejecución de las acciones asociadas al botón identificado como de cancelaciónA diferencia del anterior, es necesario implementar este comportamiento, es decir, al pulsar la tecla Escape no se ejecuta automáticamente el código asociado al botón de cancelación.

No deben proporcionarse mnemotécnicos para ninguno de estos botones.



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)



Botones de conmutación (II)Opciones independientes

Se comportan como un checkboxAunque se comporta igual que los checkboxes por lo general los checkboxes se emplean en cuadros de diálogo y los botones de conmutación (con gráficos) en las barras de herramientas (toolbars).

Opciones exclusivasUn botón de conmutación puede emplearse como parte de un grupo para representar una opción exclusiva dentro de un conjunto.Los botones de conmutación agrupados pueden emplearse tanto en toolbarscomo en cuadros de diálogo.



Botones de conmutación (III)Fijándonos en algunas propiedades y métodos interesantes:

Propiedadselected,

True si él botón está ONFalse si el botón está OFF

buttonGrouppara agrupar los botones y garantizar que presenten opciones mutuamente exclusivas

MétodosisSelected, devuelve el estado del botón (true si está on)setSelected, asigna un estado al botón



CheckBox (JCheckBox)

Es un control que representa dos estados: on y off

Algunas propiedades y métodos interesantes:Propiedades:

selectedbuttonGroup

Métodos: isSelected y setSelectedsetMnemonic puede emplearse para asignar mnemotécnicos.



Radio Botones (JRadioButton)

Permiten seleccionar una única opción dentro de un conjunto de opciones relacionadas

Sólo una opción puede estar seleccionada en cada momentoAunque los radio botones y los botones de conmutación agrupados tienen la misma función conviene emplear los radio botones en cuadros de diálogo. Los botones de conmutación agrupados pueden emplearse tanto en los cuadros de diálogo como en las barras de herramientas.Propiedades y métodos relevantes son similares al CheckBox.



Radio Botones (II)Los botones de radio (al igual que los checkboxes) suelen aparecer a veces agrupados, con una leyenda que indica a que hacen referencia:

Una forma para conseguir esta agrupación en Swing es mediante un panelal que se le indica un borde y un título.



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.



Combo Boxes (II)No Editables

A veces llamados List BoxesMuestran una lista de la que el usuario puede elegir un elementoSe suelen emplear en vez de un grupo de botones de radio cuando

El espacio en la aplicación es limitado y/oEl número de opciones posibles es grande

EditablesCombina un campo de texto con un botón (flecha) que se emplea para mostrar una lista de opcionesEl usuario puede teclear, seleccionar o editar textoSe suelen emplear para ahorrar tiempo al usuario permitiéndole teclear directamente un valor (además de por supuesto seleccionarlo de la lista)



Combo Boxes (III)Algunas propiedades y métodos interesantes:

Propiedadeseditable // indica si el Combo es Editable o no

MétodosaddItem // añade un nuevo ítem al Combo

getSelectedItem // devuelve el ítem seleccionado



Combo Boxes - Ejemplo

String nombre= (String) jComboBox1.getSelectedItem();jTextField1.setText("Esto es un " + nombre);jLabel2.setIcon(new ImageIcon("imagenes/"+nombre+".gif"));

Cada vez que se selecciona un ítem de la lista

// inicialización del contenido del ComboBoxprivate String[] contenidos = {"Caballito","Manzana","Naranja","Platano","Tiburon","Tomate","Trucha"};...

private JComboBox jComboBox1 = new JComboBox(contenidos);



Listas (JList)Es un componente que muestra un conjunto de ítems de texto, gráfico o ambos.

Permite tres modos de selecciónÍtem sencilloRango simpleRangos múltiples



Listas (II)Algunas propiedades y métodos interesantes:

PropiedadesselectionMode // indica el modo de selección (SINGLE_SELECTION, SINGLE_INTERVAL_SELECTION, MULTIPLE_INTERVAL_SELECTION)

MétodosgetSelectedValue // devuelve el valor seleccionado para la selección simple

getSelectedIndexgetSelectedValuesgetSelectedIndicesgetModel



Listas - Ejemplo// inicialización del contenido de la listaprivate String[] contenidos={"Juan Fernández", "Sonia Álvarez","Javier Martínez","Isabel Suáres", "Raquel Rodríguez","Enrique González"};...private JList jList1 = new JList(contenidos);

Cada vez que se selecciona un ítem de la lista

jTextField1.setText((String)jList1.getSelectedValue());



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.



Sliders (II)Algunas propiedades y métodos interesantes:

Propiedadesmaximum y minimum // (valor máximo y mínimo)

majorTickSpacing y minorTickSpacing // espaciado entre las marcas grandes y pequeñas

paintTicks // muestra las marcas

paintLabels // muestra las etiquetas

Orientation // horizontal o vertical

MétodosgetValue // devuelve el valor seleccionado

createStandardLabels // crea las etiquetas estándar (números)

setLabelTable // asigna las etiquetas al Slider



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()));



Progress Bar (JProgressBar)

Permiten indicar que una o más operaciones están bajo desarrollo, mostrando al usuario que parte de la operación ha sido completada.

El usuario no puede interactuar con una barra de progresoPuede emplearse con un texto que indique por ejemplo el porcentaje completado



Progress Bar (II)Algunas propiedades y métodos interesantes:

Propiedadesmaximum y minimum // valor máximo y minimo

stringPainted // indica si se pintará una cadena en vez de un porcentaje numérico en la barra de progreso

string // cadena que aparecerá en la barra de progreso

MétodossetValue // asigna un valor a la barra de progreso

setString // asigna la cadena que aparecerá en la barra de progreso



Progress Bar - Ejemplo

cont=cont+10;

jProgressBar1.setValue(cont);



Componentes para TextoPermiten a los usuarios ver y editar texto en una aplicaciónPosibilidades

LabelText FieldPassword FieldText Area...



Label (JLabel)

Muestra texto, gráficos o ambos, pero de sólo lecturaNo puede ser seleccionada por el usuarioEl texto que contienen ha de ser breve y la terminología empleada ha de ser familiar para los usuariosLa etiqueta ha de estar inactiva cuando el componente que describe esté inactivoLas etiquetas siempre deben ir antes o encima del componente que describen. Para los lenguajes que leen de izquierda a derecha, antes es a la izquierda del componente. Hay que emplear la capitalización en el texto de la etiqueta y colocar : al final del texto.



Label (II)Tiene dos funciones en una aplicación:

Identificar componentesComunicar el estado o dar instrucciones a los usuarios

Se pueden emplear mnemotécnicos en las etiquetas (displayedMnemonic). Cuando el mnemotécnico es activado, sitúa el foco en el componente que describe la etiqueta (labelFor).Propiedades interesantes

displayedMnemonic// para indicar el mnemotécnico

labelFor //para indicar el componente que está etiquetando

text // representa la leyenda de la etiqueta



Text Field (JTextField)

Muestra una línea de texto. Puede ser Editable.Los usuarios pueden editar o escribir una línea de texto simple. No editable. Los usuarios pueden seleccionar y copiar el texto, pero no pueden cambiarlo. El texto únicamente puede ser modificado por la aplicación.

Para asociarle un mnemotécnico debe asociársele una etiqueta.Realizar acciones cuando el usuario

Teclee enterMueva el foco fuera de este campo



Text Field (II)Algunas propiedades y métodos interesantes:

Propiedadeseditable // indica si es editable o no el TextField

text // valor que contiene

tooTipText // tooltip asociado

MétodossetText // Asigna el valor a la propiedad Text del JTextField



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.



Password Field (II)Algunas propiedades y métodos interesantes (además de los vistos para el jTextField)

PropiedadesechoChar // para indicar el carácter de máscara

MétodossetEchoChar //cambia el carácter de máscara

getPassword // devuelve el valor introducido en el PassworField. Se emplea en vez de del getText de jTextField



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.



Text Area (II)Algunas propiedades y métodos interesantes:

PropiedadeslineWrap->True // cuando se llegue al borde escribiendo, salte de línea

wrapStyleWord-> True //rellena las líneas con espacios en blanco para justificar el texto.

Métodosappend // añade texto al final del documento

insert // añade texto en una posición específica

setFont //cambia el tipo de letra

getLineCount // devuelve el número de líneas contenidas en el TextArea



MenúsBarras de MenúMenús Drop-DownSubmenúsMenus Contextuales (pop-up)Elementos de menú (menuItems)Checkbox y Radio Menú ItemsMenús Comunes (Archivo, Edición, Ayuda, …)



MenúsMuestran una lista de opciones (menú ítems) que pueden ser recorridas o seleccionadas por el usuario

Pueden ser:Drop-down (menú cuyos títulos aparecen en una barra de menú )SubmenuContextuales



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ú



Menús drop-downUn menú drop-down aparece cuando el usuario selecciona un título de menú en la barra de menú

Las barras de menú contienen todos los menús drop-down y submenús de la aplicación



SubmenusSon menús que los usuarios abren al hacer click o arrastrar el ratón sobre un elemento de menú

También incluyen mnemotécnicos y shortcutsHay que evitar el uso de un segundo nivel de submenús

Si hay que presentar un conjunto de opciones grande o complejo seráconveniente emplear un cuadro de diálogo



Menús Contextuales (JPopupMenu)

También llamados menús pop-upOfrecen elementos de menú que son aplicables al objeto o región en la que está localizado el puntero del ratón



Menus Contextuales (JPopupMenu) (II)

Incluyen también mnemotécnicos y shortcuts, que además deben ser coincidentes con las correspondientes opciones empleadas en el menú drop-down.

Hay que asegurarse de que las características que se presentan en un menú contextual están además disponibles en lugares más visibles y accesibles, como por ejemplo en menús drop-down.



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.



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



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



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



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



Checkbox Menú ItemsSe emplean para presentar a los usuarios elementos de menú con opciones

no exclusivasHay que utilizarlos con cuidado, ya que cuando el usuario selecciona una opción el menú se cierra. Para elegir otro ítem el usuario debe reabrir el menú

Por tanto, si los usuarios tienen que tomar más de una o dos de las opciones es conveniente colocarlas en un cuadro de diálogo



Radio Button Menú ItemsSe emplean para presentar a los usuarios elementos de menú con opciones exclusivas

Para indicar que los radio botones son parte de un conjunto hay que agruparlos y emplear separadores que permitan distinguirlos de otros elementos de menú

Al igual que con los checkbox menu items hay que utilizarlos con precaución, y si el número de opciones a seleccionar es superior a dos hay que presentar las opciones mediante un cuadro de diálogo



Menús comunesOrganización

Hay menús drop-down, tales como Archivo, Edición y Ayuda que se utilizan en muchas aplicaciones

Si la aplicación necesita estos menús, usados típicamente, el orden de colocación es:

Archivo, Objeto, Edición, Formato, Ver y AyudaSi es necesario añadir nuevos menús se harán entre Ver y Ayuda

A continuación se muestran los principales elementos (menú ítems) que suelen llevar estos menús



Menús comunesArchivo

ArchivoMuestra opciones que se aplican al documento completo o a la aplicación como un todo.Si la aplicación no maneja ficheros a esta primera opción se le puede dar otro nombre siempre que corresponda al tipo de objeto que representa la aplicación. Ej. Proyecto La opción de Salir cierra todas las ventanas asociadas y finaliza la aplicación



Menús comunesEdición

EdiciónMuestra ítems que permiten a los usuarios cambiar o editar el contenido de sus documentos u otros datos.



Menús comunesFormato y Ver

FormatoIncorpora ítems que permiten a los usuarios cambiar el formato de los elementos en sus documentos, como por ejemplo fuentes, tamaños, estilos, ....

VerProporciona posibilidades para que los usuarios ajusten la visión de los datos en una ventana



Menús comunesAyuda

Proporciona acceso (en línea) a información sobre las características de una aplicación

Proporciona acceso al cuadro Acerca de, que muestra información básica sobre la aplicación

El Acerca de incluye:Nombre del productoVersiónLogo de la compañíaLogo del productoNombre de los autores

Antes del Acerca de siempre hay un separador



ContenedoresBarras de Herramientas (ToolBars)Paneles (Panels)TabbedPaneScrollPane



Barra de Herramientas (JToolBar)

Proporcionan un acceso rápido y conveniente a un conjunto de opciones empleadas con frecuencia

Por lo general contienen botones, pero pueden contener también otros componentes (combo boxes, text fields,...)Cuando se emplean con menús, van situadas inmediatamente debajo de éste, e incluyen los elementos de menú empleados más frecuentemente en forma de botones o componentesCuando se emplean sin menús, hay que prestar especial atención al tema de la accesibilidad. Para ello hay que incluir texto en el botón y asegurarse de proporcionar mnemotécnico para dicho texto



Barra de Herramientas (II)Por lo general aparecen dispuestas horizontalmente pero pueden ser arrastradas a cualquier lugar de la ventana o a una ventana separadaSe puede especificar que la Toolbar se puede mover (propiedad floatable)



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



Barra de Herramientas (JToolBar)

Algunas propiedades y métodos interesantes:Propiedades

floatable // ->True, indica que el usuario puede arrastrar la toolbar. Para que funcione correctamente es necesario que el contenedor en el que está la toolbar emplee BorderLayout.

MétodossetFloatableisFloatableaddSeparator // añade un separador al final de la toolbar



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)



Paneles (II)Algunas propiedades y métodos interesantes:

Propiedadesborder // permite especificar un borde para el panel y también un título

layout // especifica el tipo de layout a emplear sobre el panel

Métodosadd // añade un componente al panel

setLayout // asigna un layout manager para el panel

getComponentCount // indica el número de componentes en el panel

getComponents/ devuelve un array con referencias a los componentes que contiene el panel



Tabbed Pane (JTabbedPane)



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



Tabbed Pane (III)Generalmente las pestañas aparecen en la parte superior. Sin embargo, pueden aparecer también en la parte inferior, derecha o izquierda (tabPlacement)

Si las pestañas no entran en una única fila automáticamente se crean nuevas filas. Sin embargo, hay que evitar múltiples filas de pestañas. Si fueran necesarias, es mejor acudir a una reorganización del contenido en varios cuadros de diálogo o componentes

No se permiten tabbed pane anidados

Hay que emplear mnemotécnicos en las pestañas

Usos adecuados de este componente:

Cuadros de diálogo de preferencias donde, por lo general, se requiere bastanteinformación y se dispone de poco espacio

Presentación de diferentes vistas de la misma información

…



Tabbed Pane (IV)Algunas propiedades y métodos interesantes:

PropiedadestabPlacement // indica la ubicación de las pestañas:TOP,LEFT, BOTTOM, RIGHT

MétodosaddTab // añade una nueva pestaña al Tabbed Pane

getSelectedIndex // devuelve el índice de la pestaña seleccionada actualmente

getSelectedComponent // devuelve el componente actualmente seleccionado en el tabbed Pane.

setToolTipTextAt (int, String) // asigna un tooltip a la pestaña cuya posición se le indica

setIconAt (int, Icon) // asigna un icono a la pestaña cuya posición se le indica

setTitleAt (int,String) // asigna un título a la pestaña cuya posición se le indica

setEnabledAt (int,boolean) //habilita o deshabilita la pestaña cuya posición se le indica



Paneles de Scroll (JScrollPane)

Es un contenedor especializado que ofrece barras de desplazamiento (scroll) horizontales y verticales y que permiten a los usuarios cambiar la parte visible del contenido de las ventanas

Se puede especificar que las barras de Scroll (horizontales y verticales) aparezcan siempre (ALWAYS) o bien solo cuando sean necesarias (AS_NEEDED)

Propiedad: verticalScrollBarPolicy y horizontalScrollBarPolicyLo normal es que aparezcan cuando sean sean necesarias

Las barras de Scroll se obtienen cuando se coloca el componente dentro del Scroll Pane



JOptionPaneJFileChooserJColorDialog

Diálogos



DiálogosLos diálogos son ventanas más limitadas que los Frames

Cada diálogo es dependiente de un Frame. Cuando el Frame es destruido también lo son los diálogos dependientes

Los diálogos pueden ser

No modales. No impiden a los usuarios interactuar con la aplicación con la que están, o con otras, mientras el cuadro esté abierto.

Modales. Impiden que los usuarios interactuen con la aplicación hasta que el diálogo sea cerrado, sin embargo, no impiden la interacción con otras aplicaciones mientras el diálogo está abierto.



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.



JOptionPanePermite crear y adaptar varias clases de diálogos, especificando por ejemplo los iconos (propio, ninguno o uno de los cuatro estándar), el título y texto de los diálogos y también el texto de los botones. Se puede especificar también donde aparecerá sobre la pantalla

Los iconos estándar son: question, information, warning y error

Métodos estáticos principales:

showMessageDialog

showConfirmDialog

showInputDialog y

showOptionDialog // permite mayor personalización especificando por ejemplo el título de los botones



JOptionPane.showMessageDialog

Muestra un cuadro de diálogo modal con un solo botón etiquetado como ‘Aceptar’

Permite especificar el mensaje, el icono y el título que muestra el diálogo

Ejemplos de uso:JOptionPane.showMessageDialog(this, “Mensaje”);

JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.WARNING_MESSAGE);

JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.ERROR_MESSAGE);

JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.INFORMATION_MESSAGE);

JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.QUESTION_MESSAGE);

JOptionPane.showMessageDialog(this,”Mensaje”,”Titulo”,JOptionPane.PLAIN_MESSAGE);

Especifica el componente padre (parent). Por lo generalsiempre es un frame (this) y por tanto el cuadro de diálogo siempre aparece desplegado sobre el centro delframe. Sin embargo, se puede especificar como parentalgún otro componente que esté dentro del frame(ej. jButton) y esto hará que el cuadro de diálogo sedespliegue centrado sobre ese componente.



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) {

. . .

}



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);



JFileChooser



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



JFileChooser (III)

• Ejemplo con el showOpenDialog

private JFileChooser jFileChooser1 = new JFileChooser();. . .

if (jFileChooser1.showOpenDialog(this)==jFileChooser1.APPROVE_OPTION){jTextField1.setText("APPROVE_OPTION");jTextField2.setText(jFileChooser1.getSelectedFile().getName());

}elsejTextField1.setText("CANCEL_OPTION");

showOpenDialog devuelve APPROVE_OPTION si se ha seleccionado un fichero y se sale con la opción de Abrir, y CANCEL_OPTION si se sale con la opción de Cancelar



JFileChooser (IV)Algunas propiedades y métodos interesantes:

PropiedadesdialogTitle // título para el diálogo

multiSelectionEnabled // permite múltiple selección de ficheros

MétodosgetSelectedFile // devuelve el fichero actualmente seleccionado

setCurrentDirectory // cambia el directorio

showDialogshowOpenDialogshowSaveDialog



JColorChooser



JColorChooserEs una clase que proporciona a los usuarios una paleta de colores donde pueden elegir un color

Una posible forma de uso es el empleo del método estático showDialog que muestra un cuadro de diálogo modal

Si el usuario selecciona un color y pulsa el botón OK showDialogdevuelve el color, por el contrario, si el usuario cancela o cierra la ventana showDialog devuelve null.



JColorChooserEjemplo

Color nColor = JColorChooser.showDialog (this,”Titulo”,jLabel1.getBackground());

If (nColor!= null)

jLabel1.setBackground(nColor); // asigna el color seleccionado en el cuadro a la etiqueta

Padre (parent) del Componente

Título del cuadro de diálogo

Color inicialmente seleccionado



Tablas (JTable)



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



Tablas (III)Algunas propiedades y métodos interesantes:

Propiedades autoResizeMode // indica como actúa la tabla cuando se redimensionan las columnas (OFF, LAST_COLUMN, NEXT_COLUMN,…)

rowSelectionAllowed // permite la selección de filas

columnSelectionAllowed // permite la selección de columnas

cellSelectionEnabled // permite la selección de una celda

showHorizontalLines y showVerticalLines //permiten visualizar las líneas horizontales y verticales

selectionBackground // especifica el color de fondo de las celdas seleccionadas

selectionForeground // especifica el color del texto de las celdas seleccionadas

MétodosgetEditingColumn() // indica la columna de la celda que está siendo editada

getEditingRow() // indica la fila de la celda que está siendo editada

getValueAt(fila,columna) // devuelve el valor de la celda especificada por fila y columna

setValueAt (aValor,fila,columna) //asigna aValor para la celda especificada por fila y columna



ToolTipsProporcionan información acerca de un componente o área cuando el usuario se detiene sobre él

Suelen proporcionar una descripción corta de la función del componente

Se especifican en el componente asociado (jbutton, jtextfield,…)

Pueden emplearse con gráficos para ayudar a describirlos



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




3. Estilos de Interacción y Metáforas



3. Contenidosn Estilos y Paradigmas de Interacción

n Introducción

n Estilos de Interacción

n Paradigmas de Interacción

n Metáforas n Introducción

n Objetivos de los diseñadores

n Metáfora de la Interfaz



Estilos y Paradigmas de InteracciónIntroducciónEstilos de Interacción

Interfaz de línea de comandosMenús y formulariosManipulación directaInteracción Asistida

Paradigmas de InteracciónOrdenador de SobremesaEntornos virtuales y realidad virtualComputación ubicuaRealidad aumentada



Introducción

Estilo de InteracciónTermino genérico para agrupar las diferentes maneras en que los usuarios se comunican o interaccionan con el ordenador

Estilos predominantes son:Interfaz por línea de comandosMenús y formulariosManipulación directaInteracción asistida



Interfaz de línea de comandos

C:\Ejemplo>javac HolaMundoJavac: invalid argument: HolaMundouse: javac [-g] [-O] [-classpath path] [-d dir] file.java...C:\Ejemplo>javac HolaMundo.javaC:\Ejemplo>java HolaMundo¡¡Hola Mundo!!C:\Ejemplo>



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



Línea de comandos (III)Ventajas:

Es potente ya que ofrece acceso directo a la funcionalidad del sistemaEs flexible, ya que por ejemplo a un comando pueden aplicársele muchos modificadores (ej. dir *.* /s /p...)

Desventajas:Es difícil de aprender y carga la memoria del usuario Requiere una memorización y entrenamiento importante



MenúsSe muestran las opciones disponibles para el usuario en pantalla

La selección se hace mediante la tecla inicial, introduciendo el número asociado o moviéndose mediante las teclas de cursor

Con el empleo de menús se intenta que el usuario tenga que reconocer las opciones en vez de recordarlas.

Son ineficientes cuando tienen demasiados ítems



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



Menús de Pantalla Completa• El principal problema de estos menús de pantalla completa es que ocupaban mucho espacio en la pantalla



Menús de Barra• Con el fin de resolver este problema surgieron los menús desplegables (de barra) y los menús pop-up



Menús en Cascada



Menús Contextuales (Pop-Up)



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).



Interfaces Manipulación Directa (II) Beneficios

Sintaxis mas sencilla, reduce los erroresAprendizaje más rápido y mejor retenciónIncita a la exploración por parte del usuario

ProblemasSe necesitan más recursos



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



Interfaces Gráficas - WIMP (II)Emplean metáforas de la vida real que se adaptan al modelo mental del usuario: escritorio, sala de juegos, agenda, cámara, etcEj. Escritorio de Windows



Interacción AsistidaTiene como objetivo hacer los ordenadores más usables para la gente a la que no le gusta la tecnología

Se basa en la metáfora de un asistente personal o agente que colabora con el usuario en el mismo ambiente de trabajo para facilitarle su trabajo

Puede provenir del empleo de

Agentes o de

Asistentes



AgentesPrograma que ayuda al usuario. No se le considera una herramienta desde el punto de vista de manipulación directa. Son programas que actúan en un segundo plano.

Estos programas tienen que tener algunas de las características que asociamos a la inteligencia humana: capacidad de aprender, inferencia, adaptabilidad,.. Y su implementación es complicada.

Utilidad de los agentesLiberar a los usuarios de tareas rutinarias tales como:

Copias de seguridadBúsquedas de determinadas noticias



AsistentesSon entidades computacionales que nos asisten en el uso de las aplicaciones existentes:

Exponen de una manera fácil que es lo que se ha de hacerPueden entender palabras escritas o habladas

Son bastante habituales en las aplicaciones actuales y a veces tienen más de uno.Ej. Asistente de PowerPoint, InstallAnywhere, etc.



Paradigmas de interacciónLos paradigmas de interacción representan los ejemplos o modelos de los que se derivan todos los sistemas de interacciónLos paradigmas interactivos actuales son:

Ordenador de Sobremesa

Entornos virtuales y realidad virtual

Computación ubicua

Realidad aumentada



Ordenador de sobremesaEs el paradigma dominante actualmente

Características de la interacción

Se realiza aislada del entorno, sentado en una mesa con un ordenador e interfaces de manipulación directa



Entornos virtuales y realidad virtualDescriben una amplia variedad de estilos de interacción desde interfaces tridimensionales con los que se puede interaccionar y actualizar en tiempo real hasta sistemas en los que la sensación de presencia es prácticamente igual al mundo real

BeneficiosPermiten realizar simulaciones imposibles de realizar en otro sitio

Problemas:Alto costeCansancio del usuario

Ejemplos de uso de realidad virtualEntrenamiento de operarios en una central nuclearEntrenamiento de bomberosReconstrucciones virtuales de patrimonio histórico



Entornos virtuales y realidad virtual (II)



Computación ubicuaMark Weisser (1991)Trata de extender la capacidad computacional al entorno del usuario

Permitiendo que la capacidad de información esté presente en todas partes en forma que pequeños dispositivos muy diversos conectados en red a servidores de información, y que permiten interacciones de poca dificultad.

El diseño de estos dispositivos debe realizarse acorde a la tarea objeto de la interacción



MetáforasIntroducciónObjetivos de los diseñadoresMetáfora de la Interfaz

TiposEjemplos



IntroducciónEl diseñador de una aplicación software, con una interfaz de usuario ,se encarga de describir los objetos con los que trabaja el usuario, su presentación al usuario, así como las técnicas de interacción empleadas para manipular los objetos por parte del usuario.Se identifican, por tanto, tres grandes apartados en su trabajo:

Presentación (look)Hace referencia al color, animación, sonidos, gráficos, texto, etc. empleados para presentar la información al usuarioRepresenta el 10% del trabajo del diseñador

Interacción (feel)Hace referencia a las diferentes formas en que se puede interaccionar con la aplicación (sólo teclado, teclado y ratón, permite otros dispositivos como trackball, joystick, etc). También incluye la realimentación (mensajes, avisos,..) que el sistema da a las acciones de los usuarios.Representa el 30% del trabajo del diseñador

Interrelaciones entre objetos

Incluye la selección de las metáforas a emplear para encajar con el modelo mental del usuarioRepresenta el 60% del trabajo del diseñador



Introducción (II)

10%

30%

60%

PresentaciónInteracción

Interrelaciones entre Objetos

Look and Feel Iceberg Chart (D. Liddle)



Objetivos de los DiseñadoresEl objetivo principal de los diseñadores es diseñar y facilitar el proceso de desarrollo de un modelo mental efectivo en los usuariosPara ello tratan de transferir el conocimiento del mundo real que les rodea al mundo de los ordenadores de forma que a los usuarios les resulte más sencillo interactuar con el ordenador

Para ello los diseñadores acuden al empleo de

Metáforas en la Interfaz



Metáfora de la InterfazEl término metáfora está tradicionalmente asociado con el uso del lenguaje

En el diseño de interfaces actuales las metáforas tienen un papel dominante

Los diseñadores adoptan metáforas porque ayudan a representar la interfaz en términos más familiares y comunes del dominio



Metáfora de la Interfaz. Tipos Hay diferentes tipos de metáforas

Verbales

Visuales

...



Metáforas VerbalesSon metáforas empleadas de forma verbal (hablada) a las que acudimos cuando nos encontramos con una nueva herramienta tecnológica y queremos compararla con alguna cosa ya conocida

Ejemplos

Cuando se utiliza un ordenador por primera vez se compara metafóricamente con una máquina de escribir

Cuando se quiere explicar el funcionamiento de los ficheros se acude a la metáfora de funcionamiento de un archivador real

Las metáforas verbales pueden ser herramientas útiles para ayudar a los usuarios a iniciarse en el aprendizaje de un nuevo sistema



Metáforas Visuales - OrígenesRepresentan un paso más que las interfaces verbales

Xerox fue de las primeras empresas que se dio cuenta de la importancia de diseñar interfaces simulando el mundo físico concreto con el que estamos familiarizado, y en los 70 desarrolló una interfaz visual basada en la oficina física. El primer proyecto, liderado por Alan Key, fue un fracaso comercial.

En 1984, y tras varios intentos apareció el Macintosh alcanzando un éxito excepcional debido a su facilidad de uso.

Con posterioridad ya fue aplicado a los ordenadores personales Windows para MSDOS, Presentation Manager para OS/2, y en las estaciones de trabajo UNIX con los sistemas X-Windows.



Metáforas VisualesLas metáforas visuales pueden variar desde pequeñas imágenes puestas en los botones hasta pantallas completas en algunos programas.

Inconvenientes de las metáforas:

Las metáforas se basan en asociaciones percibidas de manera similar por el diseñador y por el usuario final de la aplicación.

Si el usuario no tiene la misma base cultural que el desarrollador es fácil que la metáfora falle. Incluso teniendo la misma base puede haber faltas decomprensión importantes



Ejemplos de Metáforas



Metáfora de EscritorioFue la primera metáfora global y está siendo utilizada prácticamente en todas las interfaces gráficas

La idea era reproducir una sobremesa de oficina y todos los objetos que tenemos en ella y en sus alrededores.

La base de la metáfora consiste en crear objetos electrónicos que simulan los objetos físicos en una oficina, lo que incluye papel, carpetas, bandejas, archivadores,etc.

Fijémonos por ejemplo en las carpetas

Es una metáfora que nos da el marco para todas las otras

metáforas del sistema



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.



Agenda



CortarSe emplear para cortar un trozo de documento, una parte de un dibujo,...



PapeleraIdea habitual en la mayoría de las culturas avanzadas. Sirve para depositar todos los papeles u otros elementos que no nos sirven y después tirarlos como basura.

Esto nos permite ver una papelera que permite reciclar los objetos que ponemos en ella.



PintarEl bote de pintura es muy común y de fácil comprensión.

El hecho de que el bote de pintura se esté vaciando es para hacer comprender al usuario que lo que hace es llenar de color un determinado objeto.



CorreoElemento habitual en nuestra cultura que nos sirve para enviar información escrita con papel a un destinatario.

Utilizamos esta metáfora para la mensajería de correo electrónico.




4. Guías y Estándares



4.Contenidosn Introducción

n Principios

n Reglasn Estándares

n Clasificación

n Organismos implicados

n Ejemplos

n Guíasn De estilo

n Ejemplos



IntroducciónEs necesario que los diseñadores (nosotros) cuenten con ayuda a la hora de diseñar una interfaz de usuario.

Esta ayuda a los diseñadores les viene dada en forma de:

Principios y

Reglas



PrincipiosEstán basados en ideas de alto nivel y de aplicación muy general.

Son bastante abstractos.

Principios son, por ejemplo, todos los vistos en el tema 2 (“Principios fundamentales para el diseño de IGU”). Algunos de esos principios son:

Hay que mostrar texto y mensajes descriptivos

Hay que proporcionar realimentación al usuario

Hay que aliviar la memoria a corto plazo

...



ReglasSon más específicas que los principios y requieren menos experiencia para entenderlas e interpretarlas.

Las reglas pueden clasificarse en

Estándares.

Son reglas altas en en autoridad. Es decir, lo que dicen es obligatoriocumplirlo.

Guías de Estilo.

Son reglas que sugieren en vez de obligar.



EstándaresUn estándar es un requisito, regla o recomendación basada en principios probados y en la práctica.

Representa un acuerdo de un grupo de profesionales oficialmente autorizados a nivel local, nacional o internacional

El objetivo de los estándares es hacer las cosas más fáciles definiendo características de objetos y sistemas que se utilizan cotidianamente:

Teclado de ordenador (QWERTY)El trabajar con un ordenador sería sumamente costoso si, por ejemplo, cada fabricante de teclados colocase las teclas en su teclado de una forma distinta.

Teclado del teléfono



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



Comités implicados en la creación de EstándaresISO (International Organization for Standardization , Organización Internacional para Estándares)

Es la que tiene más estándares publicados relacionados con la interfaz de usuario

ANSI (American National Standards Institute, Instituto Nacional Americano para Estándares)

IEEE (Institute of Electrical and Electronics Engineers,Instituto de Ingenieros Eléctricos y

Electrónicos Americano. Asociación para Estándares)

CEN (Comité Européen de Normalisation ,Comité Europeo para la Estandarización)

W3C (Consorcio para el World Wide Web)Publica recomendaciones para la webDisponibilidad totalmente gratuita: http://www.w3c.org

...



Ejemplos de EstándaresUno de los estándares más conocidos relacionado con interfaces de usuario es el Estándar ISO 9241 titulado “Requerimientos ergonómicos para trabajo de oficina con terminales de presentación visual “

Este estándar tiene como objetivo promover la seguridad y garantizar la salud de los usuarios que trabajan con monitores de ordenadores. Incluye tanto requisitos que ha de cumplir el software como requisitos que ha de cumplir el hardware para conseguirlo.

Otro estándar, el ISO 9995, indica por ejemplo las características de un teclado: distribución y etiquetas de las teclas, teclas de edición, etc.



Guías de estiloLas guías especifican

Cuándo usar los elementos y controles (widgets) de la interfazCómo presentarlosY cuáles son las técnicas usadas para interaccionar con ellos

Ej. Los RadioBotonesDeben emplearse para opciones mutuamente exclusivasSuelen presentarse agrupados Se pueden interaccionar con ellos presionándoles con el ratón o bien mediante teclado empleando el mnemotécnico asociado.

La ventaja más evidente de las guías de estilo es que aseguran una mejor usabilidad mediante la consistencia que imponen.



Guías. TiposLas guías de estilo pueden ser:

Guías de Estilo Comerciales, diseñadas por las empresas de software.

Las guías de estilo más relevantes son las creadas por las empresas informáticas más importantes (Apple, IBM, Microsoft, Sun...). Cada una de ellas ha publicado su guía de estilo propia.

Guías de Estilo Corporativas, confeccionadas por las empresas para su propio uso.



Guías de Estilo ComercialesSun

Sun desarrolló una guía de estilo conocida como “Java Look and Feel Design Guidelines”, cuya segunda versión ha sido publicada en el año 2001.

Dicha guía está disponible en Internet en la dirección http://java.sun.com/products/jlf/guidelines.html

Lo principal de lo propuesto por esta guía se ha ido viendo en el tema 2 a medida que se estudiaban los principales elementos de la interfaz de usuario y es la que ha de seguirse a la hora de construir una aplicación Java. A continuación únicamente vamos a repetir algunas de las indicaciones realizadas por la guía y que hemos visto en el tema 2, así como algunas consideraciones relativas a los diálogos.



Botones de comandoLos botones que sólo contienen texto, éste debe estar centradodentro del botónLos botones que contienen texto y gráficos:

El texto debe ir colocado después o debajo del gráficoHay que incluir mnemotécnicos en el texto (excepto en el botón por defecto y de cancelación)



Label (JLabel)

Muestra texto, gráficos o ambos, pero de sólo lecturaNo puede ser seleccionada por el usuarioEl texto que contienen ha de ser breve y la terminología empleada ha de ser familiar para los usuariosLa etiqueta ha de estar inactiva cuando el componente que describe esté inactivoLas etiquetas siempre deben ir antes o encima del componente que describen. Para los lenguajes que leen de izquierda a derecha, antes es a la izquierda del componente. Hay que emplear la capitalización en el texto de la etiqueta y colocar : al final del texto.



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.



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



Menús comunesAyuda

Proporciona acceso (en línea) a información sobre las características de una aplicación

Proporciona acceso al cuadro Acerca de, que muestra información básica sobre la aplicación

El Acerca de incluye:Nombre del productoVersiónLogo de la compañíaLogo del productoNombre de los autores

Antes del Acerca de siempre hay un separador



Consideraciones de la guía de estilo de Java sobre los diálogos



Elementos de un Diálogo

Título

Elementos de la IU

Fila de Botones



Características GeneralesEl título del cuadro de diálogo, mostrado en la barra del título, debe tener la forma:

“Nombre de la aplicación: Título del cuadro”

Hay que incluir mnemotécnicos para todos los elementos excepto el botón por defecto y el botón de cancelación

Al abrir un cuadro de diálogo el foco debe aparecer sobre el componente sobre el que se espera actuar en primer lugar



Orden de TabulaciónEl orden de tabulación debería concordar con el orden de lectura (del último pasar al primero)



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



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)



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



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



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



Botón de Cancelación en un Cuadro de Diálogo con JBuilder - Ejemplo

click

Se invoca al método muestra()

jTextArea1



Botón de Cancelación en un Cuadro de Diálogo con JBuilder – Ejemplo (II)

if (e.getKeyCode()==KeyEvent.VK_ESCAPE)muestra();

}

void jTextArea1_keyPressed(KeyEvent e) {

• Comprobar sobre cada componente, en este caso sobre el área de texto (evento KeyPressed), , si se ha pulsado la tecla Escape. Si es así hay que invocar al método muestra()




5. Soporte al Usuario



5. Contenidosn Introducción

n Soporte básico para el usuario

n Requerimientos de la ayuda

n Hipertexto e Hipermedian Lenguajes de marcas

n Ayuda en línea

n Estructura de la ayuda

n Organización del texto de la ayuda

n Ejemplo



IntroducciónLa documentación de un producto forma parte de la interfaz de usuario La documentación debe considerarse al diseñar los testde usabilidadLa documentación incluye

Información de la instalaciónAyuda en líneaMensajesTutorialesCualquier otra información de soporte para el producto



Soporte Básico al UsuarioLa documentación básica para el usuario (o soporte básico) está constituida por:

Guía de Referencia RápidaRecordatorio al usuario de determinadas acciones con herramientas con las que ya estáfamiliarizado

Ayuda en línea Solicitada por ejemplo cuando el usuario ha encontrado un problema al realizar una tarea

Explicación Completa (Manual)Explicación completa sobre una herramienta o comando

TutorialParticularmente útil para los nuevos usuarios de una herramienta. Proporciona instrucciones paso-a-paso de cómo usar la herramienta



Requerimientos de la AyudaDisponibilidadPrecisión y DetalleConsistenciaRobustezFlexibilidadNo Obstructiva



DisponibilidadEl usuario ha de poder acceder a la ayuda en cualquier momento de la interacción con el sistema sin tener que salir de la aplicación



Precisión y DetalleLa ayuda ha de estar acorde con la versión actual del productoHa de abarcar todo el sistema, ya que si el usuario no encuentra ayuda en un tema concreto se decepcionará

Además, a priori no se conoce que partes de la ayuda serán más necesitadas por el usuario



ConsistenciaTodas las partes de la ayuda (y la documentación) han de ser consistentes en términos de

ContenidosTerminologíaEstilo



RobustezLos sistemas de ayuda son utilizados a menudo cuando el usuario se encuentra en dificultades

Ej. si el sistema no se comporta correctamente

Es importante que la ayuda proporcione un buen soporte incluso cuando la aplicación no se comporta correctamente



FlexibilidadEn muchos sistemas la ayuda es rígida, es decir, se muestra siempre el mismo mensaje independientemente de la experiencia de la persona que busca la ayuda.

La ayuda ha de permitir que los diferentes tipos de usuarios interaccionen de manera apropiada según sus necesidades.

Para ello emplearemos hipertexto



No ObstructivaLa ayuda no se debe interponer en el uso normal de la aplicación



Hipertexto e Hipermedia



Hipertexto - IntroducciónPresentar texto en una forma lineal, una página después de otra, no es apropiado para el recorrido de una ayuda en línea, ya que fuerza al lector a seguir la idea del autor sobre el orden en que deberían mostrarse las cosas.

Si el usuario está siguiendo una línea particular de interés, puede desear saltar de una parte de la ayuda a otra, y esto puede ser difícil con una estructura lineal.

Lineal



Hipertexto- DefiniciónEl hipertexto intenta evitar estas limitaciones del texto estructurándolo en una malla más que en una línea. Esto permite acceder desde una página a diferentes páginas.

Hipertexto se puede definir como una forma no lineal de presentar información, en principio, textual; de esa manera el usuario puede navegar del modo que prefiera a través de dicha información

En definitiva, un sistema hipertexto consta de un número de páginas y un conjunto de enlaces que son usados para conectar páginas. Los enlaces pueden unir cualquier página a cualquier otra, y puede haber más de un enlace por página.



Hipermedia -IntroducciónTípicamente, los sistemas hipertexto incorporan diagramas, fotografías, y otros medios además del texto. Tales sistemas son conocidos como sistemas hipermedia.

Hipermedia es el resultado de la combinación del hipertexto y la multimedia.



HipermediaLos sistemas hipermedia son idealmente apropiados para manuales en línea y para la ayuda. De hecho, muchos sistemas de ayuda comerciales emplean un sistema de ayuda estilo hipermedia. Ejemplos de esto es la ayuda de Microsoft Windows (empleada por la mayoría de aplicaciones Windows).

Los primeros trabajos con este tema fueron realizados por Ted Nelson (1967) en el proyecto Xanadu, que fue el primero en utilizar la palabra hipertexto. Douglas Engelbert (1968) fue el primero en presentar un sistema hipertexto operacional, y este se popularizó con el sistema Hypercard de Apple.



Lenguajes de Marcas



HTMLHMTL (Hypertext Mark-Up Language) es un lenguaje que permite el desarrollo de documentos hipertextuales, es decir, es un lenguaje estandarizado para describir documentos de texto que contienen referencias a otros documentos.



HTML describe la estructura y el contenido del documento y no el formato de la página y su apariencia.

Para ello encierra cada porción de texto entre un par de etiquetas, una de apertura y otra de cierre, que no son visibles en el momento de visualizar el documento, aunque si afectan a su visualización.

Las etiquetas se delimitan por los signos < y >.

<H1> Esto es un encabezamiento </H1>

Esto no.

Estructura de un documentoEtiquetas HTML

<HTML>

<HEAD><TITLE> Título de la página </TITLE>

</HEAD>

<BODY>Contenido de la página

</BODY>

</HTML>

<etiqueta atributo1 atributo2=valor2> .. </etiqueta>

Estructura de un documentoLa Estructura

Incluye el contenidodel documento



TítulosHTML dispone de 6 niveles:

<H1> Título nivel 1 </H1><H2> Título nivel 2 </H2>...<H6> Título nivel 6 </H6>

Saltos de línea Etiqueta <BR> (no es necesaria etiqueta de cierre)

Línea divisoria Etiqueta <HR>(no es necesaria etiqueta de cierre)

Párrafos<P>.... </P>

Estructura de un documentoJerarquía del Documento



Estilos Lógicos:

Ejemplo

Estructura de un documentoUtilización de Estilos

Negrita Cursiva Subrayado TeletipoEtiqueta <B>... </B> <I>... </I> <U>...</U> <TT>... </TT>

<B>ejemplo sencillo</B>



Creación de ListasListas Ordenadas y no Ordenadas

O rd e n a d a N o O rd e n a d aE tiq u e ta < O L >

< L I> U n o < L I> D o s < L I> T r e s< /O L >

< U L > < L I> U n o < L I> D o s < L I> T r e s< /U L >

T Y P E = 1 ,a ,A ,i ,I T Y P E = D I S C ,C I R C L E ,S Q U A R E

•Ejemplo: <UL><LI> Nuevo<LI> Abrir<LI> Guardar

</UL>



Para establecer enlaces se emplea la etiqueta <A>..</A> con el atributoHREF que toma como valor el identificador del recurso al que se desea apuntar.

Ejemplo:

<A HREF=”fuentes/guardar.html”> enlace </A>

Uso de Enlaces



Atributos para la etiqueta <BODY>:BGCOLOR: color de fondo de la páginaTEXT: color del texto

Color para el Cuerpo del Documento

<BODY BGCOLOR=BLACK TEXT=WHITE>...</BODY>



Fuente y Color. Etiqueta <FONT><FONT FACE=ARIAL SIZE=12 COLOR=BLUE>...</FONT>

Alineación. Se consigue mediante el atributo ALIGN de la etiqueta <P>. Valores posibles son: LEFT, RIGHT, JUSTIFY y CENTER.

<P ALIGN=CENTER> Ejemplo de párrafo centrado </P>

Control del Texto

La etiqueta <IMG> permite la inclusión de gráficos en un documento HTML. Atributos:

SRC: gráfico a visualizar.ALIGN: Alineación de la imagen respecto al texto que la rodea (TOP, MIDDLE y BOTTOM).

<P><IMG SRC=“imagen.gif” ALIGN=BOTTOM> <!-- No es necesario cerrar la etiqueta ->

</P>

Inclusión de las Imágenes



XMLXML (Extensible Markup Language) es otro lenguaje de marcas pero extensible, es decir, en el que el usuario establece que marcas o etiquetas emplear.



Ayuda en Línea



Asistencia en LíneaLa ayuda es necesaria en toda aplicación

Proporciona soporte cuando existe un problema durante el trabajo

Es una parte importante del diseño de un producto y puede proporcionarse de una gran cantidad de formas:

Ayuda textual (hipertexto e hipermedia)Ayuda sensible al contextoTutorialesWizards



Ayuda en LíneaA la hora de implementar la ayuda en línea hay que desarrollar un plan teniendo en cuenta los siguientes apartados

Audiencia de la aplicaciónContenidos de las preguntasEstructura de las preguntas

Referencias cruzadasDefinición de términos

Uso de preguntas sensibles al contexto



Audiencia de la AplicaciónEl usuario al que va dirigida la aplicación determina la información que tiene que aparecer en el sistema de ayuda y como ha de ser presentada:

Usuario Novel Completamente inexperto en informática

Usuario Novel en la aplicaciónTiene algunos conocimientos de informática, pero completamente nuevo en la aplicación

Usuario Intermedio en la aplicaciónTiene conocimientos de la aplicación

Usuario Experto en la aplicaciónTiene una amplia experiencia.



Contenidos de las PreguntasLos usuarios noveles necesitan la ayuda para aprender las tareas y las definiciones de los términos

Ej. Si se trata de un juego será necesario explicarle las reglas del juego, es decir, en que consiste el juego, así como cual es la forma de jugar con esta aplicación

Los usuarios intermedios acudirán a la ayuda más a modo de recordatorio de órdenes y funciones

El experto solamente pide ayuda en la sintaxis de ordenes y funciones, teclas aceleradoras o atajos para desenvolverse más rápidamente



Estructura de la Ayuda

Organización JerárquicaTabla de contenidosÍndice

Recorrido SecuencialReferencias CruzadasDefinición de TérminosBúsqueda



Organización JerárquicaTabla de contenidos

•Tanto la tabla de contenidos como el índice proporcionan una lista de todas las cuestiones a disposición del usuario



Organización JerárquicaIndice



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



Referencias Cruzadas• Permiten el hipertexto

•Son palabras que están enlazadas con otras páginas



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



Opción de Búsqueda



Organización del Texto de la AyudaLenguajeCantidad de textoLongitud de los párrafosEspacios en blancoSobreindicar el textoGráficos e IconosDiseño consistente



LenguajeSe debe emplear un lenguaje apropiado para los usuarios que van a utilizar la aplicación

Si el lenguaje es demasiado complicado puede frustrar a los usuarios, que deberán aprender la definición de los conceptos y términos que no le son familiares



Cantidad de TextoLa velocidad de lectura es un 30% más lenta cuando se realiza sobre una pantalla. Por ello la cantidad de texto no debe ser excesiva



Longitud de los párrafosHay que utilizar párrafos cortos, ya que mejora la velocidad de lectura



Espacios en blancoSon importantes para hacer el texto de la ayuda más legible.



Sobreindicar el TextoSe puede hacer uso de los tipos de letra, tamaños, color, etc. para destacar conceptos

No se debe exagerar porque la sobrecarga reduce la efectividad



Gráficos e IconosLa utilización de gráficos en la ayuda mejora la presentación de los conceptos, ya que los gráficos siempre se asimilan más rápidamente que el texto

Conviene emplear imágenes que ayuden a explicar las funciones de los iconos y demás elementos de la pantalla



Diseño ConsistenteLos contenidos de la ayuda deben ser presentados de forma consistente:

Títulos con el mismo formato

Destacar de la misma manera el texto,

Etc.



Ejemplo:

Construcción de ficheros de ayuda para Java con JavaHelp



JavaHelpQué es JavaHelp

Características Básicas

Herramientas

Librerías

Pasos en la construcción de la ayuda

Incorporación de la ayuda en la aplicación



Qué es JavaHelpSistema que facilita el desarrollo de ayuda on-line

Es independiente de la plataforma (implementado en Java )

Evita que cada usuario tenga que crear su propio sistema de ayuda propietario



Características Básicas

Visor de Ayuda Panel de contenidosPanel de navegación

Tabla de contenidosÍndiceBúsqueda

Distintas vistas de la información



Herramientashsviewer

Permite visualizar ficheros HelpSet. Puede invocarse desde línea de comandos o desde Windows

jhindexerPrograma de línea de comandos que crea la base de datos de búsqueda

jhsearchPrograma de línea de comandos que busca en la base de datos creada con jhindexer.



Libreríasjh.jar

Librería estándar que incluye todo lo necesario para el visor de ayuda y los navegadores

jhbasic.jarSubconjunto de la anterior que no soporta la búsqueda

jhtools.jarIncluye las herramientas para construir y consultar la base de datos

jhall.jarContiene todas las clases de JavaHelp.



Pasos en la Construcción de la Ayuda



Pasos - Resumen1. Creación de los temas de ayuda para el usuario (topicsHTML)

2. Creación de los ficheros de metadatos que JavaHelpemplea para presentar la información

HelpSetMapTabla de contenidosIndice...



Pasos Detallados1. Crear topics HTML2. Crear fichero map3. Crear fichero HelpSet4. Crear fichero tabla de contenidos5. Crear fichero índice6. Crear base de datos de búsqueda7. Comprimir y encapsular ficheros de ayuda en ficheros JAR (Este paso no será necesario).

Imprescindibles



Organización..\help

mi_helpset.hsmi_map.jhmmi_toc.xmlmi_index.xml

\ fuentes\\JavaHelpSearch

Topic1.htmlTopic2.htmlTopic3.html.....



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.



2. Fichero MapAsocia identificadores a los ficheros HTML que contienen los topics.Tiene extensión .jhmSintaxis basada en XML



Fichero Map (II)<...

<map version="1.0">

<mapID target="introduccion" url="fuentes/introduccion.html" />

<mapID target="nuevo" url="fuentes/nuevo.html" /><mapID target="abrir" url="fuentes/abrir.html" /><mapID target="guardar" url="fuentes/guardar.html" />

<mapID target="guardarcomo" url="fuentes/guardarcomo.html" /><mapID target="colorfondo" url="fuentes/colorfondo.html" /><mapID target="colortexto" url="fuentes/colortexto.html" />

</map>

Fichero html asociadoIdentificador



3. Fichero HelpSetEs el único fichero del sistema de ayuda que es referenciado explícitamente por la aplicación.

Es el primero que se carga cuando se activa el sistema de ayuda

Contiene toda la información necesaria para ejecutar el sistema de ayuda

Tiene la extensión .hs

Sintaxis basada en XML



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

Fichero HelpSet (III)<.....<helpset>

<title> Ejemplo de Ayuda </title>

<maps><homeID>introduccion</homeID>

<mapref location="Map.jhm"/></maps>

<view><name>Tabla de contenidos</name> // nombre de la vista<label>Tabla de Contenidos</label> // etiqueta asociada con la vista<type>javax.help.TOCView</type> //camino a la clase navegador<data>TOC.xml</data> //fichero que contiene la tabla de contenidos

</view> ..../helpset>

Fichero map

Título

Página a visualizar por defecto



Visualización del HelpSetEn línea de comandos

hsviewer –helpset c:\ejercicios\ayudas\ayuda.hshsviewer –helpset c:\ejercicios\ayudas\ejemplo.jar

En Windows



4. Fichero TOCEste fichero describe el contenido y la distribución de la tabla de contenidosSintaxis basada en XML



Fichero TOC (II)

Especifica el texto para la entrada en la tabla de contenidos

Especifica el identificador del topic a mostrar cuando la entrada es seleccionada por el usuario. El identificador ha de estar definido en el fichero map

<toc version="1.0"><tocitem text="Mi Editor ">

<tocitem text="Introducción" target="introduccion"/><tocitem text="Utilizar Mi Editor">

<tocitem text="Crear documento" target="nuevo"/>

<tocitem text="Abrir documento" target="abrir"/>

<tocitem text="Guardar documento"><tocitem text="Guardar" target="guardar"/><tocitem text="Guardar como" target="guardarcomo"/>

</tocitem>

<tocitem text="Formato del editor"> <tocitem text="Cambiar color texto" target="colortexto"/><tocitem text="Cambiar color fondo" target="colorfondo"/>

</tocitem></tocitem>

</tocitem></toc>



5. Fichero Índice

Este fichero describe la distribución y contenido del índiceSintaxis basada en XML



Fichero Índice (II)<....<index version="1.0">

<indexitem text="abrir documento" target="abrir"/><indexitem text="cambiar color texto" target="colortexto" /><indexitem text="cambiar color fondo" target="colorfondo" /><indexitem text="crear documento" target="nuevo" />

<indexitem text="documento"><indexitem text="abrir documento" target="abrir" /><indexitem text="crear documento" target="nuevo" /><indexitem text="guardar" target="guardarcomo" />

</indexitem>

<indexitem text="formato editor"><indexitem text="color de fondo" target="colorfondo"/><indexitem text="color del texto" target="colortexto"/>

</indexitem>

<indexitem text="guardar documento" target="guardar" />

</index>

Especifica el texto para la entrada en la tabla de contenidos

Especifica el identificador del topic a mostrar cuando la entrada es seleccionada por el usuario. El identificador ha de estar definido en el fichero map



6. BúsquedaEs necesario emplear el jhindexer para generar la base de datos de búsqueda

La base de datos está formada por seis ficheros localizados en la carpeta JavaHelpSearch



Búsqueda (II)Para crear la base de datos de búsqueda

jhindexer fuentesSe supone que fuentes es el directorio donde están almacenados todos los topics html

jhindexer fuentes1 fuentes2Si tenemos más de un directorio donde estén almacenados los topics html. En este caso serían dos:fuentes1 yfuentes2

Funcionamientojhindexer desciende recursivamente por la jerarquía de directorios indexando todos los ficheros que encuentraCrea la carpeta JavaHelpSearch dónde almacena la base de datos de búsqueda



Búsqueda (III)Para verificar la validez de la búsqueda

En línea de comandosjhsearch JavaHelpSearch

Desde el visor de ayuda



7. Construcción ficheros JARUna vez creada la ayuda se pueden encapsular los ficheros en un único fichero para entregar a los usuarios

El formato empleado por JavaHelp para encapsular y comprimir es JAR (Java ARchive)

Para ello se emplea el comando jar.



Construcción ficheros JARCreación de ficheros jar

C:\ejercicios\ayudas> jar –cvf miayuda.jar *

Para ver los ficheros incluidos en un jar

jar –tvf miayuda.jar

Para extraer los ficheros del jar

jar –xvf miayuda.jar



Incorporación de la Ayuda en la Aplicación



Clases Básicas ImplicadasClase URL

Paquete a importar: import java.net.*;

Esta clase se utiliza para representar una URL (UniformResource Locator), es decir, para identificar un recurso.

Un recurso puede ser algo tan simple como un fichero o un directorio, o bien puede ser un objeto más complejo.



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



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



Pasos para incorporar la ayuda en la aplicación

1. Incorporar la librería jhall.jar a la aplicaciónProyecto->Propiedades->Vías de acceso->Bibliotecas necesarias



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



Pasos para incorporar la ayuda en la aplicación (III)

3. Encontrar el fichero HelpSet y crear un objeto HelpSet

Try{ hsURL = HelpSet.findHelpSet(null,“ayuda/ayuda.hs"); // localiza el fichero helpset

hs= new HelpSet(null,hsURL); // crea un objeto HelpSet

} catch (Exception ee){

JOptionPane.showMessageDialog(this,“Fichero HelpSet no encontrado”);return;

}



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 ();



Pasos para incorporar la ayuda en la aplicación (V)

5. Asociar la ayuda a un botón o elemento de menúhb.enableHelpOnButton(jButton1,”introduccion”,hs)

jButton1

click



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.



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);




6. Internacionalización



6. Contenidosn Introducción

n Definiciónn Internacionalización y localización

n Elementos específicos de la localización

n Proceso de Internacionalización

n Ventajas de construir aplicaciones internacionalizadas

n Ejemplo muy sencillo con Java



IntroducciónHace unos años el software se producía en un único lenguaje, normalmente

inglés. Si una persona hablaba otro idioma, tenía que aceptar el programa como estaba.

Actualmente, debido sobre todo a los ordenadores personales, hanproliferado los usuarios con una formación muy diversa. Esto ha obligado a hacer las aplicaciones más usables y también, como una parte del proceso de usabilidad, a hacer las aplicaciones en las lenguas propias de los usuarios.



Internacionalización

InternacionalizaciónProceso de construir un producto para que sea utilizado en el mercado internacional, especificándolo en el diseño de sus características y en el código



LocalizaciónLocalización

Adaptación de un producto software al lenguaje y a las convenciones locales y culturales de una región particularCada país tiene una localización única. De hecho, una lengua puede ser hablada en más de un país, por ejemplo el castellano es hablado en España y en la mayor parte de los países de América Latina, pero hay diferencias nacionales con la moneda, entre otras cosas. Por ello cada país representa una localización única.



Localización (II)En Windows se puede especificar una localización concreta acudiendo a Panel de Control

Configuración Regional



Elementos Específicos de la LocalizaciónA la hora de internacionalizar una aplicación hay que tener en cuenta:

Los mensajes y texto que aparecen en una aplicación y que deben ser traducidosY además, los elementos que son específicos de una localización

Calendarios, formatos de fechas, horas, etc.Formatos de números y monedasUnidades de medida



Elementos Específicos de la Localización (II)

Calendarios. Existen diferentes estilos de calendarios:

Gregoriano, budista, chino, hebreoDiferentes formatos en el gregoriano

aa/mm/ddaadddaaaa/mm/dddd/mm/aamm/dd/aa



Elementos Específicos de la Localización (III)

Los Formatos de Fecha varían de un país a otro

19 de abril de 1970 ----------- España4/19/70 ----------- Reino Unido19/4/70 ----------- Dinamarca1970-04-19 ----------- Suecia



Elementos Específicos de la Localización (IV)

Los Formatos Monetarios varían también de un país a otro

USA --------------- $1,234.56Noruega --------------- Kr1.234,56 Suiza --------------- sFr1234,56Alemania --------------- 1.234,56DM



Elementos Específicos de la Localización (V)

Tiempo Horario, al igual que los anteriores también varia de una localización a otra

USA --------------- 8:32Canadá --------------- 20:32Suiza --------------- 20,32,00Alemania --------------- 20.32 UhrNoruega --------------- KI 20.32



Elementos Específicos de la Localización (VI)Números y Símbolos numéricos

EEUU Billón, uno seguido de nueve cerosLa coma separa miles

América Latina y EuropaBillón, uno seguido de doce cerosLa coma separa decimales

Unidades de medidaLa mayoría sistema métrico decimal (Km, cm,...)EEUU emplea la milla y la pulgada

TemperaturaCelsius (mayoría) pero también se emplea Farenheit



Elementos Específicos de la Localización (VII)Tamaños de papel

Mayoría: DIN A-3, DIN A-4

EEUU: legal, letter, ledger

Formato direcciones postales

Mayoría: nombre de la calle + número

EEUU: número + nombre de la calle

Signos de puntuaciónAlgunos símbolos no utilizados: ¿, ¡,...Griegos: signo de interrogación parecido al ;

ColoresOccidentales: rojo parar, verde proseguirConvención no válida en China

Iconos



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.



Proceso de Internacionalización (II)• La idea se basa en tener :

• Un único bloque de código, es decir, el código de la aplicación siempre va a ser único y el mismo.

• Y varios bloques de datos, uno por cada país (localización).

Datos en español

Datos en inglés

Datos en francés

Código de la Aplicación+



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.



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.



Ejemplo de Internacionalización en Javan Clases principales implicadas en la internacionalización en

Javan Locale

n ResourceBundle

n Ejemplo sencillo para internacionalizar una aplicación Java que únicamente contiene cadenas



Clases Java para InternacionalizaciónClase Locale

Identifica un idioma y un país concreto, es decir, una localización.en US -> inglés Estados Unidosen UK -> ingles Reino Unidoes ES -> español EspañaTodos estos códigos están disponibles en las siguientes direcciones web:

http://www.ics.uci.edu/pub/ietf/http/related/iso639.txthttp://www.chemie.fu-berlin.de/diverse/doc/ISO_3166.html

Clase ResourceBundleContiene objetos específicos a la localización



EjemploA continuación vamos a ver un ejemplo de internacionalización en Java en el que se incluyen como elementos a localizar únicamente cadenas (Strings)



Ejemplo - DescripciónPartimos de una clase Strings1 que únicamente muestra tres mensajes por pantalla.

Queremos: Que estos mensajes aparezcan en español si la configuración regional del ordenador está como Español (España)

Que aparezcan en inglés si la configuración regional del ordenador estácomo Inglés (EEUU)

Y además, el código de la clase ha de ser único y siempre el mismo para todos los casos (es decir, sólo debemos tener un Strings1.java) .



Clase de la que partimosEsta clase es de la que partimos inicialmente, y muestra tres mensajes por pantalla.

public class Strings1{

static public void main(String [] args){

System.out.println(“Hola a todos”);

System.out.println(“Departamento de Informática”);

System.out.println(“Universidad de Oviedo”);

}

}



Pasos a seguir1. Identificar los elementos a localizar, es decir, identificar el bloque de datos. En

este caso son los tres mensajes:

Hola a todos

Departamento de Informática

Universidad de Oviedo

2. Crear un fichero de propiedades, de texto, que contenga dichos datos.

Habrá un fichero para cada localización

El fichero tendrá un nombre especial que identifica la localización

NombreFichero_en_US.properties ( para localización Inglés EEUU)NombreFichero_en_UK.properties ( para localización Inglés Reino Unido)NombreFichero_es_ES.properties (para localizacion Español España)...

Este fichero sólo puede contener cadenas (Strings) y a cada una de las cadenas se les asignará un nombre (el que queramos)



Pasos a seguir (II)En este caso, por tanto, se crearán dos ficheros, con nombre, MisDatos cuyo

contenido es el siguiente. //Contenido del fichero MisDatos_es_ES.properties

cadena1 = Hola a todoscadena2 = Departamento de Informáticacadena3 = Universidad de Oviedo

//Contenido del fichero MisDatos_en_US.properties

cadena1 = Hello Everybody!cadena2 = Department of Computer Sciencecadena3 = University of Oviedo

Localización Inglés (en) EEUU (US)

Localización Español (es) España (ES)

Nombres por los que después recuperaremos los mensajes



Pasos a seguir (III)3. Internacionalizar la clase, es decir, adaptarla para que seleccione los datos del fichero

adecuado en función de la localización que esté seleccionada en el ordenador. Para ello

3.1 Obtener la localización seleccionada en el ordenador:Locale localizacion = Locale.getDefault();

3.2 Cargar los datos del fichero de propiedades(llamado MisDatos) correspondiente, en función de la localización obtenida en el paso anterior:

ResourceBundle mensajes =ResourceBundle.getBundle("MisDatos",localizacion);

3.3 Extraer cada uno de los mensajes en función del nombre que se les asignó en el fichero de propiedades:

System.out.println(mensajes.getString("cadena1"));System.out.println(mensajes.getString("cadena2"));System.out.println(mensajes.getString("cadena3"));

MisDatos_en_US.properties o bien MisDatos_es_ES.properties



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"));}



Nuevas localizacionesSi ahora deseáramos que nuestra aplicación respondiese a nueva nueva localización, como por ejemplo, francés (Francia), únicamente sería necesario crear un nuevo fichero de propiedades de nombre MisDatos_fr_FR.properties con las cadenas traducidas a francés.

La clase Strings2 no sería necesario tocarla ni añadirle ningún cambio.




7. Bibliografía



Bibliografía Básica 1. La Interacción Persona Ordenador

J. Abascal y otros. Edición en CD-ROM, 2001.

2. Human Computer Interaction ( Second Edition)Alan Dix, et al. Prentice Hall,1998

3. About Face:The Essentials of User Interface DesignAlan Cooper.IDG Books, 1995

4. The Elements of User Interface DesignTheo Mandel. John Wiley & Sons, Inc, 1997

introducción a la comunicación...

Documents