INGRESO AL SISTEMA

Login:
Pasword:
Ingresar

Laboratorio
Diseño de interfaces

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje.

 Laboratorio - Diseño de interfaces

Estructura de contenidos

Pág.
Introducción........................................................................................................................3
1. Objetivos........................................................................................................................4
2. Consideraciones.............................................................................................................4
3. Procedimiento................................................................................................................5
3.1. Pasos..........................................................................................................................5
3.2. Diagrama del procedimiento general del laboratorio...................................................6
3.3. Algoritmos a desarrollar...............................................................................................7
4. Evidencias......................................................................................................................7
Glosario..............................................................................................................................8
Bibliografía.........................................................................................................................9
Control del documento.................................................................................................... 10

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 2

 Laboratorio - Diseño de interfaces

DISEÑO DE INTERFACES.

Introducción
Una parte fundamental en todo software es
la interfaz de usuario, quien es la encargada
de interactuar el software con el usuario. Se
requiere entonces diseñar interfaces de acuerdo
a los requerimientos del sistema pero siempre
teniendo en cuenta a los usuarios. “Como dice el
dicho, todo entra por los ojos”. Por lo anterior es
importante que las interfaces sean funcionales,
pero teniendo en cuenta los detalles de diseño y
los atributos de usabilidad.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 3

 Laboratorio - Diseño de interfaces

Desarrollo de contenidos

1. Objetivos

OBJETIVO GENERAL:

Diseñar interfaces de usuario utilizando las herramientas Balsamiq Mockups y

Gomockingbird.

OBJETIVOS ESPECÍFICOS:

• Identificar los pasos a seguir para la construcción del

diseño de la interfaz de usuario.

• Hacer el diseño en la herramienta Balsamiq Mockups o

Gomockingbird.

• Identificar los datos de entrada y salida que se utilizan en

el diseño de la interfaz.

• Aplicar las estructuras de programación de acuerdo con la

situación presentada.

2. Consideraciones

Para el desarrollo del laboratorio es importante tener en cuenta los siguientes aspectos
relacionados en la tabla:

ÍTEM DESCRIPCIÓN
Soporte teórico • Revisar los objetos de contenido sobre diseño de interfaces
de usuario.
• Tutorial Diseño de interfaces mediante Balsamiq Mockups.
• Tutorial Diseño de interfaces mediante Gomockingbird.
Productos Ejercicios ejemplo que se muestran en los objetos de contenido
requeridos y en los tutoriales.
Herramientas SW Para el desarrollo del laboratorio se requiere tener instalada la
herramienta Balsamiq Mockups y Gomockingbird de acuerdo con
las instrucciones suministradas en el tutorial correspondiente.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 4

 Laboratorio - Diseño de interfaces

3. Procedimiento

Para el desarrollo de cada uno de los ejercicios tener en cuenta el

siguiente procedimiento:

3.1. Pasos

Se recomienda seguir activamente las siguientes instrucciones:

1. Leer detenidamente el enunciado de la actividad, donde le quede claro qué es lo que

se está solicitando.
2. Identificar los datos de entrada y salida que son necesarios en el diseño de la interfaz,
investigar con otras fuentes de ser necesario.
3. Identificar el elemento gráfico que sirve para la captura de cada uno de los datos.
4. Hacer el diseño en la herramienta Balsamiq Mockups o Gomockingbird.
5. Utilizar en el diseño los objetos de acuerdo al prototipo que realizó.
6. Exportar los archivos a formato JPG o PNG al documento .doc.
7. Guardar el archivo en una carpeta para ser enviado al Tutor.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 5

 Laboratorio - Diseño de interfaces

3.2. Diagrama del procedimiento general del laboratorio

Inicio

Leer el enunciado y entender

¿Que se requiere?

Identificar los datos que se

requieren para la interfaz

Identificar objetos que permiten

capturar cada uno de los datos

Hacer prototipo en hoja de papel

Hacer el diseño en las herramientas

Software Balsamiq Mockups o
Mockingbird

Agregue objetos de la herramienta

para el diseño de la interfaz teniendo
en cuenta el prototipo

¿Está completa NO
la interfaz?

SI

Escanear el prototipo de la hoja

de papel

Guarde el archivo generado por

cada una de las herramientas

Exporte el archivo a formato PNG

FIN

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 6

 Laboratorio - Diseño de interfaces

3.3. Algoritmos a desarrollar

Realizar los siguientes ejercicios:

PRIMER ENUNCIADO: diseñar la interfaz de usuario para la captura de los datos de un

libro que debe ser registrado en la biblioteca.

SEGUNDO ENUNCIADO: diseñar la interfaz de usuario para la captura de los datos del
registro de una persona en un hotel.

TERCER ENUNCIADO: diseñar la interfaz de usuario para la captura de datos cuando

una persona compra un tiquete para un vuelo nacional.

CUARTO ENUNCIADO: diseñar una interfaz de usuario para un sistema de votación que
incluye tres (3) candidatos, uno de ellos corresponde al voto en blanco.

Nota: se deben crear 2 ejercicios utilizando la herramienta Balsamiq mockups y los otros
2 ejercicios utilizando la herramienta Gomockingbird

4. Evidencias

Para cada una de las actividades del laboratorio se requiere realizar

la interfaz de usuario en la herramienta que se utilizó y exportar la
imagen en formato JPG o PNG a un documento en formato .pdf, .doc
o .docx con el nombre Solucion_Interfaz_usuario donde contenga los
ejercicios anteriormente expuestos.

NOTA:
La realización de los ejercicios en este laboratorio, tiene como finalidad afianzar los
conocimientos adquiridos y desarrollar mayor comprensión y práctica para alcanzar los
resultados de aprendizaje planteados en esta actividad de proyecto, por tal motivo no
son actividades calificables.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 7

 Laboratorio - Diseño de interfaces

Glosario

Interfaz de usuario: es el medio como el usuario puede comunicarse con

una máquina, un equipo o una computadora, y comprende todos los puntos de
contacto entre el usuario y el equipo.

Usabilidad: se refiere a la facilidad con que las personas pueden utilizar una
herramienta particular o cualquier otro objeto fabricado por humanos con el
fin de alcanzar un objetivo concreto. La usabilidad también puede referirse al
estudio de los principios que hay tras la eficacia percibida de un objeto.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 8

 Laboratorio - Diseño de interfaces

Bibliografía

Kendall, K., Kendall, J. (2005). Análisis y Diseño de Sistemas. México: Pearson

Educación.

Mercovich, E. (2003). Diseño Iterativo de Interfaces. Buenos Aires. Recuperado de

http://www.gaiasur.com.ar/infoteca/siggraph99/diseno-iterativo-y-
prototipado-rapido.html

Sommerville, I. (2005). Ingeniería del Software. Madrid: Pearson Educación.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 9

Laboratorio - Diseño de interfaces

Control del documento

LABORATORIO. DISEÑO DE INTERFACES

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 Naranjo

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. 10