Repblica Bolivariana de Venezuela

Facultad de Ciencias de la Informacin

Escuela: Computacin
Ctedra: Interaccin Humano Computador

INTERFAZ GRFICA DE USUARIO

(GUI).

Profesor
Hugo Marcano Daz

Integrantes
Annicec Pino Flores
Rafael Otamendi Contreras
Victor Oliveira Figueira

Caracas, 19 de Febrero de 2013

1

TABLA DE CONTENIDO
Introduccin ............................................................................................................. 4
Interfaz Grfica de Usuario (GUI). ........................................................................... 5
Generaciones de la Interfaz Grfica de Usuario. ................................................. 5
Alto ................................................................................................................... 5
Star ................................................................................................................... 5
System 1 .......................................................................................................... 5
GS/OS .............................................................................................................. 5
System 7 .......................................................................................................... 6
NextStep .......................................................................................................... 6
X-Window ........................................................................................................ 6
Motif, TWM....................................................................................................... 6
OpenWindows ................................................................................................. 6
KDE .................................................................................................................. 6
Windows 1.0 .................................................................................................... 6
Windows 3.1 .................................................................................................... 6
OS/2.................................................................................................................. 6
Windows 95 ..................................................................................................... 7
OS/2 Warp 4..................................................................................................... 7
Mac OS System 8 ............................................................................................ 7
Windows 98 ..................................................................................................... 7
KDE 1.0 ............................................................................................................ 7
BeOs 4.5 .......................................................................................................... 7
Mac OS X ......................................................................................................... 7
Windows XP .................................................................................................... 8
KDE 3 ............................................................................................................... 8
Gnome2 ........................................................................................................... 8
Windows Vista ................................................................................................ 8
Mac OS X Leopard .......................................................................................... 8
KDE4 ................................................................................................................ 8
Windows 7 ....................................................................................................... 8
Unity ................................................................................................................. 9
Gnome3 ........................................................................................................... 9
2

MATE................................................................................................................ 9
Windows 8 ....................................................................................................... 9
Elementos de la Interfaz Grfica de Usuario. ....................................................... 9
Barra de desplazamiento ............................................................................... 9
Barra de Estado ............................................................................................ 10
Barra de herramientas .................................................................................. 10
Barra de Progreso ........................................................................................ 10
Barra de Titulo .............................................................................................. 10
Botones ......................................................................................................... 10
Botn de Opcin ........................................................................................... 10
Casillero de Verificacin .............................................................................. 10
Cuadro de Dialogo ........................................................................................ 10
Cuadro de Texto ........................................................................................... 11
Icono .............................................................................................................. 11
Lista ............................................................................................................... 11
Lista Despegable .......................................................................................... 11
Men .............................................................................................................. 11
Men Contextual ........................................................................................... 11
Men Despegable ......................................................................................... 11
Panel Lateral ................................................................................................. 11
Pestaa .......................................................................................................... 11
Slider .............................................................................................................. 12
Spinner .......................................................................................................... 12
Tooltip ............................................................................................................ 12
Ventana .......................................................................................................... 12
Ideologa de uso y funcin de la Interfaz Grfica de Usuario. ............................ 12
ARCHIVO MEN ............................................................................................ 12
EDITAR MEN ............................................................................................... 12
ANLISIS DE MEN...................................................................................... 13
RESULTADOS MEN.................................................................................... 13
VENTANAS MEN......................................................................................... 13
Conclusin............................................................................................................. 14
Fuentes Referenciales .......................................................................................... 15
3

INTRODUCCIN

La historia de la computacin se ha visto drsticamente modificada desde la

creacin de las interfaces graficas de usuarios. A partir de los aos 40, comenz la
dinmica entre las diferentes versiones de lo que conocemos hoy como interface
grfica de usuarios, es invaluable el impacto que ha tenido para nuestras vidas
este aporte, la computacin no sera lo que hoy conocemos sin esta herramienta
tan imprescindible, la facilidad que nos ha aportado a lo largo de la historia.

Desde el punto de vista antropolgico, las personas pudieron acceder a las

