- Unefa Ecolgica Johann 1

Revista

Unefa Ecolgica

2015

Unefa - Maracay

Autores:

Oscar Bolaos

Gregory Bello

Engelbert Miranda

Carlos Ruiz

Luis Domacase

Martes 30 de marzo 2015

Conozca el Diseo de la

Interfaz Grfica del

Proyecto:

SAR 1.0 (Sistema

Automatizado de Riego).

- Unefa Ecolgica Johann 2

Contenido

Nuestro equipo .................................................................................................................................................. 3

Qu es el SAR 1.0 .............................................................................................................................................. 4

Los colores elegidos ........................................................................................................................................... 5

La fuente (Tipo de Letra) .................................................................................................................................... 7

La pantalla de inicio de sesin ............................................................................................................................ 8

La pantalla de bienvenida ................................................................................................................................. 10

Banner y Men ................................................................................................................................................. 11

Paneles de informacin y accesos directos ...................................................................................................... 13

Logo y pie del sistema ...................................................................................................................................... 14

Listas ................................................................................................................................................................ 15

Formularios ...................................................................................................................................................... 16

Alertas .............................................................................................................................................................. 17

Otros elementos de retroalimentacin ............................................................................................................ 18

Despedida ........................................................................................................................................................ 19

Unefa Ecolgica

- Unefa Ecolgica Johann 3

Nuestro equipo

osotros, el grupo de

Sistema de Riego

Automatizado,

conformado por Luis

Domacase, Carlos Ruiz, Oscar

Bolaos, Engelbert Miranda y

Gregory Bello tenemos el

agrado de presentarles

nuestro Diseo de Interfaz

Grfica del denominado

proyecto SAR 1.0 (Sistema

Automatizado de Riego,

Versin 1.0).

Plantearemos las razones que

nos han llevado a escoger el

diseo de interfaz que

presentaremos a continuacin

y mostraremos mediante

imgenes algunas de las

pantallas principales del

mencionado proyecto.

N

- Unefa Ecolgica Johann 4

l Sistema Automatizado

de Riego (SAR 1.0), es un

proyecto constituido por

un conjunto de dispositivos y

software que llevarn a cabo

la tarea de irrigar con agua las

zonas verdes de la UNEFA,

manteniendo as la armona

con la naturaleza que

conforma uno de los factores

fundamentales de nuestra

casa de estudios.

Nuestro norte es brindar a los

usuarios encargados del

mantenimiento de las reas

verdes una herramienta

integral que no slo

automatice el proceso de

irrigacin, sino que tambin

gestione el llenado y/o

vaciado de tanques, la

generacin de reportes de -

operaciones realizadas, la

evolucin de plantados, el

suministro de informacin

como el estado del suelo y/o

del clima, temperatura y

humedad y alertas en casos

crticos como sequas o lluvias

torrenciales.

Prestando la posibilidad de

acceder desde cualquier

ubicacin geogrfica, su

interfaz grfica tiene como

fuerte la capacidad de

adaptarse a distintos equipos

como computadoras de

escritorio, porttiles, mviles y

tablets. Esta singularidad

provee una ventaja por sobre

otros sistemas, acompaado

por supuesto con medidas de

seguridad para el acceso de

los usuarios y bases de datos.

E Qu es el SAR 1.0?

- Unefa Ecolgica Johann 5

uando se crea un sistema,

la eleccin de los colores es

una tarea delicada, a pesar

de parecer fcil. Seleccionar una

correcta paleta cromtica es

importante para comunicar

eficazmente el mensaje, crear

conciencia de marca y alcanzar a

nuestra audiencia.

Los investigadores

coinciden en que

los colores

producen

sensaciones que

la mente humana

interpreta.

El esquema de colores que utiliza

nuestro sistema puede ser una

herramienta muy eficaz para

lograr que sus usuarios se sientan

cmodos e interacten con l

satisfactoriamente.

Asimismo una

paleta de

colores

errnea puede

hacer que el

usuario no

permanezca en el sistema ni

siquiera unos segundos.

A pesar de que no somos muy

conscientes de esto cuando

ingresamos a un sistema, los

colores -junto al contenido y los

otros elementos visuales- son los

que determinan si nos quedamos

o nos vamos.

En nuestro sistema hemos

decidido utilizar los colores azul y

blanco principalmente por los

siguientes motivos:

1. El azul es el color de la

inspiracin y la espiritualidad;

transmite tranquilidad, estabilidad,

C Los colores elegidos

- Unefa Ecolgica Johann 6

lealtad, confianza, sabidura y

eternidad. El azul es el color con

ms variedades, as, el azul claro

se refiere a la generosidad, salud y

frescura, mientras el azul marino

representa el conocimiento, la

integridad y el poder.

