SlideShare una empresa de Scribd logo
GUI
Héctor Rahampery Hernández Contreras
América Ontiveros Enciso
Carlos Gabriel Luna Montes
Aurora Arce Dueñas
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.
Podemos definir dos tipos de interfaces:
La interfaz física La interfaz virtual o gráfica
(GUI)
¿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.
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.
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’)
¿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).
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
 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
Elementos típicos de las GUI:
Entrada de comandos
 Botón
 Menú contextual
 Menú desplegable
 Menú pastel
 Menú y submenú
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)
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 -
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
Elementos básicos de una GUI:
De navegación
 Barra de direcciones
 Breadcrumb
 Hipervínculo •
 Vista de árbol (treeview)
Elementos básicos de una GUI:
 Ventanas especiales
 Acerca de:
 Cuadro de dialogo
 Inspector Window
 Modal window
 Ventana de paleta
Gui

Más contenido relacionado

PPTX
El tiempo cinematografico
PPTX
Espacio y tiempo fílmico
PPTX
Interfaces Gráficas de Usuario.pptx
PPT
Interfaz_Graficaasssssssssssssssssssssssssssssssssssssssa.ppt
PDF
Unidad 5 interfaces-trabajo c.i.27.902.634
PPTX
Interfaz Gráfica de Usuario
PDF
Diapositiva1-Introduccion-a-las-Interfaces-Graficas-de-Usuario-GUI.pdf
PPT
Intrefaz gráfica de usuario
El tiempo cinematografico
Espacio y tiempo fílmico
Interfaces Gráficas de Usuario.pptx
Interfaz_Graficaasssssssssssssssssssssssssssssssssssssssa.ppt
Unidad 5 interfaces-trabajo c.i.27.902.634
Interfaz Gráfica de Usuario
Diapositiva1-Introduccion-a-las-Interfaces-Graficas-de-Usuario-GUI.pdf
Intrefaz gráfica de usuario

Similar a Gui (20)

PPT
Intrefaz
PPT
Intrefaz gráfica de usuario
PPTX
PPTX
GUI ADS.pptx
PPTX
TrAbAjO dE iNvEtIsGaCiOn
PPTX
Interfases gui
PPT
Presentac..[1]
PDF
PPTX
Interfases gui
PPTX
Diseño interfaz de usuario
PPTX
Diseño interfaz de usuario
PPSX
Diseño de interfaces centradas en el usuario
PPTX
El computador desde el punto de vista del usuario
PPTX
Diseño de interfaz_de_usuario_reload
PPTX
El computador desde el punto de vista del usuario
PPTX
El computador desde el punto de vista del usuario
PPTX
Interfaz gráfica de usuario
PPTX
Interfaz gráfica de usuario
PPTX
interfaz grafica de usuario en la programacion
Intrefaz
Intrefaz gráfica de usuario
GUI ADS.pptx
TrAbAjO dE iNvEtIsGaCiOn
Interfases gui
Presentac..[1]
Interfases gui
Diseño interfaz de usuario
Diseño interfaz de usuario
Diseño de interfaces centradas en el usuario
El computador desde el punto de vista del usuario
Diseño de interfaz_de_usuario_reload
El computador desde el punto de vista del usuario
El computador desde el punto de vista del usuario
Interfaz gráfica de usuario
Interfaz gráfica de usuario
interfaz grafica de usuario en la programacion
Publicidad

Más de DaCoom (6)

PDF
Recetario vegano
PPTX
Arquitecturas risc y cisc
PPTX
Introducción a la gestion de calidad
PPTX
SAX (con PHP)
PPTX
Componentes de un robot
PPTX
Clasificacion de robots
Recetario vegano
Arquitecturas risc y cisc
Introducción a la gestion de calidad
SAX (con PHP)
Componentes de un robot
Clasificacion de robots
Publicidad

Último (20)

PDF
Tríptico Mariangel _20250809_135609_0000.pdf
PPTX
deforestación y urbanización.pptx. tiphz
PPTX
Normativa española sobre mercancías peligrosas.pptx
PDF
D08_SESION 18_2022.12.12_MODELOS DE PRIORIZACION DE STAKEHOLDERS.pdf
PPTX
14. Normatividad ambiental y politica SGI.pptx
PPTX
CIENCIAS NATURALES: HIDROPONÌA ESCOLAR.pptx
PPTX
las plantas y su importancia en nuestra vida
PPT
T-T-6076-Powerpoint-Las-frutas-y-verduras (1).ppt
PPTX
COMUNICACION, CIENCIA Y PERONAjL 14.pptx
PPTX
PRACTICAS AGROECOLOGICAS EN CULTIVOS HORTALIZAS
PDF
Presentación educativa de agua virtual huella hídrica.pdf
PPTX
Implementación del Programa de Participación Estudiantil.pptx
PPTX
Prevencion de incendios y Manejo de extintores.pptx
PDF
Fauna silvestre Colombia últimos 10 años.pdf
PPTX
FUNCION DEL AGUA EN EL MEDIO AMBIENTE...
PPTX
sa-cn-1631612843-powerpoint-cambio-climatico_ver_2.pptx
PPT
Fotosintesis FASDFASDFASDFASDFASDFASFASF3).ppt
PPTX
GESTION Y MANEJO DE RESIDUOS SÓLIDOS - TYCO
PPTX
Presentacion Primer Modulo PSICOSOCIAL.pptx
PDF
Todo sobre la contaminación en el planeta
Tríptico Mariangel _20250809_135609_0000.pdf
deforestación y urbanización.pptx. tiphz
Normativa española sobre mercancías peligrosas.pptx
D08_SESION 18_2022.12.12_MODELOS DE PRIORIZACION DE STAKEHOLDERS.pdf
14. Normatividad ambiental y politica SGI.pptx
CIENCIAS NATURALES: HIDROPONÌA ESCOLAR.pptx
las plantas y su importancia en nuestra vida
T-T-6076-Powerpoint-Las-frutas-y-verduras (1).ppt
COMUNICACION, CIENCIA Y PERONAjL 14.pptx
PRACTICAS AGROECOLOGICAS EN CULTIVOS HORTALIZAS
Presentación educativa de agua virtual huella hídrica.pdf
Implementación del Programa de Participación Estudiantil.pptx
Prevencion de incendios y Manejo de extintores.pptx
Fauna silvestre Colombia últimos 10 años.pdf
FUNCION DEL AGUA EN EL MEDIO AMBIENTE...
sa-cn-1631612843-powerpoint-cambio-climatico_ver_2.pptx
Fotosintesis FASDFASDFASDFASDFASDFASFASF3).ppt
GESTION Y MANEJO DE RESIDUOS SÓLIDOS - TYCO
Presentacion Primer Modulo PSICOSOCIAL.pptx
Todo sobre la contaminación en el planeta

Gui

  • 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

Notas del editor

  • #4: La interfaz física: un ratón y un teclado que sirven para introducir y manipular datos en nuestro ordenador. La interfaz virtual o interfaz gráfica (GUI) que permite, mediante iconos (cursor + objetos gráficos metafóricos), interactuar con los elementos gráficos convirtiendo al ser humano en usuario de la aplicación.
  • #6: Con formas gráficas se refiere a botones, íconos, ventanas, fuentes, etc. los cuales representan funciones, acciones e información. -