Cambios en bocetos

This commit is contained in:
Fernando Méndez 2021-03-16 19:41:58 +01:00 committed by GitHub
parent 7e95cb209d
commit 74f77f0034
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 340 additions and 356 deletions

View File

@ -16,7 +16,7 @@ h1, h2, h3, h4 {
}
h2 {
font-size: 90%;
font-size: 95%;
}
h3 {
@ -215,7 +215,7 @@ table a{
height: 750px;
}
.code.plan {
height: 1050px;
height: 1150px;
}
.blockquote {
@ -237,6 +237,7 @@ table a{
overflow-x: auto;
background: #1f2c3d;
border-radius: 3px;
height: 680px;
}
.sketches h1 {
color: #dadada;
@ -284,6 +285,9 @@ table a{
.bar.fifty {
width: 50%;
}
.bar.twentyfive {
width: 25%;
}
/* Form */

View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
@ -29,13 +29,14 @@
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Bocetos</h1>
<hr />
</div>
<!-- Flujo de Navegacion -->
<!-- Flow -->
<div class="code">
<h1>FLUJO DE NAVEGACION</h1>
<h2>FLUJO DE NAVEGACIÓN</h2>
<hr>
<div class="blockquote">
<!-- Usuario -->
<!-- User Flow -->
<fieldset>
<legend>Usuario</legend>
<p>
@ -66,7 +67,15 @@
Una vez elegidos película y cine, el flujo es idéntico al anterior.
</p>
</fieldset>
<!-- Administrador -->
<!-- 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>
@ -75,278 +84,231 @@
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>
<!-- Gerente -->
<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>
</div>
</div>
<div class="row">
<!-- Boceto Inicio -->
<div class="column left">
<fieldset>
<legend>INICIAR SESIÓN</legend>
<div class="sketches">
<img src="../img/registrarse_iniciar_sesion.png" />
<div class="description">
<h4>~ REGISTRARSE/LOGIN ~</h4>
<p>En esta parte se podrá dar de alta o iniciar sesión.</p>
<!-- Sketches -->
<section id="sketches">
<hr />
<!-- Generic Sketches-->
<div class="code">
<h3>Pantallas Genéricas</h3>
</div>
</div>
</fieldset>
</div>
<!-- Boceto Menu Usuario -->
<div class="column left">
<fieldset>
<legend>MENU USUARIO REGISTRADO</legend>
<div class="sketches">
<img src="../img/menu_usuario.png" />
<div class="description">
<h4>~ MENU ~</h4>
<p>En esta zona de la página, el usuario registrado accede a su perfil con sus correspondientes opciones.</p>
</div>
</div>
</fieldset>
</div>
</div>
<br>
<!-- Bocetos Usuario -->
<fieldset>
<legend>VISTA USUARIO</legend>
<div class="row">
<div class="column left">
<!-- Pagina inicio -->
<div class="sketches">
<img src="../img/inicio.png" />
<div class="description">
<h4>~ PÁGINA DE INICIO ~</h4>
<h3>Pantalla de inicio</h3>
<p>Pantalla de bienvenida al entrar en la web.</p>
<p>Se mostrará los estrenos con sus sinopsis, las promociones disponibles y el último cine añadido.</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">
<!-- Peliculas -->
<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">
<h4>~ CARTELERA ~</h4>
<p>Mostrará todas las películas disponibles en base al filtro seleccionado (cine).</p>
<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">
<!-- Cines -->
<div class="sketches">
<img src="../img/cine.png" />
<div class="description">
<h4>~ CINES ~</h4>
<p>Mostrará todos los cines disponibles.</p>
<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 left">
<!-- Horario -->
<div class="column right">
<div class="sketches">
<img src="../img/selector_horario.png" />
<div class="description">
<h4>~ SELECTOR DE HORARIO ~</h4>
<p>Aquí se mostrará todos los horarios disponibles y salas de la película y cine seleccionada.</p>
<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">
<!-- Butacas -->
<div class="sketches">
<img src="../img/mapa_asientos.png" />
<div class="description">
<h4>~ SELECTOR DE BUTACAS ~</h4>
<p>Se mostrará los asientos que se van a seleccionar, ocupados y libres, dependiendo de las personas se subirá o bajará el precio. </p>
<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 left">
<!-- Pagar -->
<div class="column right">
<div class="sketches">
<img src="../img/pagar.png" />
<div class="description">
<h4>~ PAGAR ~</h4>
<p>Se ofrecerá un resumen de toda la compra, podrá poner algún código de descuento y realizar la compra.</p>
<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">
<!-- Compra Realizada -->
<div class="sketches">
<img src="../img/compra_realizada.png" />
<div class="description">
<h4>~ COMPRA REALIZADA ~</h4>
<p>Confirmará la compra de las entradas y si estás registrado podrás ver tu historial de compras.</p>
<h3>Compra Realizada</h3>
<p>Pantalla de confirmación con los datos de compra.</p>
</div>
</div>
</div>
<div class="column left">
<!-- About us -->
<div class="column right">
<div class="sketches">
<img src="../img/about_us.png" />
<div class="description">
<h4>~ ABOUT US ~</h4>
<p>Describe el equipo de FDI-cines.</p>
<h3>Sobre nosotros</h3>
<p>Pantalla con información sobre FDI-Cines.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="column left">
<!-- Formulario de contacto -->
<div class="sketches">
<img src="../img/contacto.png" />
<div class="description">
<h4>~ FORMULARIO DE CONTACTO ~</h4>
<p>Si un usuario tiene algún problema se puede poner en contacto en esta página.</p>
<h3>Formulario de Contacto</h3>
<p>Pantalla con un formulario para realizar una consulta a los administradores.</p>
</div>
</div>
</div>
<div class="column left">
<!-- Terminos y condiciones -->
<div class="column right">
<div class="sketches">
<img src="../img/terminosyCondiciones.png" />
<img src="../img/terminos_y_condiciones.png" />
<div class="description">
<h4>~ TÉRMINOS Y CONDICIONES ~</h4>
<p>Habrá un texto describiendo los términos y condiciones de la página web.</p>
<h3>Términos y Condiciones</h3>
<p>Pantalla con todos los términos y condiciones de uso del servicio.</p>
</div>
</div>
</div>
</div>
</fieldset>
<br>
<!-- Bocetos Gerente -->
<fieldset>
<legend>VISTA GERENTE</legend>
<!-- Manager Sketches-->
<div class="code">
<h3>Pantallas de Gerentes</h3>
</div>
<div class="row">
<div class="column left">
<!-- Panel de inicio Gerente -->
<div class="column side">
<div class="sketches">
<img src="../img/panel_inicio_gerente.png" />
<div class="description">
<h4>~ PANEL DE INICIO ~</h4>
<p>Pantalla de inicio del gerente de un cine.</p>
<p>El gerente podrá administrar las salas y las sesiones.</p>
<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 left">
<!-- Gestionar salas -->
<div class="column middle">
<div class="sketches">
<img src="../img/gestionar_salas.png" />
<div class="description">
<h4>~ GESTIONAR SALAS ~</h4>
<p>Solo podrá gestionar las salas el gerente, escoge una sala y lo edita o lo deshabilita(ya que una sala no se puede eliminar físicamente), también podrá añadir una nueva sala y guardarla.</p>
<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>
<div class="row">
<div class="column left">
<!-- Gestionar sesiones -->
<div class="column side">
<div class="sketches">
<img src="../img/gestionar_sesiones.png" />
<div class="description">
<h4>~ GESTIONAR SESIONES ~</h4>
<p>Solo podrá gestionar las sesiones el gerente, escoge una sesión y lo edita o lo elimina, también podrá añadir una nueva sesión y guardarla.</p>
<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>
</fieldset>
<br>
<!-- Bocetos Administrador -->
<fieldset>
<legend>VISTA ADMINISTRADOR</legend>
<!-- Admin Sketches-->
<div class="code">
<h3>Pantallas de Administradores</h3>
</div>
<div class="row">
<div class="column left">
<!-- Panel de Inicio Admin -->
<div class="sketches">
<img src="../img/panel_inicio_admin.png" />
<div class="description">
<h4>~ PANEL DE INICIO ~</h4>
<p>Pantalla de inicio del administrador.</p>
<p>
El administrador podrá añadir, editar y eliminar las películas, cines y promociones, también podrá añadir o eliminar
a un gerente o administrador, y ver la página con la vista de usuario final.
</p>
<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 left">
<!-- Gestionar Peliculas -->
<div class="column right">
<div class="sketches">
<img src="../img/gestionarPeliculas.png" />
<img src="../img/gestionar_peliculas.png" />
<div class="description">
<h4>~ GESTIONAR PELÍCULAS ~</h4>
<p>El administrador puede listar las películas existentes, modificar sus datos, eliminarlas, o añadir una película nueva.</p>
<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 left">
<!-- Gestionar Cines -->
<div class="column side">
<div class="sketches">
<img src="../img/gestionarCines.png" />
<img src="../img/gestionar_cines.png" />
<div class="description">
<h4>~ GESTIONAR CINES ~</h4>
<p>El administrador puede listar los cines existentes, modificar sus datos, eliminarlos, o añadir un cine nuevo.</p>
<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 left">
<!-- Gestionar Promociones -->
<div class="column middle">
<div class="sketches">
<img src="../img/gestionarPromociones.png" />
<img src="../img/gestionar_promociones.png" />
<div class="description">
<h4>~ GESTIONAR PROMOCIONES ~</h4>
<p>El administrador puede listar las promociones existentes, modificar sus datos, eliminarlas, o añadir una promoción nueva.</p>
<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>
<div class="row">
<div class="column left">
<!-- Gestionar Admins-Gerentes -->
<div class="column side">
<div class="sketches">
<img src="../img/gestionar_admins_gerentes.png" />
<div class="description">
<h4>~ GESTIONAR ADMINS-GERENTES ~</h4>
<p>El administrador puede listar los administradores y gerentes existentes, modificar sus datos, eliminarlos, o añadir un admin/gerente nuevo.</p>
<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>
</fieldset>
<br>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
<!-- Scripts -->
</footer>
</body>

View File

@ -77,9 +77,11 @@
</section>
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</footer>
</body>

View File

@ -111,9 +111,11 @@
</div>
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</footer>
</body>
</html>

BIN
img/gestionar_cines.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/gestionar_peliculas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@ -60,9 +60,11 @@
</section>
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</footer>
</body>

View File

@ -167,9 +167,11 @@
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</footer>
</body>

View File

@ -174,19 +174,27 @@
<legend>Práctica 2 [HTML + PHP]</legend>
<div class="bar">100%</div>
<ul>
<li></li>
<li></li>
<li></li>
<li>Sobre FDI-Cines (About us) [Fer && Adrián]</li>
<li>Formulario de Contacto [Fer]</li>
<li>Términos y Condiciones [Fer && Adrián]</li>
<li>Pantalla de inicio de gerente [Marco && Óscar]</li>
</ul>
<div class="bar seventyfive">75%</div>
<ul>
<li></li>
<li>Pantalla de Inicio (incluye promociones y estrenos) [Fer && Adrián]</li>
<li>Listado de Horarios [Fer]</li>
<li></li>
<li></li>
</ul>
<div class="bar fifty">50%</div>
<ul>
<li>Eliminar sesión de una película [Marco && Óscar]</li>
<li>Deshabilitar salas [Marco && Óscar]</li>
<li></li>
</ul>
<div class="bar twentyfive">25%</div>
<ul>
<li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
<li></li>
<li></li>
</ul>
@ -195,8 +203,8 @@
<legend>Práctica 3 [HTML + PHP + CSS]</legend>
<div class="bar">100%</div>
<ul>
<li></li>
<li></li>
<li>Eliminar sesión de una película [Marco && Óscar]</li>
<li>Deshabilitar salas [Marco && Óscar]</li>
<li></li>
</ul>
<div class="bar seventyfive">75%</div>
@ -207,13 +215,13 @@
</ul>
<div class="bar fifty">50%</div>
<ul>
<li></li>
<li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
<li></li>
<li></li>
</ul>
</fieldset>
<fieldset>
<legend>Entrega Final [[HTML + PHP + CSS + JS]</legend>
<legend>Entrega Final [HTML + PHP + CSS + JS]</legend>
<div class="bar">100%</div>
<ul>
<li>Todo el trabajo restante.</li>
@ -278,9 +286,11 @@
</section>
<!-- Footer -->
<footer>
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</footer>
</body>