UNIVERSIDAD ESTATAL DE BOLVAR

CIENCIAS DE LA EDUCACIN
INFORMTICA EDUCATIVA
LENGUAJE DE PROGRAMACIN II

Nombre: Mariela Gaibor Docente: Ing Henry Albn Ciclo: Cuarto Informtica Educativa Tema: Interfaz Grfica de Usuario Elementos de la GUI

AO LECTIVO- 2012-2013

INTERFAZ GRAFICA DE USUARIO (GUI)

La Interfaz Grafica de Usuario del ingls Graphical User Interface proviene de inter= medio, entre y faz= superficie es decir es el lado mediador para la comunicacin con el computador. La GUI se cre por un proyecto de investigacin y negocio naciendo as en 1973 con Xerox Alto el primer ordenador personal que utiliz la metfora de escritorio y de interfaz grfica de usuario. La Interfaz Grfica de Usuario es un mtodo de interaccin entre el usuario y el ordenador, el cual utiliza un conjunto de imgenes y objetos grficos proporcionando un entorno visual agradable para comunicarse con el Sistema Operativo de un computador. Adems es un artefacto tecnolgico de un sistema interactivo que posibilita la representacin de un lenguaje visual para que pueda ser comprendido por el usuario externo. La interfaz es la parte fsica del sistema informtico. Aqu se da un proceso del sujeto el cual consiste en percibir, decodificar, memorizar, navegar a travs de su entorno.

Anteriormente la Interfaz Grfica de Usuario usaba caracteres operacionales y especiales para la representacin de informacin poco a poco se fue desarrollando y evolucionando acorde al paso del tiempo teniendo muchas mejoras en diferentes aspectos como puede ser de: diseo, tamao, ubicacin, visualizacin, acceso,

manipulacin, usos, control, orden y esttica , llegando hasta lo que tenemos disponible en la actualidad es decir una visin atractiva y agradable para trabajar con entusiasmo en las tareas en la cuales intervenga el Sistema Informtico. ejemplo de este tema puede ser los escritorios del S.O, ventanas e conos. La Interfaz Grfica de Usuario tiene criterios personalizados como son los componentes tanto de entrada como de salida, contenedores y controles personalizados los cules interactan para establecer una comunicacin con el usuario. Como

Elementos de la GUI
Componentes comunes de la GUI

1. 2. 3. 4. 5. 6. 7. 8. 9.

Barra de Herramientas de acceso rpido. Barra de titulo Minimizar, restaurar y cerrar Barra de mens Barra de herramientas Columnas Filas Cursor Celda de columnas

10. Asistente para funciones 11. Botones de desplazamiento y Hoja de trabajo 12. Barra de desplazamiento horizontal 13. Zoom 14. Vista de hojas

El componente ms comn, pero al mismo tiempo el mas ignorado, es el apuntador o cursor. Por definicin el cursor es la imagen grfica sobre la pantalla que indica la localizacin del dispositivo apuntador, y puede ser usado para seleccionar y arrastrar objetos o indicar comandos sobre la pantalla. El apuntador tpico es una flecha inclinada, pero puede variar segn los diferentes estatus, operaciones, programas o sistemas operativos. La mayora 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 botn izquierdo es llamado solamente click; el click que se hace usando el botn derecho es llamado click derecho.

La accin de arrastrar es realizada al hacer click en cierta rea de un objeto (ya sea un icono, una ventana, etc) y manteniendo el botn presionado, mover el cursor a otra rea deseada.

La ventana es el rea sobre la pantalla sobre la que se muestra informacin, 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 fcil manipular una ventana: puede ser abierta o cerrada con un simple click; pude moverse a cualquier area mediante arrastrarla; puede cambiarse su tamao o minimizarse; puede colocarse enfrente o detrs 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; multiples ventanas pueden ser abiertas al mismo tiempo con diferentes aplicaciones, etc.

Los mens permiten al usuario ejecutar comandos seleccionndolos de una lista de opciones. Las opciones disponibles pueden seleccionarse usando el ratn o el teclado. El uso de mens acelera la curva de aprendizaje de un nuevo usuario para entender una aplicacin.

La barra de men es mostrada horizontalmente a lo largo de la parte superior de la ventana. El men desplegable es comnmente asociado con este tipo de mens. Cuando el usuario hace click sobre la opcin 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 menu 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 pequea imagen que representa objetos como archivos, programas, pginas web, o comandos. Estos son una manera rpida de ejecutar comandos, abrir documentos, ejecutar programas, etc. Los iconos estn diseados de tal manera que no se requiera mayor explicacin para entender que significa la pequea imagen.

Controles de entrada

