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