computadoras sin necesidad de tener conocimientos tcnicos avanzados de
computacin, esto los libero de la mayora del procesamiento mental.

As pues, vemos como este aporte tuvo un impacto fundamental en el desarrollo y

evolucin de la computacin, ahora entraremos en ms detalle sobre los
fundamentos de las interfaces graficas de usuarios.

INTERFAZ GRFICA DE USUARIO (GUI).

La Interfaz Grfica de Usuario es el software que permite la interaccin entre el

usuario y el computador utilizando diferentes imgenes y objetos grficos para
representar acciones e informaciones.

GENERACIONES DE LA INTERFAZ GRFICA DE USUARIO.

La Generacin de la Interfaz Grfica de Usuario no se presenta hasta despus del

principio de los 70, donde hasta el momento se los usuarios solo disponan de la
mnima interfaz, interactuando con el sistema operativo por medio de comandos
muy cercanos a la maquina

ALTO desarrollado en el Xerox PARC en 1973, fue el primer ordenador que

aada el ratn y un sistema operativo con una interfaz grfica de usuario. Sin
embarco como su precio era exorbitante solo fue adquirido por universidades y
centros de investigacin.

STAR desarrollado en el Xerox PARC en 1981, fue creado con el objetivo de

presentarles a los usuarios un ordenador personal para el mbito de la informtica.
Se implementa la figura de escritorio, el uso de iconos y ventanas solapadas.

SYSTEM 1 desarrollado en la Apple en 1984, fue creado tomando la idea de

Xerox PARC disean el sistema operativo del nuevo ordenador el Macintosh,
acercando con este la informtica al usuario domstico.

GS/OS desarrollado en la Apple en 1988, fue creado tras la evolucin del

System 1, incorporando el soporte de color (200x320x16 colores) y sonido, con un
sencillo uso.

SYSTEM 7 desarrollado en 1991, fue un gran salto frente a los sistemas

anteriores, al incluir soporte de red de forma transparente, direccionamiento de
memoria de 32 bits y memoria virtual, as como tecnologas como Drag-and-drop,
Quicktime (multimedia) y Truetype (fuentes mejoradas).

NEXTSTEP desarrollado por las compaa Next en 1988, estaban llenos de

innovaciones y buen diseo.

X-WINDOW desarrollado en el MIT en 1984, apareciendo en versin comercial en

1986. Fue simplemente un sistema de ventanas con capacidad de funcionar a
travs de la red. Para trabajar con X-Window era necesario un gestor de ventanas,
que era el que proporcionaba el look-and-feel definitivo.

MOTIF, TWM Gestores de ventanas para X.

OPENWINDOWS gestor de ventanas utilizado por SUN de caractersticas

similares a Motif.

KDE gestor de ventanas desarrollado para Linux

WINDOWS 1.0 desarrollado en 1985, fue un intento de Microsoft para implantar la

filosofa de los GUIs de Apple en la plataforma PC.

WINDOWS 3.1 desarrollado en 1992, el primer GUI de Microsoft con verdadero

xito, Responsable del gran salto del PC al modo grfico.

OS/2 desarrollado en 1992, el entorno operativo de IBM, con la intencin de

competir con Windows en el mercado de los PCs. OS/2 no era un simple entorno
grfico de ventanas, sin un sistema operativo completo de 32 bits, no basado en
MS-DOS.

WINDOWS 95 desarrollado en 1995, Visual y funcionalmente represent un gran

salto desde Windows 3.1 aunque internamente segua siendo un sistema
operativo de 16 bits

OS/2 WARP 4 desarrollado en 1996 por IBM, este cambio le dio un renovado
aspecto visual al rea de trabajo. Los iconos fueron ubicados en el escritorio,
donde archivos personalizados y carpetas tambin podan ser creados. Tena un
lugar donde enviar los archivos eliminados como la papelera de Windows y MAC
OS, sin embargo esta no almacenaba copias para recuperar los archivos.

MAC OS SYSTEM 8 desarrollado en 1997, ofreci al usuario 256 iconos a color

por defecto en esta versin de la GUI. Mac OS 8 fue uno de los primeros sistemas
que adoptaron iconos isomtricos, tambin llamados pseudo-3D

WINDOWS 98 desarrollado en 1998, los mismos iconos de la versin 95., pero la

GUI poda usar ms de 256 colores para renderizacin. El Explorer cambi por
completo y el cansino Active Desktop aparece por primera vez.

KDE 1.0 desarrollado en 1998, un entorno de Escritorio contemporneo para

estaciones de trabajo Unix. KDE llena la necesidad de un escritorio amigable para
estaciones de trabajo Unix, similar a los escritorios de MacOSX o Windows, este
sistema es, personalizable como pocos, lo cual le ha hecho ganar bastante
adeptos con conocimiento avanzado en sus siguientes versiones.

BEOS 4.5 en 1999 fue desarrollada bajo los principios de diseo claro y limpio.

MAC OS X en 2001 Apple creo nuevos iconos de 128128 Anti-aliasing y semitransparentes. Siendo de difcil aceptacin

WINDOWS XP en 2001 Microsoft creo la opcin de cambiar de Skin a la GUI, los

usuarios podan manipular a gusto el aspecto de esta. Iconos de 4848 por
defecto renderizados en millones de colores.

KDE 3 desarrollado en 2002 con grficos mejorados e iconos, redefinieron la

experiencia del usuario promedio.

GNOME2: Desarrollado por Gnome, fue liberado al pblico en junio de 2002. Se

manejaba de manera similar a otros entornos de escritorio, utilizando iconos,
ventanas, objetos virtuales, etc. Este ha sido uno de los escritorios ms populares
en la historia de Linux.

WINDOWS VISTA desarrollado por Microsoft en 2007, crea animacin en 3D,

transparencia con Aero, y una barra lateral con Widgets.

MAC OS X LEOPARD desarrollado en 2007, tiene ahora un toque ms 3D, con un

dock con iconos interactivos y animados.

KDE4: Es la serie actual de desarrollo en el entorno KDE, liberado el 11 de enero

de 2008. Utiliza un entorno de escritorio llamado Plasma que provee un panel, un
men y otras maneras intuitivas para interactuar con el escritorio y las
aplicaciones. Su manejador de ventanas es KWin, que estuvo mucho tiempo en
desarrollo por su capacidad de utilizar la aceleracin de hardware que proveen las
tarjetas grficas. Actualmente se encuentra en la versin 4.10, siguiendo la lnea
de desarrollo de KDE4.

WINDOWS 7 desarrollado en 2009 con grandes mejoras se presentan la

visualizacin de las ventanas eliminacin de la barra lateral aparente en WINDIWS
VISTA y eliminacin de algunos botones.

UNITY: Desarrollado por el grupo de Ubuntu (Canonical), fue liberado al pblico en

junio de 2010. Est basado en GNOME. Recibido con mucho recelo por parte de
los usuarios de Linux, ha ganado su parte de admiradores. Utiliza muchos
componentes del escritorio Gnome3 pero sin las fallas encontradas en el mismo.
Inicialmente era exclusivo para el Sistema Operativo Ubuntu, pero hoy en da es
posible utilizarlo en otras distribuciones basadas en el mismo, ejemplo: Linux Mint
(con algunas modificaciones), etc.

GNOME3: Desarrollado por Gnome, fue liberado al pblico en abril de 2011. Es la

lnea de desarrollo actual del entorno Gnome. Se recibi con muchas expectativas
que no fueron cumplidas, se manejaba de manera diferente a Gnome2 y aunque
utilizaba muchas nuevas funciones y permita aceleracin de hardware, etc. El
pblico no la recibi bien por muchos errores y falta de compatibilidad con
paquetes antiguos. Se versin actual es la 3.6, se han mejorado muchos factores
dentro del escritorio pero an hay cierto recelo de parte de la comunidad para
volver a este manejador de escritorio.

MATE: Mate es una modificacin al escritorio de Gnome2, permitiendo la

continuacin de su lnea de desarrollo sin entrar a Gnome3. Es bastante utilizado
por muchas distribuciones de Linux y provee la misma flexibilidad de Gnome2 en
muchos casos y a veces ms an. Fue liberado en Agosto de 2011.

