Tercer Informe Ingeniera de Software II

3 Etapa de diseo Diseo de Interfaz

Sistema alimentador remoto para el control de porciones y horarios de

alimentacin de mascotas, basado en el Raspberry Pi. (SARpi)

Objetivo General

Desarrollar un sistema alimentador remoto para el control de porciones y horarios de

alimentacin de mascotas.

Objetivos Especficos

Hacer el wireframe de las interfaces principales y como estas estarn relacionadas.

Elegir un software de diseo de interfaz de usuario para la construccin de los
diseos de las interfaces.
Disear las interfaces de entrada y salida del sistema alimentador de mascotas.

Paula Cristina Velez Rincon

Ing. Software II
Wireframe a Mano

El wireframe de SARpi esquematiza algunas de las interfaces

Wireframe FluidUI

Wireframe realizado en FluidUI

Paula Cristina Velez Rincon

Ing. Software II
Diseo de Interfaces

SARpi es una aplicacin con pocas interfaces ya que sus funcionalidades son especficas,
pero con la idea de ampliarlas en el futuro, a continuacin la explicacin de algunas de
las interfaces ms significativas de SARpi, con un diseo Mobile First por lo cual los diseos
a continuacin ser la versin mobile.

1. Login a la aplicacin web de SARpi

Para ingresar al alimentador se necesita la ip publica

del Raspberry Pi para ingresar a la aplicacin es
necesario un login inicial para autentificar a los
usuarios, e impedir que extraos ingresen a la
aplicacin.

2. Pgina Inicial de SARpi

En esta interfaz, se reflejan las funcionalidades de

SARpi; por un lado, usando el botn de Feed Me! Se
alimenta inmediatamente a la mascota y el
alimentador se mantiene abierto mientras se mantenga
presionado el botn, el cual mostrara un timer para
indicarle al usuario el tiempo que lleva abierto y as
este puede controlar la porcin.

Tambin est el botn de SCHEDULE, este guiara al

usuario hacia la interfaz donde puede programar los
horarios de alimentacin de la mascota.

Y por ltimo se muestran los horarios programados en

el da.

Paula Cristina Velez Rincon

Ing. Software II
3. Calendario de Programacin

El calendario marcara los das con horarios

programados, los cuales identificaran al da
resaltndolos en un color azul.

En la parte inferior mostrara el da seleccionado y si

este ya tiene programado el horario, es posible tanto
agregar como editar los horarios desde esta interfaz
por medio del botn Programas

4. Programacin de Horarios

En el da seleccionado se agregaran los horarios

deseados, ingresando una descripcin corta del
horario, la porcin en segundos o minutos de acuerdo
al usuario y luego se agregaran las horas de
alimentacin las cuales estn separadas en
intervalos de 15 minutos; se pueden agregar tantas
horas como desee el usuario.

Paula Cristina Velez Rincon

Ing. Software II
5. Calendario de programacin con horarios

Si en el da seleccionado se encuentran programados

horarios, en la parte inferior se mostraran con
detalles haciendo posible deshabilitarlos por medio
del switch o editarlos por medio del botn
programar que lo redirigir a la interfaz de
programacin para editar la informacin ingresada
anteriormente.

6. Perfil del Usuario

A este se ingresa por medio de la foto de usuario en

la parte superior de la aplicacin, en esta se
mostraran la informacin de la mascota (Foto,
nombre, tipo) y el nombre del usuario que est
conectado actualmente.

Desde esta interfaz se cierra la sesin (Log Out)

Paula Cristina Velez Rincon

Ing. Software II
Criterios de actualizacin

Para ayudar al diseo de las interfaces de SARpi, se us una aplicacin web que
gratuitamente te permite utilizar las funciones necesarias para la construccin de las
interfaces y te permite relacionarlas, y al final te permite obtener una simulacin de la
interaccin entre los mockups, la cual en este caso se puede acceder por medio del
siguiente link:

https://www.fluidui.com/editor/live/preview/p_0xTcZlqfGubg0sPGwE6lVFQmTO9Kdxgx
.1400807512022

Fluid UI es una aplicacin web para hacer wireframes y prototipado, desarrollado por Fluid
Software y se utiliza para disear interfaces tctiles mviles; lo cual la hace perfecta para
comenzar el primer diseo de la aplicacin, ya que esta ser multidispositivo debe
adaptarse bien a los diferentes display, y como se est utilizando la tcnica de mobile
first, Fluid UI ayuda a realizar el wireframe inicial.

Conclusiones

La aplicacin encargada para la programacin y manejo de horarios de alimentacin de

SARpi, es una aplicacin que aunque no requiere de muchas interfaces de usuario, ya que
su poder est radicado en la programacin de los horarios a distancia para manejar el
alimentador de mascotas en casa, lo cual hace necesario de la verificacin de los datos
de entrada para la programacin de usuarios, ya que estos son la materia prima para el
funcionamiento de todo el sistema.

Por otra parte el funcionamiento de las interfaces de SARpi, se puede relacionar con el de
una alarma, o un calendario con recordatorios, por esta razn la aplicacin de SARpi se
asemeja mucho al diseo de un calendario con recordatorios, que nicamente maneja
horarios, los cuales activan una alarma para que el alimentador arroje la porcin de la
mascota.

A partir del primer diseo en mobiles este se ira expediento dependiendo del dispositivo
y se ajustara adecuadamente al display del usuario, permitindole navegar cmodamente
desde cualquier dispositivo con acceso a internet.

Paula Cristina Velez Rincon

Ing. Software II