Taller de Programación Web
Integrantes:
Luis Fernando, Unsihuay Castro
Hector Jan, Huerta Bernuy
Joel Ernesto Enrique, Portaro Hinostroza
Giancarlo, Rosillo Encalada
Primer avance del proyecto final
2024
Proyecto Beta
Descripción:
Proyecto Beta es una agencia de viajes que permitirá la compra de tours turísticos a
diferentes destinos del país, para los cuales habrá diferentes costos. En la página se
mostrará información detallada de cada destino, así como los beneficios e itinerarios
de viajes correspondientes.
Propósito:
El proyecto tiene como propósito construir una aplicación web de viajes turísticos, y
permitirle al usuario adquirir un servicio en línea.
Características:
La aplicación web se desarrollará empleando las tecnologías aprendidas en el curso, a
continuación, se menciona en detalle cada una de ellas.
HTML
CSS
Javascript
PHP
MySQL
Arquitectura de la aplicación:
Se construirá una aplicación web empleando HTML para el maquetado de las
interfaces visuales y organización de la información, dentro de los cuales tendremos 6
páginas las cuales son:
Inicio
La empresa
Destinos
Hotel
Blog
Contacto
Cada una de estas páginas estarán listadas en un menú, el cual nos redirigirá a las otras
páginas internas en donde se mostrará más información del proyecto y en donde se
podrán hacer uso de los servicios como hacer una reserva de tour, enviar un
formulario de contacto, etc.
Se empleará CSS para personalizar los estilos de la página, proponiendo una interfaz de
usuario amigable y que genere buena experiencia al usuario final. Mediante esta
tecnología generaremos una distribución óptima del contenido, superponiendo
elementos y alineándolos correctamente para una buena percepción del contenido y
navegación, así como también agregaremos animaciones y transiciones a
determinados elementos de la página web.
Se empleará Javascript para agregar dinamismo a la página e interacción con el
usuario, para hacer validaciones en el formulario de contacto, responder a acciones
desencadenadas por el usuario como hacer click en el menú para poder desplegar los
ítems, regresar a la parte superior de la página, abrir un vídeo de youtube por encima
de la presentación de la página de inicio, y que este pueda cerrarse también volviendo
a estar oculto.
Se empleará PHP para la generación de rutas en la aplicación web del lado del servidor
y la generación de toda la lógica del proyecto. También se procesarán los datos
enviados en el formulario por los usuarios para posteriormente registrarlos en una
base de datos.
Se empleará MySQL como base de datos u otra alternativa similar para almacenar la
información de la página como los lugares turísticos, los precios, información detallada
de cada lugar turístico, datos del formulario enviados por el usuario, rutas de
imágenes, etc.
BASES DE DATOS
Tabla destinos
id: primary key
nombre: varchar(100)
descripcion: varchar(255)
tiempo: varchar(10)
codigo_viaje: varchar(11)
Tabla personas
id
nombres
apellidos
dni
licencia_conducir
teléfono
email
fecha_nacimiento
Tabla guias
persona_id
codigo_viaje
Tabla precios
id
destino_id
precio
Tabla contacto
id
nombres
apellidos
email
teléfono
direccion
consulta
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Proyecto Beta</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-
scale=1">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arizonia&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="nav">
<div class="contenedor">
<a class="nav-logo" href="index.html">
Proyecto Beta
<span>Agencia de viajes</span>
</a>
<button class="nav-boton" type="button">
Menu
</button>
<div class="nav-menu">
<ul class="menu">
<li class="menu-item">
<a href="index.html" class="menu-
link">Inicio</a>
</li>
<li class="menu-item">
<a href="la-empresa.html" class="menu-
link">La Empresa</a>
</li>
<li class="menu-item">
<a href="destinos.html" class="menu-
link">Destinos</a>
</li>
<li class="menu-item">
<a href="hotel.html" class="menu-
link">Hotel</a>
</li>
<li class="menu-item">
<a href="blog.html"
class="menu-link">Blog</a>
</li>
<li class="menu-item">
<a href="contact.html" class="menu-
link">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="presentacion">
<div class="capa"></div>
<div class="contenedor">
<div class="presentacion-contenido">
<div class="presentacion-contenido-texto">
<p class="presentacion-subtitulo">Bienvenido a nuestro
hotel</p>
<h1 class="presentacion-titulo">Descubre tu lugar
favorito con nosotros</h1>
<p class="presentacion-descripcion">Viaja a cualquier
rincón del mundo, sin preocuparte de tu alojamiento</p>
</div>
<a href="https://vimeo.com/45830194" class="presentacion-
play">
<span class="play"></span>
</a>
</div>
</div>
</section>
<div class="presentacion-contenido-texto">
<p class="presentacion-subtitulo">Bienvenido a nuestro hole</p>
<h1 class="presentacion-titulo">Descubre tu lugar favorito con nosotros</h1>
<p class="presentacion-descripcion">Viaja a cualquier rincón del mundo, sin
preocuparte de tu alojamiento</p>
</div>
</body>
</html>
CSS:
*{
box-sizing: border-box;
body {
background: #FFFFFF;
margin: 0;
font-family: Poppins, sans-serif;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
a{
color: #f15d30;
strong {
font-weight: 600;
.contenedor {
width: 90%;
max-height: 1200px;
margin: 0 auto;
.nav {
padding: 1.5rem 1rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
.nav .contenedor {
display: flex;
justify-content: space-between;
align-items: center;
.nav-boton {
display: none;
.nav-logo {
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 700;
text-decoration: none;
flex: 0 0 200px;
.nav-logo span {
color: #f15d30;
font-weight: 300;
font-size: .75rem;
display: block;
text-transform: uppercase;
.menu {
display: flex;
padding: 0;
margin: 0;
list-style: none;
gap: 1rem;
.menu-link {
text-decoration: none;
.presentacion {
background-image: url("../img/fondo.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #FFFFFF;
height: 100vh;
.presentacion .contenedor {
display: flex;
align-items: center;
height: 100%;
.capa {
background: rgb(0 0 0 / 22%);
width: 100%;
height: 100%;