WINDOWS 8 desarrollado en 2012 se presenta con muchos cambios ahora la

aplicacin ocupa toda la pantalla,

no hay manera visible para cerrar esta

aplicacin, no hay forma visible para cancelar o volver al "inicio" de la pgina,

entre muchos cambios que estos realizaron.

ELEMENTOS DE LA INTERFAZ GRFICA DE USUARIO.

BARRA DE DESPLAZAMIENTO es un elemento de las interfaces grficas que

constan de una barra horizontal o vertical con dos extremos con flechas que
9

apuntan en sentidos contrarios y que suelen ubicarse en los extremos de una

ventana o recuadro. Las barras de desplazamiento permiten desplazar el
contenido del cuadro hacia un lado u otro. Las barras suelen aparecer o activarse
cuando el recuadro no es lo suficientemente grande como para visualizar todo su
contenido.

BARRA DE ESTADO es el elemento que se encuentra en las interfaces grficas,

que permite mostrar informacin acerca del estado actual de la ventana.
Generalmente las barras de estado se ubican en la parte inferior de las ventanas.

BARRA DE HERRAMIENTAS es la agrupacin de conos con los cuales es

posible acceder a determinadas herramientas o funciones en una aplicacin.

BARRA DE PROGRESO es el elemento en las interfaces grficas que permiten

mostrar de forma grfica el estado de avance de una tarea o proceso.

BARRA DE TITULO es el elemento de las interfaces grficas que se encuentra en

la parte ms superior de una ventana, donde aparece un ttulo que se corresponde
con el contenido de la misma.

BOTONES son tipos de widget que permiten al usuario comenzar un evento,

como buscar, aceptar una tarea, interactuar con un cuadro de dilogo, etc.

BOTN DE OPCIN es el elemento en las interfaces grficas que permite elegir

slo una opcin de un conjunto predefinido de opciones.

CASILLERO DE VERIFICACIN es la interfaz grfica que permite al usuario

marcar mltiples selecciones de un nmero de opciones.

CUADRO DE DIALOGO es una ventana especial para mostrar informacin al

usuario o para obtener de ste una respuesta.
10

CUADRO DE TEXTO es un elemento tpico en las interfaces grficas en donde es

posible insertar texto.

ICONO son aquellas imgenes que se utilizan para identificar archivos, accesos
directos, programas y herramientas del sistema operativo.
LISTA es una relacin de datos, ordenados o clasificados segn su tipo.

LISTA DESPEGABLE es el tipo de elemento GUI que permite al usuario escribir

sobre un campo de texto mientras se muestra una lista de opciones.

MEN es una herramienta grfica en la interfaz de pginas web y aplicaciones

que consiste de una lista de opciones que puede desplegarse para mostrar ms
opciones o funciones.

MEN CONTEXTUAL en aplicaciones o sistemas operativos, tipo de men que se

adaptar al contexto desde donde se accede. El men contextual se accedo con el
clic derecho sobre algn elemento en la pantalla.

MEN DESPEGABLE es un elemento GUI que permite a un usuario seleccionar

de una lista desplegable una opcin. Se distingue de una simple lista en el hecho
de que el usuario debe presionar sobre el men para que se muestren las
opciones disponibles.

PANEL LATERAL es un elemento usado en las interfaces grficas que permiten

mostrar diferentes formas de informacin en un lado de una aplicacin o el
escritorio.

PESTAA es un elemento que se encuentra en las interfaces grficas, que

permite cambiar entre distintos documentos o secciones de forma rpida.

11

SLIDER es un elemento de las interfaces grficas que permiten seleccionar un

valor moviendo un indicador o, en algunos casos, el usuario puede hacer clic
sobre algn punto del slider para cambiar hacia ese valor.

SPINNER es un elemento de las interfaces grficas que permite al usuario ajustar

un valor dentro de un cuadro de texto adjunto a dos flechas que apuntan en
direcciones opuestas.

TOOLTIP es un elemento de las interfaces grficas que se emplea junto con el

