Header y Footer generalizados con PHP. Todos los "index.html" transformados a "index.php".
		
			
				
	
	
		
			308 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
			
		
		
	
	
			308 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			PHP
		
	
	
	
	
	
<!DOCTYPE HTML>
 | 
						|
<!--
 | 
						|
    Práctica 2 - 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 -->
 | 
						|
        <?php
 | 
						|
            require_once('../assets/php/header.php');
 | 
						|
        ?>
 | 
						|
 | 
						|
        <!-- Main -->
 | 
						|
        <div class="main">
 | 
						|
            <div class="image"><img src="../img/logo_trasparente.png" /></div>
 | 
						|
            <h1>Bocetos</h1>
 | 
						|
            <hr />
 | 
						|
        </div>
 | 
						|
 | 
						|
        <!-- Flow -->
 | 
						|
        <section id="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>
 | 
						|
        </section>
 | 
						|
 | 
						|
        <!-- 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 -->
 | 
						|
        <?php
 | 
						|
            include_once('../assets/php/footer.php');
 | 
						|
        ?>
 | 
						|
 | 
						|
    </body>
 | 
						|
 | 
						|
</html>
 |