2. La razn de mayor peso es que

los colores predominantes en

nuestra casa de estudios UNEFA

son el azul y el blanco. El banner

del sistema contiene el escudo de

la UNEFA, la bandera de

Venezuela encima de una foto de

una de las playas de nuestro

litoral caribeo y una foto de la

sede principal ubicada en Caracas.

3. Ciertamente el sistema tuvo

una razn de peso para que su

color predominante fuese el verde,

pues el sistema contribuye

ecolgicamente con el bienestar

de las reas verdes de nuestro

campus, sin embargo nos dimos a

la tarea de disear un logo (lo

describiremos ms

adelante) de color

verde el cual quisimos

contrastar con el

resto del sistema.

Fueron estas las 3 razones

principales por las cuales dimos

preferencia al color azul, pero a

pesar de esta decisin

consideramos que algunos

usuarios preferiran el verde por

tratarse del color que menos

causa cansancio a la vista, el azul

es el segundo en ese orden y

adems transmite serenidad. Nos

planteamos entonces la

posibilidad de seleccionar un tema

en la configuracin del sistema,

pero no es algo primordial y lo

dejaremos para la posteridad.

- Unefa Ecolgica Johann 7

a eleccin de la tipografa

suele ser complicada, dada

la importancia de la misma a

la hora de realizar un proyecto de

desarrollo. Esto es por dos

factores principales, por una parte

hay un gran abanico de

posibilidades entre los que elegir,

lo que dificulta la eleccin y por

otra parte, hay que efectuar un

compendio entre la belleza (dar

un toque tipogrfico distinto de lo

normal, incluyendo tipografas

ms novedosas y actuales) y la

legibilidad (porque como veremos,

no podemos olvidar, que el uso de

la tipografa solo es el transporte

para trasladar un mensaje). Si bien

no hay reglas fciles de seguir

sobre cmo elegir el mejor tipo de

letra, hay muchos principios

probados y verdaderos donde

aprender y aplicar para hacer una

adecuada eleccin de tipo de letra.

Es por ello que nos hemos

propuesto para la eleccin del tipo

de letra alcanzar una buena

combinacin de: legibilidad y

facilidad de lectura y decidimos

entonces seleccionar el tipo de

fuente Raleway.

Raleway es una elegante familia

tipogrfica sans-serif. Inicialmente

diseada por Matt McInerney con

un slo peso, se ampli en una

familia de 9 pesos por Pablo

Impallari y Rodrigo Fuenzalida en

2012 y iKerned por Igino Marini.

Su visualizacin ofrece tanto estilo

y revestimiento convencionales,

nmeros y caracteres estndar y

discrecionales, un conjunto

bastante completo de los signos

diacrticos, as como una

alternativa estilstica inspirada en

ms tipos de letra sans-serif

geomtricas.

L

La Fuente (Tipo de Letra)

- Unefa Ecolgica Johann 8

a pantalla de inicio de sesin, por ser la primera interfaz con la que

interacta el usuario, ha sido diseada con un formulario simple,

semitransparente ubicado en medio de la pantalla y con un fondo

traslativo que contiene una serie de fotos de nuestra universidad. La idea

es inducir a los usuarios a relacionarse con algo tan familiar como lo es

nuestro campus universitario. La caracterstica traslativa de las imgenes

adems de dotarla de esteticidad, ha sido pensada con el fin de funcionar

como un protector de pantalla, es bien sabido que una imagen fija en el

monitor tiende a quemar los pxeles que se quedan encendidos por

muchas horas. A continuacin una foto de la mencionada pantalla:

L La Pantalla de Inicio de Sesin

- Unefa Ecolgica Johann 9

omo se puede observar en esta toma, hemos brindado un link para

el restablecimiento de la contrasea en caso de olvido y hemos

suministrado un correo para facilitar la comunicacin con el

administrador del sistema.

C

- Unefa Ecolgica Johann 10

n esta pantalla observamos al administrador del sistema

autenticado. El tendr acceso a todas las funciones, opciones de

configuracin y reportes. Podemos observar lo que ser la segunda

pantalla que ver el usuario luego de autenticarse.

E La Pantalla de Bienvenida

- Unefa Ecolgica Johann 11

l banner como lo mencionamos anteriormente, est diseado con el

escudo y nombre de nuestra casa de estudios UNEFA a la izquierda,

desde el centro a la derecha tenemos la bandera de Venezuela

sobre una foto de una playa de nuestro litoral como fondo y a la extrema

derecha una foto de la sede principal y la frase: Excelencia Educativa.

Unido al banner se encuentra el men con opciones desplegables cuyos

ttulos se encuentran en letra blanca y una barra de fondo azul. A

continuacin las opciones de cada ttulo:

Catlogos:

