DISEO DE INTERFACES UTILIZANDO

HERRAMIENTA GOMOCKINGBIRD

MANUAL DE LABORATORIO N 9 - Diseo de Interfaces

Actividad de Proyecto: Determinar la estructura lgica del sistema.

 Diseo de interfaces utilizando
herramienta gomockingbird

Ingresar al siguiente sitio de internet: https://gomockingbird.com/

Al iniciar aparece la siguiente informacin:

Damos clic en el botn:

2
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Interfaz de gomockingbird.

3
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Vamos a conocer la interfaz que vamos a crear con la presente herramienta:

4
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Pasos para crear la interfaz

1. Ubicarnos en el men file y dar clic en la opcin new para crear nuestra
nueva interfaz.

2. Al dar clic en esa opcin nuestra rea de trabajo ya esta vaca y lista
para iniciar.

3. Agregamos un rectngulo grande donde se van agregar todos los dems

controles de la interfaz. Buscamos el objeto Rectangle al lado izquierdo
en el bloque widgets, damos un clic sostenido en el objeto, lo llevamos al
rea de trabajo y lo soltamos.

5
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Al agregarlo lo ampliamos al tamao deseado, de acuerdo a las necesidades.

4. Vamos agregar a la interfaz el titulo REGISTRAR PACIENTE. Para ello

buscamos el objeto llamado text, clic sostenido y lo soltamos en la parte
superior interna del Rectngulo.

Al agregar el objeto text, podemos cambiar directamente el texto deseado

por el texto inicial Some Text.

Al cambiar el texto la interfaz va quedando as:

6
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Podemos cambiar el tamao y color del texto como lo indica la siguiente

grfica. Las opciones las tenemos en la barra de herramientas.

Vamos a cambiar el tamao a 22 en Font size y cambiar el color de texto

como lo muestra la siguiente imagen:

7
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

5. Ahora vamos agregar el texto Identificacin y su caja de texto respectiva.

Agregamos el objeto texto y lo cambiamos por Identificacin.

6. Despus agregamos el objeto Text Input Box con clic sostenido y lo

soltamos en el rea de trabajo al frente del objeto de texto identificacin.
Eliminamos la palabra Some text. Al agregar la interfaz debe quedar as:

Podemos modificar el tamao del Text Input Box, de acuerdo las

necesidades.

8
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

7. De la misma forma lo hacemos para los elementos nombres, apellidos,

direccin, telfono y correo. Al realizar la interfaz debe ir quedando as:

8. Vamos agregar ahora el objeto Text y cambiamos el texto por estrato.

9. Despus agregamos el objeto DropDown al frente el objeto de texto

llamado estrato.

Al agregar el elemento aparece as:

9
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

La interfaz va quedando as:

10. De la misma forma hacemos para los elementos tipo de sangre y

genero. Al finalizar la interfaz debe quedar as:

10
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

11. Para continuar agregamos un objeto Text y colocamos el texto Nombre

Acudiente. Agregamos su respectiva caja de texto.

Al agregar los anteriores elementos la interfaz va quedando as:

12. Ahora agregamos a la interfaz dos Botones y a uno de ellos le colocamos

la palabra REGISTRAR y al otro CANCELAR. Para ello buscamos el objeto
llamado Button.

11
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Al agregarlos la interfaz queda as:

13. Vamos agregar una lnea horizontal debajo de la lnea superior del
rectngulo. Para ello utilizamos el objeto llamado Horizontal Line.

Ahora seleccionamos y la lnea y todo el rectngulo lo agrupamos dando

clic en el botn de la barra de herramientas que se llama Group.

12
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

Ahora agregamos un texto en la parte superior en medio del borde externo

del rectngulo y la lnea que acabamos de agregar. Cambiamos el texto
por: Centro odontolgico: Registrar Paciente. Al finalizar la interfaz debe
quedar as:

14. Para terminar procedemos a guardarlo. Dar clic en men File y despus
en Save as. Aparece la siguiente ventana:

Ingresamos un nombre a nuestra interfaz. Como ejemplo vamos a colocar

registrarPaciente.

Tambin puede exportarlo a formato PDF o PNG. Para ello dar clic en
men File y despus por Export seleccionar PDF o PNG.

13
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Diseo de interfaces utilizando
herramienta gomockingbird

14
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje