interfaz grafica de usuario

10
PERTENECE A: JOSE ARROBA ASUGNATURA: LENGUAJE DE PROGRAMACION II TEMA: INTERFAZ GRAFICA DE USUARIO CICLO: CUARTO CICLO AÑO LECTIVO 2012 – 2013

Upload: jose-miguel-arroba-castro

Post on 05-Aug-2015

14 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Interfaz Grafica de Usuario

PERTENECE A:

JOSE ARROBA

ASUGNATURA:

LENGUAJE DE PROGRAMACION II

TEMA:

INTERFAZ GRAFICA DE USUARIO

CICLO:

CUARTO CICLO

AÑO LECTIVO

2012 – 2013

Page 2: Interfaz Grafica de Usuario

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

Page 3: Interfaz Grafica de Usuario

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

Page 4: Interfaz Grafica de Usuario

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.

Page 5: Interfaz Grafica de Usuario

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

Page 6: Interfaz Grafica de Usuario

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

Page 7: Interfaz Grafica de Usuario

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

Page 8: Interfaz Grafica de Usuario

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.

Page 9: Interfaz Grafica de Usuario

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

Page 10: Interfaz Grafica de Usuario

• 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