Tutorial MarvelApp-PCW

ÂĄHola!

JĂłvenes :) Por si acaso, se genera alguna duda con respecto a la plataforma MarvelAPP, he decidido realizar este tutorial paso a paso, si tienen alguna duda escrĂ­banme al: tania.dominguez@udb.edu.sv y con mucho gusto les puedo ayudar.

PASO #1 Registrar...

Visitar la pรกgina https://marvelapp.com y en la parte superior, buscar el botรณn Sign up FREE el registro es totalmente gratuito, pero como toda plataforma freemium algunos servicios mรกs especializados o avanzados tienen un costo.

LLenar el formulario, te pide poco datos y al final... Esto no estoy muy segura, no lo recuerdo, ya que me registre hace mucho tiempo... Pero te pide validar tu cuenta por medio del correo.

Y listo, ya pueden ingresar.

PASO #2 Crear proyecto...

En la pantalla de inicio, buscamos el botón Create Project si se dieron cuenta, no especifique las medidas de las pantallas, ¿Por qué? dentro de la plataforma, ustedes seleccionan el dispositivo y abajo está la medida. En base a ello, diseñan sus pantallas...

750px

1334px

Como ya sabemos siempre la primera medida es la anchura y luego la altura... Además disculpen el gráfico con las medidas, pero lo mio nunca fue el dibujo técnico jajaja :)

PASO #3 Agregar imágenes...

Una vez más, van a regresar a la pantalla de inicio, buscamos el botón +Add images y empezamos a cargar nuestras imágenes, la opción de Design sirve para diseñar wireframes o layout de la app, así que está es otra plataforma para diseñar una propuesta rápida de layout para nuestros clientes.

Al ponerse encima del botón +Add images, aparecen las distintas opciones para agregar imágenes... Ustedes decidan cual van escoger :)

Yo escogí la opción Computer, ¿Por qué? porque si y porque puedo ;) bromis... y busquen la carpeta de ubicación y lo mejor que podemos seleccionar todas las pantallas, dejamos que se carguen en la parte inferior y luego...

PASO #4 Editar imagen...

Si nos ponemos encima de las pantallas que agregamos, se pondrĂĄ un menĂş de opciones, pero nosotros vamos a seleccionar Edit se va abrir una nueva ventana...

En la siguiente pantalla, nos va permite vincular las diferentes pantallas, y funciona como los Mapas de zonas interactivas de Dreamweaver, en la siguiente pĂĄgina vamos a ver...

PASO #5 Vincular...

Solo seleccionamos el รกrea de imagen que va funcionar como botรณn y arrastramos.

Luego en la parte inferior se deplega las diferentes pantallas que previamente ustedes cargaron y escogen la que nos va llevar al darle click al botรณn.

Ademรกs acรก, si desean vincular a redes sociales, se pueden dirigir a: colocan el enlace: http://www.soyunaredsocial.com y listo.

y

PASO #6 Pruebas...

Dentro de la plataforma, en la parte superior hay 2 botones Play y Done si seleccionamos la opción Play nos permite ver el funcionamiento de lo que vinculamos, así que les sugiero hacer pruebas, pruebas y más pruebas del funcionamiento de su prototipo, si cuando llegan a una pantalla no hay manera de regresar es necesario modificar ese error... Y si al final todo funciona correctamente, estamos listos.

Listo!

Si seleccionamos la opción Done nos llevará a la ventana de inicio una vez más, para seguir vinculando cada pantalla y así hasta que terminemos el proyecto.

PASO #7 Compartir...

En la pantalla de inicio, vamos encontrar 4 opciones: Settings (Cambiar medida del proyecto, seguridad y otras cosas más..), Download, Play y Share. Si seleccionamos Share, podemos generar un vinculo para compartir, o generar una campañar de mailing, entre otras opciones.

Si seleccionamos Download, podemos descargar el prototipo.

Perooooooo, como ya saben nuestra pobreza... Nunca nos suelta, así que acá necesita tener un plan de pago :(

#SomosPobres