INGRESO AL SISTEMA

Login:
Pasword:
Ingresar

Tutorial
DISEÑO DE INTERFACES
UTILIZANDO HERRAMIENTA
GOMOCKINGBIRD

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje.

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

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

Al iniciar aparece la siguiente información:

Se da clic en el botón:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 2

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Interfaz de Gomockingbird.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 3

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Ahora se debe conocer la interfaz que se va a crear con la presente

herramienta:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 4

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Pasos para crear la interfaz

1. Se debe ubicar en el menú File y seleccionar la opción New para crear

la nueva interfaz. Al dar clic en esa opción el área de trabajo ya está vacía
y lista para iniciar.

2. Agrega un rectángulo grande donde se insertan todos los demás

controles de la interfaz. Se busca al lado izquierdo en el bloque Widgets
el objeto Rectangle, se da clic sostenido, arrastrar al área de trabajo y
soltar.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 5

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Al agregarlo se amplía al tamaño deseado, de acuerdo a las necesidades.

3. Se agrega a la interfaz el titulo REGISTRAR PACIENTE. Para ello se

busca el objeto llamado text, clic sostenido y se suelta en la parte superior
interna del Rectángulo.

Al agregar el objeto text, se puede cambiar directamente el texto deseado

por el texto inicial Some Text.

Al cambiar el texto la interfaz va quedando así:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 6

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Se puede cambiar el tamaño y color del texto como lo indica la siguiente

gráfica. Las opciones se tienen en la barra de herramientas.

Se cambia el tamaño a 22 en Font size y cambiar el color de texto como

lo muestra la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 7

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

4. Ahora se agrega el texto Identificación y la caja de texto respectiva.

Se agrega el objeto texto y se cambia por Identificación.

5. Después se agrega el objeto Text Input Box con clic sostenido y se

suelta en el área de trabajo al frente del objeto de texto identificación. Se
elimina la palabra Some text. Al agregar la interfaz debe quedar así:

Se puede modificar el tamaño del Text Input Box, de acuerdo las

necesidades.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 8

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

6. De la misma forma se hace para los elementos nombres, apellidos,

dirección, teléfono y correo. Al realizar la interfaz debe ir quedando así:

7. Se agrega ahora el objeto Text y se cambia el texto por estrato.

8. Después se agrega el objeto DropDown al frente el

objeto de texto llamado estrato.

Al agregar el elemento aparece así:

Se cambia el texto Dropdown por Seleccione y debe quedar así:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 9

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

La interfaz va quedando así:

9. De la misma forma se hace para los elementos tipo de sangre y género.

Al finalizar la interfaz debe quedar así:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 10

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

10. Para continuar se agrega un objeto Text y se coloca el texto Nombre

Acudiente. Se agrega su respectiva caja de texto.

Al agregar los anteriores elementos la interfaz va quedando así:

11. Ahora se agrega a la interfaz dos Botones y a uno de ellos se coloca

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

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 11

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Al agregarlos la interfaz queda así:

12. Ahora agregar una línea horizontal debajo de la línea superior del
rectángulo. Para ello se utiliza el objeto llamado Horizontal Line.

Ahora se selecciona la línea y todo el rectángulo, se agrupa dando clic en

el botón de la barra de herramientas que se llama Group.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 12

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Ahora se agrega un texto en la parte superior en medio del borde externo

del rectángulo y la línea que acabamos de agregar. Se cambia el texto
por: Centro odontológico: Registrar Paciente. Al finalizar la interfaz debe
quedar así:

13. Para terminar se procede a guardarlo. Dar clic en menú File y después
en Save as. Aparece la siguiente ventana:

Se debe ingresar un nombre a nuestra interfaz. Como ejemplo se coloca

registrarPaciente.

También puede exportar a formato PDF o PNG. Para ello dar clic en menú
File y después por Export seleccionar PDF o PNG.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 13

Laboratorio - Diseño de interfaces utilizando herramienta Gomockingbird

Control de documentos

LABORATORIO. DISEÑO DE INTERFACES

HERRAMIENTA GOMOCKINGBIRD

Centro Industrial de Mantenimiento Integral - CIMI

Regional Santander
Líder línea de producción: Santiago Lozada Garcés

Rosa Elvia Quintero Guasca

Asesores pedagógicos:
Claudia Milena Hernández N.

Líder expertos temáticos: Rita Rubiela Rincón Badillo

César Marino Cuéllar Chacón (V1)

Experto temático:
Rita Rubiela Rincón Badillo (V2)

Diseño multimedia: Luis Gabriel Urueta Alvarez

Programador: Francisco José Lizcano Reyes

Producción de audio: Víctor Hugo Tabares Carreño

Este material puede ser distribuido, copiado y exhibido por terceros si se

muestra en los créditos. No se puede obtener ningún beneficio comercial
y las obras derivadas tienen que estar bajo los mismos términos de la
licencia que el trabajo original.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 14