DISEO

DE INTERFACES

GRFICAS DE USUARIO

Subttulo .

CONTENIDO

1. Objetivos
2. Indice
3. Contenido
4. Bibliografa y Recursos

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 2

OBJETIVOS
Identificar los componentes bsicos de
una GUI
Identificar los tipos de distribuciones de
elementos de una GUI
Identificar los eventos bsicos de una GUI
Integrar una GUI a la solucin de un
problema mediante el enfoque algortmico

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 3

INDICE
Qu es una interfaz grfica
Tipos de elementos
Formas de ordenar elementos
Eventos
Glade
Ejemplos

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 4

QU

ES UNA INTERFAZ GRFICA

Una interfaz grfica proporciona un entorno visual para

permitir la comunicacin del usuario con aplicaciones
desarrolladas en algn lenguaje de programacin

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 5

PREGUNTA
Solo se pueden ejecutar aplicaciones por medio de una
interfaz grfica?

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 6

PREGUNTA
Guardar como calculadora.py y ejecutar como:
python calculadora.py Suma 20 30
#!/usr/bin/python
import sys
def operar(opera,oper1,oper2):
if opera == "Suma":
res = oper1+oper2
elif opera == "Resta":
res = oper1-oper2
else:
res = oper1*oper2
return res

opera = sys.argv[1]
oper1 = int(sys.argv[2])
oper2 = int(sys.argv[3])
res = operar(opera,oper1,oper2)
print('resultado=',res)
Escuela de Ingeniera de sistemas y computacin
Universidad del Valle

Slide 7

TIPOS

DE ELEMENTOS

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 8

TIPOS

DE ELEMENTOS
Ventana

Campo texto

Etiqueta
(fija)

Caja de Seleccin

Botn

Etiqueta
(empleada como salida)

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 9

TIPOS

DE ELEMENTOS

Ventana: Contiene los elementos de una interfaz grfica

Etiqueta: Permite la visualizacin de informacin
Campo texto: Permite el ingreso de informacin
Caja de seleccin: Permite la seleccin de una opcin
entre un conjunto de opciones
Botn: Permite ejecutar una accin

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 10

PREGUNTA
Identifique los tipos de elementos en las interfaces grficas

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 11

PREGUNTA
Respuesta:

Etiqueta (fija)

Campo de Texto
Botn

Etiqueta (empleada para salida)

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 12

PREGUNTA
Respuesta:

Caja de seleccin
Campo de Texto

Etiqueta
(empleada para salida)

Botn

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 13

FORMAS

DE DISTRIBUIR ELEMENTOS

Las formas mas comunes para ordenar elementos en una

interfaz grficas son:
Tabla
Caja Horizontal y Vertical
Cuaderno

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 14

FORMAS

DE DISTRIBUIR ELEMENTOS

Tabla
Permite la distribucin de elementos en una tabla
Se debe especificar una cantidad de filas y columnas
La distribucin puede ser homognea si todos los
elementos ocupan el mismo espacio no homognea
donde cada elemento ocupa un espacio de acuerdo a su
contenido

Tabla con 4 filas

y 2 columnas
(homogneo)

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 15

FORMAS

DE DISTRIBUIR ELEMENTOS

Caja Vertical
Una caja vertical permite la distribucin de elementos de
arriba hacia abajo
Se debe especificar una cantidad de filas
La distribucin puede ser homognea o no homognea

Caja vertical
con 4 filas
(homogneo)

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 16

FORMAS

DE DISTRIBUIR ELEMENTOS

Caja Horizontal
Una caja de horizontal permite la distribucin de elementos
de izquierda a derecha
Se debe especificar una cantidad de columnas
La distribucin puede ser homognea o no homognea

Caja horizontal homogneo con 4 columnas

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 17

FORMAS

DE DISTRIBUIR ELEMENTOS

Cuaderno
Un cuaderno permite crear distintas pestaas
En cada pestaa se pueden usar los tipos de distribucin:
tabla, caja horizontal, caja vertical

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 18

