Cibertec 2014-02

Ofimática Equipo de Docentes

Trabajando con Mockingbird

Mockingbird es una herramienta en línea que hace que sea fácil para ti para crear, enlazar juntos,

vista previa, y compartir maquetas de su sitio web o aplicación.

Para ingresar al Mockingbird:

Desde la URL ingresamos la

siguiente dirección:

https://gomockingbird.com/

Cargando la página

MockingBird.

Hacer click para ingresar

Cibertec 2014-02

Ofimática Equipo de Docentes

IDE del MockingBird

Al cargar el aplicativo se visualiza el siguiente IDE, tal como se muestra

Para configurar la vista del wireframe en cuadrículas, desde la opción VIEW:

1. selecciona la opción Show grid

2. selecciona desde Show columns la opción 960gs (12 columns), para visualizar 12 columnas

en la cuadrícula

Página para el diseño del prototipo

Cuadro de herramientas

Barra de menú

1. Selecciona la opción Show grid

2. Selecciona desde Show columns la opción 960 gs (12 columnas)

Cibertec 2014-02

Ofimática Equipo de Docentes

Para iniciar un nuevo diseño, selecciona, desde la opción FILE, la opción New, tal como se muestra

Para la búsqueda de un control, escriba en la opción WIDGET, las iniciales del nombre del control,

y el buscador mostrará los controles que coincidan con la búsqueda, tal como se muestra en la

figura.

Para iniciar un nuevo diseño

Búsqueda de controles

Control

Cibertec 2014-02

Ofimática Equipo de Docentes

Para colocar un control a la grilla del wireframe, debemos arrastrarlo a la página.

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

Para buscar más controles, estos se pueden buscar por su categoría

Control arrastrado desde el cuadro de

herramientas

Escriba ancho y alto y luego dar ENTER

Para buscar datos, por categorías, hacer click en la flecha

Cibertec 2014-02

Ofimática Equipo de Docentes

Si queremos agregar un menú de navegación, selecciona la categoría NAVEGACION, tal como se

muestra.

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

muestra.

Selecciona la categoría “Navegacion” para agregar un menú de navegación

Controles de Navegación

Arrastre el control

Cibertec 2014-02

Ofimática Equipo de Docentes

Una vez que lo sueltas, se edita el menú bar. A continuación escribimos la lista de los elementos,

los cuales se separan por una coma, tal como se muestra. Al finalizar presionar ENTER

Extienda el control a lo largo de la página, diseñado el menú se visualiza de esta forma

Escribir la lista de opciones, separados por una coma

Extiende el menú a lo largo de la página

Cibertec 2014-02

Ofimática Equipo de Docentes

A continuación termine el diseño del wireframe tal como se muestra

Al finalizar exportar el WireFrame, desde la opción FILE, selecciona la opción EXPORT en formato

PNG

Vamos a exportar el wireframe en formato png

Cibertec 2014-02

Ofimática Equipo de Docentes

A continuación el proyecto solicita el nombre del proyecto para descargarlo a tu pc.