Los controles o widgets son los elementos de la interfaz que el usuario interacta. 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. Del cursor del ratn. Usted tambin estn familiarizados con este concepto. Cuadro de texto y. Es una representacin similar a una caja en la que puede introducir texto o nmeros. Gambas ofrece el control de cuadro de valores que slo permite entradas numricas Fecha selector. Es una ventana que muestra un calendario y permite al usuario seleccionar una fecha. Texto rea de la caja. Es igual que el cuadro de texto, slo difiere en que el rea de la caja de texto permite mltiples lneas 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 nmero. Comnmente es bar aa vertical y hacia arriba y abajo teclas de direccin que el usuario utiliza para ajustar el valor en el cuadro de texto adyacente. El valor puede ser aumentado o disminuido dependiendo de qu botn se hace clic. Button. Se trata de una imagen con apariencia de botn se puede presionar haciendo clic sobre ella. Cuadro combinado o lista desplegable. Una lista de elementos entre los que elegir. La lista slo muestra los elementos cuando se hace clic en el indicador.

Cuadro de lista. Una lista de elementos entre los que seleccionar uno o ms. La diferencia con la lista desplegable es que el cuadro de lista utiliza varias lneas y permite selecciones mltiples. Vista de rbol. Este control presenta una visin jerrquica de la informacin. Cada elemento o nodo puede tener uno o ms sub-elementos que se pueden ampliar a contenidos mostrados Ms subtemas, y se derrumb para ocultarlos. Marque la casilla. Una caja que indica un estado de verdadero o falso a travs de una marca de verificacin. En Gambas encontrar tambin el botn de alternar. Radio botn. Se trata de un botn, similar a la casilla de verificacin, excepto que slo un elemento de un grupo puede ser seleccionado. Seleccin de un nuevo elemento en el conjunto de opciones tambin se anula la seleccin del botn seleccionado anteriormente. Datos rejilla o cuadrcula. Se trata de una cuadrcula de hoja de clculo que muestra o permite nmeros o texto que deber inscribirse en filas y columnas. En Gambas no es ms que un control de este tipo de datos orientada a: ver columna, vista de cuadrcula, vista de tabla, fuente de datos y la vista de datos.

Controles de salida

Propiedades, mtodos y eventos relacionados con la visibilidad del control: Todos los controles tienen la posibilidad de estar visibles o invisibles para el usuario. La propiedad Visible se encarga de establecer (o informarnos) este estado.

En cuanto a los mtodos, Show y Hide permiten mostrar u ocultar un control. Los formularios poseen dos eventos ( Show y Hide) que tienen lugar cuando se muestran u ocultan, adems de Open, que se dispara la primera vez que se abre.

En una lista separada estan los controles de salida que no tienen interactividad alguna:

Label o text label. Esta funcin despliega algn texto en el formulario. Tool tip. Funciona en conjuto con el cursor del raton, cuando el usuario posa el cursor sobre un elemento, sin hacer click sobre el, un pequeo recuadro aparece con informacin 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

Los controles que actan como contenedores dispones de algunas propiedades ms dentro de este grupo: ClientX, ClientY, ClientWidth y ClientHeight, que proporcionan informacin sobre el comienzo y las dimensiones del rea til que disponen para los controles "contenidos".

La organizacin de controles dentro de una interfaz intuitiva y atractiva es muy variada. Adems las posibilidades de interfaz son casi infinitas, as que no puedo decir cmo disear 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 diseo GUI) del formulario. Gambas ofrece una rica coleccin de contenedores, an 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 tamao arrastrando el lmite entre ellos.

Vsplit. Es un divisor vertical que distribuye sus hijos verticalmente, y que permite al usuario cambiar su tamao arrastrando el lmite 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 descripcin y el rea.

Tab tira. Se trata de un recipiente de mltiples con una pequea caja rectangular que contiene una etiqueta de texto o icono grfico asociado con un panel de vista. Cuando se activa el panel de visualizacin muestra los controles asociados a esa pestaa, grupos de pestaas permiten al usuario cambiar rpidamente entre los diferentes widgets. Desplcese vista. Se trata de un recipiente rectangular que permite desplazarse de su contenido muestra automticamente barras de desplazamiento cuando algunos de sus controles hijos no son completamente visibles.

Expander. Se trata de un contenedor que puede reducir el tamao para ocultar su contenido o ampliar para mostrarlos. Panel lateral. Es un recipiente que se puede ocultar o cambiar de tamao. Este recipiente debe ser puesto a un lado de su padre. Herramienta panel. Se trata de un contenedor caja de herramientas con mltiples barra de herramientas vertical desplazable Asistente paneles. Se trata de un recipiente de mltiples que proporciona una funcionalidad de tipo asistente.

Controles personalizados

Hay otros controles que no estn incluidos en la caja de herramientas Gambas, pero se pueden crear fcilmente usando una combinacin de controles: En realidad, muchos de los componentes GUI ya descritos son de hecho la combinacin de otros controles.

