Introduccion al desarrollo web 7ºA1 2015

1. GUI
Héctor Rahampery Hernández Contreras
América Ontiveros Enciso
Carlos Gabriel Luna Montes
Aurora Arce Dueñas

2. Cuando existen dos sistemas…
Cualesquiera que se deben comunicar
entre ellos la interfaz será el mecanismo,
el entorno o la herramienta que hará
posible dicha comunicación.
En los sistemas informáticos, la relación
humano-computadora se realiza por
medio de la interfaz, que se podría definir
como mediador.

3. Podemos definir dos tipos de interfaces:
La interfaz física La interfaz virtual o gráfica
(GUI)

4. ¿Qué relación tienen entre sí?
Estas dos mediaciones son relaciones del tipo
entrada de datos (input). Al igual que tenemos
una entrada, necesitamos algo que facilite la
salida de datos (output), para esto tenemos, por
ejemplo, la pantalla de la computadora, donde
se visualizan estas interfaces gráficas, o la
impresora, donde se imprimen los datos.

5. GUI : Concepto…
Conjunto de formas y
métodos que posibilitan
la interacción de un
sistema con los usuarios
utilizando formas gráficas
e imágenes.

6. En definitiva GUI es…
Una interfaz de usuario en la que una
persona interactúa con la información
digital a través de un entorno gráfico de
simulación. Este sistema de
interactuación con los datos se
denomina WYSIWYG
(What you see is what you get, ‘lo que
ves es lo que obtienes’)

7. ¿WYSIWYG?
 Los objetos, iconos (representación
visual) de la interfaz gráfica, se
comportan como metáforas de la
acción y las tareas que el usuario
debe realizar (tirar documento =
papelera). Estas relaciones también
se denominan interfaces objetos-
acción
 (object-action-interface, OAI).

8. Las características básicas de una buena
interfaz…
 Facilidad de comprensión,
aprendizaje y uso
 Representación fija y permanente
de un determinado contexto de
acción (fondo)
 El objeto de interés ha de ser de
fácil identificación
 Diseño ergonómico mediante el
establecimiento de menús, barras
de acciones e iconos de fácil
acceso

9.  Las interacciones se basarán en acciones
físicas sobre elementos de código visual o
auditivo (iconos, botones, imágenes, mensajes
de texto o sonoros, barras de desplazamiento y
navegación...) y en selecciones de tipo menú
con sintaxis y órdenes
 Las operaciones serán rápidas, incrementales y
reversibles, con efectos inmediatos
 Existencia de herramientas de Ayuda y
Consulta
 Tratamiento del error bien cuidado y
adecuado al nivel de usuario

10. Elementos típicos de las GUI:
Entrada de comandos
 Botón
 Menú contextual
 Menú desplegable
 Menú pastel
 Menú y submenú

11. Elementos básicos de una GUI:
Entrada/Salida de datos
 Casillero de verificación
 Lista ,Lista desplegable (combo box)
 Botón de opción (radio button)
 Cuadro de texto
 Grid view (datagrid)
 Barra de desplazamiento (scrollbar)

12. Elementos básicos de una GUI:
Informativos
 Icono
 Barra de estado
(status bar)
 Globo de ayuda
(ballon help)
 Barra de progreso
 Barra de título
 Slider
 Spinner
 Caja de texto (Text
box o Cuadro de
texto)
 HUD (heads-up)
 Etiqueta (label)
 Splash screen
 Throbber •
 Toast •
 Tooltip -

13. Elementos básicos de una GUI:
Contenedores
 Ventana
 Acordeón
 Ribbon
 Disclosure widget (expansor o Combutcon)
 Cuadro (frame/fieldset)
 Barra de menú (menubar)
 Panel • Panel lateral
 Pestaña (tab)
 Barra de herramientas

14. Elementos básicos de una GUI:
De navegación
 Barra de direcciones
 Breadcrumb
 Hipervínculo •
 Vista de árbol (treeview)

15. Elementos básicos de una GUI:
 Ventanas especiales
 Acerca de:
 Cuadro de dialogo
 Inspector Window
 Modal window
 Ventana de paleta