Walter Reyes Peña Tarea Senana 5 HTML2

Fundamentos de JavaScript.
Walter Fernando Reyes Peña
Programación HTML II
Instituto IACC
13-10-2019
INTRODUCCIÓN
INSTRUCCIONES: Recuerde que usted pertenece al departamento de informática

de una compañía de análisis de mercado denominada Merana, y en las últimas
semanas ha estado trabajando en el desarrollo de un nuevo proyecto donde
requerían realizar una encuesta online para indagar respecto de la calidad del servicio
recibido por los usuarios del Metro.
Ya se diseñó e implementó el formulario que será utilizado, además de su

integración con la base de datos y su personalización usando CSS. Este contempla
los campos:
 RUT.
 Edad.
 Género.
 Frecuencia con la que usa el servicio.
 Horario en el que se usa el servicio regularmente.
 Líneas de Metro que normalmente utiliza.
 Calidad general del servicio.
 Observaciones personales.
Esta semana, la tarea a realizar se enfocará en el diseño preliminar del código

que será utilizado para validar los datos recibidos de los usuarios, por lo que se
requiere que defina el método que será utilizado para incluir el código JavaScript
dentro de las páginas HTML. Además, se deberá establecer el tipo de variables
que serán utilizadas para almacenar los distintos datos recopilados desde los
usuarios.
Se debe incluir un grupo de sentencias básicas de validación que permitan comprobar
que los datos recibidos cumplen con determinados patrones, a fin de evitar que
se almacenen datos inconsistentes en la base de datos.
El documento resultante que deberá generar como entrega de la actividad de la
semana 6 contendrá primeramente un documento detallando las consideraciones
de diseño utilizadas, además del código JavaScript y su integración con las páginas
HTML.
DESARROLLO
Dentro de desarrollo generado para la implementación de la presente página web, se

tomó como base el programa de desarrollo web, Adobe DreamWeaver CS6, lo que se
explicará en función de ello.
Se remito adjunto código, la cuál se le ha ido realizando cambios para actualizar

