PERTENECE A: HENRY PUNGAA ASUGNATURA: Lenguaje de programacin Tema: Interfaz grafica de usuario CICLO: CUARTO CICLO AO LECTIVO 2012

2013

DEFINICIN ETIMOLGICA Y APROXIMACIN CONCEPTUAL El concepto de interfaz es un concepto amplio que ha sido definido, segn el mbito de conocimientos, desde varios puntos de vista: desde la biologa (interface), ha sido definida como la capa de un organismo que separa su interior del exterior, desde la electrnica y las telecomunicaciones, se ha definido como puerto a travs del que se envan o reciben seales desde un sistema o subsistemas hacia otros. En qumica interfaz es la superficie entre dos fases distintas en una mezcla heterognea Si vamos a la etimologa de la palabra interfaz encontramos una palabra compuesta, por dos vocablos: Inter proviene del latn inter, y significa, entre o en medio, y Faz proviene del latn faces, y significa superficie, vista o lado de una cosa. Por lo tanto una traduccin literal del concepto de interfaz atendiendo a su etimologa, podra ser superficie, vista, o lado mediador. En el contexto de la interaccin persona-ordenador, hablamos de interfaz de usuario, para referirnos de forma genrica al espacio que media la relacin de un sujeto y un ordenador o sistema interactivo. El interfaz de usuario, es esa ventana mgica de un sistema informtico, que posibilita a una persona interactuar con l. Cuando hablamos de interfaz grfica de usuario, el concepto es an ms especfico en cuanto que interfaz grfico de usuario al contrario que el concepto de interfaz tiene una localizacin determinada y definida: Si el interfaz etimolgicamente supone la cara o superficie mediadora, el interfaz grfico de usuario, supone un tipo especfico de interfaz que usa metforas visuales y signos grficos como paradigma interactivo entre la persona y el ordenador. El concepto de interfaz grfico, nos da pistas sobre el modelo de interaccin y la tipologa de signos que contiene esta superficie mediadora.

Una definicin de interfaz grfica de usuario La Wikipedia americana define la interfaz grfica de usuario como un mtodo de interaccin con un ordenador a travs del paradigma de manipulacin directa de imgenes grficas, controles y texto Esta definicin de interfaz grfica introduce algunos conceptos nuevos en este trabajo, como son los conceptos de manipulacin directa, iconos, controles (widgets) y texto (tipografa) que sern debidamente comentadnos y analizados a lo largo de este trabajo. COMPONENTES DE LA INTERFAS GRAFICA DE USUARIO Componentes principales: Paneles: son dos, uno arriba y otro abajo. Se utilizan para iniciar aplicaciones de una forma rpida y sencilla. Tambin ofrecen informacin importante para el usuario. El escritorio: espacio entre los dos paneles, donde se pueden colocar los documentos y elementos que utilice ms frecuentemente. Similar a Windows.

En el panel superior encontramos Men de aplicaciones: con los principales programas de Gnome, agrupados segn su funcionalidad. Men de acciones: algunas de las labores ms frecuentes. Barra de botones: all podr colocar las aplicaciones que utilice ms frecuentemente para poder correrlas con un solo click. Reloj: con la fecha, hora y un pequeo calendario. conos de estado: algunas aplicaciones colocan sus conos all para indicar que estn en ejecucin Selector de ventanas: un pequeo cono a la derecha del reloj que permite seleccionar alguna de las aplicaciones en ejecucin. En el panel inferior se encuentran

 La lista de tareas: al igual que en Windows permite conocer qu aplicaciones se estn ejecutando. Botn minimizar todo: esconde temporalmente las aplicaciones en ejecucin para dar acceso al escritorio. Espacios de trabajo: si tiene muchas aplicaciones abiertas al mismo tiempo, puede distribuirlas en varios escritorios. conos Los conos son representaciones grficas de programas, archivos, documentos o lugares de su computador. Buscan ser fciles de recordar. Usted podr asociarlos con cosas familiares de su da a da. Los conos pueden ser ligeramente. CONTROLADORES 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. El 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 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, 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. Botn. 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. Casilla de verificacin. 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. Botn de Radio. 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. Los datos de 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 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 conjunto con el cursor del ratn, 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 Obtencin de los controles en un formulario es la parte fcil. La organizacin 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 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. CONTROLADORES 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. 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 informacin. 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. 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 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. Obviamente, t PUEDES CREAR Tus Propios Controles basados en Otros ya existentes. CONCLUSIONES La historia del interfaz nos confirma ante toda evidencia que nos encontramos ante un artefacto joven de complejidad an misteriosa. Con 30 aos a sus espaldas, no ha dado casi tiempo a asumir sus cambios, y observar los detalles que han ido surgiendo en su trayectoria. Aun as hemos podido observar como el interfaz ha ido evolucionando desde un espacio bidimensional, sin personalidad propia, a un espacio vivo en sugerencias y posibilidades afectivas e intelectuales.

 Los procesos de cutinizacin y la inteligencia artificial, se han sumado a la interfaz y esto convierte a la propia interfaz en un objeto autnomo, por otro lado inscrito en ms y ms objetos de nuestro entorno. RECOMENDACIONES El conocimiento de estos puntos clave, nos permitirn enfocarnos mejor al estudio de la materia. Las Interfaces de usuario, como vnculo de inmersin del hombre en el entorno de trabajo tecnolgico actual, realzan su importancia en el desarrollo de nuevos productos, ms eficaces, eficientes e interactivos, que es lo que el mercado demanda. Puntos, cmo los histricos y evolutivos, deben ser abordados de manera ms investigativa, recordemos que "conocer el pasado nos proyecta al futuro". Otras puntualizaciones de clasificacin obligarn a que investiguemos y propongamos, nuevas distribuciones clasificatorias, tiles a futuro en una carrera de desarrollo de software. BIBLIOGRAFA o Cerezo, J.M., Diseadores en la nebulosa. El diseo grfico en la Era Digital. Madrid, Biblioteca Nueva, 1997. o Cotton, B. y R. Oliver, 1992. Understanding hypermedia. From multimedia to virtual reality. Phaidon Press Ltd., London,1993. o Manzini, Ezio, Artefactos: Hacia una nueva ecologa del ambiente artificial, Celeste Ediciones, S.A., 199x o Pelta, Raquel, Disear hoy Temas contemporneos de diseo grfico, Ediciones Paids Ibrica, Barcelona, 2004. o Roland Barthes, 1971. Elementos de Semiologa. Alberto Corazn Editor. Madrid.

o Noam Chomsky. 1990. Estructuras Sintcticas. Mxico. Siglo Veintiuno Editores, S.A. de CV. 10 edicin en Espaol. o Scolari, Carlos, Cliquear: Hacia una teora semitica de los dispositivos interactivos.