316 lines
15 KiB
HTML
316 lines
15 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Práctica 1 - Sistemas Web | Grupo D
|
|
CompluCine - FDI-cines
|
|
-->
|
|
<html lang="es">
|
|
<head>
|
|
<title>CompluCine | Bocetos</title>
|
|
<meta charset="utf-8" />
|
|
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="../img/favicon.png" />
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Bocetos
|
|
<div class="menu">
|
|
<a href="/">Inicio |</a>
|
|
<a href="../detalles/">Detalles |</a>
|
|
<a href="#">Bocetos |</a>
|
|
<a href="../miembros/">Miembros |</a>
|
|
<a href="../planificacion/">Planificación |</a>
|
|
<a href="../contacto/">Contacto</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main -->
|
|
<div class="main">
|
|
<div class="image"><img src="../img/logo_trasparente.png" /></div>
|
|
<h1>Bocetos</h1>
|
|
<hr />
|
|
</div>
|
|
|
|
<!-- Flow -->
|
|
<div class="code">
|
|
<h2>FLUJO DE NAVEGACIÓN</h2>
|
|
<hr>
|
|
<!-- User Flow -->
|
|
<fieldset>
|
|
<legend>Usuario</legend>
|
|
<p>
|
|
El Usuario puede tomar dos caminos a la hora de seleccionar la película, el cine, y la sesión a la que quiere asistir. La diferencia es puramente
|
|
de orden entre la elección de cine y de la película, a conveniencia del usuario; se procede a explicar ambos:
|
|
</p>
|
|
<p>
|
|
1. Selección de Cine -> Selección de Película -> Selección de Sesión -> Reserva de Butacas -> Checkout: Primero se selecciona el cine en la vista de selección
|
|
de cines en la que se encuentra un mapa y una lista con los cines de la cadena. Una vez seleccionado el cine se redirigirá al usuario a la vista de selección
|
|
de película, con el filtro del cine correspondiente activado, de forma que solo se muestren las películas disponibles en el cine seleccionado. En esa vista se
|
|
eligirá la película y la versión a ver (VO, 3D, 4DX, etc).
|
|
</p>
|
|
<p>
|
|
Una vez elegida la película, se redirigirá al usuario a la elección de sesión. Se mostrarán todas las sesiones disponibles y el usuario podrá elegir la sesión y
|
|
el número de entradas que quiere reservar, pudiendo ver el precio final de las mismas. Se le llevará a la vista de butacas en donde podrá elegir qué butacas reservar.
|
|
</p>
|
|
<p>
|
|
Una vez elegidas las butacas, el usuario procede a la página de pago, en donde rellenará los datos necesarios para pagar online. Terminada la compra con éxito, se
|
|
mostrará una pantalla de "Compra Realizada", dando al usuario la seguridad de que su reserva se ha registrado correctamente. Luego se le redirigirá a la pantalla de
|
|
inicio.
|
|
</p>
|
|
<p>
|
|
2. Selección de Película -> Selección de Cine -> Selección de Sesión -> Reserva de Butacas -> Checkout: Es idéntico al flujo anterior pero el usuario empieza eligiendo
|
|
la película, de forma que se le redirige a la vista de selección de cine, esta vez con un filtro, de forma que solo se muestran los cines que tengan sesiones activas
|
|
con la película seleccionada.
|
|
</p>
|
|
<p>
|
|
Una vez elegidos película y cine, el flujo es idéntico al anterior.
|
|
</p>
|
|
</fieldset>
|
|
<!-- Manager Flow -->
|
|
<fieldset>
|
|
<legend>Gerente</legend>
|
|
<p>
|
|
El Gerente es el encargado de gestionar las sesiones y salas de cada cine. La forma de proceder es la misma que el administrador, con vistas equivalentes.
|
|
En el caso de la gestión de salas, se administrarán los asientos disponibles (por temas de Covid-19) y si está o no habilitada para su uso.
|
|
</p>
|
|
</fieldset>
|
|
<!-- Admin Flow -->
|
|
<fieldset>
|
|
<legend>Administrador</legend>
|
|
<p>El Administrador es el encargado de gestionar las: películas, cines, promociones, otros administradores y gerentes de cada cine.</p>
|
|
<p>Para cada categoría tiene un panel en el que puede seleccionar, a partir de una lista, el elemento que quiere modificar, también hay otro panel al lado, en donde
|
|
puede modificar los datos de un elemento ya existente o crear uno nuevo introduciendo datos que no existan en la BD. También hay una opción de Eliminar en caso de que
|
|
quiera eliminar un elemento.</p>
|
|
<p>También cuenta con un botón de "Vista de Usuario", con el que puede navegar por la página con la vista que tendrá el usuario final.</p>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Sketches -->
|
|
<section id="sketches">
|
|
<hr />
|
|
<!-- Generic Sketches-->
|
|
<div class="code">
|
|
<h3>Pantallas Genéricas</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/inicio.png" />
|
|
<div class="description">
|
|
<h3>Pantalla de inicio</h3>
|
|
<p>Pantalla de bienvenida al entrar en la web.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/registrarse_iniciar_sesion.png" />
|
|
<div class="description">
|
|
<h3>Pantalla de Registro / Inicio de sesión</h3>
|
|
<p>pantalla para que un usuario nuevo se registre o, en caso de ya tener una cuenta de usuario, inicie sesión.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/menu_usuario.png" />
|
|
<div class="description">
|
|
<h3>Menú de usuario registrado</h3>
|
|
<p>Pantalla con todas las opciones disponibles, propias de un usuario registrado.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/peliculas.png" />
|
|
<div class="description">
|
|
<h3>Cartelera</h3>
|
|
<p>Pantalla con información sobre todas las películas disponibles en ese momento.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/cine.png" />
|
|
<div class="description">
|
|
<h3>Cines</h3>
|
|
<p>Pantalla con un mapa que indica la geolocalización de todos los cines de FDI-Cines.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/selector_horario.png" />
|
|
<div class="description">
|
|
<h3>Selección de Horario</h3>
|
|
<p>Pantalla que muestra los horarios disponibles por salas para un cine y película elegidos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/mapa_asientos.png" />
|
|
<div class="description">
|
|
<h3>Mapa de los Asientos</h3>
|
|
<p>Pantalla con un mapa para selccionar los asientos que se quieren escoger. Los asientos ocupados no pondrán ser seleccionados.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/pagar.png" />
|
|
<div class="description">
|
|
<h3>Pagar</h3>
|
|
<p>Pantalla para realizar el pago, después de haber selecionado película, cine, sala, horario y butacas.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/compra_realizada.png" />
|
|
<div class="description">
|
|
<h3>Compra Realizada</h3>
|
|
<p>Pantalla de confirmación con los datos de compra.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/about_us.png" />
|
|
<div class="description">
|
|
<h3>Sobre nosotros</h3>
|
|
<p>Pantalla con información sobre FDI-Cines.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/contacto.png" />
|
|
<div class="description">
|
|
<h3>Formulario de Contacto</h3>
|
|
<p>Pantalla con un formulario para realizar una consulta a los administradores.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/terminos_y_condiciones.png" />
|
|
<div class="description">
|
|
<h3>Términos y Condiciones</h3>
|
|
<p>Pantalla con todos los términos y condiciones de uso del servicio.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manager Sketches-->
|
|
<div class="code">
|
|
<h3>Pantallas de Gerentes</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column side">
|
|
<div class="sketches">
|
|
<img src="../img/panel_inicio_gerente.png" />
|
|
<div class="description">
|
|
<h3>Panel de Incio Gerente</h3>
|
|
<p>Pantalla con las funciones exclusivas a las que puede acceder un Gerente.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column middle">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_salas.png" />
|
|
<div class="description">
|
|
<h3>Gestionar salas</h3>
|
|
<p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar la sala de un cine.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column side">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_sesiones.png" />
|
|
<div class="description">
|
|
<h3>Gestionar Sesiones</h3>
|
|
<p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar las sesiones de una película.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Sketches-->
|
|
<div class="code">
|
|
<h3>Pantallas de Administradores</h3>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column left">
|
|
<div class="sketches">
|
|
<img src="../img/panel_inicio_admin.png" />
|
|
<div class="description">
|
|
<h3>Panel Inicio Administrador</h3>
|
|
<p>Pantalla con las funciones exclusivas a las que puede acceder un Administrador.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column right">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_peliculas.png" />
|
|
<div class="description">
|
|
<h3>Gestionar Películas</h3>
|
|
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las películas de la cartelera.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column side">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_cines.png" />
|
|
<div class="description">
|
|
<h3>Gestionar Cines</h3>
|
|
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar los cines.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column middle">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_promociones.png" />
|
|
<div class="description">
|
|
<h3>Gestionar Promociones</h3>
|
|
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las promociones existentes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column side">
|
|
<div class="sketches">
|
|
<img src="../img/gestionar_admins_gerentes.png" />
|
|
<div class="description">
|
|
<h3>Gestionar Administradores y Gerentes</h3>
|
|
<p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar tanto otros Administradores como Gerentes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="footer">
|
|
<p>© Práctica 1 | Sistemas Web 2021 </p>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|