Beruflich Dokumente
Kultur Dokumente
- DESARROLLO TEMÁTICO:
3.1.- DEFINICIÓN:
La Interfaz Gráfica de Usuario, del inglés Graphical User Interface, es un programa informático que actúa
utilizando un conjunto de imágenes y objetos gráficos para representar las acciones y la información
disponibles en la interfaz. Para que el usuario interactúe y establezca un contacto más cómodo e intuitivo
con el ordenador. Este sistema de interactuación se llama WYSIWYG (What you see is what you get, lo
que ves es lo que obtienes) y en él, los objetos, iconos de la interfaz gráfica se comportan como metáforas
de la acción y las tareas que el usuario debe realizar.
3.2.-HISTORIA:
La primera GUI desarrollada en la historia, fue creada por los estudiosos chicos del Centro de
investigación Xerox en Palo Alto (PARC) en los años 70. La primera PC en utilizar esta interfaz
fue la famosa Xerox Alto, desarrollada en 1973. Sin embargo, este fue un producto dirigido a la
investigación, por tanto nunca fue lanzado al mercado. Fig. (01).
En 1985 nació la primera interfaz gráfica de Microsoft. Esta cosa multicolor, es el padre de las
actuales presentaciones gráficas de Windows. Era el poseedor de iconos con una lujosa
resolución de 32 x 32 pixeles, además de gráficos a color. Fig. (02).
En 1987 salió la segunda versión de windows, la novedad de esta versión fue la posibilidad de
modificar el tamaño y apariencia de las ventanas. Fig. (03).
OS/2 2.0 lanzada en 1992 fue la primera GUI que fue sujeto de aceptación internacional, así
como pruebas de accesibilidad y usabilidad. Toda la GUI fue dirigida a objetos, por lo que cada
archivo y carpeta podía interactuar y ser asociado con otros archivos, carpetas y aplicaciones,
facilitando con esto al usuario la manipulación de la información. Fig. (04).
Windows 95 apareció en el verano boreal de 1995 y disponía de una interfaz totalmente
rediseñada, por primera vez se añadió el clásico botón “X” en cada ventana para cerrarla. Se le
brindó características de estado (activado, desactivado, seleccionado, etc.) a los iconos y otras
gráficas. El botón “inicio” aparece por primera vez. Un gran paso a nivel gráfico,
independientemente de la calidad del sistema operativo. Fig. (05).
En 2001 apareció por primera vez Windowx XP que mostraba una interfaz muy diferente a la
mostrada en versiones anteriores. Ya en esta versión se introduce la posibilidad de aplicar
“temas” nuevos a la presentación del sistema. Sin embargo, los iconos solo son de 48 X 48
pixeles, lo que no es mucho considerando la resolución de los presentados en MacOS X. Fig.
(06).
Para GNOME 2.24 lanzado en 2008, los chicos de GNOME pusieron bastante esfuerzo en crear
temas y arte en la versión 2.24, ya que su meta es hacer “Que tu computadora luzca bien”.
Organizaron una competencia para encontrar los mejores fondos para escritorio que sus usuarios
pudieran crear. Fig. (07).
En la actualidad, la interfaz gráfica implica la presencia de un monitor de ordenador o pantalla
constituida por una serie de menús e iconos que representan las opciones que el usuario puede
tomar dentro del sistema. Las características básicas de una buena interfaz podrían sintetizarse
en: Facilidad de comprensión, aprendizaje y uso.
3.3.- FUNCIÓN:
Su función principal consiste en facilitar un entorno visual sencillo que permita la comunicación
con el sistema operativo de un ordenador. Permite establecer comunicación entre dos sistemas
que no hablan en el mismo lenguaje. Implica la presencia de un monitor o pantalla que mediante
una serie de menús e iconos representan las opciones que el usuario puede escoger dentro del
sistema. Es la Interfaz la responsable de ofrecer una interacción fluida y agradable.
3.4.- CARACTERÍSTICAS:
Posee un monitor gráfico de alta resolución.
Posee un dispositivo apuntador (típicamente un ratón).
Promueve la consistencia de la interfaz entre programas.
Los usuarios pueden ver en la pantalla los gráficos y textos tal como se verán impresos.
Sigue el paradigma de la interacción objeto-acción.
Permite la transferencia de información entre programas.
1
Antena tplink
3.5.-CLASIFICACIÓN:
Una interfaz de hardware, a nivel de los dispositivos utilizados para ingresar, procesar y entregar
los datos: teclado, ratón y pantalla visualizadora.
- Según su evolución:
Interfaces de menús.
Un menú es una lista de opciones que se muestran en la pantalla o en una ventana de la pantalla para
que los usuarios elijan la opción que deseen (véase ejemplo). Los menús permiten dos cosas: navegar
dentro de un sistema, presentando rutas que llevan de un sitio a otro, y seleccionar elementos de una
lista, que representan propiedades o acciones que los usuarios desean realizar sobre algún objeto.
Las interfaces de menús aparecen cuando el ordenador se vuelve una herramienta de usuario y no
sólo de programadores. Las actuales interfaces gráficas u orientadas a objetos siguen utilizando este
tipo de interfaces (los distintos estilos de interfaces no son mutuamente exclusivos).
Existen distintos tipos de menús. Los primeros fueron los menús de pantalla completa, estructurados
jerárquicamente:
Los menús de barra, situados en la parte superior de la pantalla, son profusamente utilizados
en las aplicaciones actuales. Contienen una lista de acciones genéricas que dan paso a
menús desplegables donde se concretan.
Estos menús pueden llevar a su vez a otros: son los menús en cascada. Pueden cambiar
dinámicamente, y deshabilitar opciones que no estén disponibles en un momento dado
(marcándolas habitualmente en gris).
2
Las paletas o barras de herramientas son menús gráficos con acciones, herramientas y
opciones que se pueden colocar en la pantalla. Se utilizan mucho en programas gráficos.
Los menús contextuales o menús pop-up son los más recientes. Se llaman así porque el
contenido del menú depende del contexto de trabajo del usuario. Contienen únicamente las
opciones que son aplicables al objeto seleccionado, más algunas de uso frecuente que
también son accesibles desde el menú de barra.
Las interfaces de menús, bien estructuradas, son buenas para usuarios noveles o
esporádicos. Son fáciles de aprender y de recordar. Pueden existir menús simples y
avanzados, para adaptarse al tipo de usuario.
Las interfaces de menús serán utilizadas normalmente en conjunción con los otros estilos de
interfaces.
Desarrolladas originalmente por XEROX (sistema Xerox Star, 1981, sin éxito comercial), aunque
popularizadas por Apple (Steven Jobs se inspiró en los trabajos de Xerox y creó el Apple Lisa, 1983,
sin éxito, y Apple Macintosh, 1984, con éxito debido en gran medida a su campaña publicitaria)
Los tres estilos más comunes de interfaces gráficas hombre-computadora son: Lo que tú ves es lo que
puedes conseguir (WYSIWYG What you see is what you get), Manipulación directa e Interfaces de
usuario basados en iconos.
Un GUI es una representación gráfica en la pantalla del ordenador de los programas, datos y objetos,
así como de la interacción con ellos. Un GUI proporciona al usuario las herramientas para realizar
sus operaciones, más que una lista de las posibles operaciones que el ordenador es capaz de hacer.
3.6.- VENTAJAS:
Representación fija y permanente de un determinado contexto de acción.
Facilidad de comprensión, aprendizaje y uso.
El objeto de interés ha de ser de fácil identificación.
Diseño ergonómico mediante el establecimiento de menús, barras de herramientas e iconos de
fácil acceso.
Interacciones basadas en acciones manuales sobre elementos de código visual o auditivo y en
selecciones de menú con sintaxis y orden.
3
- Hay que tener siempre presente que la interfaz de usuario determina la habilidad de la aplicación.
- Java proporciona los elementos básicos para construir decentes interfaces de usuario a través del AWT,
y opciones para mejorarlas mediante Swing, que sí permite la creación de interfaces de usuario de gran
impacto y sin demasiados quebraderos de cabeza por parte del programador. Al nivel más bajo, el sistema
operativo transmite información desde el ratón y el teclado como dispositivos de entrada al programa.
- El AWT fue diseñado pensando en que el programador no tuviese que preocuparse de detalles como
controlar el movimiento del ratón o leer el teclado, ni tampoco atender a detalles como la escritura en
pantalla. El AWT constituye una librería de clases orientada a objeto para cubrir estos recursos y servicios
de bajo nivel.
- Para implementar una aplicación que nos permita generar una interfaz gráfica de usuario se debe de
seguir una determinada estructura. Fig. (07).
4.1.- TIPOS DE EVENTOS:
Los eventos son el medio cómo interactúan una clase con otras o con el propio usuario, se encargan de
avisar que algo ha ocurrido y de manejarlo de una forma o de otra. Cada vez que escribimos con nuestro
teclado, que hacemos clic en un botón o un link, que cambiamos el tamaño de un objeto, estamos
generando eventos. Es por ello que, cuando programamos, debemos tener en cuenta la posibilidad (no
siempre necesaria, pero lo será a medida que generemos clases cada vez más complejas), tanto de manejar
eventos que sólo implican a nuestra clase como de generar nuestros propios eventos, de modo que los
usuarios de nuestras clases (en principio nosotros mismos) puedan decidir cómo reaccionará su código
ante ellos. Fig. (08).
Eventos de bajo nivel. Representan entradas o interacciones de bajo nivel con elementos del
interfaz gráfico (Cambio de tamaño, cambio del foco, operación con el ratón o con el teclado).
Fig. (09).
·Eventos semánticos. Eventos de alto nivel que encapsulan la semántica del modelo de
componentes del interfaz de usuario (Hacer una acción, un cambio de estado en un elemento,
etc.). No están relacionados con una clase específica de componente sino que pueden aplicarse a
todos los componentes que implementen un modelo semántico similar.
Eventos de Foco: Hay muchas razones por las que pasa el foco de un Componente a otro, y
cuando esto sucede, se genera un evento focusLost () en el Componente que pierde el foco y el
que recibe el foco, genera un evento focusGained (). Es base a esta pequeña explicación, es fácil
comprender que haya muchos tipos de Componentes que pueden generar este tipo de eventos, ya
que cualquier Componente que pueda ganar el foco también podrá perderlo y generará esos
eventos.
Evento de teclado: Un objeto KeyListener es instanciado y registrado para recibir los eventos
del teclado keyPressed () sobre los objetos Frame, Label, Button y TextField. Cuando se pulsa
una tecla, el objeto que tenga el foco en ese momento generará un evento keyPressed(), e incluso
la Etiqueta responde al teclado (en este caso).
El objeto KeyListener determina el componente visual que ha generado el evento y presenta un
mensaje en pantalla.
MouseEvent: Se producirá cuando el usuario efectúe un movimiento con el ratón o haga un clic.
4
Cuando ocurre una interacción con el usuario, se envía un mensaje al programa. La información
de los eventos de la GUI se almacena en un objeto de la clase que extiende a AWTEvent.
Los Tipos de eventos del paquete java.awt.event se utilizan con componentes de AWT y de Swing.
Los tipos de eventos adicionales, específicos para SPNG, se declaran en el paquete
javax.swing.event.
AWT
Swing
Se usa código propio de Java que dibuja en una ventana proporcionada por el sistema de
ventanas (componentes “ligeros”)." Mayor cantidad de componentes y uniformidad de las
aplicaciones gráficas en todos los entornos de ventanas.
5
Diseño del sistema:
En el diseño del sistema se pretende definir la arquitectura que utilizara la aplicación, con el
desarrollo del caso de prueba, hemos creído que es conveniente utilizar una arquitectura
multicapas, donde se tendrán al menos las siguientes capas:
• Interfaz (Web): Se encarga de la presentación de la aplicación al usuario.
•Servicios (negocio y Web): Se encarga de definir un conjunto de funcionalidades para que la capa
de interfaz se las presente al usuario.
• Manejador de persistencia: Se encarga de establecer un puente para que la capa de servicios
acceda a la información que reside en la base de datos.
• Base de datos: Se encarga de mantener de manera persistente la información del sistema.
Planificación:
Desarrollo del plan, definición de las medidas, selección de participantes, formación de
observadores y preparación de los materiales.
En esta etapa se deberá diseñar un modelo apropiado para satisfacer los requerimientos y casos de
uso que se especificaron en etapas anteriores utilizando la arquitectura que se ha definido.
Realizando nuestro caso de prueba, hemos podido identificar los siguientes ítems que al menos se
deben realizar:
• Modelo entidad relación
• Modelo de clases persistentes
• Modelo de acceso a los datos (Patrón DAO9)
• Definición de servicios
Implementación:
En esta etapa se debe llevar a la realidad todo lo que se ha descrito en los modelos de las fases
anteriores. Para tener un buen proceso de implementación se recomienda tener en cuenta los
siguientes aspectos:
• Manejo de versiones
• Definición de iteraciones
• Documentación
Pruebas:
La última etapa de nuestra metodología, busca asegurar que las funcionalidades implementadas
en el sistema funcionen de acuerdo a las especificaciones, para esto se deben definir un conjunto
de pruebas que nos ayuden a verificar esto.
6.- TÉCNICAS Y PASOS AVANZADAS PARA EL DISEÑO DE INTERFACES DE
USUARIO:
Presentación de información:
No se deben colocar demasiados objetos en la pantalla, y los que existen deben estar bien
distribuidos. Cada elemento visual influye en el usuario no sólo por sí mismo, sino también por
su combinación con el resto de elementos presentes en la pantalla.
6
Elementos de diseño de pantalla y su percepción visual:
Análisis de Color:
Es probablemente el elemento de la interfaz que con más frecuencia es mal utilizado. El color
comunica información, no es sólo decorativo (ejemplo: reforzar mensajes de error). Deben
utilizarse combinaciones adecuadas (por ejemplo, las paletas proporcionadas por los sistemas
operativos). El color debe atraer la atención, pero no cansar después de un rato de trabajo. Es
especialmente importante seguir las líneas de diseño existentes. Principio básico: diseñar
primero en blanco y negro, y luego añadir el color.
Análisis Audio:
Primero es preciso ver cuándo es más apropiado que la información visual. Segundo, determinar
el sonido adecuado. Tercero, permitir la personalización (volumen y desactivación). Como en el
caso de los colores existen guías de uso. En lugares de trabajo abiertos, puede ser poco efectivo;
además, puede ser embarazoso para algunas personas. El sonido debe usarse para informar, no
cuando no añade nada nuevo (por ejemplo, un mensaje de aviso de correo o de bienvenida,
respectivamente, al iniciar una sesión de trabajo).
Análisis Animación:
Se define como un cambio en el tiempo de la apariencia visual de un elemento gráfico. Ejemplos
de su uso: progreso de acciones (copia de ficheros en Windows 95, instalación de
programas), estado de procesos (iconos de impresora), acciones posibles (cambios en el cursor al
desplazar el ratón). La animación puede ayudar a subrayar iconos importantes, mostrar el
estado de un objeto particular o explicar su comportamiento.
Diseño internacional:
Debe hacerse un uso adecuado de la terminología. Hay mucho trabajo en este campo. Debe
tenerse cuidado con las diferencias culturales (gestos, terminología, dibujos, formatos de
teléfonos o calendarios, etc.).
7
FAMILIARIDAD: La interfaz debe ser intuitiva y ser familiar para los usuarios. De esta
manera, aprenden a manejarla rápidamente. Esta característica es esencial en toda interfaz pues
de lo contrario los usuarios se frustran y pierden el interés. Si se trata de un sitio web, es
probable que tu tasa de rebote incremente y pierdas la oportunidad de conseguir clientes
potenciales. Si se trata de una aplicación web o móvil, tienes mucha competencia y es probable
que los usuarios busquen otras opciones que sean más sencilla de usar. En una aplicación es
mucho más crucial que la interfaz se mantenga familiar para que el usuario pueda aprender a
controlarla lo más rápido posible y sin mayores dificultades.
RAPIDEZ: La rapidez también debe ser evaluada en el tiempo de respuesta de la propia
aplicación. Como ya se sabe, el tiempo de carga de una página puede ser un factor determinante
de su éxito y si la interfaz tarda demasiado en cargar es probable que los usuarios abandonen el
sitio web o aplicación sin pensarlo dos veces.
8.- TEMAS DE LÍNEA DE INVESTIGACIÓN:
Interacción Persona-Computadora:
Las personas interactúan con las interfaces constantemente: al usar el celular, en el cajero
automático, la computadora, la cámara fotográfica digital, el GPS del auto, etc.
Como definición, se puede decir que: la interacción persona-computadora es el intercambio
observable de información, datos y acciones entre un humano y la computadora, y viceversa. La
IPC surge para educar a los primeros trabajadores que se vieron obligados a usar la
computadora, ya sea en organismos gubernamentales o grandes empresas. Con el tiempo se fue
perfeccionando con el fin de ayudar a todos los usuarios, incluyendo personas con capacidades
diferentes.
Ingeniería de la Usabilidad:
Para el usuario la Interfaz es ‘la aplicación’ o ‘el sistema’ en sí, porque es lo que ve y con lo que
interactúa. El objetivo de la Ingeniería de la Usabilidad es minimizar la sobrecarga cognitiva y
perceptiva de los usuarios. Utiliza un método de diseño iterativo con prototipado, cuyo ciclo es:
"análisis, diseño, implementación, evaluación", que se repite varias veces con el fin de ir
mejorando progresivamente la aplicación. La etapa de evaluación del prototipo, la cual se realiza
con usuarios reales a cada repetición del ciclo, es de suma importancia para obtener resultados
dignos de una ingeniería. En ésta etapa el usuario es el protagonista.