PIAD-216 - CUADERNO DE INFORMES - Semana2 - 24

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL
FORMACIÓN PROFESIONAL DUAL
CUADERNO DE INFORMES
CÓDIGO N° 89001677
DIRECCIÓN ZONAL
Huánuco
FORMACIÓN PROFESIONAL DUAL
CFP/UCP/ESCUELA: SENATI-Huánuco
ESTUDIANTE: Gonzalo Tarazona Robyn Jhordan
ID: 001557976 BLOQUE: 1
CARRERA: Ingeniería de Software con Inteligencia Artificial
INSTRUCTOR: Charlen Máximo Calero Huamán
SEMESTRE: II DEL: 01/04/2024 AL: 17/04/2024

INSTRUCCIONES PARA EL USO DEL
CUADERNO DE INFORMES DE TRABAJO
SEMANAL
1. PRESENTACIÓN.
El Cuaderno de Informes de trabajo semanal es un documento de control, en el cual el estudiante,

registra diariamente, durante la semana, las tareas, operaciones que ejecuta en su formación práctica
en SENATI y en la Empresa.
2. INSTRUCCIONES PARA EL USO DEL CUADERNO DE INFORMES.
2.1 En el cuadro de rotaciones, el estudiante, registrará el nombre de las áreas o secciones por las
cuales rota durante su formación práctica, precisando la fecha de inicio y término.
2.2 Con base al PEA proporcionado por el instructor, el estudiante transcribe el PEA en el cuaderno
de informes. El estudiante irá registrando y controlando su avance, marcando en la columna que
corresponda.
2.3 En la hoja de informe semanal, el estudiante registrará diariamente los trabajos que ejecuta,
indicando el tiempo correspondiente. El día de asistencia al centro para las sesiones de
tecnología, registrará los contenidos que desarrolla. Al término de la semana totalizará las horas.
De las tareas ejecutadas durante la semana, el estudiante seleccionará la más significativa y hará
una descripción del proceso de ejecución con esquemas y dibujos correspondientes que aclaren
dicho proceso.
2.4 Semanalmente, el estudiante registrará su asistencia, en los casilleros correspondientes.
2.5 Semanalmente, el Monitor revisará, anotará las observaciones y recomendaciones que considere;
el Instructor revisará y calificará el Cuaderno de Informes haciendo las observaciones y
recomendaciones que considere convenientes, en los aspectos relacionados a la elaboración de
un Informe Técnico (términos técnicos, dibujo técnico, descripción de la tarea y su
procedimiento, normas técnicas, seguridad, etc.)
2.6 Si el PEA tiene menos operaciones (151) de las indicadas en el presente formato, puede eliminar
alguna página. Asimismo, para el informe de las semanas siguientes, debe agregar las semanas
que corresponda.
2.7 Escala de calificación:
CUANTITATIVA CUALITATIVA CONDICIÓN

16,8 – 20,0 Excelente
13,7 – 16,7 Bueno Aprobado
10,5 – 13,6 Aceptable
00 – 10,4 Deficiente Desaprobado
PLAN DE ROTACIONES
PERÍODO
ÁREA / SECCIÓN / EMPRESA SEMANAS
DESDE HASTA
SENATI
Ingeniería de Software con inteligencia artificial. 01/04/24 03/04/24 1
SENATI
SENATI
PLAN ESPECÍFICO DE APRENDIZAJE
(PEA) SEGUIMIENTO Y EVALUACIÓN
Llenar según avance
OPERACIONES OPERACIONES
OPERACIONES
N.º OPERACIONES/TAREAS EJECUTADAS* PARA
POR EJECUTAR
SEMINARIO
1 2 3 4
01 Desarrolla el diseño convencional y semántico de una página web. X
02 Utiliza etiquetas HTML5para el desarrollo de una web. X
03 Inserta barra de navegación X
04 Utiliza etiquetas CSS dentro de una web. X
05 Utiliza etiquetas semánticas X
06 Emplea recursos multimedia. X
07 Enlaza hojas de estilo externas en una web X
08 Utiliza diferentes tipos de datos y operadores. X
09 Escribe funciones aritméticas. X
10 Escribe programas utilizando elementos dinámicos para JavaScript X
11 Utiliza etiquetas para el ingreso y salida de datos. X
12 Diseña formularios empleando botones de acción X
13 Procesa datos de un formulario mediante las acciones Get y Post. X
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*Número de repeticiones realizadas.

INFORME SEMANAL
II SEMESTRE SEMANA N° 3 DEL 15/04 AL 17/04 DEL 2024
DÍA TRABAJOS EFECTUADOS HORAS
El lunes realizamos un código para crear un formulario en

la cual agregamos dos clases formulario y destino. 4
LUNES
El martes creamos un código para otro formulario donde

también tenia dos clases que es formulario.html y
destino.htm
MARTES 4
El miércoles unimos tres códigos en una sola pagina y

agregamos una clase más que era menú en donde
debían ir los tres códigos de los distintos formularios.
MIÉRCOLES 4
JUEVES
VIERNES
SÁBADO
TOTAL 12
Tarea más significativa:
Crear una página para un formulario y que se imprima los datos en otra página
Descripción del
proceso:
1. Lo primero fue prender la computadora.