Barra de estado. Es un control que normalmente se encuentra en la parte inferior de las ventanas para mostrar informacin sobre el estado actual de la ventana o de la aplicacin. Usted puede 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.

Informacin del bar. Es un control ms utilizado en el navegador web Firefox y Internet Explorer para mostrar informacin no crtica para el usuario. Desde barra de informacin le permite al usuario leer informacin adicional en su tiempo libre sin

interrumpir cualquier actividad del usuario, se est adoptando cada vez ms en lugar de los cuadros de dilogo Informacin que usted sabe tambin como cajas de informacin del mensaje aqu en Gambas. Mediante el uso de contenedores de paneles, cuadros de imagen, etiquetas de texto y botones.

Manzana 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 dilogo 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 mens, barras de herramientas y paneles de tareas con otras fichas contextuales y galeras. Suena ms 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 galeras.

Barras de herramientas con pestaas. Se trata bsicamente de la misma cinta, pero no estn destinadas a sustituir la barra de mens ni barras de herramientas como las cuatro reivindicaciones de color logotipo de la empresa.

El Control Ribbon est representado por la clase RibbonControl. Se representa un control visual que se muestra en la parte superior del formulario, pero tambin se pueden visualizar en la parte inferior del formulario. El control tradicional cinta de opciones reemplaza las barras de herramientas y los mens con pginas que son visualmente representados por pginas con pestaas. Cada pgina est dividida en

grupos que contengan varios botones de comando. Los botones de comando estn representadas por enlaces de elemento de barra.

Conclusiones La Interfaz Grfica de usuario es un mtodo de interaccin entre el usuario y un ordenador a travs de imgenes, grficos, controles y textos manipulndolos en forma directa permitiendo una comunicacin con la computadora. La Interfaz Grfica de usuario est compuesta de elementos fundamentales para representar un lenguaje visual que sea entendible por el usuario. Poseemos una serie de criterios para un buen diseo en GUI y son : Control del usuario, Sensibilidad, Personalizacin, Direccin, Consistencia, Claridad, Esttica, Retroalimentacin y limitaciones. Estos criterios son de vital importancia y debemos tomar muy en cuenta para obtener una mejor interaccin con el sistema informtico. La Interfaz Grfica de usuario tiene como finalidad principal proporcionar al usuario un conjunto de aplicaciones visuales es decir guiar a los usuarios de manera

amigable e intuitiva a travs del sistema y permitirle interactuar con el mismo, de manera que le facilite y le permita en corto tiempo poder conocer y usar el sistema.

La Interfaz Grfica de usuario tiene dos dimensiones una de mediadora de los procesos de interaccin y la otra dimensin mercantil, sometida al mercado como objeto de consumo. Recomendaciones Se recomienda el desarrollo de nuevos productos, ms eficaces, eficientes e

interactivos, a fin de atender a todas las demandas del mercado. Incentivar el conocimiento a travs del diseo personal de nuevas aplicaciones, conos, ventanas para que permita una manipulacin mucho ms fcil para el usuario. Desarrollar herramientas visuales que contengan un entorno amigable y agradable para el usuario como puede ser referente al color, tamao, control, orden es decir que contenga una esttica adecuada para una mejor atencin visual. Implementar las opciones necesarias en las aplicaciones de manera que el usuario pueda disponer de una extensa gama de herramientas que le sirvan de ayuda y as pueda trabajar con normalidad y tranquilidad. Bibliografa Arnheim, R. (1998). El pensamiento Visual. Pidos, Barcelona, 1998. Bonsiepe, G. (1999), Del objeto a la interfase. Ediciones Infinito, argentina, 1999.

Norman, D. (2005). Diseo Emocional. Ediciones Paids Ibrica, Barcelona, 2005.

Royo, J. Diseo Digital. Ediciones Paids Ibrica, 2004.

Shneiderman, B. Designing The user interface, Strategies for effective Humancomputer interaction. Addison-wesley,1998

Scolari, C. (2004). Hacer Clic. Hacia una sociosemitica de las interacciones digitales. Editorial Gedisa, Barcelona 2004.

Shneiderman, B. (1998). Designing the user interface. Reading, MA: AddisonWesley. Perez Y, 01 Noviembre De 2011. Universidad Gran Mariscal De Ayacucho Yoleanny Garcaprofesora: C.I. 20.08.412

WEBGRAFA http://es.wikibooks.org/wiki/Gambas/Elementos_de_la_GUI http://hojadecalculomario.blogspot.com/2011/09/practica-4-ventana-principal-de.html http://www.nosolousabilidad.com/articulos/comunicabilidad.htm http://www.ucontrol.com.ar/forosmf/programacion-en-visual-basic/gambas-creandointerfaces-para-pic-desde-cero-en-ubuntulinux/ http://arukard.wordpress.com/category/programacion/page/2/ http://www.slideshare.net/Yoleanny/interfaz-grafica-11298501