Lab 04 - Mockups (Balsamiq)

DISEÑO DE INTERFACES DE PROGRAMACIÓN
LABORATORIO N° 04
Mockups - Balsamiq
DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS

PROGRAMA DE FORMACIÓN REGULAR
Diseño de Interfaces de Programación – Lab 04 Nro. DD-106
Mockups – Balsamiq Página 2 de 10
CODIGO DEL CURSO:
Alumno(s) Nota
Victor Emmanuel texi
Grupo
Ciclo
Fecha de entrega
I.- OBJETIVOS:
 Diseñar prototipos de Interfaces de Usuario.
 Aprender a integrar al cliente a ser parte del equipo de diseño de Interfaces Gráficas.
II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.
III.- FUNDAMENTO TEÓRICO:

Revise sus diapositivas del tema antes del desarrollo del laboratorio.
IV.- NORMAS EMPLEADAS:

No Aplica
V.- RECURSOS:
 En este laboratorio cada alumno trabará con un equipo con Windows 8.
VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

 El desarrollo del laboratorio es individual.
VII.- PROCEDIMIENTO:
Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las herramientas de
desarrollo en un equipo externo.
INSTALACIÓN DE BALSAMIQ
1. Ingrese a https://balsamiq.cloud/
BALSAMIQ PRIMERA VISTA.
1
5
2
LEYENDA:
Número Descripción
1 Lista de Mockups en el proyecto.
2 Área de diseño de Mockup Seleccionado en 1
3 Barra de herramientas de controles prediseñados para dibujar en el área de trabajo.
4 Barra de Menú y Vistas. Menú para importar archivos, exportar Mockups, y ver los
mismos en cuadrícula o lista
Paso 1: Dibujar Contenedores
En la barra de herramientas en la cinta ALL arrastre un control Browser al Mockup 1 (creado por defecto al iniciar
el programa). Aparecerá la pantalla de un navegador.
En la Lista de Mockups creados clic derecho al mockup “New Mockup 1” y clic en Rename para darle el nombre
de “Mockup Login”
En el cuadro de texto escriba “Tecsup – Login” como Título y en el URL Escriba http://www.tecsup.edu.pe. El
cuadro resultante debería ser parecido al siguiente:
Ilustración 1 Vista de un buscador página Tecsup
Paso 2: Dibujar Controles
Arrastre los siguientes controles al buscador:
Control Valor
Label Id
Label Password
Label Login – Control de Acceso
TextInput
TextInput
Button Ingresar
Button Cancelar
Button Registrarse
El diseño debería quedar como en la siguiente Figura:
Ilustración 2 Mockup Login
En la esquina superior derecha clic en el signo “+” para crear un nuevo Mockup.
En la Lista de Mockups creados clic derecho al mockup “New Mockup 2” y clic en Rename para darle el nombre
de “Mockup Alumnos”.
Arrastre un Control Browser, un tanto más grande que el Mockup 1
En el cuadro de texto escriba “Tecsup Alumnos” como Título y en el URL Escriba:
http://www.tecsup.edu.pe/alumnos.
Arrastre los siguientes controles:
 Label con el Valor “LISTA DE ALUMNOS” en la parte central superior del nuevo formulario.
 “Rectangle” y ubíquelo después del Label creado.
 Label con valor “Alumno”
 TextInput con valor “Escriba nombre del alumno”
 Button con valor “Buscar”.
 2 CheckBox’s con valores:
o Soltero.
o Casado.
 Image con valor “Fotografía”
 ComboBox con valores:
o Tipo de Alumno.
o Regular
o Becado
o S/T
 Field Set con valor “Tabla de Datos”.
 Field Set con valor “Acciones”
 Dentro del Field Set Tabla de Datos un Data Grid con el siguiente Valor:
 Dentro del Field Set de Acciones 3 Buttons con los valores:

o Crear
o Editar
o Eliminar
Finalmente Seleccione el Data Grid y modifique los siguientes valores:
 Marque la casilla de Horizontal Lines.

 En Selection, Seleccione el primer registro “Diego Chávez”
 Active la casilla Scroll Bar,
 Y centre el texto del Grid
El resultado debería ser similar al siguiente:
Ilustración 3 Mockup Alumnos
LINK ENTRE MOCKUPS
Para que el prototipo tenga una mayor funcionalidad es conveniente que algunos controles tengan acciones,
aunque no necesariamente con validación de información.
Paso 3: Link entre Mockups
En el primer Mockup “Login”, seleccione el botón de Ingresar.

