PROTOTIPO

INTERACTIVO

16/06/2014
Aplicacio n web para la venta de entradas y
combos para los cines utilizando co digo QR

Egsquiza Paulino Daniel
Jimnez Bazn Gerardo
Limachi Huali Julio
Matas Rayme Nataly Melissa
Morales Infantes Gianmarco
Morales Ramrez Claudia





Prototipo interactivo 2014-1

2




Tabla de contenido
1. Problema y solucin general. _____________________ 3
1.1 Descripcin del problema _____________________________________________ 3
1.2 Solucin propuesta ___________________________________________________ 3
2. Tareas. __________________________________________ 3
2.1 Comprar entradas ___________________________________________________ 3
2.2 Comprar combos ____________________________________________________ 3
2.3 Pagar ______________________________________________________________ 3
3. Revisin de la interfaz. _____________________________ 4
4. Vista general del prototipo. __________________________ 6
4.1 Herramientas usadas _________________________________________________ 6
4.2 Vista general de la IU que ha implementado ______________________________ 6
5. Volcado de las pantallas del prototipo. _________________ 7


Prototipo interactivo 2014-1

3


Aplicacio n web para la venta de
entradas y combos para los cines
utilizando co digo QR
1. Problema y solucin general.
1.1 Descripcin del problema
En la actualidad la compra de entradas en los cines principalmente se realiza de
manera presencial, esto origina grandes colas en las boleteras generando
insatisfaccin del cliente por el tiempo perdido.
1.2 Solucin propuesta
La solucin que proponemos es una aplicacin web, la cual es una forma fcil de
realizar las compras de entradas y productos (combos) en el cine, para as disminuir
el tiempo perdido en las colas como tambin poder consultar en cualquier momento
la cartelera del cine. Tambin se requerir una aplicacin mvil para validar la
compra realizada por el cliente, esta validacin es por parte del personal del cine.
La compra se realizara de la siguiente manera: El cliente llenara un formulario con
todo lo que desea comprar y al culminar el cliente deber imprimir el cdigo QR que
el sistema generara, de esta manera el cliente se acercara al cine y el personal
encargado validara el cdigo QR, con la ayuda de un dispositivo mvil, levantando
toda la informacin acerca de lo comprado por el cliente.
2. Tareas.
2.1 Comprar entradas
Es una tarea en la cual se le permitir al cliente comprar entradas eligiendo el local
del cine, la pelcula y el horario de su preferencia
2.2 Comprar combos
Es una tarea en la cual se le permitir al cliente visualizar los combos que el cine
ofrece para su respectiva compra, por defecto no es obligatorio que el cliente adquiera
un combo al comprar su entrada.
2.3 Pagar
Es una tarea en la cual se le permitir al cliente efectuar el pago de todo el monto
acumulado (entradas y combos). Se ha de efectuar el pago mediante el nmero de una
tarjeta de dbito/crdito.

Prototipo interactivo 2014-1

4


3. Revisin de la interfaz.

Prototipo de Alto nivel
Los colores de la interfaz cambiaron de azul a blanco para que el usuario tenga una
mejor distincin entre el fondo de la interfaz y las letras, el blanco permite lograr
mayores y mejores contrastes con las letras y el color de los botones.

Los botones atrs, borrar y siguiente, se cambiaron de posicin de la derecha al
centro, en la parte inferior de la interfaz, para que el usuario tenga una mayor
visualizacin de ellos.

En este prototipo hay una mayor consistencia que en la de bajo nivel y eso se puede
ver con los nombres de los botones atrs, borrar y siguiente a lo largo de las
interfaces.

Se hizo un mejor uso de las metforas, como por ejemplo los botones enviar,
imprimir y guardar de la interfaz pagar entradas cuando se muestra el cdigo QR.

A comparacin del prototipo de bajo nivel, el prototipo de alto nivel permite tener al
usuario una mayor navegabilidad.
Con el prototipo de alto nivel se pudo descubrir qu tipo de restricciones debe tener
la interfaz como por ejemplo no permitir que se ingresen nmeros cuando se solicite
ingresar nombre.

En ambos prototipos se hizo uso de un formato estndar con respecto a los nombres
de los botones y con respecto a otras pginas de cines para continuar con el modelo
mental de los usuarios.
Se utiliz un logotipo para llamar la atencin del usuario y que esta sea de agrado
para el

PROTOTIPO BAJO NIVEL PROTOTIPO ALTO NIVEL
Prototipo interactivo 2014-1

5













Prototipo interactivo 2014-1

6


4. Vista general del prototipo.

4.1 Herramientas usadas
Lenguaje PHP 5: PHP es uno de los lenguajes para web ms populares y que
ofrece mucha comodidad para programar, adems de tener un rendimiento
muy eficiente. Tambin tiene muchas libreras y funciones disponibles en
internet.
HTML 5: Usamos la quinta versin de HTML por sus nuevas funcionalidades,
especialmente en las restricciones y creacin de formularios.
IDE SUBLIME: Es un editor de texto y editor de cdigo fuente. Para desarrollar
la aplicacin nos ayud por su versatilidad y mltiples opciones de bsqueda y
agrupacin de fragmentos de cdigo.
MYSQL5.6: Base de datos muy ligera, preferimos usar mysql por ser muy gil y
fcil de utilizar.
Workbench: es una herramienta visual de diseo de bases de datos que
integra desarrollo de software, Administracin de bases de datos, diseo de
bases de datos, creacin y mantenimiento para el sistema de base de datos
MySQL.

4.2 Vista general de la IU que ha implementado

Prototipo interactivo 2014-1

7


5. Volcado de las pantallas del prototipo.



Prototipo interactivo 2014-1

8




Prototipo interactivo 2014-1

9







Prototipo interactivo 2014-1

10



Restricciones en la aplicacin:
Hacer clic en Siguiente y no haber llenado el/los campos.

Validar restriccin del formato del correo.

Validar restriccin del formato del DNI.

Prototipo interactivo 2014-1

11



Validar restriccin del nmero de tarjeta.