cursor del mouse.

VENTANA es la parte delimitada de la pantalla en un sistema operativo grfico

que suele ser rectangular y que contiene elementos afines entre s en ella.

IDEOLOGA DE USO Y FUNCIN DE LA INTERFAZ GRFICA DE

USUARIO.

El uso de la interfaz grfica de usuario deriva de poder proporcionar un entorno

visual y sencillo para permitir la comunicacin con el sistema operativo de una
mquina o computador por medio del usuario, a travs del uso y la representacin
del lenguaje visual, una interaccin amigable con un sistema informtico.

En la interfaz grfica de usuario encontramos las siguientes funciones

ARCHIVO MEN contiene funciones para manipular los modelos y las

condiciones iniciales. Parte de la importacin y exportacin por encima se puede
acceder haciendo clic en el derecho botn del ratn en el proyecto del rbol o en
las ventanas correspondientes.

EDITAR MEN contiene funciones para la edicin del modelo, en particular, las
variables que componen el modelo. La mayor parte de las funciones antes
12

mencionadas tambin se puede acceder haciendo clic en el derecho botn del

ratn en el Proyecto de ventana. La ventana de variables para una variable
contiene un editor de ecuaciones para definir la ecuacin de estado. Las
siguientes combinaciones de teclas se pueden utilizar para editar la informacin de
la ecuacin de estado de campo:
ANLISIS DE MEN contiene funciones para analizar el modelo definido. Las
funciones son tambin accesibles haciendo clic en el derecho botn del ratn en el
proyecto rbol.

RESULTADOS MEN contiene funciones para ver y analizar los resultados de la

simulacin. Las funciones son tambin accesibles haciendo clic en el derecho
botn del ratn en el grfico Transicin ventana. Estados en el grfico de
Transicin ventana se puede seleccionar por medio del ratn mientras presiona la
Ctrl key. La desactivacin se logra haciendo clic y pulsando la tecla Ctrl key.
Algunos accesos directos permiten navegar fcilmente dentro del grfico:
manteniendo las teclas Ctrl y Alt teclas pulsadas, puede arrastrar el grfico con el
ratn, cuando el Ctrl se pulsa la tecla, la rueda del ratn permite acercar y alejar.

VENTANAS MEN muestra las ventanas activas y te permite hacer algunos de

ellos invisibles.

13

CONCLUSIN

Al concluir este trabajo, hemos aprendido sobre las diferentes generaciones por
las que ha pasado las GUI hasta lo que tenemos hoy en dia. Adicionalmente vimos
las estructuras que componen una interfaz grfica de usuario, y como deben ser
utilizadas para aprovechar su uso al mximo.

Luego de la elaboracin de esta investigacin, hemos comprobado que el aporte

ha sido inmenso e invaluable. Sera interesante cual ser la prxima evaluacin
que tendrn las GUI con las nuevas tecnologas de realidad virtual y realidad
aumentada.

14

FUENTES REFERENCIALES

Revisado

el

(15

de

Febrero

de

2013).

Disponible

en:

http://isopixel.net/archivo/2009/03/historia-del-diseno-en-la-interfaz-de-lossistemas-operativos-1981-2009/

Revisado

el

(16

de

Febrero

de

2013).

Disponible

en:

http://wwwdi.ujaen.es/asignaturas/progav/progav-tema3.pdf

Revisado

el

(15

de

Febrero

de

2013).

Disponible

en:

http://es.wikipedia.org/wiki/Interfaz_gr%C3%A1fica_de_usuario#Introducci.
C3.B3n

Elemento tipicos de las interfaces graficas de usuario Ivan Montero Abril 11,
2011.

Revisado

el

(18

de

Febrero

de

2013).

Disponible

en:

http://www.slideshare.net/ivancmontero/elemento-tipicos-de-las-interfacesgraficas-de-usuario

2,8. Funciones de la interfaz grfica de usuario 03 de agosto 2009 Revisado

el

(19

de

Febrero

de

2013).

Disponible

en:

http://www.grenoble.prabi.fr/gna/user/ch02s08.html

15