Desarrollo de Sistemas Interactivos

DESARROLLO DE SISTEMAS INTERACTIVOS[editar | editar código]


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[editar | editar código]


Descripción del programa[editar | editar código]

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[editar | editar código]

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[editar | editar código]

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[editar | editar código]


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[editar | editar código]


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[editar | editar código]

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[editar | editar código]

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[editar | editar código]


Source by albertoMarquez and AdriPanG

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