conforme a la materia de la semana.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<link rel="stylesheet" media="screen" href="_css/misestilos.css"/>
<link rel="stylesheet" media="print" href="_css/impresion.css"/>
<style type="text/css">
body,td,th {
font-family: Quicksand, sans-serif;
}
</style>
<title>ENCUESTA MERANA SPA.</title>
<script type="text/javascript" src="_js/mis_script.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<header id="cabecera">
<h1 class="logo">Merana <span>Corp</span></h1>
</header>
<section id="encuesta">
<meta name='viewport' content='width=device-width'>
<form action="formulario.php" method="post" lang="es" enctype="multipart/form-data" >
<fieldset>
<legend>E N C U E S T A</legend>
<table align="center" width="80%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="29%" id="texto_encuesta">R.U.T.(R)</td>
<td width="1%">:</td>
<td width="70%">
<input name="RUT" type="text" title="Ingrese RUT según formato."
placeholder="12.345.678-K" id="_rut" maxlength="12" pattern="[0-9]{2}.[0-9]{3}.[0-9]
{3}-[0-9kK]" accesskey="R" onfocusout="perdida_foco_rut();" />
</td>
</tr>
<tr>
<td id="texto_encuesta">Edad</td>
<td>:</td>
<td>
<input name="EDAD" title="Ingrese edad según rango." placeholder="10-120"
id="_edad" type="number" size="5" onfocusout="perdida_foco_edad();"/>
</td>
</tr>
<tr>
<td id="texto_encuesta">Género</td>
<td>:</td>
<td>
<input name="GENERO" type="radio" value="Hombre" id="g_h"/>
<label>Hombre.</label>
<input name="GENERO" type="radio" value="Mujer" id="g_m"/>
<label>Mujer.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Frecuencia con la que usa el servicio</td>
<td>:</td>
<td>
<input name="Frecuencia_Uso" type="radio" value="Nunca" id="FUS_n" title="Lo usa
Nunca."/>
<label>Nunca.</label>
<input name="Frecuencia_Uso" type="radio" value="poca frecuencia" id="FUS_p"
title="Lo usa co Poca Frecuencia."/>
<label>Con poca frecuencia.</label>
<input name="Frecuencia_Uso" type="radio" value="Regularmente" id="FUS_r" title="Lo
usa Regularmente."/>
<label>Regularmente.</label>
<input name="Frecuencia_Uso" type="radio" value="Todo el tiempo" id="FUS_t"
title="Lo usa Todo el Tiempo."/>
<label>Todo el tiempo.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Horario en el que usa el servicio regularmente</td>
<td>:</td>
<td>
<input name="Horario_Uso" type="radio" value="Horario punta" id="Hu_n"
title="Lo usa en Horario Punta."/>
<label>Horario punta.</label>
<input name="Horario_Uso" type="radio" value="Horario Medio" id="Hu_m" title="Lo
usa en Horario Medio."/>
<label>Horario medio.</label>
<input name="Horario_Uso" type="radio" value="Horario Valle" id="Hu_v" title="Lo
usa en Horario Valle."/>
<label>Horario valle.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Lineas de Metro que normalmente utiliza</td>
<td>:</td>
<td>
<input type="checkbox" name="LINEA_1" value="1" id="linea_1"title="Usa Línea
1">
<label>Línea 1.</label>
<input type="checkbox" name="LINEA_2" value="1" id="linea_2" title="Usa Línea 2">
<input type="checkbox" name="LINEA_4A" value="1" id="linea_4a" title="Usa Línea
4a">
<label>Línea 4A.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Calidad general del servicio</td>
<td>:</td>
<td>
<input name="Calidad_Servicio" type="radio" value="Malo" id="CGS_m" title="El
servicio es Malo."/>
<label>Malo.</label>
<input name="Calidad_Servicio" type="radio" value="Deficiente" id="CGS_d" title="El
servicio es Deficiente."/>
<label>Deficiente.</label>
<input name="Calidad_Servicio" type="radio" value="Regular" id="CGS_r"title="El
servicio es Regular."/>
<label>Regular.</label>
<input name="Calidad_Servicio" type="radio" value="Bueno" id="CGS_b" title="El
servicio es Bueno."/>
<label>Bueno.</label>
<input name="Calidad_Servicio" type="radio" value="Excelente" id="CGS_e" title="El
servicio es Excelente."/>
<label>Excelente.</label>
</td>
</tr>
<tr>
<td id="texto_encuesta">Observaciones Personales</td>
<td>:</td>
<td>
<textarea name="OBSERVACIONES" id="observaciones" title="Acá puede ingresar
otras Observaciones." placeholder="Ingrese aquí si tiene alguna observación que
comentarnos." rows="5" onfocusout="perdida_foco_glosa();"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="hidden" name="fecha_hora" id="_fecha_hora" value="">
<script type="text/javascript">
var hoy = new Date();
var fecha= hoy.getFullYear() + '-' + (hoy.getMonth()+1) + '-' +
hoy.getDate();
var hora = hoy.getHours() + ':' + hoy.getMinutes() + ':' +
hoy.getSeconds();
var fecha_y_hora = fecha + ' ' + hora;
document.getElementById('_fecha_hora').value =fecha_y_hora;
</script>
<input type="checkbox" name="enviar_ok" id="enviar_ok" onChange="aviso();">
<label for="enviar_ok">Aceptar envío de la encuesta.</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="_enviar" id="_enviar" value="ENVIAR" /></td>
</tr>
</table>
</fieldset>
</form>
</section>
<footer id="pie">
<p align="center" id="texto_pie">Tarea Semana 5 CSS</p>
</footer>
</body>
</html>
Formulario resultante:
Imagen 1 – Imagen resultado final del desarrollo.

(misestilos.css)
@charset "utf-8";
/* CSS Document */
/* Si el tamaño de la pantalla es igual a 640px o mayor, setea el tamaño de la

fuente en 80px */
@media only screen and (min-width: 640px) {
body {
font-size: 15px;
}
}
/* Si el tamaño de la pantalla es igual a 540px o menor, setea el tamaño de la

fuente 30px */
@media only screen and (max-width: 540px) {
body {
font-size: 10px;
}
}
/* Se define color de la sección(HEAD), color de la fuente y estilo de fuente */

#cabecera {
background-color: #EFFFBF;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
.logo {
text-align: center;
color: #0C6;
font-size: 3em;
}
.logo span {
color: #00F;
font-style:inherit;
}
body {
background: #EFFFBF;
color: #060;
line-height: 1.6;
font-family: 'Quicksand', sans-serif;
padding: 0 1.5em;
}
/* Se define color de la sección(FORM), color de la fuente y estilo de fuente */