2. Lo segundo fue abrir el Visual Studio Code.
3. Lo tercero fue analizar el trabajo que íbamos a realizar.
4. Después de eso pasamos a plasmar nuestro código en el visual studio.
5. Ya para terminar solo tuvimos que diseñar nuestra página web y poner en
ello el código del formulario.
6. Y por último solo tenemos que hacer que la pagina web pueda funcionar
correctamente y que los datos ingresados impriman en la página destino.html
y el docente pasa a revisarlo para dar el visto bueno.
HACER ESQUEMA, DIBUJO O DIAGRA
Pruebas del la semana:
CODIGO DEL DIA LUNES: “Formulario”
<!DOCTYPE html>
<html>
<head>
<title>REGISTRO</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('Imagen de WhatsApp 2024-04-15 a las 09.04.27_e8e4b52e.jpg');
background-size: cover;
background-position: center;
}
.container {
max-width: 600px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 20px auto;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="password"],
textarea,
select {
width: calc(100% - 16px); /* Adjusting for padding */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="radio"] {
margin-right: 5px;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>REGISTRARSE</h1>
<form method="get" action="destino.html">

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<label for="edad">Edad:</label>
<input type="text" id="edad" name="edad" required>
<label for="sexo">Sexo:</label>
<select id="sexo" name="sexo">
<option value="masculino">Masculino</option>
<option value="femenino">Femenino</option>
<option value="otro">Otro</option>
</select>
<label for="direccion">Dirección Completa:</label>

<textarea id="direccion" name="direccion" rows="5" required></textarea>
<label for="telefono">Teléfono:</label>
<input type="text" id="telefono" name="telefono" required>
<label for="correo">Correo Electrónico:</label>

<input type="text" id="correo" name="correo" required>
<label for="ocupacion">Ocupación:</label>
<input type="text" id="ocupacion" name="ocupacion" required>
<label for="nacionalidad">Nacionalidad:</label>
<input type="text" id="nacionalidad" name="nacionalidad" required>
<label for="tutor">Tutor:</label>
<input type="text" id="tutor" name="tutor" required>
<label for="identificacion">Identificación:</label>
<input type="text" id="identificacion" name="identificacion" required>
<label for="fecha">Fecha de Inscripción:</label>

<input type="text" id="fecha" name="fecha" required>
<label for="categoria">Categoría:</label>
<input type="text" id="categoria" name="categoria" required>
<label>¿Ha participado anteriormente en un concurso similar?</label>

<input type="radio" id="si" name="participacion" value="si" required>
<label for="si">Sí</label>
<input type="radio" id="no" name="participacion" value="no" required>
<label for="no">No</label>
<label for="concurso">¿En cuál?</label>

<input type="text" id="concurso" name="concurso">
<input type="submit" value="Registrar">

</form>
</div>
</body>
</html>
CODIGO DEL DIA LUNES: “Destino”
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boleta de Inscripción - Concurso de Trabalenguas, Chistes y Narraciones
Mexicanas</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('Imagen de WhatsApp 2024-04-15 a las 09.04.27_e8e4b52e.jpg');
}
.container {
max-width: 600px;
padding: 20px;
margin: 20px auto;
}
h1 {
text-align: center;
grid-column: span 2;
}
.column-left {
grid-column: 1 / span 1;
}
.column-right {
}
p {
}
.label {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Concurso de Trabalenguas, Chistes y Narraciones Mexicanas</h1>
<div class="column-left">
<p><span class="label">Nombre:</span> <span id="nombre"></span></p>
<p><span class="label">Dirección Completa:</span> <span id="direccion"></span></p>
<p><span class="label">Teléfono:</span> <span id="telefono"></span></p>
<p><span class="label">Ocupación:</span> <span id="ocupacion"></span></p>
<p><span class="label">Tutor:</span> <span id="tutor"></span></p>
</div>
<div class="column-right">
<p><span class="label">Edad:</span> <span id="edad"></span></p>
<p><span class="label">Sexo:</span> <span id="sexo"></span></p>
<p><span class="label">Correo Electrónico:</span> <span id="correo"></span></p>
<p><span class="label">Nacionalidad:</span> <span id="nacionalidad"></span></p>
<p><span class="label">Identificación:</span> <span id="identificacion"></span></p>
</div>
<p><span class="label">Fecha de Inscripción:</span> <span id="fecha"></span></p>
<p><span class="label">Categoría:</span> <span id="categoria"></span></p>
<p><span class="label">¿Ha participado anteriormente en un concurso similar?</span>
<span id="participacion"></span></p>
<p><span class="label">¿En cuál?</span> <span id="concurso"></span></p>
</div>
<script>
// Función para obtener los parámetros de consulta de la URL
function obtenerParametroConsulta(nombre) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(nombre);
}
// Obtener los parámetros de consulta

const nombre = obtenerParametroConsulta('nombre');
const edad = obtenerParametroConsulta('edad');
const sexo = obtenerParametroConsulta('sexo');
const direccion = obtenerParametroConsulta('direccion');
const telefono = obtenerParametroConsulta('telefono');
const correo = obtenerParametroConsulta('correo');
const ocupacion = obtenerParametroConsulta('ocupacion');
const nacionalidad = obtenerParametroConsulta('nacionalidad');
const tutor = obtenerParametroConsulta('tutor');
const identificacion = obtenerParametroConsulta('identificacion');
const fecha = obtenerParametroConsulta('fecha');
const categoria = obtenerParametroConsulta('categoria');
const participacion = obtenerParametroConsulta('participacion');
const concurso = obtenerParametroConsulta('concurso');
// Mostrar los datos en el HTML

document.getElementById('nombre').textContent = nombre || 'No especificado';
document.getElementById('edad').textContent = edad || 'No especificado';
document.getElementById('sexo').textContent = sexo || 'No especificado';
document.getElementById('direccion').textContent = direccion || 'No especificado';
document.getElementById('telefono').textContent = telefono || 'No especificado';
document.getElementById('correo').textContent = correo || 'No especificado';
document.getElementById('ocupacion').textContent = ocupacion || 'No especificado';
document.getElementById('nacionalidad').textContent = nacionalidad || 'No especificado';
document.getElementById('tutor').textContent = tutor || 'No especificado';
document.getElementById('identificacion').textContent = identificacion || 'No
especificado';
document.getElementById('fecha').textContent = fecha || 'No especificado';
document.getElementById('categoria').textContent = categoria || 'No especificado';
document.getElementById('participacion').textContent = participacion || 'No
especificado';
document.getElementById('concurso').textContent = concurso || 'No especificado';
</script>
</body>
</html>
PRUEBAS DEL DIA MARTES:

Código del martes:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url('1b3c5821c4ef798f196b30cc3eb46ac2.gif');
}
.container {
max-width: 600px;
padding: 20px;
margin: 20px auto;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: inline-block; /* Cambiamos de 'block' a 'inline-block' para que ocupen el
ancho necesario */
margin-bottom: 5px;
font-weight: bold;
width: 45%; /* Establecemos un ancho fijo para que las etiquetas tengan un ancho
uniforme */
}
input[type="text"],
textarea,
select {
width: 50%; /* Establecemos un ancho del 50% para los campos de entrada */
padding: 8px;
border-radius: 4px;
}
margin-right: 5px;
}
width: 100%;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
}
</style>
</head>
<body>
<h1>FORMULARIO DE REGISTRO DE CLIENTES</h1>

<label for="persona">Tipo de Persona:</label>
<select id="persona" name="persona">
<option value="natural">Persona Natural</option>
<option value="juridica">Persona Jurídica</option>
</select>
<p><strong>Persona Natural:</strong> Fotocopia de cedula de Ciudadanía. Tarjeta
profesional y Fotocopia del RUT.</p>
<p><strong>Persona Jurídica:</strong> Cámara y Comercio (no mayor a 30 día), Fotocopia de
RUT y Cedula de Ciudadanía del Representante Legal.</p>
<p><strong>Datos básicos del cliente:</strong></p>
<label for="ciudad">Ciudad:</label>
<input type="text" id="ciudad" name="ciudad" required>
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha" required>
<label for="cedula">Cédula SI/NO:</label>

<div id="cedula">
<input type="radio" id="cedula_si" name="cedula" value="si" required>
<label for="cedula_si">Sí</label>
<input type="radio" id="cedula_no" name="cedula" value="no" required>
<label for="cedula_no">No</label>
</div>
<label for="nombre">Nombre o Razón Social:</label>

<label for="direccion">Dirección de domicilio principal:</label>

<label for="barrio">Barrio:</label>
<input type="text" id="barrio" name="barrio" required>
<label for="departamento">Departamento:</label>
<input type="text" id="departamento" name="departamento" required>
<p><b>(*Información requerida para personas naturales)</b></p>
<label for="profesion">Profesión:</label>
<input type="text" id="profesion" name="profesion">
<label for="especialidad">Especialidad:</label>
<input type="text" id="especialidad" name="especialidad">
<label for="fecha_nacimiento">Fecha de Nacimiento:</label>

<input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required>
<label for="direccion_casa">Dirección Casa:</label>

<textarea id="direccion_casa" name="direccion_casa" rows="5"></textarea>
<label for="direccion_entrega">Dirección para entrega de pedidos:</label>

<textarea id="direccion_entrega" name="direccion_entrega" rows="5"></textarea>
<label for="telefono">Teléfono No:</label>
<input type="text" id="telefono" name="telefono">
<label for="fax">Fax No:</label>

<input type="text" id="fax" name="fax">
<label for="celular">Celular:</label>
<input type="text" id="celular" name="celular">
<label for="email1">E-mail 1:</label>

<input type="text" id="email1" name="email1">


</form>
</div>
</body>
</html>
Código del destino:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Destino</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('de3412e3c5d2ed0b11ec8291a28a3db5.webp');
}
.container {
max-width: 600px;
padding: 20px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.column-left {
}
.column-right {
}
p {
}
.label {
font-weight: bold;
}
</style>
</head>
<body>
<h1><strong>FORMULARIO DE REGISTRO DE CLIENTES</strong></h1>
<p style="font-weight: bold; color: blue; text-decoration: underline;"><strong>Datos

básicos del cliente:</strong></p>
<p><span class="label">Ciudad:</span> <span id="ciudad"></span></p>
<p><span class="label">Fecha:</span> <span id="fecha"></span></p>
<p><span class="label">Cédula SI/NO:</span> <span id="cedula"></span></p>
<p><span class="label">Nombre o Razón Social:</span> <span
id="nombre_razon_social"></span></p>
<p><span class="label">Dirección de domicilio principal:</span> <span
id="direccion"></span></p>
<p><span class="label">Barrio:</span> <span id="barrio"></span></p>
<p><span class="label">Departamento:</span> <span id="departamento"></span></p>
<p style="font-weight: bold; color: blue; text-decoration:

underline;"><strong>(*Información requerida para personas naturales)</strong></p>
<p><span class="label">Profesión:</span> <span id="profesion"></span></p>

<p><span class="label">Especialidad:</span> <span id="especialidad"></span></p>
<p><span class="label">Fecha de Nacimiento:</span> <span
id="fecha_nacimiento"></span></p>
</div>
<p><span class="label">Dirección Casa:</span> <span id="direccion_casa"></span></p>
<p><span class="label">Dirección para entrega de pedidos:</span> <span
id="direccion_entrega"></span></p>
<p><span class="label">Teléfono No:</span> <span id="telefono_no"></span></p>
<p><span class="label">Fax No:</span> <span id="fax_no"></span></p>
<p><span class="label">Celular:</span> <span id="celular"></span></p>
<p><span class="label">E-mail 1:</span> <span id="email1"></span></p>
</div>
</div>
<script>
// Obtener los parámetros de consulta de la URL
}
// Obtener los datos de la URL