PREGUNTA
Que formas de distribucin emplea la siguiente interfaz?

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 19

PREGUNTA
Respuesta:
La caja horizontal esta dentro de la fila de la mitad de la
caja vertical
Caja vertical
con 3 filas
(no homogneo)

Caja horizontal
con 3 columnas
(homogneo)

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 20

ACTIVIDAD
Piense en un problema
A partir de los elementos y formas de distribucin de
elementos estudiadas dibuje el boceto de una interfaz
grfica para el ingreso y visualizacin de resultados del
problema pensado
Comparta con sus compaeros la interfaz diseada

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 21

EVENTOS
Los eventos pueden ser originados por distintos dispositivos
por ejemplo por medio del teclado o del ratn
Eventos de Teclado: Presionar una tecla o combinacin de
teclas
Eventos de Ratn: Hacer clic en un elemento, Pasar el ratn
sobre un elemento

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 22

EVENTOS

Al hacer clic sobre el

Botn convertir se
genera un evento

Un evento se
asocia a una
funcin

def convertir(button):
conversion = combo_conversion.get_active_text()
if conversion == "Euros a Pesos":
euros = float(entrada_valor.get_text())
pesos = euros*tasa_cambio_euros
etiqueta_conversion.set_text(str(euros)+"EUR son " + str(pesos) +
"COP")
elif conversion == "Dolares a Pesos":
dolares = float(entrada_valor.get_text())
pesos = dolares*tasa_cambio_dolares
etiqueta_conversion.set_text(str(dolares) + "USD son " + str(pesos) +
"COP")
else:
etiqueta_conversion.set_text("Debe seleccionar una opcion")

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 23

GLADE
La aplicacin Glade permite la creacin de interfaces
grficas que posteriormente se pueden asociar a cdigo
fuente en Python

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 24

GLADE
Vista previa

rbol
de
elementos
Panel
de
elementos

Panel
de
propiedades

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 25

GLADE
Las grficas muestran como asociar un evento a un
elemento y el cdigo en python para enlazar la interfaz
from gi.repository import Gtk
def saluda(button):
nombre = entrada_nombre.get_text()
etiqueta_saluda.set_text("Hola " + nombre)
builder = Gtk.Builder()
builder.add_from_file("ejemplo_saluda.glade")
handlers = {
"onDeleteWindow": Gtk.main_quit,
"evento_saluda": saluda
}
builder.connect_signals(handlers)
window =
builder.get_object("ventana_principal")
etiqueta_saluda =
builder.get_object("etiqueta_saluda")
entrada_nombre =
builder.get_object("entrada_nombre")
window.show_all()
Gtk.main()
Escuela de Ingeniera de sistemas y computacin
Universidad del Valle

Slide 26

GLADE
Al ejecutar la aplicacin se obtiene el siguiente resultado

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 27

EJEMPLOS
Realizar con el acompaamiento del profesor los ejemplos
de los tutoriales en video interfaces grficas con python
del canal de youtube algoritmiaunivalle
www.youtube.com/algoritmiaunivalle

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 28

BIBLIGRAFA

Y RECURSOS

API de PyGTK
http://www.pygtk.org/pygtk2reference/

Enlaces con libros

https://librosweb.es/libro/python/
http://hipertextual.com/archivo/2014/08/libros-para-aprender-python/
http://www.comoprogramar.org/libros-de-phyton/

Tutoriales interactivos
http://www.learnpython.org/

https://www.codecademy.com/courses/introduction-to-python-6WeG3

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 29

PRXIMA

CLASE

Investigar que otros tipos de elementos grficos existen

Revisar la documentacin de PyGTK de un tipo de elemento
distinto a los vistos en clase y crear una aplicacin
empleando dicho elemento. Adicione en el cdigo fuente
comentarios explicando lo realizado
Comparta con sus compaeros el cdigo fuente del ejemplo
creado

Escuela de Ingeniera de sistemas y computacin

Universidad del Valle

Slide 30