Trabajo Final de Lab y PPP

Trabajo final P.P.
P y Laboratorio
Pagina para Celeste Milán
Ángel Cantero
Técnica nº2 Independencia
5To 1Ra TC
Juan Roude y Federico González
21 de Octubre de 2022
2
Índice.
Entrevista. 3
Presentación del proyecto. 3
Descripción. 3
Especificación del sitio web. 4
Límites del diseño. 4
Requerimientos funcionales. 4
Requerimientos no funcionales. 4
Diagrama de Gantt. 4
Boceto. 5
Presupuesto. 5
Código. 6
3
Entrevista.
1-¿A qué se dedica la empresa?

R: A la producción y venta de decoración de eventos.
2-¿Y a qué rubro pertenece?
R: Decoraciones.
3-¿Qué le gustaría que comunicara la página?
R: Los productos que producen y venden.
4-¿Qué información le gustaría tener en la página principal?
R: Las promociones de sus tarjetas de invitación, souvenir, y centros de mesa
5-¿Qué servicios le gustaría tener en la página principal?
R: La promoción de sus productos y derivados.
6-¿Cuántas secciones quiere que tenga?
R: Quiere tres secciones una para las tarjetas otra para los souvenir y por último uno para los
centros de mesa.
7-¿Qué imágenes quiere utilizar?
R: Imágenes sacadas por ella misma.
Acordó mandar imágenes el 17/10 pero no mando nada por lo tanto voy a proseguir con imágenes
sin derechos de autor.
8-¿Quiere llegar a más gente con la página?
R:Sí y hacer conocido su organización.
9-¿Qué redes sociales le gustaría agregar?
R: El correo electrónico y su WhatsApp únicamente.
10-¿Qué colores quiere que predominen en la página?
R: Quiere colores pasteles para su página.
11-¿Tiene logo?
R: No pregunte.
Tuvimos una entrevista extra el 17/10 y me brindó el logo.
12-¿Qué quiere que contenga el formulario?
R: Nombre, dirección, número de contacto, y otra red social para comunicarse con sus clientes.
El 17/10 mande el boceto de la página pero al no tener respuesta hasta el 24/10 por lo que
proseguiré de todas formas y no le di importancia.
Presentación del proyecto.
En este proyecto quiero demostrarles todo lo que he aprendido durante el año y para ello
hacerle una página web promocional estática para la alumna de 7mo TAE Celeste Milán para atraer
más clientes a su negocio de decoración de eventos y ayudar a que tenga más presencia en línea a
través de una web promocional funcional para ella.
Descripción.
La cliente me ha pidió que le haga una página con colores pasteles, con un formulario para
que los clientes se puedan comunicar con ella, y por último que promocione sus productos de
decoración de eventos.
4
Especificación del sitio web.
Elegí una página web promocional ya que cumple con varias especificaciones. La intención
de atraer público a través de la promoción de sus productos para los eventos.
Límites del diseño.
Al no poseer los conocimientos en base de datos la página debe ser estática no una tienda
virtual como el cliente quería por lo que tendré que hacerla con diseño atractivo y con precios de
productos estáticos únicamente, y con un solo script de java para el formulario sea mandado a
través de email.
Requerimientos funcionales.
Que contenga un formulario que se mande a través de un correo electrónico con

programación de PHP, estar hecho con html5, Java Script y css3.
Requerimientos no funcionales.
Que contenga una paleta de colores pasteles, debe contener formulario, carrusel, que sea
responsivo para que cualquier persona con cualquier dispositivo sea capaz de entrar, ser atractivo
para llamar la atención.
Diagrama de Gantt.
programacion
entrevistas
5
Boceto.
Presupuesto.
Datos del vendedor. No cuenta como Fecha:17/09/22
Vendedor: Ángel Cantero Documento comercial. N°:L-666
D.N.I:45000355 Condición frente al IVA: Monotributista
N°CUIT:00345345010
Datos comprador: Celeste Milán. Monotributista
Precio
Detalle Cantidad Precio total
unitario
Desarrollo de la pagina 30 horas 1500 45000

Valido por… Pagado con: Cheque diferido Total 45000

Código.
Html de la página principal:

<!DOCTYPE html>
<html lang="en"><head>
6
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="theme-color" content="#ff00ff">
<title class="theme-color">
Iana Decoraciones
</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="styles/estilos.css" rel="stylesheet">
</head>
<body>
<header>
<div class="imagennav">
<img class="navimg" src="images/logo1.png">
</div>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-

toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-
controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav sticky" id="navbar">
<div class="pagbot">
<a class="nav-link active" aria-current="page"
href="#">Inicio</a>
</div>
<div class="relleno">
<a class="nav-link"></a>
</div>
<div class="pagbot1">
<a class="nav-link" href="form.html">Formulario</a>
</div>
<div class="relleno">
<a class="nav-link"></a>
</div>
<div class="pagbot2">
<a class="nav-link"
href="https://docs.google.com/document/d/1wF8NNdyRYLpKuZcA10u81yiRsNeExbs8/
edit?
7
usp=sharing&ouid=110889213427892781154&rtpof=true&sd=true">Infor
macion</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="principio">
<div class="col-2">
<aside>
<div class="aside ">
<h5> Las decoraciones son nuestra especialidad si gustas puedes
pedir nuestros servicios a través del formulario que se
encuentra en la
parte de arriba en la barra de navegación.</h5>
</div>
</aside>
</div><div class="col-10">

<div class="slideshow-container">


<div class="mySlides" style="display: block;">
<img class="imagencarou" src="images/logo.jpg">
</div>
<div class="mySlides" style="display: none;">

<img class="imagencarou" src="images/invitaciones 3.jpg">
</div>
<div class="mySlides" style="display: none;">

<img class="imagencarou" src="images/centro de mesa.png">
</div>


<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script src="js/carousel.js"></script>
</div>
</div>
8
</div>
<h1 class="titulo">
¿Tus eventos se ven y se sienten sonsos?
</h1>
<h5 style="text-align: center;">Pues nosotros te podemos
ayudar,somos un microemprendimiento que se dedica a la decoración y
organización de eventos</h5>
<h5 style="text-align: center;">Intenta deslizar hacia abajo
para ver todos los productos que manejamos para estas ocasiones y de seguro
te preguntarás "¿Para qué sirven estos productos?" pero nosotros vamos a
responder esas dudas. </h5>
<div class="fondo">
<section>
<div class="section-1">
<div class="row">
<div class="col-4">
<img class="section1" src="images/invitaciones 3.png">
</div>
<div class="col-5">
<h3>¿Como invito a la gente sin mandar mensajes?</h3>
<h4>Una tarjeta de invitación es un pequeño escrito en el
que se informa y se invita a la celebración de un evento: una boda, un
cumpleaños, una inauguración, una fiesta, etc. El nombre del que
invita.
El texto de invitación.</h4></div>
</div>
<div class="col-10">
<h5>Por eso nosotros pondremos manos a la obra para encargarnos de
que tu evento llame mas la atención y quieran venir a toda costa.</h5>
</div>
<div class="col-2">
</div>
</div></section>
<section>
<div class="row">
<div class="col-4">
<img class="section2" src="images/souve.jpeg">
</div>
<div class="col-5">
9
<h3>¿Como puedo conmemorar el evento?</h3>

<h4>Un recuerdo, también conocido como souvenirs, es un
objeto que atesora las memorias que están relacionadas con él.</h4></div>
</div>
<div class="col-2">
</div>
<h5>Nuestros recuerdos son importantes de mantener vigentes por
eso lo que queremos es dar souvenirs al terminar el evento para que
todos los invitados atesoren el haber sido parte de la ocacion.</h5>
</div>
<div class="col-2">
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-4">
<img class="section3" src="images/centro de mesa.png">
</div>
<div class="col-5">
<h3>¿Para que usaria un centro de mesa?</h3>
<h4>Un centro de mesa es un elemento decorativo que se coloca
en
el centro de las mesas que se han dispuesto para comer. El objeto de
los centros de mesa es mejorar la estética de la mesa en combinación
con
el resto de los elementos que las componen, fundamentalmente, la
vajilla, los manteles y la cubertería.</h4></div>
</div>
<div class="col-2">
</div>
<h5>Por eso nosotros haremos lo mejor para que tus invitados
aprecien lo elegante de la ocasión decorando las mesas para que comer
no
solo sea buenos sabores sino tambien una vista maravillosa.</h5>
</div>
<div class="col-2">
</div>
10
</div></section>
</div>
<footer>
<h6>Pagina para Celeste Milan hecha por Angel Cantero.</h6>
</footer>
<script src="js/bootstrap.min.js"></script>
<script src="js/stickynavbar.js"></script>
</body>
</html>
Html del formulario:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta name="theme-color" content="#ff00ff">
<title class="theme-color">
Formulario para el cliente
</title>
<link rel="stylesheet" href="css/bootstrap.min.css"
rel="stylesheet">
<link href="styles/estilos2.css" rel="stylesheet">
</head>
<body>
<header>
<div class="imagennav">
<img class="navimg" src="images/logo1.png">
</div>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-

toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-
controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" class="pagbot" id="navbar">
<div class="pagbot" class="rounded-pill">
<a class="nav-link active" class="pagbot" aria-
current="page" href="index.html">Inicio</a>
11
</div>
<div class="relleno" class="rounded">
<a class="nav-link" class="pagbot" ></a>
</div>
<div class="pagbot1" class="rounded">
<a class="nav-link" class="pagbot" class="nav-link disabled"
href="#">Formulario</a>
</div>
<div class="relleno" class="rounded">
<a class="nav-link" class="pagbot" ></a>
</div>
<div class="pagbot2" class="rounded">
<a class="nav-link" class="pagbot"
href="https://docs.google.com/document/d/1wF8NNdyRYLpKuZcA10u81yiRsNeExbs8/
edit?
usp=sharing&ouid=110889213427892781154&rtpof=true&sd=true">Informacion</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<form>
<div class="fondoform">
<div class="mb-3">
<label class="Nombre" for="nombre"> Nombre: </label>
<input class="Texto" type="text" name="nombre" id="nombre"
required maxlength="45" aria-label="Nombre" aria-describedby="basic-addon2"
onkeypress="return !(event.charCode >= 48 && event.charCode <= 57)"
required/>
</div>
<div class="mb-3">
<label class="Apellido" for="apellido"> Apellido: </label>
<input type="text" class="Texto" name="apellido" id="apellido"
required maxlength="45" aria-label="Apellido" aria-describedby="basic-
addon2" onkeypress="return !(event.charCode >= 48 && event.charCode <= 57)"
required />
</div>
<div class="mb-3">
<label class="Email" class="Texto" for="email"> Email: </label>
<input type="email" name="email" id="email" required
maxlength="45" />
</div>
<div class="mb-3">
</div>
12
<div class="mb-3">
<label for="phone">Ingrese su numero de telefono:</label>
<input type="tel" id="phone" name="phone" required
maxlength="12"/>
</div>
<textarea name="message" rows="10" cols="60">
Puede aportar mas informacion en este campo de texto
</textarea>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2"
class="term">
¿Acepta los terminos y condiciones?.
</label>
</div>
</div>
<div class="mb-3">
<button class="Enviar">Enviar</button>
</div>
</div>
</form>
<footer>
<h6>Pagina para Celeste Milan hecha por Angel Cantero.</h6>
</footer>
</body>
<script src="js/bootstrap.min.js"></script>
<script src="js/stickynavbar.js"></script>
<script src="js/bs4-form-validation.js"></script>
<script src="js/bs4-form-validation.min.js"></script>
</html>
Css de la página principal:

li{
background-color: rgb(73, 192, 247);
display: block;
margin-left: auto;
margin-right: auto;
width: 300PX;
border-radius: 12px;
}
li:hover{
transition: 1s;
13
background-color:rgb(65, 131, 192);

}
.pagbot{
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot1{
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot1:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot2{
height: 40px;
width: 300px;
text-align:center;
margin:auto;
border-radius: 7px;
14
}
.pagbot2:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
padding:auto;
border-radius: 7px;
}
.navbar{
background-color: #EED4DAff;
}
.navimg{
display: block;
margin-left: auto;
margin-right: auto;
width: 250PX;
}
.imagennav{
}
ul{
display: inline-block;
list-style-type: none;
}
.navbot{
text-align: center;
}
.relleno{
background-color: #EED4DAff ;
width: 50px;
}
aside{
background-color:rgba(214, 109, 247, 0.514);
float:right;
margin:15px;
display: block;
max-width: 200px;
max-height: auto;
border: 2px solid rgb(144, 71, 167);
border-radius: 7px;
15
text-align: center;
margin:5px;
}
@media screen and (max-width: 600px) {
.aside{
display:none;
}
}
body{
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its
scroll position */
.sticky {
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick
movement (as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
.titulo{
text-align: center;
}
.section1{
height: 200px;
width: 300px;
}
.section-1{
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
16
.section2{
height: 200px;
width: 300px;
}
.section-2{
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
.section3{
height: 200px;
width: 300px;
}
.section-3{
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
footer{
background-color: #FEF4A5;
position: static;
bottom: auto;
height: auto;
padding-bottom: 8px;
text-align: center;
border-radius: 8px;
}
.fondo{
background: rgb(139,183,250);
background: linear-gradient(0deg, rgba(139,183,250,1) 0%,
rgba(112,177,237,1) 25%, rgba(249,57,228,1) 50%, rgba(249,125,255,1) 75%,
rgba(139,183,250,1) 100%);
}
h5{
margin:15px;
}
/*carrousel*/
17
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 700px;
max-height: 400px;
position:absolute;
background-color: #ebcccc;
top: 314.35px;
padding-left: 0px;
margin-left: 90px;
margin-right: 90px;
padding-right: 0px;
right: 0px;
left: 0px;
bottom: -70px;
left: -17px;
/* Hide the images by default */

.mySlides {
display: none;
max-height: 700px;
max-width: 700px;
position:static
}
/* Next & previous buttons */

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
18
/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
max-height: 800px;
max-width: 800px;
}
/* On hover, add a black background color with a little bit see-

through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.imagencarou{
max-width: 300px;
max-height: 400px;
display: block;
margin-left: auto;
margin-right: auto;
position:static;
}
.dots{
max-width: 600px;
}
.col-2{
float:right;
position:static;
top:0px;
bottom: 0px;
right: 0px;
19
margin-left: 100%;
max-height: 400px;
}
.slideshow-container{
display:none;
}
}
h3{
margin-right: -65px;
margin-left: -65px;
margin-top: 210px;
text-align: center;
}
}
h4{
margin-right: -65px;
margin-left: -71px;
text-align: center;
margin-top: 0px;margin-bottom: -6.5rem;padding-top: 10px;
}
}
@media screen and (max-width: 600px){
.col-10{
margin-left: auto;
margin-right: auto;
text-align: center;
margin-left: 20px;margin-right: 0px;padding-top: 100px;padding-left:
15px;padding-right: -15px;
}
}
Css del formulario:

li{
display: block;
margin-left: auto;
margin-right: auto;
width: 300PX;
}
li:hover{
transition: 1s;
20

}
.pagbot{
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot1{
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot1:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
border-radius: 7px;
}
.pagbot2{
height: 40px;
width: 300px;
text-align:center;
margin:auto;
border-radius: 7px;
21
}
.pagbot2:hover{
transition: 1s;
height: 40px;
width: 300px;
text-align: center;
margin:auto;
padding:auto;
border-radius: 7px;
}
.navbar{
}
.navimg{
display: block;
margin-left: auto;
margin-right: auto;
width: 250PX;
}
.imagennav{
}
ul{
}
.navbot{
text-align: center;
}
.relleno{
background-color: #EED4DAff ;
width: 50px;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its
scroll position */
.sticky {
position: fixed;
22
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick
movement (as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
body{
background: rgb(201,153,175);
background: linear-gradient(0deg, rgba(201,153,175,1) 0%,
rgba(255,229,240,1) 100%);
}
.Nombre{
}
.Apellido{
}
.Texto{
max-height: 150px;
max-width: 105px;
}
input{
max-width: 350px;
}
footer{
background-color: #FEF4A5;
position: static;
bottom: auto;
height: auto;
padding-bottom: 8px;
text-align: center;
border-radius: 8px;
}
.Enviar{
background-color: crimson;
max-width: auto;
max-height: auto;
23
text-align: center;
margin-left: 500px;
}
.mb-3{
max-width: 300px;
}
.term{
max-width: auto;
}
Código de javascript:
onkeypress="return !(event.charCode >= 48 && event.charCode <= 57)"
https://escuela-tecnica-n2.000webhostapp.com/

Trabajo Final de Lab y PPP

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Trabajo Final de Lab y PPP

Cargado por

Copyright:

Formatos disponibles

Trabajo final P.P.

Técnica nº2 Independencia

Juan Roude y Federico González

1-¿A qué se dedica la empresa?

Presentación del proyecto.

Especificación del sitio web.

Límites del diseño.

Que contenga un formulario que se mande a través de un correo electrónico con

Html de la página principal:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<button class="navbar-toggler" type="button" data-bs-

<div class="mySlides" style="display: none;">

<div class="mySlides" style="display: none;">

<h3>¿Como puedo conmemorar el evento?</h3>

<button class="navbar-toggler" type="button" data-bs-

Css de la página principal:

background-color:rgb(65, 131, 192);

/* Hide the images by default */

/* Next & previous buttons */

/* Position the "next button" to the right */

/* On hover, add a black background color with a little bit see-

Css del formulario:

background-color:rgb(65, 131, 192);

También podría gustarte