PERTENECE A: JOSE ARROBA ASUGNATURA: LENGUAJE DE PROGRAMACION II TEMA: INTERFAZ GRAFICA DE USUARIO CICLO: CUARTO CICLO AO 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 especficas interactuar segn sus necesidades y usos. La informatizacin 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 tecnologa en vez del usuario cuando se desarrolla una aplicacin. Sin embargo, el diseo de software ha evolucionado para asegurar que las necesidades del usuario sean alcanzadas y que los sistemas sean ms intuitivos y amigables. Dos neologismos permiten medir la adecuacin de la aplicacin 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 evaluacin 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 travs de entrevistas a sus protagonistas, detectndose gran expectativa por el crecimiento del sector. Adems se desarroll y aplic una lista de chequeo para realizar evaluaciones heursticas de Usabilidad. Con los resultados obtenidos se gener una Gua para el diseo, seleccin y evaluacin de Interfaces Grficas de Usuarios (IGU). Componentes comunes de la GUI El componente mas 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 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 rea 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; mltiples 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 menu 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 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 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. 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 definicin 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. Quizs el hallazgo personal ms importante durante este recorrido, haya sido el haber encontrado la idea de la necesidad de analizar y definir una supuesta gramtica interactiva.

La existencia del artefacto interactivo, la configuracin de modelos de interaccin y el uso de gramticas visuales, conlleva el uso de un conjunto de recursos por parte de quien usa el artefacto, que adems de ser dominados, deben ser comprendidos desde la perspectiva del sujeto que los disea.

Desde esta perspectiva es vlido y necesario un acercamiento a la gramtica interactiva valindonos de las herramientas conceptuales que tenemos a mano desde otras disciplinas, he ah el papel que puedan desempear ramas como la ergonoma cognitiva en la actualidad.

Recomendaciones 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. El conocimiento de estos puntos clave, nos permitirn enfocarnos mejor al estudio de la materia. Las interfaces de usuarios, como vnculo de inmersin del hombre en torno de trabajo tecnolgica actual, realzan su importancia en el desarrollo de nuevos productos, ms eficaces, eficientes e interactivos, que es lo que el mercado demanda. Bibliografa INTERFAZ GRFICA DE USUARIO AAVV, Alberto Knapp Bjern (coordinador), La Experiencia del usuario, Anaya Multimedia, 2002. AAVV, Cultura Digital y Tendencias en la produccin 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 diseo y la evaluacin de interfaces de usuario. En: Rovira, Cristfol; Codina, Llus; Marcos, Mari Carmen; Palma, Mara del Valle. Informacin y documentacin digital. Barcelona: IULA; Documenta Universitaria, 2004. En http://www.mcmarcos.com/pdf/2004_pautas-iula.pdf

Royo, Javier, Diseo Digital, Ediciones Paids Ibrica, 2004. Shneiderman, Ben, Designing The user interface, Strategies for effective Humancomputer interaction, Addison-wesley,1998

Sosa, Armando, Semitica y retrica visual aplicada al diseo de interfases: La metfora como elemento de navegacin. Resumen de Tesis:(http://nolimitstudio.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