Desarrollo de Sistemas Interactivos

Revisión del 19:11 19 may 2018 de Librebot (discusión | contribuciones) (Robot: adición de categoría «Asignatura»)

DESARROLLO DE SISTEMAS INTERACTIVOS


En esta asignatura nos enseñaran a hacer prototipos de aplicaciones, la aplicación que utilizamos es mybalsamic, para no tener que usar un software privado, el software open source que hemos escogido es Pencil. La compañía que lo ha desarrollado es Evolus: http://www.evolus.vn/Default.html

El seguimiento del proyecto podemos encontrarlo en: https://github.com/evolus/pencil

Pencil


Descripción del programa

El uso principal que le vamos a dar, es la creación de mockups interactivos para la simulación de una aplicación en un dispositivos móvil o tablet. En él podemos encontrar todos los componentes que utilizamos en las interfaces de los programas actuales. También los marcos de móviles y tablets.

Requisitos de hardware

Estos requisitos son para un sistema windows xp.

Se recomienda: Procesador: 2.4 GHz Pentium IV || Memoria: 512 MB RAM || espacio libre en el disco: 32MB

En cualquier ordenador con un sistema operativo más nuevo debería funcionar a la perfección.

Guía de instalación

Necesitaremos entrar en la página web de la herramienta para descargar la versión que necesitamos para nuestro SO. URL: http://pencil.evolus.vn/Downloads.html DSI Captura.png


Windows 10


Tras la descarga lo ejecutamos, aceptamos los términos de uso y después seleccionamos donde queremos instalar el programa.

DSI Captura1.png

Después de esto solo necesitamos ejecutarlo.

Ubuntu 16.04


Para la versión de ubuntu que es el sistema operativo que hemos elegido para la distribución de linux, tendremos que descargar la versión señalada a continuación:

DSI Captura2.png

La versión evoluspencil_2.0.5_all.deb también es compatible con versiones anteriores.

A Continuación comprobamos donde se descargó el programa de instalación, en mi caso fue en Downloads.

Después ejecutamos el comando:

sudo dpkg -i evoluspencil_2.0.5_all.deb

DSI Captura3.png

Podemos buscar la aplicación para iniciarla y comprobar que se instaló satisfactoriamente.

DSI Captura4.png

Estructura del programa

Nos encontramos con esta vista en los dos sistemas operativos, este será el espacio de trabajo sobre el que iremos creando nuevas páginas o duplicando las que ya tenemos.

DSI Captura5.png

Manual de usuario

Para crear un nuevo proyecto o exportar e importar proyectos seleccionaremos Document y la opción que queramos.

DSI Captura6.PNG

Tras crear el nuevo proyecto añadiremos los componentes que queramos sobre el workspace arrastrandolos desde el panel de la izquierda, en este caso hemos escogido un móvil y una tablet android. Cada panel que añadimos tiene su propiedades según las cuales se nos permitirá cambiar unas cosas u otras.

DSI Captura7.PNG

Un ejemplo de iteración puede ser una búsqueda para la cual hemos creado la siguiente vista :

DSI Captura8.PNG

Tenemos que hacer un link en el panel de escribir para que este nos lleve a la nueva página de resultados.

DSI Captura9.PNG

De forma que cuando pulsemos sobre el panel de escribir(preferiblemente sobre el botón de search) nos llevará a este otro.

DSI Captura10.PNG

Después solo faltaría exportar el mockup y comprobar que los link estan bien.

Anexos


Source by albertoMarquez and AdriPanG

Licencia Creative Commons Esta obra está bajo una Licencia Creative Commons Atribución 4.0 Internacional