const ciudad = obtenerParametroConsulta('ciudad');
const cedula = obtenerParametroConsulta('cedula');
const nombreRazonSocial = obtenerParametroConsulta('nombre');
const barrio = obtenerParametroConsulta('barrio');
const departamento = obtenerParametroConsulta('departamento');
const profesion = obtenerParametroConsulta('profesion');
const especialidad = obtenerParametroConsulta('especialidad');
const fechaNacimiento = obtenerParametroConsulta('fecha_nacimiento');
const direccionCasa = obtenerParametroConsulta('direccion_casa');
const direccionEntrega = obtenerParametroConsulta('direccion_entrega');
const telefonoNo = obtenerParametroConsulta('telefono');
const faxNo = obtenerParametroConsulta('fax');
const celular = obtenerParametroConsulta('celular');
const email1 = obtenerParametroConsulta('email1');

document.getElementById('ciudad').textContent = ciudad || 'No especificado';
document.getElementById('cedula').textContent = cedula || 'No especificado';
document.getElementById('nombre_razon_social').textContent = nombreRazonSocial || 'No
especificado';
document.getElementById('barrio').textContent = barrio || 'No especificado';
document.getElementById('departamento').textContent = departamento || 'No especificado';
document.getElementById('profesion').textContent = profesion || 'No especificado';
document.getElementById('especialidad').textContent = especialidad || 'No especificado';
document.getElementById('fecha_nacimiento').textContent = fechaNacimiento || 'No
especificado';
document.getElementById('direccion_casa').textContent = direccionCasa || 'No
especificado';
document.getElementById('direccion_entrega').textContent = direccionEntrega || 'No
especificado';
document.getElementById('telefono_no').textContent = telefonoNo || 'No especificado';
document.getElementById('fax_no').textContent = faxNo || 'No especificado';
document.getElementById('celular').textContent = celular || 'No especificado';
document.getElementById('email1').textContent = email1 || 'No especificado';
</script>
</body>
</html>
PRUEBAS DEL DÍA MIÉRCOLES:

Código del menú:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
background-color: #f4f4f4;
padding: 10px;
text-align: center;
}
nav a {
text-decoration: none;
color: #333;
padding: 10px 20px;
}
nav a:hover {
background-color: #ccc;
}
/* Animación para la rotación */
@keyframes rotateImage {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<header>
<h1 id="titulo1">FORMULARIOS</h1>
</header>
<nav>
<a href="formulario.html">Formulario N°1</a>
<a href="fomulario2.html">Formulario N°2</a>
<a href="fomulario3.html">Formulario N°3</a>
</nav>
<div>

</html>
Códigos del formulario 1:

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
padding: 20px;
margin: 20px auto;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: inline-block; /* Cambiamos de 'block' a 'inline-block' para que ocupen el
ancho necesario */
margin-bottom: 5px;
font-weight: bold;
width: 45%; /* Establecemos un ancho fijo para que las etiquetas tengan un ancho
uniforme */
}
input[type="text"],
textarea,
select {
width: 50%; /* Establecemos un ancho del 50% para los campos de entrada */
padding: 8px;
border-radius: 4px;
}
margin-right: 5px;
}
width: 100%;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
}
</style>
</head>
<body>
<h1>FORMULARIO DE REGISTRO DE CLIENTES</h1>

<label for="persona">Tipo de Persona:</label>
<select id="persona" name="persona">
<option value="natural">Persona Natural</option>
<option value="juridica">Persona Jurídica</option>
</select>

<p><strong>Datos básicos del cliente:</strong></p>
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" name="fecha" required>
<label for="cedula">Cédula SI/NO:</label>

<div id="cedula">
<input type="radio" id="cedula_si" name="cedula" value="si" required>
<label for="cedula_si">Sí</label>
<input type="radio" id="cedula_no" name="cedula" value="no" required>
<label for="cedula_no">No</label>
</div>
<label for="nombre">Nombre o Razón Social:</label>

<label for="direccion">Dirección de domicilio principal:</label>

<label for="barrio">Barrio:</label>
<input type="text" id="barrio" name="barrio" required>
<label for="departamento">Departamento:</label>
<input type="text" id="departamento" name="departamento" required>
<p><b>(*Información requerida para personas naturales)</b></p>
<label for="profesion">Profesión:</label>
<input type="text" id="profesion" name="profesion">
<label for="especialidad">Especialidad:</label>
<input type="text" id="especialidad" name="especialidad">
<label for="fecha_nacimiento">Fecha de Nacimiento:</label>

<input type="date" id="fecha_nacimiento" name="fecha_nacimiento" required>
<label for="direccion_casa">Dirección Casa:</label>

<textarea id="direccion_casa" name="direccion_casa" rows="5"></textarea>
<label for="direccion_entrega">Dirección para entrega de pedidos:</label>

<textarea id="direccion_entrega" name="direccion_entrega" rows="5"></textarea>
<label for="telefono">Teléfono No:</label>

<input type="text" id="telefono" name="telefono">
<label for="fax">Fax No:</label>

<input type="text" id="fax" name="fax">
<label for="celular">Celular:</label>
<input type="text" id="celular" name="celular">