#encuesta {
font-family:Verdana, Geneva, sans-serif;
background-color: #EFFFBF;}
#texto_encuesta {
color:#060;}
#_rut {
width: 100%;}
#_edad {
width: 100%;}
input[type='radio']:checked + label {
color: #00F; }
input[type='checkbox']:checked + label {
color: #00F; }
input:focus {
border: 2px solid #00B2B2;
background: #99FF99;}
textarea:focus {
border: 2px solid #00B2B2;
background:#99FF99;}
input {
color: #00F;}
textarea {
color:#00F;
width: 100%;}
/*Se define comportamiento botón*/

#_enviar {
border: none;
outline: none;
height: 35px;
background: #00C;
color: #fff;
border-radius: 12px;
width: 100%;}
#_enviar:hover {
cursor: pointer;
background: #00FFFF;
color: #000;
}
/* Se define color de la sección(FOOTER), color de la fuente y estilo de fuente */
#pie{background-color: #0C6}
#texto_pie {
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;}
/*
Se define color de la sección(Informe), color de la fuente y estilo de fuente.
Informe en PHP que muestra el resultado de los ingresos.
*/
#cab_tabla {
background-color:#09F;
font-size:11px;
color:#FFF;
font-weight:bold;}
#dat_tabla {
background:#CFF;
font-size:11px;
color:#00F;}
impresion.css
@charset "utf-8";
/* CSS Document */
/* impresora.css */
body { font-family: Verdana, Geneva, sans-serif; }
mis_script.js
// JavaScript Document
// Control Nro 6 Programacion HTML2
// Walter Reyes Peña.
//Validando datos por Id
/*
var Op_Hombre=document.getElementById("g_h").value;
var Op_Mujer=document.getElementById("g_m").value;
var EDAD_E=document.getElementById("FUS_n").value;
var EDAD_E=document.getElementById("FUS_p").value;
var EDAD_E=document.getElementById("FUS_r").value;
var EDAD_E=document.getElementById("FUS_t").value;
var EDAD_E=document.getElementById("Hu_n").value;
var EDAD_E=document.getElementById("Hu_m").value;
var EDAD_E=document.getElementById("Hu_v").value;
var EDAD_E=document.getElementById("linea_1").value;
var EDAD_E=document.getElementById("linea_4a").value;
var EDAD_E=document.getElementById("CGS_m").value;
var EDAD_E=document.getElementById("CGS_d").value;
var EDAD_E=document.getElementById("CGS_r").value;
var EDAD_E=document.getElementById("CGS_b").value;
var EDAD_E=document.getElementById("CGS_e").value;
*/
//Envía una alerta de los datos validados
function perdida_foco_rut() {
var NRO_RUT=document.getElementById("_rut").value;
alert ("El R.U.T. ingresado es : "+NRO_RUT);
}
function perdida_foco_edad(){
var EDAD_E=document.getElementById("_edad").value;
alert ("La edad ingresada es : "+EDAD_E);
}
function perdida_foco_glosa(){
var Glosa=document.getElementById("observaciones").value;
alert ("Las observaciones ingresadas son : "+Glosa);
}
// Opción para poterior para la verificación del formulario.
function aviso(){
alert ("Este ítem se ussrá posteriormente para validar todo el formulario.");
}
Formulario resultante:
Imagen 2 – Imagen resultado final del desarrollo con script.

REFERENCIAS BIBLIOGRÁFICAS
 MANUAL DE CONTENIDO_HTML_II IACC SEMANA 6.

Walter Reyes Peña Tarea Senana 5 HTML2

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

Walter Reyes Peña Tarea Senana 5 HTML2

Cargado por

Copyright:

Formatos disponibles

Fundamentos de JavaScript.

Walter Fernando Reyes Peña

INSTRUCCIONES: Recuerde que usted pertenece al departamento de informática

Ya se diseñó e implementó el formulario que será utilizado, además de su

Esta semana, la tarea a realizar se enfocará en el diseño preliminar del código

Dentro de desarrollo generado para la implementación de la presente página web, se

Se remito adjunto código, la cuál se le ha ido realizando cambios para actualizar

<script type="text/javascript" src="_js/mis_script.js"></script>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Imagen 1 – Imagen resultado final del desarrollo.

/* Si el tamaño de la pantalla es igual a 640px o mayor, setea el tamaño de la

/* Si el tamaño de la pantalla es igual a 540px o menor, setea el tamaño de la

/* Se define color de la sección(HEAD), color de la fuente y estilo de fuente */

/* Se define color de la sección(FORM), color de la fuente y estilo de fuente */

/Se define comportamiento botón/

/* Se define color de la sección(FOOTER), color de la fuente y estilo de fuente */

//Validando datos por Id

//Envía una alerta de los datos validados

// Opción para poterior para la verificación del formulario.

Imagen 2 – Imagen resultado final del desarrollo con script.

 MANUAL DE CONTENIDO_HTML_II IACC SEMANA 6.

También podría gustarte