Es aqu donde irn los almacenes de datos: Usuario, Plantas y Tanques.

Procesos:

Aqu se listarn las funciones principales como el riego de las plantas, el

llenado y vaciado de tanques y el vertido de fertilizante sobre el agua.

E Banner y Men

- Unefa Ecolgica Johann 12

Reportes:

Se acceder a los reportes del sistema como historial de operaciones

realizadas, reporte climtico, niveles de humedad por bulbo y a la bitcora

desde este men.

Configuracin:

Las opciones de configuracin del sistema como parmetros, permisologa

de grupos de usuarios y mantenimiento, se accedern desde este men.

Opciones de Usuario:

El usuario podr actualizar sus datos desde este men al igual que cerrar la

sesin del sistema, de tal manera que la prxima vez que desea ingresar

deber ingresar su nombre de usuario y contrasea nuevamente.

- Unefa Ecolgica Johann 13

ara facilitar la interaccin a los usuarios se coloc en la pantalla de

bienvenida 2 paneles laterales (izquierdo y derecho), a la izquierda

se presenta informacin necesaria respecto a la condicin

ambiental como humedad y temperatura y la cantidad de agua disponible

en los tanques. En el panel derecho se establecieron accesos directos a las

funciones principales. De esta manera el usuario acceder con un solo clic,

en vez de dos, como ocurrira si accediera desde el men.

Panel Izquierdo: Panel Derecho: Informacin sobre las condiciones climticas. Catlogos principales Y estado de los tanques.

Reportes principales.

P Paneles de informacin y acceso directo

- Unefa Ecolgica Johann 14

omo lo comentamos anteriormente decidimos crear un icono

personalizado para nuestro sistema, el cual est constituido por la

letra U con una planta en crecimiento. La letra U es la inicial de

Unefa y la planta en crecimiento sugiere metafricamente que nuestra

casa de estudios es un frtil semillero de formacin.

Identificamos al sistema como SAR 1.0, las iniciales de Sistema de Riego

Automatizado y 1.0 es la versin inicial con la que saldr el sistema al

ambiente de produccin.

Panel Izquierdo:

El pi de pgina (footer), informa la condicin legal del sistema, el ao de

creacin y el propietario.

C Logo y pie del sistema

- Unefa Ecolgica Johann 15

as listas de catlogos del sistema, sern presentadas mediante una

tabla sencilla, ligera, que mostrar los datos ms importantes de

cada elemento y presentar en su ltima columna un conjunto de

acciones como editar o eliminar, presentadas mediante iconos simples e

intuitivos. El botn nuevo ubicado el parte superior derecha de la lista

activar un formulario para aadir un nuevo usuario.

L Listas

- Unefa Ecolgica Johann 16

os formularios tambin sern presentados de forma simple e

intuitiva. Al final se ofrecen dos botones, uno de cancelar que

redireccionar a la lista nuevamente y el botn guardar, el cual

validar en primer lugar si fueron llenados los campos de carcter

obligatorio y con el formato solicitado y en caso de ser vlido proceder a

gestionar el guardado de datos. Ms adelante presentaremos informacin

respecto a las validaciones y los mensajes de retroalimentacin.

L Formularios

- Unefa Ecolgica Johann 17

as alertas sern mensajes que informarn al usuario las

consecuencias de sus acciones en el sistema y estn clasificados en 4

tipos:

Advertencias: (Color naranja)

Mensaje de xito: (Color verde)

Errores: (Color rojo)

Mensaje de informacin: (Color azul)

L Alertas

- Unefa Ecolgica Johann 18

e igual manera se realizarn validaciones las cuales sern

presentadas al usuario para indicarle si falta algn dato o est mal

suministrado en un formato o parmetros incorrectos.

Validaciones de campo:

Barras de progreso:

En los casos que se requiera una consulta de datos grande o masiva, el

sistema tomar tiempo en devolver una respuesta de manera que deber

informar al usuario que se encuentra tramitando su consulta y debe

esperar que se complete la barra de progreso para poder obtener su

respuesta.

Ventanas de confirmacin (pop ups):

Estas ventanitas te pedirn una

confirmacin en caso de una accin

que pueda significar una alteracin

crtica al sistema. Este paso previo

puede evitar un accidente al querer

por ejemplo eliminar un usuario y haber seleccionado al equivocado, ya

que te obliga a revisar nuevamente.

D Otros elementos de retroalimentacin

- Unefa Ecolgica Johann 19

Oncluimos as nuestra primera entrega informativa sobre el

proyecto SAR 1.0. Esperamos haya sido de tu agrado y sera un

placer para nosotros recibir tus comentarios o crticas constructivas

para mejorar este sistema.

Hasta la prxima!

C Esperamos te haya gustado!