</form>
</div>
</body>
</html>
Código de destino del formulario 1:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Destino</title>
<style>
body {
margin: 0;
padding: 0;
background-image: url('de3412e3c5d2ed0b11ec8291a28a3db5.webp');
}
.container {
max-width: 600px;
padding: 20px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.column-left {
}
.column-right {
}
p {
}
.label {
font-weight: bold;
}
</style>
</head>
<body>
<h1><strong>FORMULARIO DE REGISTRO DE CLIENTES</strong></h1>
<p style="font-weight: bold; color: blue; text-decoration: underline;"><strong>Datos

básicos del cliente:</strong></p>
<p><span class="label">Ciudad:</span> <span id="ciudad"></span></p>
<p><span class="label">Fecha:</span> <span id="fecha"></span></p>
<p><span class="label">Cédula SI/NO:</span> <span id="cedula"></span></p>
<p><span class="label">Nombre o Razón Social:</span> <span
id="nombre_razon_social"></span></p>
<p><span class="label">Dirección de domicilio principal:</span> <span
id="direccion"></span></p>
<p><span class="label">Barrio:</span> <span id="barrio"></span></p>
<p><span class="label">Departamento:</span> <span id="departamento"></span></p>
<p style="font-weight: bold; color: blue; text-decoration:

underline;"><strong>(*Información requerida para personas naturales)</strong></p>
<p><span class="label">Profesión:</span> <span id="profesion"></span></p>

<p><span class="label">Especialidad:</span> <span id="especialidad"></span></p>
<p><span class="label">Fecha de Nacimiento:</span> <span
id="fecha_nacimiento"></span></p>
</div>
<p><span class="label">Dirección Casa:</span> <span id="direccion_casa"></span></p>
<p><span class="label">Dirección para entrega de pedidos:</span> <span
id="direccion_entrega"></span></p>
<p><span class="label">Teléfono No:</span> <span id="telefono_no"></span></p>
<p><span class="label">Fax No:</span> <span id="fax_no"></span></p>
<p><span class="label">Celular:</span> <span id="celular"></span></p>
</div>
</div>
<script>
// Obtener los parámetros de consulta de la URL
}
// Obtener los datos de la URL

const ciudad = obtenerParametroConsulta('ciudad');
const cedula = obtenerParametroConsulta('cedula');
const nombreRazonSocial = obtenerParametroConsulta('nombre');
const barrio = obtenerParametroConsulta('barrio');
const departamento = obtenerParametroConsulta('departamento');
const profesion = obtenerParametroConsulta('profesion');
const especialidad = obtenerParametroConsulta('especialidad');
const fechaNacimiento = obtenerParametroConsulta('fecha_nacimiento');
const direccionCasa = obtenerParametroConsulta('direccion_casa');
const direccionEntrega = obtenerParametroConsulta('direccion_entrega');
const telefonoNo = obtenerParametroConsulta('telefono');
const faxNo = obtenerParametroConsulta('fax');
const celular = obtenerParametroConsulta('celular');

document.getElementById('ciudad').textContent = ciudad || 'No especificado';
document.getElementById('cedula').textContent = cedula || 'No especificado';
document.getElementById('nombre_razon_social').textContent = nombreRazonSocial || 'No
especificado';
document.getElementById('barrio').textContent = barrio || 'No especificado';
document.getElementById('departamento').textContent = departamento || 'No especificado';
document.getElementById('profesion').textContent = profesion || 'No especificado';
document.getElementById('especialidad').textContent = especialidad || 'No especificado';
document.getElementById('fecha_nacimiento').textContent = fechaNacimiento || 'No
especificado';
document.getElementById('direccion_casa').textContent = direccionCasa || 'No
especificado';
document.getElementById('direccion_entrega').textContent = direccionEntrega || 'No
especificado';
document.getElementById('telefono_no').textContent = telefonoNo || 'No especificado';
document.getElementById('fax_no').textContent = faxNo || 'No especificado';
document.getElementById('celular').textContent = celular || 'No especificado';
</script>
</body>
</html>
Código del formulario 2:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px; /* Ampliamos el contenedor */
padding: 20px;
margin: 20px auto;
display: grid; /* Usamos una cuadrícula para el diseño */
grid-template-columns: repeat(2, 1fr); /* Dividimos en dos columnas */
grid-gap: 10px; /* Espacio entre los elementos */
}
h1 {
text-align: center;
grid-column: span 2; /* Estiramos el título sobre ambas columnas */
}
form {
margin-top: 20px;
grid-column: span 2; /* Estiramos el formulario sobre ambas columnas */
}
label {
display: block; /* Convertimos las etiquetas en bloques */
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="date"],
select,
textarea,
input[type="file"] {
width: calc(100% - 20px); /* Ajustamos el ancho de los campos */
padding: 8px;
border-radius: 4px;
}
.buttons {
margin-top: 20px;
text-align: center;
grid-column: span 2; /* Estiramos los botones sobre ambas columnas */
}
button {
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 0 5px; /* Agregamos un pequeño margen a los botones */
}
button:hover {
}
</style>
</head>
<body>
<h1>MODIFICACIÓN DE ARTICULOS</h1>
<form method="get" action="destino2.html">

<label for="codigo">Código:</label>
<input type="text" id="codigo" name="codigo" required>
<label for="cod_prov">Cod.Prov:</label>
<input type="text" id="cod_prov" name="cod_prov" required>
<label for="descripcion">Descripción:</label>
<input type="text" id="descripcion" name="descripcion" required>
<label for="rubro">Rubro:</label>
<select id="rubro" name="rubro">
<option value="Ferretería">Ferretería</option>
<option value="Perfumería">Perfumería</option>
<option value="Boutique">Boutique</option>
</select>
<label for="marca">Marca:</label>
<select id="marca" name="marca">
<option value="Alifor">Alifor</option>
<option value="Unic">Unic</option>
<option value="Chanel">Chanel</option>
</select>
<label for="unidad">Unidad:</label>
<select id="unidad" name="unidad">
<option value="Unidad 1">Unidad 1</option>
</select>
<label for="proveedor">Proveedor:</label>
<select id="proveedor" name="proveedor">
<option value="Caterpillar">Caterpillar</option>
<option value="Sisón">Sisón</option>
<option value="Rolex">Rolex</option>
</select>
<label for="fecha_compra">Fecha de Compra:</label>

