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

View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<!-- <!--
Práctica 1 - Sistemas Web | Grupo D Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines CompluCine - FDI-cines
@ -29,13 +29,14 @@
<div class="main"> <div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div> <div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Bocetos</h1> <h1>Bocetos</h1>
<hr />
</div> </div>
<!-- Flujo de Navegacion -->
<!-- Flow -->
<div class="code"> <div class="code">
<h1>FLUJO DE NAVEGACION</h1> <h2>FLUJO DE NAVEGACIÓN</h2>
<hr> <hr>
<div class="blockquote"> <!-- User Flow -->
<!-- Usuario -->
<fieldset> <fieldset>
<legend>Usuario</legend> <legend>Usuario</legend>
<p> <p>
@ -66,7 +67,15 @@
Una vez elegidos película y cine, el flujo es idéntico al anterior. Una vez elegidos película y cine, el flujo es idéntico al anterior.
</p> </p>
</fieldset> </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> <fieldset>
<legend>Administrador</legend> <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>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> 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> <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> </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>
<div class="row"> <!-- Sketches -->
<!-- Boceto Inicio --> <section id="sketches">
<div class="column left"> <hr />
<fieldset> <!-- Generic Sketches-->
<legend>INICIAR SESIÓN</legend> <div class="code">
<div class="sketches"> <h3>Pantallas Genéricas</h3>
<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>
</div> </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="row">
<div class="column left"> <div class="column left">
<!-- Pagina inicio -->
<div class="sketches"> <div class="sketches">
<img src="../img/inicio.png" /> <img src="../img/inicio.png" />
<div class="description"> <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>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>
</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="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"> <div class="sketches">
<img src="../img/peliculas.png" /> <img src="../img/peliculas.png" />
<div class="description"> <div class="description">
<h4>~ CARTELERA ~</h4> <h3>Cartelera</h3>
<p>Mostrará todas las películas disponibles en base al filtro seleccionado (cine).</p> <p>Pantalla con información sobre todas las películas disponibles en ese momento.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column left">
<!-- Cines -->
<div class="sketches"> <div class="sketches">
<img src="../img/cine.png" /> <img src="../img/cine.png" />
<div class="description"> <div class="description">
<h4>~ CINES ~</h4> <h3>Cines</h3>
<p>Mostrará todos los cines disponibles.</p> <p>Pantalla con un mapa que indica la geolocalización de todos los cines de FDI-Cines.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column right">
<!-- Horario -->
<div class="sketches"> <div class="sketches">
<img src="../img/selector_horario.png" /> <img src="../img/selector_horario.png" />
<div class="description"> <div class="description">
<h4>~ SELECTOR DE HORARIO ~</h4> <h3>Selección de Horario</h3>
<p>Aquí se mostrará todos los horarios disponibles y salas de la película y cine seleccionada.</p> <p>Pantalla que muestra los horarios disponibles por salas para un cine y película elegidos.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column left">
<!-- Butacas -->
<div class="sketches"> <div class="sketches">
<img src="../img/mapa_asientos .png" /> <img src="../img/mapa_asientos.png" />
<div class="description"> <div class="description">
<h4>~ SELECTOR DE BUTACAS ~</h4> <h3>Mapa de los Asientos</h3>
<p>Se mostrará los asientos que se van a seleccionar, ocupados y libres, dependiendo de las personas se subirá o bajará el precio. </p> <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>
</div> </div>
<div class="column left"> <div class="column right">
<!-- Pagar -->
<div class="sketches"> <div class="sketches">
<img src="../img/pagar.png" /> <img src="../img/pagar.png" />
<div class="description"> <div class="description">
<h4>~ PAGAR ~</h4> <h3>Pagar</h3>
<p>Se ofrecerá un resumen de toda la compra, podrá poner algún código de descuento y realizar la compra.</p> <p>Pantalla para realizar el pago, después de haber selecionado película, cine, sala, horario y butacas.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column left">
<!-- Compra Realizada -->
<div class="sketches"> <div class="sketches">
<img src="../img/compra_realizada.png" /> <img src="../img/compra_realizada.png" />
<div class="description"> <div class="description">
<h4>~ COMPRA REALIZADA ~</h4> <h3>Compra Realizada</h3>
<p>Confirmará la compra de las entradas y si estás registrado podrás ver tu historial de compras.</p> <p>Pantalla de confirmación con los datos de compra.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column right">
<!-- About us -->
<div class="sketches"> <div class="sketches">
<img src="../img/about_us.png" /> <img src="../img/about_us.png" />
<div class="description"> <div class="description">
<h4>~ ABOUT US ~</h4> <h3>Sobre nosotros</h3>
<p>Describe el equipo de FDI-cines.</p> <p>Pantalla con información sobre FDI-Cines.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column left">
<!-- Formulario de contacto -->
<div class="sketches"> <div class="sketches">
<img src="../img/contacto.png" /> <img src="../img/contacto.png" />
<div class="description"> <div class="description">
<h4>~ FORMULARIO DE CONTACTO ~</h4> <h3>Formulario de Contacto</h3>
<p>Si un usuario tiene algún problema se puede poner en contacto en esta página.</p> <p>Pantalla con un formulario para realizar una consulta a los administradores.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column right">
<!-- Terminos y condiciones -->
<div class="sketches"> <div class="sketches">
<img src="../img/terminosyCondiciones.png" /> <img src="../img/terminos_y_condiciones.png" />
<div class="description"> <div class="description">
<h4>~ TÉRMINOS Y CONDICIONES ~</h4> <h3>Términos y Condiciones</h3>
<p>Habrá un texto describiendo los términos y condiciones de la página web.</p> <p>Pantalla con todos los términos y condiciones de uso del servicio.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</fieldset>
<br>
<!-- Bocetos Gerente --> <!-- Manager Sketches-->
<fieldset> <div class="code">
<legend>VISTA GERENTE</legend> <h3>Pantallas de Gerentes</h3>
</div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column side">
<!-- Panel de inicio Gerente -->
<div class="sketches"> <div class="sketches">
<img src="../img/panel_inicio_gerente.png" /> <img src="../img/panel_inicio_gerente.png" />
<div class="description"> <div class="description">
<h4>~ PANEL DE INICIO ~</h4> <h3>Panel de Incio Gerente</h3>
<p>Pantalla de inicio del gerente de un cine.</p> <p>Pantalla con las funciones exclusivas a las que puede acceder un Gerente.</p>
<p>El gerente podrá administrar las salas y las sesiones.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column middle">
<!-- Gestionar salas -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionar_salas.png" /> <img src="../img/gestionar_salas.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR SALAS ~</h4> <h3>Gestionar salas</h3>
<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> <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> </div>
</div> <div class="column side">
<div class="row">
<div class="column left">
<!-- Gestionar sesiones -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionar_sesiones.png" /> <img src="../img/gestionar_sesiones.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR SESIONES ~</h4> <h3>Gestionar Sesiones</h3>
<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> <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>
</div> </div>
</div> </div>
</fieldset>
<br>
<!-- Bocetos Administrador --> <!-- Admin Sketches-->
<fieldset> <div class="code">
<legend>VISTA ADMINISTRADOR</legend> <h3>Pantallas de Administradores</h3>
</div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column left">
<!-- Panel de Inicio Admin -->
<div class="sketches"> <div class="sketches">
<img src="../img/panel_inicio_admin.png" /> <img src="../img/panel_inicio_admin.png" />
<div class="description"> <div class="description">
<h4>~ PANEL DE INICIO ~</h4> <h3>Panel Inicio Administrador</h3>
<p>Pantalla de inicio del administrador.</p> <p>Pantalla con las funciones exclusivas a las que puede acceder un 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>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column right">
<!-- Gestionar Peliculas -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionarPeliculas.png" /> <img src="../img/gestionar_peliculas.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR PELÍCULAS ~</h4> <h3>Gestionar Películas</h3>
<p>El administrador puede listar las películas existentes, modificar sus datos, eliminarlas, o añadir una película nueva.</p> <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> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column left"> <div class="column side">
<!-- Gestionar Cines -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionarCines.png" /> <img src="../img/gestionar_cines.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR CINES ~</h4> <h3>Gestionar Cines</h3>
<p>El administrador puede listar los cines existentes, modificar sus datos, eliminarlos, o añadir un cine nuevo.</p> <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar los cines.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="column left"> <div class="column middle">
<!-- Gestionar Promociones -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionarPromociones.png" /> <img src="../img/gestionar_promociones.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR PROMOCIONES ~</h4> <h3>Gestionar Promociones</h3>
<p>El administrador puede listar las promociones existentes, modificar sus datos, eliminarlas, o añadir una promoción nueva.</p> <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las promociones existentes.</p>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="column side">
<div class="row">
<div class="column left">
<!-- Gestionar Admins-Gerentes -->
<div class="sketches"> <div class="sketches">
<img src="../img/gestionar_admins_gerentes.png" /> <img src="../img/gestionar_admins_gerentes.png" />
<div class="description"> <div class="description">
<h4>~ GESTIONAR ADMINS-GERENTES ~</h4> <h3>Gestionar Administradores y Gerentes</h3>
<p>El administrador puede listar los administradores y gerentes existentes, modificar sus datos, eliminarlos, o añadir un admin/gerente nuevo.</p> <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>
</div> </div>
</div>
</fieldset> </section>
<br>
<!-- Footer --> <!-- Footer -->
<footer>
<div class="footer"> <div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p> <p>© Práctica 1 | Sistemas Web 2021 </p>
</div> </div>
</footer>
<!-- Scripts -->
</body> </body>

View File

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

View File

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

View File

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

View File

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