SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
PLAN DE TRABAJO
DEL ESTUDIANTE
TRABAJO FINAL DEL CURSO
1. INFORMACIÓN GENERAL
Apellidos y Nombres: ANDERSON WILLIAM DAMIAN MALDONADO ID: 1514492
Dirección Zonal/CFP: CFP SENATI PUCALLPA
Carrera: INGENIERIA DE SOFTWARE Semestre: II
Curso/ Mód. Formativo FUNDAMENTOS DE PROGRAMACIÓN WEB
Tema del Trabajo: Entregable 2
2. PLANIFICACIÓN DEL TRABAJO
ACTIVIDADES/
N° CRONOGRAMA/ FECHA DE ENTREGA
ENTREGABLES
1 Practica en login html 14/10 15/10
24/0
2 Practicas de diversas paginas 15/10 23/10
9
3
4
5
TRABAJO FINAL DEL CURSO
3. ENTREGABLES:
Durante la investigación de estudio, deberán de dar solución a los planteamientos de cada
entregable:
N
ENTREGABLE 1
º
N
ENTREGABLE 2
º
2 CODIGO FINAL
EcoMarket: Estructura del Proyecto
1. HTML ([Link])
El archivo HTML contiene la estructura básica del sitio web, incluyendo el encabezado, el
carrusel de imágenes, la sección de productos y un formulario de contacto.
html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EcoMarket</title>
<link rel="stylesheet"
href="[Link]
.css">
<link rel="stylesheet" href="[Link]">
</head>
<body class="h-100">
<div class="container-fluid h-100">
<header>
<div class="container d-flex justify-content-between align-
items-center">
<div>
<a href="#" class="mr-3">
TRABAJO FINAL DEL CURSO
<img src="./img/[Link]" alt="Login"
class="header-icon"> Login
</a>
<a href="#" class="mr-3">
<img src="./img/4213452-common-door-exit-in-login-
signin_115388.ico" alt="Registrar" class="header-icon"> Registrar
</a>
<a href="#" class="mr-3">
<img src="./img/[Link]" alt="Redes"
class="header-icon"> Facebook
</a>
</div>
<form class="form-inline">
<input class="form-control mr-2" type="search"
placeholder="Buscar productos" aria-label="Buscar">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Buscar</button>
</form>
</div>
</header>
<main class="flex-grow-1">
<h1 class="text-center my-4">EcoMarket</h1>
<div id="carouselExample" class="carousel slide" data-
ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./img/[Link]" class="d-block w-100"
alt="Imagen 1">
</div>
<div class="carousel-item">
<img src="./img/[Link]" class="d-block w-100"
alt="Imagen 2">
</div>
<div class="carousel-item">
<img src="./img/fondo [Link]" class="d-block w-100"
alt="Imagen 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExample"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
<div class="row my-5">
<div class="col-md-4">
<div class="product-card">
<img src="./img/[Link]" class="img-fluid mb-
3" alt="Producto 1">
<h5>Frutas Orgánicas</h5>
<p>Precio: $5.00</p>
<button class="btn btn-success">Agregar al
carrito</button>
TRABAJO FINAL DEL CURSO
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<img src="./img/[Link]" class="img-fluid
mb-3" alt="Producto 2">
<h5>Verduras Frescas</h5>
<p>Precio: $3.00</p>
<button class="btn btn-success">Agregar al
carrito</button>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<img src="./img/[Link]" class="img-
fluid mb-3" alt="Producto 3">
<h5>Granos y Semillas</h5>
<p>Precio: $4.00</p>
<button class="btn btn-success">Agregar al
carrito</button>
</div>
</div>
</div>
<!-- Formulario de contacto -->
<div class="container my-5">
<h2 class="text-center">Contacto</h2>
<form id="contact-form">
<div class="form-group">
<label for="name">Nombre:</label>
<input type="text" class="form-control" id="name"
required>
</div>
<div class="form-group">
<label for="email">Correo Electrónico:</label>
<input type="email" class="form-control"
id="email" required>
</div>
<div class="form-group">
<label for="message">Mensaje:</label>
<textarea class="form-control" id="message"
rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-
primary">Enviar</button>
</form>
</div>
</main>
<footer>
<div class="d-flex justify-content-between font-weight-bold">
<p class="mb-0">Calidad y sostenibilidad en cada
producto.</p>
<p class="mb-0">Tu salud es nuestra prioridad.</p>
</div>
</footer>
</div>
<script src="[Link]
[Link]"></script>
<script
src="[Link]
.js"></script>
TRABAJO FINAL DEL CURSO
<script
src="[Link]
s"></script>
<script src="[Link]"></script>
</body>
</html>
2. CSS ([Link])
El archivo CSS contiene los estilos para el diseño visual del sitio. Incluye estilos para el
encabezado, el pie de página, el formulario de contacto y los productos.
css
html, body {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.container-fluid {
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex-grow: 1;
}
.card {
margin-bottom: 20px;
}
.product-card {
border: 1px solid #ccc;
padding: 15px;
text-align: center;
background-color: white; /* Fondo blanco para las tarjetas de
productos */
border-radius: 8px; /* Esquinas redondeadas */
transition: transform 0.3s; /* Efecto de transición */
}
.product-card:hover {
transform: scale(1.05); /* Efecto de aumento al pasar el ratón */
}
.header-icon {
vertical-align: middle;
}
header {
background-color: #4CAF50; /* Color verde para el encabezado */
color: white; /* Texto blanco en el encabezado */
padding: 1rem; /* Espaciado interno del encabezado */
}
footer {
background-color: #4CAF50; /* Color verde en el pie de página */
color: white; /* Texto blanco en el pie de página */
text-align: center; /* Centrar texto */
padding: 1rem; /* Espaciado interno del pie de página */
TRABAJO FINAL DEL CURSO
}
form {
background-color: #f8f9fa; /* Fondo claro para el formulario */
border-radius: 8px;
padding: 20px;
}
.form-control {
border-radius: 5px; /* Esquinas redondeadas para los campos de entrada
*/
}
.btn-primary {
background-color: #007bff; /* Color de fondo azul */
border: none;
border-radius: 5px;
}
.btn-primary:hover {
background-color: #0056b3; /* Color de fondo azul oscuro al pasar el
ratón */
}
3. JavaScript ([Link])
El archivo JavaScript gestiona la funcionalidad del formulario de contacto, mostrando un
mensaje de confirmación cuando el usuario envía el formulario.
javascript
[Link]('contact-form').addEventListener('submit',
function(event) {
[Link](); // Previene el envío del formulario por
defecto
// Aquí podrías agregar la lógica para enviar el formulario a un
servidor
alert('Mensaje enviado correctamente!'); // Mensaje de éxito
[Link](); // Limpia el formulario
});
TRABAJO FINAL DEL CURSO
LOGIN
ANDERSON WILLIAM DAMIAN MALDONADO [ESCALA]
Desarrollo del Entregable N°1- DIBUJO / ESQUEMA / DIAGRAMA
(Adicionar páginas que sean necesarias)
TRABAJO FINAL DEL CURSO
HOJA DE PLANIFICACIÓN (Entregable 1)
PROCESO DE EJECUCIÓN
SEGURIDAD / MEDIO AMBIENTE /
OPERACIONES / PASOS /SUBPASOS NORMAS -ESTANDARES
INSTRUCCIONES: debes ser lo más explícito posible. Los gráficos ayudan a transmitir
mejor las ideas. No olvides los aspectos de calidad, medio ambiente y SHI.
TRABAJO FINAL DEL CURSO
[NOMBRE DEL TRABAJO]
[APELLIDOS Y NOMBRES] [ESCALA]
Desarrollo del Entregable N°2 - DIBUJO / ESQUEMA / DIAGRAMA
(Adicionar páginas que sean necesarias)
TRABAJO FINAL DEL CURSO
HOJA DE PLANIFICACIÓN (Entregable 2)
SEGURIDAD / MEDIO AMBIENTE /
OPERACIONES / PASOS /SUBPASOS NORMAS -ESTANDARES
INSTRUCCIONES: debes ser lo más explícito posible. Los gráficos ayudan a transmitir
mejor las ideas. No olvides los aspectos de calidad, medio ambiente y SHI.
TRABAJO FINAL DEL CURSO
LISTA DE RECURSOS
INSTRUCCIONES: completa la lista de recursos necesarios para la ejecución del trabajo.
1. MÁQUINAS Y EQUIPOS
INTERNET
WIKIPEDIA
3. HERRAMIENTAS E INSTRUMENTOS
COMPUTADORA
5. MATERIALES E INSUMOS
LIBRO
PDF DE CODIGOS
TRABAJO FINAL DEL CURSO