En las propiedades de dicho botón en el lado derecho de la aplicación, en la sección Links escoja el Mockup
“Mockup Alumnos”. Con la finalidad de poder hacer clic al botón y añadirle un poco más de funcionalidad.
ASSETS
***Los Assets son recursos que nuestra aplicación va a utilizar, por ejemplo, en una página web los assets son las
hojas de estilos el código JavaScript, algunas librerías y/o frameworks como Bootstrap, JQuery, etc. También
podrían ser imágenes que irán en el fondo de nuestro Layout, o encima de los botones, etc.
Descargue de internet una imagen de tamaño no mayor a 600x600.

Guárdelo en Mis Documentos con el nombre “fondo.png”.
En la esquina superior izquierda de la aplicación encontrará el símbolo:
Clic y Seleccione Assets:
Como aún no tenemos Assets o recursos, es probable que la sección esté vacía.
Arrastramos la imagen que se ha descargado hacia el panel derecho de este entorno.

Acabamos de Crear un Asset y ahora lo podemos usar como fondo de pantalla de uno de nuestros Mockups.
Regrese al modo de Vista de Mockups.
Seleccione el Mockup 1 “Login”

Ubíquese en el cuadro de herramientas en el grupo Assets
Seleccione la imagen y arrástrela al formulario.

Reduzca o aumente el tamaño según convenga para igualar el tamaño de la imagen en el Mockup 1.
Seleccione todos los controles existentes en el formulario (Labels, TextInputs y botones), Clic derecho y elija Bring
to Front.
Mueva el Asset (Fondo de pantalla detrás de los botones del formulario Login.)
El resultado debería mostrarse como aparece en la siguiente imagen:
Ilustración 4 Login de la Aplicación con fondo de pantalla (Asset)
Compruebe el funcionamiento del Proyecto seleccionando el primer Mockup y luego, en la esquina superior
derecha ubique el símbolo de Play:
Compruebe que el clic en el botón Ingresar nos lleva al Mockup 2.

Usted puede aplicar la funcionalidad que desee con la finalidad de que el usuario final entienda cómo va a ser
diseñada su aplicación.
Finalmente, se genera el documento PDF correspondiente a los mockups generados, a través de la siguiente ruta:
Project  Export to PDF  Export to PDF (dejar las opciones por defecto)  Asignar el nombre apropiado para
este archivo y la carpeta donde se desee guardar.
TAREA:
Cree los Mockups necesarios para un sistema XYZ . El resultado debe ser interactivo.
CONCLUSIONES
Se diseñó prototipos de páginas web con la herramienta Balsamiq.
Se integró al cliente en el desarrollo de la página viendo desde su perspectiva.
Se logró el desarrollo de un prototipo de página web
se logro hacer el cambio de las diapositivas usando lo conectores

Lab 04 - Mockups (Balsamiq)

Cargado por

Copyright:

Formatos disponibles

Lab 04 - Mockups (Balsamiq)

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lab 04 - Mockups (Balsamiq)

Cargado por

Copyright:

Formatos disponibles

DISEÑO DE INTERFACES DE PROGRAMACIÓN

DISEÑO DE SOFTWARE E INTEGRACIÓN DE SISTEMAS

CODIGO DEL CURSO:

Victor Emmanuel texi

III.- FUNDAMENTO TEÓRICO:

IV.- NORMAS EMPLEADAS:

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

BALSAMIQ PRIMERA VISTA.

Paso 1: Dibujar Contenedores

Ilustración 1 Vista de un buscador página Tecsup

Paso 2: Dibujar Controles

Arrastre los siguientes controles al buscador:

El diseño debería quedar como en la siguiente Figura:

Ilustración 2 Mockup Login

Arrastre los siguientes controles:

 Dentro del Field Set de Acciones 3 Buttons con los valores:

 Marque la casilla de Horizontal Lines.

El resultado debería ser similar al siguiente:

Ilustración 3 Mockup Alumnos

LINK ENTRE MOCKUPS

Paso 3: Link entre Mockups

En el primer Mockup “Login”, seleccione el botón de Ingresar.

Descargue de internet una imagen de tamaño no mayor a 600x600.

Clic y Seleccione Assets:

Arrastramos la imagen que se ha descargado hacia el panel derecho de este entorno.

Seleccione el Mockup 1 “Login”

Seleccione la imagen y arrástrela al formulario.

Ilustración 4 Login de la Aplicación con fondo de pantalla (Asset)

Compruebe que el clic en el botón Ingresar nos lleva al Mockup 2.

También podría gustarte