<input type="date" id="fecha_compra" name="fecha_compra" required>
<label for="cambiar_foto">Cambiar Foto:</label>

<input type="file" id="cambiar_foto" name="cambiar_foto">
<label for="costo">Costo:</label>
<input type="text" id="costo" name="costo" required>
<label for="ganancia">%Ganancia</label>
<input type="text" id="ganancia" name="ganancia" required>
<label for="iva">Iva:</label>
<select id="iva" name="iva">
<option value="21">21</option>
<option value="22.34">22</option>
<option value="22.34">34</option>
</select>
<label for="ubic">Ubic:</label>
<input type="text" id="ubic" name="ubic" required>
<label for="precio_calculado">Precio Calculado:</label>

<input type="checkbox" id="precio_calculado" name="precio_calculado">
<label for="stock">Stock:</label>
<input type="text" id="stock" name="stock" required>
<label for="stock_minimo">Stock Mínimo:</label>

<input type="text" id="stock_minimo" name="stock_minimo" required>
<label for="efectivo">Efectivo:</label>
<input type="text" id="efectivo" name="efectivo" required>
<label for="tarjeta">Tarjeta:</label>
<input type="text" id="tarjeta" name="tarjeta" required>
<label for="lista3">Lista 3:</label>

<input type="text" id="lista3" name="lista3" required>
<label for="lista4">Lista 4:</label>

<input type="text" id="lista4" name="lista4" required>
<div class="buttons">
<button type="submit">Guardar</button>
<button type="button">Cancelar</button>
</div>
</form>
</div>
</body>
</html>
Código de destino formulario 2:

<!DOCTYPE html>
<html>
<head>
<title>Datos del Formulario</title>
<style>
body {
margin: 0;
padding: 20px;
background-image: url('de3412e3c5d2ed0b11ec8291a28a3db5.webp'); /* Cambia
'ruta/de/la/imagen/fondo.jpg' por la ruta de tu imagen de fondo */
background-repeat: no-repeat;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.8); /* Color de fondo para el contenedor */
padding: 20px;
}
h1 {
text-align: center;
}
.datos {
}
#imagenProducto {
max-width: 100%;
}
</style>
</head>
<body>
<h1>MODIFICACIÓN DE ARTICULOS</h1>
<div class="datos" id="datosFormulario"></div>
</div>
<script>
window.onload = function() {
// Obtener los parámetros de la URL
// Obtener los valores de los parámetros del formulario

const codigo = urlParams.get('codigo');
const cod_prov = urlParams.get('cod_prov');
const descripcion = urlParams.get('descripcion');
const rubro = urlParams.get('rubro');
const marca = urlParams.get('marca');
const unidad = urlParams.get('unidad');
const proveedor = urlParams.get('proveedor');
const fecha_compra = urlParams.get('fecha_compra');
const cambiar_foto = urlParams.get('cambiar_foto');
const costo = urlParams.get('costo');
const ganancia = urlParams.get('ganancia');
const iva = urlParams.get('iva');
const ubic = urlParams.get('ubic');
const precio_calculado = urlParams.get('precio_calculado');
const stock = urlParams.get('stock');
const stock_minimo = urlParams.get('stock_minimo');
const efectivo = urlParams.get('efectivo');
const tarjeta = urlParams.get('tarjeta');
const lista3 = urlParams.get('lista3');
const lista4 = urlParams.get('lista4');
// Mostrar los valores en el contenedor de datos

document.getElementById('datosFormulario').innerHTML = `
<p><strong>Código:</strong> ${codigo}</p>
<p><strong>Cod.Prov:</strong> ${cod_prov}</p>
<p><strong>Descripción:</strong> ${descripcion}</p>
<p><strong>Rubro:</strong> ${rubro}</p>
<p><strong>Marca:</strong> ${marca}</p>
<p><strong>Unidad:</strong> ${unidad}</p>
<p><strong>Proveedor:</strong> ${proveedor}</p>
<p><strong>Fecha de Compra:</strong> ${fecha_compra}</p>
<p><strong>Cambiar Foto:</strong> <a href="${cambiar_foto}">${cambiar_foto}</a></p>
<p><strong>Costo:</strong> ${costo}</p>
<p><strong>%Ganancia:</strong> ${ganancia}</p>
<p><strong>IVA:</strong> ${iva}</p>
<p><strong>Ubicación:</strong> ${ubic}</p>
<p><strong>Precio Calculado:</strong> ${precio_calculado}</p>
<p><strong>Stock:</strong> ${stock}</p>
<p><strong>Stock Mínimo:</strong> ${stock_minimo}</p>
<p><strong>Efectivo:</strong> ${efectivo}</p>
<p><strong>Tarjeta:</strong> ${tarjeta}</p>
<p><strong>Lista 3:</strong> ${lista3}</p>
<p><strong>Lista 4:</strong> ${lista4}</p>
`;
// Mostrar la imagen del producto

document.getElementById('HP2.jpg').src = cambiar_foto;
};
</script>
</body>
</html>
Código del formulario 3:
<!DOCTYPE html>
<html lang="es">
<head>
<title>ACCIDENTE/LESIÓN LABORAL - FORMULARIO DE INFORME</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url('1b3c5821c4ef798f196b30cc3eb46ac2.gif'); /* Reemplaza
'tu_imagen_de_fondo.jpg' con la ruta de tu imagen de fondo */
}
.container {
padding: 30px;
max-width: 80%;
text-align: left;
}
h1 {
margin-top: 20px;
color: #333;
}
h2 {
color: #333;
}
p {
text-align: left;
margin-left: 10px;
}
p:last-child {
}
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="checkbox"] {
width: auto;
margin: 5px;
padding: 8px;
border-radius: 4px;
}
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
}
</style>
</head>
<body>
<h1>ACCIDENTE/LESIÓN LABORAL - FORMULARIO DE INFORME</h1>
<p><strong>Instrucciones:</strong> Este formulario se completará lo antes posible
después de un accidente o lesión relacionado con el empleado. Si el empleado no puede, el
supervisor deberá completar este formulario y luego enviarlo a la oficina de Recursos
Humanos.</p>
<p style="float: left;">N° De reclamación:</p>
<form method="get" action="Destino3.html">
<h2>INFORMACION PERSONAL</h2>
<p>Nombre del empleado: <input type="text" name="nombre_empleado"> N° de seguro:
<input type="text" name="seguro"> ID del empleado: <input type="text" name="id_empleado">
Fecha: <input type="date" name="fecha"></p>
<p>Puesto: <input type="text" name="puesto"> Fecha de contratación: <input
type="date" name="fecha_contratacion"> Tarifa de pago: <input type="text"
name="tarifa_pago"></p>
<p>Dirección Postal: <input type="text" name="direccion"> Teléfono fijo: <input
type="tel" name="telefono_fijo"> Teléfono Laboral: <input type="tel"
name="telefono_laboral"></p>
<p>Nombre del supervisor: <input type="text" name="supervisor"> Correo
electrónico del supervisor: <input type="email" name="email_supervisor"> Teléfono: <input
type="tel" name="telefono_supervisor"></p>
<p>Estado del empleado:
<label><input type="radio" name="estado_empleado" value="tiempo_completo">
Tiempo completo</label>
<label><input type="radio" name="estado_empleado" value="tiempo_parcial">
Tiempo parcial</label>
</p>
<p>Horas por día: <input type="text" name="horas_dia"> Días por semana: <input
type="text" name="dias_semana"></p>
<h2>INFORMACION SOBRE LESIONES/ACCIDENTE</h2>

