interfaz grafica de usuario
TRANSCRIPT
PERTENECE A:
JOSE ARROBA
ASUGNATURA:
LENGUAJE DE PROGRAMACION II
TEMA:
INTERFAZ GRAFICA DE USUARIO
CICLO:
CUARTO CICLO
AÑO LECTIVO
2012 – 2013
TEMAS:
Interfaz Grafica de Usuario
Resumen
Recientemente, los ordenadores se han introducido en todos los dominios de la vida
cotidiana, obligando a las personas a adquirir conocimientos y habilidades específicas
interactuar según sus necesidades y usos. La informatización del trabajo de oficina ha llevado
a la necesidad de desarrollar aplicaciones para los requerimientos particulares de cada
empresa y obliga a los trabajadores a familiarizarse con su manejo.
Tradicionalmente se enfatizó la tecnología en vez del usuario cuando se desarrolla una
aplicación. Sin embargo, el diseño de software ha evolucionado para asegurar que las
necesidades del usuario sean alcanzadas y que los sistemas sean más intuitivos y amigables.
Dos neologismos permiten medir la adecuación de la aplicación a las capacidades y
limitaciones de los usuarios: la Usabilidad y la Accesibilidad.
Los objetivos generales de este proyecto son conocer el estado de desarrollo local de la
Industria del Software y generar herramientas aplicables de evaluación de Usabilidad y
Accesibilidad. Se pretende difundir la importancia de las mismas para lograr mayor
productividad y confort en los usuarios.
Se conoció la Industria de Software mendocina a través de entrevistas a sus protagonistas,
detectándose gran expectativa por el crecimiento del sector. Además se desarrolló y aplicó
una lista de chequeo para realizar evaluaciones heurísticas de Usabilidad.
Con los resultados obtenidos se generó una Guía para el diseño, selección y evaluación de
Interfaces Gráficas de Usuarios (IGU).
Componentes comunes de la GUI
El componente mas común, pero al mismo tiempo el mas ignorado, es el apuntador o
cursor. Por definición el cursor es la imagen gráfica sobre la pantalla que indica la
localización del dispositivo apuntador, y puede ser usado para seleccionar y arrastrar objetos o
indicar comandos sobre la pantalla. El apuntador típico es una flecha inclinada, pero puede
variar según los diferentes estatus, operaciones, programas o sistemas operativos. La mayoría
de las operaciones con el cursor son disparadas al presionar los botones del raton, tarea que es
conocida como hacer click. El click que se hace con el botón izquierdo es llamado solamente
click; el click que se hace usando el botón derecho es llamado click derecho.
La ventana es el área sobre la pantalla sobre la que se muestra información, con su contenido
siendo mostrada independientemente del resto de la pantalla. Un ejemplo de ventana es la que
aparece en la pantalla cuando haces click en el icono de tu navegador de internet favorito. Es
fácil manipular una ventana: puede ser abierta o cerrada con un simple click; pude moverse a
cualquier área mediante arrastrarla; puede cambiarse su tamaño o minimizarse; puede
colocarse enfrente o detrás de otra ventana, como las molestas ventanas en esos sitios que
visitas; sus barras de desplazamiento pueden ser usadas para navegar las secciones que
contiene; múltiples ventanas pueden ser abiertas al mismo tiempo con diferentes aplicaciones,
etc.
Los menús permiten al usuario ejecutar comandos seleccionándolos de una lista de opciones.
Las opciones disponibles pueden seleccionarse usando el ratón o el teclado. El uso de menús
acelera la curva de aprendizaje de un nuevo usuario para entender una aplicación.
La barra de menu es mostrada horizontalmente a lo largo de la parte superior de la
ventana. El menú desplegable es comúnmente asociado con este tipo de menús.
Cuando el usuario hace click sobre la opción el menú desplegable aparece.
La barra de herramientas es un tipo de menú que muestra mayormente iconos en vez
de texto.
El menú tiene un titulo visible dentro de la barra de menú. Su contenido solo es
mostrado cuando el usuario lo selecciona con un click. El usuario puede seleccionar
los elementos dentro del menú desplegable. Normalmente, cuando el usuario hace
click en cualquier otra parte del contenido el menú desaparece.
El menú contextual es invisible hasta que el usuario hace click derecho sobre el objeto,
o al mover el cursor sobre el objeto y presionar la tecla de menú contextual del
teclado, entonces el menú contextual aparecerá cerca del cursor.
Los extras son elementos individuales dentro o al lado de un menú.
Un icono es una pequeña imagen que representa objetos como archivos, programas,
páginas web, o comandos. Estos son una manera rápida de ejecutar comandos, abrir
documentos, ejecutar programas, etc. Los iconos están diseñados de tal manera que no
se requiera mayor explicación para entender que significa la pequeña imagen.
Controladores de entrada
Los controles o widgets son los elementos de la interfaz que el usuario interactúa. En Gambas
encontrará los componentes de entrada siguientes:
• Forma y ventana. A estas alturas, usted está familiarizado con el concepto de ventana
y la forma.
• El cursor del ratón. Usted también están familiarizados con este concepto.
• Cuadro de texto y. Es una representación similar a una caja en la que puede introducir
texto o números. Gambas ofrece el control de cuadro de valores que sólo permite
entradas numéricas
• selector de fechas. Es una ventana que muestra un calendario y permite al usuario
seleccionar una fecha.
• área de la caja de texto. Es igual que el cuadro de texto, sólo difiere en que el área de
la caja de texto permite múltiples líneas de texto.
• Slider. Se trata de una barra con un indicador que permite al usuario configurar un
valor arrastrando el indicador o haciendo clic en un punto de la barra.
• Spinner o cuadro de número. Comúnmente es bar aa vertical y hacia arriba y abajo
teclas de dirección que el usuario utiliza para ajustar el valor en el cuadro de texto
adyacente. El valor puede ser aumentado o disminuido dependiendo de qué botón se
hace clic.
• Botón. Se trata de una imagen con apariencia de botón se puede presionar haciendo
clic sobre ella.
• Cuadro combinado o lista desplegable. Una lista de elementos entre los que elegir. La
lista sólo muestra los elementos cuando se hace clic en el indicador.
• Cuadro de lista. Una lista de elementos entre los que seleccionar uno o más. La
diferencia con la lista desplegable es que el cuadro de lista utiliza varias líneas y
permite selecciones múltiples.
• Vista de árbol. Este control presenta una visión jerárquica de la información. Cada
elemento o nodo puede tener uno o más sub-elementos que se pueden ampliar a
contenidos mostrados Más subtemas, y se derrumbó para ocultarlos.
• Casilla de verificación. Una caja que indica un estado de verdadero o falso a través de
una marca de verificación. En Gambas encontrará también el botón de alternar.
• Botón de Radio. Se trata de un botón, similar a la casilla de verificación, excepto que
sólo un elemento de un grupo puede ser seleccionado. Selección de un nuevo elemento
en el conjunto de opciones también se anula la selección del botón seleccionado
anteriormente.
• Los datos de rejilla o cuadrícula. Se trata de una cuadrícula de hoja de cálculo que
muestra o permite números o texto que deberá inscribirse en filas y columnas. En
Gambas no es más que un control de este tipo de datos orientada a: ver columna, vista
de cuadrícula, vista de tabla, fuente de datos y la vista de datos.
Controles de salida
En una lista separada estan los controles de salida que no tienen interactividad alguna:
Label o text label. Esta función despliega algún texto en el formulario.
Tool tip. Funciona en conjunto con el cursor del ratón, cuando el usuario posa el
cursor sobre un elemento, sin hacer click sobre el, un pequeño recuadro aparece con
información suplementario sobre el objeto.
Progress bar. Es un control tipo barra que despliega el progreso de una tarea como
cuando descargas un archivo en tu navegador de internet.
Contenedores
Obtención de los controles en un formulario es la parte fácil. La organización de ellos para
que crear una interfaz intuitiva y atractiva es el verdadero reto. Posibilidades de interfaz son
casi infinitas, así que no puedo decir cómo diseñar cualquier interfaz dada. Hay controles que
contiene otros controles contenedores llamados que hace posible optimizar el 'espacio' (si tal
palabra es aplicable al mundo del diseño GUI) del formulario. Gambas ofrece una rica
colección de contenedores, aún se pueden ver algunas de ellas en el IDE de Gambas en sí
mismo. HBox. Se trata de una caja contenedora horizontal que organiza sus controles
secundarios en una sola fila. VBox. Es recipiente vertical, que organiza sus widgets hijos en
una sola columna. HPanel. Se trata de un contenedor que organiza sus componentes hijos, de
arriba a abajo y luego de izquierda a derecha. VPanel. Se trata de un contenedor que organiza
sus hijos, de izquierda a derecha, y de arriba a abajo HSplit. Es un divisor horizontal que
distribuye sus widgets hijos horizontalmente, y permite al usuario cambiar su tamaño
arrastrando el límite entre ellos. Vsplit. Es un divisor vertical que distribuye sus hijos
verticalmente, y que permite al usuario cambiar su tamaño arrastrando el límite entre ellos.
Panel. Se trata de un recipiente con un borde cambiante que le permite organiza los
componentes relacionados bajo la misma área. Frame. Se trata de un recipiente con un borde
grabado y una etiqueta que le permite organizar los controles relacionados bajo la misma
descripción y el área. Tab tira. Se trata de un recipiente de múltiples con una pequeña caja
rectangular que contiene una etiqueta de texto o icono gráfico asociado con un panel de vista.
Cuando se activa el panel de visualización muestra los controles asociados a esa pestaña,
grupos de pestañas permiten al usuario cambiar rápidamente entre los diferentes widgets.
Desplácese vista. Se trata de un recipiente rectangular que permite desplazarse de su
contenido muestra automáticamente barras de desplazamiento cuando algunos de sus
controles hijos no son completamente visibles. Expander. Se trata de un contenedor que puede
reducir el tamaño para ocultar su contenido o ampliar para mostrarlos. Panel lateral. Es un
recipiente que se puede ocultar o cambiar de tamaño. Este recipiente debe ser puesto a un lado
de su padre. Herramienta panel. Se trata de un contenedor caja de herramientas con múltiples
barra de herramientas vertical desplazable Asistente paneles. Se trata de un recipiente de
múltiples que proporciona una funcionalidad de tipo asistente.
Controladores personalizados
Hay otros controles que no están incluidos en la caja de herramientas Gambas, pero se pueden
crear fácilmente usando una combinación de controles: En realidad, muchos de los
componentes GUI ya descritos son de hecho la combinación de otros controles.
• Barra de estado. Es un control que normalmente se encuentra en la parte inferior de las
ventanas para mostrar información sobre el estado actual de la ventana o de la
aplicación. Y al ver este control sobre los navegadores web y suites de software de
oficina. Usted puede construir este control utilizando contenedores de panel, etiquetas
de texto, barras de progreso y otros controles de salida.
• Barra de información. Es un control más utilizado en el navegador web Firefox y
Internet Explorer para mostrar información no crítica para el usuario. Desde barra de
información le permite al usuario leer información adicional en su tiempo libre sin
interrumpir cualquier actividad del usuario, se está adoptando cada vez más en lugar
de los cuadros de diálogo Información que usted sabe también como cajas de
información del mensaje aquí en Gambas. Mediante el uso de contenedores de
paneles, cuadros de imagen, etiquetas de texto y botones.
• Apple globo de ayuda. Este control muestra el texto de ayuda en los "globos", como
los usados en los libros de historietas para mostrar los cuadros de diálogo y funciona
muy parecido a los tooltips, pero orientadas a proporcionar ayuda al usuario.
• Microsoft Office 2007 Ribbon. Cintas forman parte de la interfaz de usuario ha
introducido recientemente fluidez de Microsoft y reemplaza los menús, barras de
herramientas y paneles de tareas con otras fichas contextuales y galerías. Suena más
elegante y complicado de lo que realmente es, en realidad se trata de una barra de
menú de un grupo de fichas que contiene cajas de herramientas y desplegables cajas
de herramientas denominadas galerías.
• Barras de herramientas con pestañas. Se trata básicamente de la misma cinta, pero no
están destinadas a sustituir la barra de menús ni barras de herramientas como las
cuatro reivindicaciones de color logotipo de la empresa.
Obviamente, tú PUEDES CREAR Tus Propios Controles basados en Otros ya existentes.
Conclusiones
• La definición conceptual del interfaz nos ha posibilitado hacernos conscientes de los
procesos interactivos en los que se encuentra la interfaz como artefacto, y por lo tanto
nos ha mostrado sus posibilidades y limitaciones.
• Quizás el hallazgo personal más importante durante este recorrido, haya sido el haber
encontrado la idea de la necesidad de analizar y definir una supuesta gramática
interactiva.
• La existencia del artefacto interactivo, la configuración de modelos de interacción y el
uso de gramáticas visuales, conlleva el uso de un conjunto de recursos por parte de
quien usa el artefacto, que además de ser dominados, deben ser comprendidos desde la
perspectiva del sujeto que los diseña.
• Desde esta perspectiva es válido y necesario un acercamiento a la gramática
interactiva valiéndonos de las herramientas conceptuales que tenemos a mano desde
otras disciplinas, he ahí el papel que puedan desempeñar ramas como la ergonomía
cognitiva en la actualidad.
Recomendaciones
Puntos, cómo los históricos y evolutivos, deben ser abordados de manera más
investigativa, recordemos que "conocer el pasado nos proyecta al futuro".
Otras puntualizaciones de clasificación obligarán a que investiguemos y propongamos,
nuevas distribuciones clasificatorias, útiles a futuro en una carrera de desarrollo de
software.
El conocimiento de estos puntos clave, nos permitirán enfocarnos mejor al estudio de
la materia.
Las interfaces de usuarios, como vínculo de inmersión del hombre en torno de trabajo
tecnológica actual, realzan su importancia en el desarrollo de nuevos productos, más
eficaces, eficientes e interactivos, que es lo que el mercado demanda.
Bibliografía
INTERFAZ GRÁFICA DE USUARIO
• AAVV, Alberto Knapp Bjerén (coordinador), La Experiencia del usuario, Anaya
Multimedia, 2002.
• AAVV, Cultura Digital y Tendencias en la producción Visual, Facultad de Bellas
Arte, Universidad de La Laguna, 2000.
• Apple computer: Macintosh Human Interface Guidelines, Addison-Wesley Publishing
Company, 1992.
• Marcos Mora Mora, Mari Carmen, “Pautas para el diseño y la evaluación de interfaces
de usuario”. En: Rovira, Cristòfol; Codina, Lluís; Marcos, Mari Carmen; Palma, María
del Valle. Información y documentación digital. Barcelona: IULA; Documenta
Universitaria, 2004. En http://www.mcmarcos.com/pdf/2004_pautas-iula.pdf
• Royo, Javier, Diseño Digital, Ediciones Paidós Ibérica, 2004.
• Shneiderman, Ben, Designing The user interface, Strategies for effective Human-
computer interaction, Addison-wesley,1998
• Sosa, Armando, Semiótica y retórica visual aplicada al diseño de interfases: La
metáfora como elemento de navegación. Resumen de Tesis:(http://nolimit-
studio.com/tesis/)
• Wichary, Marcin “One thousand square pixels on canvas”, 2003, Fuente on-line:
http://www.guidebookgallery.org/articles/onethousandsquarepixelsofcanvas
• Reimer, Jeremy, “A history of the GUI” en Ars Technica, 2005, fuente digital:
http://arstechnica.com/articles/paedia/gui.ars
• Weiss, Scott, Handheld usability, John Wiley & Sons, Ltd, England, 2002