Cibertec 2014-02

Trabajando con Mockingbird

Mockingbird es una herramienta en lnea que hace que sea fcil para ti para crear, enlazar juntos,
vista previa, y compartir maquetas de su sitio web o aplicacin.
Para ingresar al Mockingbird:

Desde la URL ingresamos la

siguiente direccin:
https://gomockingbird.com/

Hacer click para ingresar

Cargando la pgina
MockingBird.

Ofimtica

Equipo de Docentes

Cibertec 2014-02
IDE del MockingBird
Al cargar el aplicativo se visualiza el siguiente IDE, tal como se muestra

Barra de men

Cuadro de
herramientas

Pgina para el diseo

del prototipo

Para configurar la vista del wireframe en cuadrculas, desde la opcin VIEW:

1. selecciona la opcin Show grid
2. selecciona desde Show columns la opcin 960gs (12 columns), para visualizar 12 columnas
en la cuadrcula

1. Selecciona la
opcin Show grid

2. Selecciona desde
Show columns la
opcin 960 gs (12
columnas)

Ofimtica

Equipo de Docentes

Cibertec 2014-02
Para iniciar un nuevo diseo, selecciona, desde la opcin FILE, la opcin New, tal como se muestra

Para iniciar un
nuevo diseo

Para la bsqueda de un control, escriba en la opcin WIDGET, las iniciales del nombre del control,
y el buscador mostrar los controles que coincidan con la bsqueda, tal como se muestra en la
figura.

Bsqueda de controles

Control

Ofimtica

Equipo de Docentes

Cibertec 2014-02
Para colocar un control a la grilla del wireframe, debemos arrastrarlo a la pgina.

Control arrastrado
desde el cuadro de
herramientas

Ubicar y dimensionar el control agregado. Para dimensionar el control, hacer doble click sobre
dicho control y definir su ancho y su alto (anchoxalto), tal como se muestra

Escriba ancho y alto y luego dar ENTER

Para buscar ms controles, estos se pueden buscar por su categora

Para buscar datos, por categoras, hacer

click en la flecha

Ofimtica

Equipo de Docentes

Cibertec 2014-02
Si queremos agregar un men de navegacin, selecciona la categora NAVEGACION, tal como se
muestra.

Selecciona la categora Navegacion

para agregar un men de navegacin

Arrastre, desde el cuadro de herramientas, el control (Button bar) Barra de men, tal como se
muestra.

Arrastre el
control

Controles de
Navegacin

Ofimtica

Equipo de Docentes

Cibertec 2014-02
Una vez que lo sueltas, se edita el men bar. A continuacin escribimos la lista de los elementos,
los cuales se separan por una coma, tal como se muestra. Al finalizar presionar ENTER

Escribir la lista de opciones,

separados por una coma

Extienda el control a lo largo de la pgina, diseado el men se visualiza de esta forma

Extiende el men a lo
largo de la pgina

Ofimtica

Equipo de Docentes

Cibertec 2014-02
A continuacin termine el diseo del wireframe tal como se muestra

Al finalizar exportar el WireFrame, desde la opcin FILE, selecciona la opcin EXPORT en formato
PNG

Vamos a exportar el
wireframe en formato png

Ofimtica

Equipo de Docentes

Cibertec 2014-02
A continuacin el proyecto solicita el nombre del proyecto para descargarlo a tu pc.

Ofimtica

Equipo de Docentes