<p>Ubicación de la lesión: <input type="text" name="ubicacion_lesion"> Fecha de
la lesión: <input type="date" name="fecha_lesion"> Hora de la lesión: <input type="time"
name="hora_lesion"></p>
<p>¿La lesión causó pérdida de tiempo en el trabajo? Proporcione fechas: <input
type="text" name="fecha_perdida_tiempo"> ¿El empleado ha regresado al trabajo? <input
type="text" name="regreso_trabajo"></p>
<p>Testigos: <input type="text" name="testigos"></p>
<p>Descripción de la lesión: <textarea name="descripcion_lesion" rows="4"
cols="50"></textarea></p>
<p>Descripción del incidente: <textarea name="descripcion_incidente" rows="4"
cols="50"></textarea></p>

</form>
</div>
</body>
</html>
Código del destino del formulario 3:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Datos del Formulario</title>
<style>
body {
margin: 0;
padding: 20px;
background-image: url('de3412e3c5d2ed0b11ec8291a28a3db5.webp'); /* Reemplaza
'ruta_de_tu_imagen.jpg' con la ruta de tu imagen de fondo */
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
.datos {
}
</style>
</head>
<body>
<h1>ACCIDENTE/LESIÓN LABORAL - FORMULARIO DE INFORME</h1>
<div class="datos" id="datosFormulario"></div>
</div>
<script>
window.onload = function() {
const nombre_empleado = urlParams.get('nombre_empleado');

const seguro = urlParams.get('seguro');
const id_empleado = urlParams.get('id_empleado');
const fecha = urlParams.get('fecha');
const puesto = urlParams.get('puesto');
const fecha_contratacion = urlParams.get('fecha_contratacion');
const tarifa_pago = urlParams.get('tarifa_pago');
const direccion = urlParams.get('direccion');
const telefono_fijo = urlParams.get('telefono_fijo');
const telefono_laboral = urlParams.get('telefono_laboral');
const supervisor = urlParams.get('supervisor');
const email_supervisor = urlParams.get('email_supervisor');
const telefono_supervisor = urlParams.get('telefono_supervisor');
const estado_empleado = urlParams.get('estado_empleado');
const horas_dia = urlParams.get('horas_dia');
const dias_semana = urlParams.get('dias_semana');
const ubicacion_lesion = urlParams.get('ubicacion_lesion');
const fecha_lesion = urlParams.get('fecha_lesion');
const hora_lesion = urlParams.get('hora_lesion');
const fecha_perdida_tiempo = urlParams.get('fecha_perdida_tiempo');
const regreso_trabajo = urlParams.get('regreso_trabajo');
const testigos = urlParams.get('testigos');
const descripcion_lesion = urlParams.get('descripcion_lesion');
const descripcion_incidente = urlParams.get('descripcion_incidente');
document.getElementById('datosFormulario').innerHTML = `
<p><strong>Nombre del empleado:</strong> ${nombre_empleado}</p>
<p><strong>N° de seguro:</strong> ${seguro}</p>
<p><strong>ID del empleado:</strong> ${id_empleado}</p>
<p><strong>Fecha:</strong> ${fecha}</p>
<p><strong>Puesto:</strong> ${puesto}</p>
<p><strong>Fecha de contratación:</strong> ${fecha_contratacion}</p>
<p><strong>Tarifa de pago:</strong> ${tarifa_pago}</p>
<p><strong>Dirección Postal:</strong> ${direccion}</p>
<p><strong>Teléfono fijo:</strong> ${telefono_fijo}</p>
<p><strong>Teléfono Laboral:</strong> ${telefono_laboral}</p>
<p><strong>Nombre del supervisor:</strong> ${supervisor}</p>
<p><strong>Correo electrónico del supervisor:</strong> $
{email_supervisor}</p>
<p><strong>Teléfono del supervisor:</strong> ${telefono_supervisor}</p>
<p><strong>Estado del empleado:</strong> ${estado_empleado}</p>
<p><strong>Horas por día:</strong> ${horas_dia}</p>
<p><strong>Días por semana:</strong> ${dias_semana}</p>
<p><strong>Ubicación de la lesión:</strong> ${ubicacion_lesion}</p>
<p><strong>Fecha de la lesión:</strong> ${fecha_lesion}</p>
<p><strong>Hora de la lesión:</strong> ${hora_lesion}</p>
<p><strong>¿La lesión causó pérdida de tiempo en el trabajo? Proporcione
fechas:</strong> ${fecha_perdida_tiempo}</p>
<p><strong>¿El empleado ha regresado al trabajo?</strong> $
{regreso_trabajo}</p>
<p><strong>Testigos:</strong> ${testigos}</p>
<p><strong>Descripción de la lesión:</strong> ${descripcion_lesion}</p>
<p><strong>Descripción del incidente:</strong> ${descripcion_incidente}</p>
`;
};
</script>
</body>
</html>
AUTOCONTROL DE ASISTENCIA POR EL ESTUDIANTE
LUNES MARTES MIÉRCOLES JUEVES VIERNES SÁBADO
M T M T M T M T M T M T
INJUSTIFICADAS: I
ASISTENCIA A SENATI 3 INASISTENCIA
JUSTIFICADAS : FJ
EVALUACIÓN DEL INFORME DE TRABAJO SEMANAL

NOTA
OBSERVACIONES Y RECOMENDACIONES
DEL INSTRUCTOR: DEL MONITOR DE EMPRESA:
FIRMA DE MONITOR DE
FIRMA DEL ESTUDIANTE: EMPRESA: FIRMA DEL INSTRUCTOR:
PROPIEDAD INTELECTUAL DEL SENATI. PROHIBIDA SU
REPRODUCCIÓN Y VENTA SIN LA AUTORIZACIÓN
CORRESPONDIENTE

PIAD-216 - CUADERNO DE INFORMES - Semana2 - 24

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

PIAD-216 - CUADERNO DE INFORMES - Semana2 - 24

Cargado por

Copyright:

Formatos disponibles

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

FORMACIÓN PROFESIONAL DUAL

FORMACIÓN PROFESIONAL DUAL

ESTUDIANTE: Gonzalo Tarazona Robyn Jhordan

ID: 001557976 BLOQUE: 1

CARRERA: Ingeniería de Software con Inteligencia Artificial

INSTRUCTOR: Charlen Máximo Calero Huamán

SEMESTRE: II DEL: 01/04/2024 AL: 17/04/2024

El Cuaderno de Informes de trabajo semanal es un documento de control, en el cual el estudiante,

2. INSTRUCCIONES PARA EL USO DEL CUADERNO DE INFORMES.

CUANTITATIVA CUALITATIVA CONDICIÓN

*Número de repeticiones realizadas.

II SEMESTRE SEMANA N° 3 DEL 15/04 AL 17/04 DEL 2024

DÍA TRABAJOS EFECTUADOS HORAS

El lunes realizamos un código para crear un formulario en

El martes creamos un código para otro formulario donde

El miércoles unimos tres códigos en una sola pagina y

1. Lo primero fue prender la computadora.

<form method="get" action="destino.html">

<label for="direccion">Dirección Completa:</label>

<label for="correo">Correo Electrónico:</label>

<label for="fecha">Fecha de Inscripción:</label>

<label>¿Ha participado anteriormente en un concurso similar?</label>

<label for="concurso">¿En cuál?</label>

<input type="submit" value="Registrar">

// Obtener los parámetros de consulta

// Mostrar los datos en el HTML

PRUEBAS DEL DIA MARTES:

<form method="get" action="destino.html">

<p><strong>Datos básicos del cliente:</strong></p>

<label for="cedula">Cédula SI/NO:</label>

<label for="nombre">Nombre o Razón Social:</label>

<label for="direccion">Dirección de domicilio principal:</label>

<p><b>(*Información requerida para personas naturales)</b></p>

<label for="fecha_nacimiento">Fecha de Nacimiento:</label>

<label for="direccion_casa">Dirección Casa:</label>

<label for="direccion_entrega">Dirección para entrega de pedidos:</label>

<label for="fax">Fax No:</label>

<label for="email1">E-mail 1:</label>

<label for="email2">E-mail 2:</label>

<input type="submit" value="Registrar">

Código del destino:

<p style="font-weight: bold; color: blue; text-decoration: underline;"><strong>Datos

<p style="font-weight: bold; color: blue; text-decoration:

<p><span class="label">Profesión:</span> <span id="profesion"></span></p>

// Obtener los datos de la URL

// Mostrar los datos en el HTML

PRUEBAS DEL DÍA MIÉRCOLES:

Códigos del formulario 1:

<form method="get" action="destino.html">

<p><strong>Persona Natural:</strong> Fotocopia de cedula de Ciudadanía. Tarjeta

<p><strong>Datos básicos del cliente:</strong></p>

<label for="cedula">Cédula SI/NO:</label>

<label for="nombre">Nombre o Razón Social:</label>

<label for="direccion">Dirección de domicilio principal:</label>

<p><b>(*Información requerida para personas naturales)</b></p>

<label for="fecha_nacimiento">Fecha de Nacimiento:</label>

<label for="direccion_casa">Dirección Casa:</label>

<label for="direccion_entrega">Dirección para entrega de pedidos:</label>

<label for="telefono">Teléfono No:</label>

<label for="fax">Fax No:</label>

<label for="email1">E-mail 1:</label>

<label for="email2">E-mail 2:</label>