You are on page 1of 9

Título del Control: Formularios Operativos – Control 1, Semana 1.

Nombre Alumno: Pedro Jovanni Alvarez Lazo.

Nombre Asignatura: Programación HTML II.

Instituto IACC

12 de Enero 2017.
Instrucciones

Recuerde que usted pertenece al departamento de informática de una compañía de análisis de mercado
denominada MERANA, y la semana pasada fue asignado a 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ó la estructura básica del formulario que será utilizado, sin embargo, está
pendiente el incorporar los botones de envío que serán utilizados para indicarle al formulario que los
datos recibidos del usuario deben ser enviados al servidor. Se debe considerar que el mismo ya posee
los siguientes campos:
 RUT.
 Edad.
 Género.
 Frecuencia con la que usa el servicio.
 Horario en el que usa el servicio regularmente.
 Líneas de Metro que normalmente utiliza.
 Calidad general del servicio.
 Observaciones personales.
Además, deberá incluirse un campo donde posteriormente se pueda agregar la fecha y hora en la que se
está realizando la encuesta. Dicho campo no debe ser modificable ni visible por el usuario, pero debe ser
incluido entre los datos que serán enviados al servidor.
Para ello, se le solicita que defina los elementos que deben ser agregados al formulario para realizar el
envío de la información y el método más apropiado para realizarlo. A fin de poder realizar dichas
pruebas sobre el formulario, este deberá enviar los datos en un e-mail usando el cliente de correos del
usuario.
Además, se requiere que se verifique el diseño realizado y se agreguen, de ser necesarios, ayudas y
atajos de teclado de manera de adaptar la página web para ser utilizada con mayor sencillez. Esto
implica la inclusión de atajos de teclado, orden de tabulación y mensajes informativos para los usuarios.
Desarrollo
index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>Encuesta Online</title>

</head>
<link rel="stylesheet" type="text/css" href="CSS/estilo1.css"><!--Referencia a la hoja de estilo a utilizar--
>
<body>

<h1>Encuesta Online Calidad de Servicio:</h1>

<form method="post" action="mailto:encuesta@merana.cl?subject=mensaje


interno"><!--Inicio del Formulario, el cual utilizara el metodo post, la informacion del formulario en la
practica se enviara al correo escrito en el script-->

<p>
<label class="titulos" for="rut" title="Ingresa tu rut,
(alt+r)">RUT:</label><br>
<input type="text" id="_rut" name"rut" title="EL rut ingresado,
debe estar en el siguiente formato, 11.111.111-1" placeholder="11.111.111-1" pattern="[0-9]{2}.[0-
9]{3}.[0-9]{3}-[0-9kK]" maxlength="12" accesskey="R" required><!--El atributo requires, hace que este
dato sea de caracter obligatorio, ademas medinate el uso de expresiones regulares, se define el tipo de
informacion que se admitira, con un maximo de 12 caracteres-->
</p>

<p >
<label class="titulos" for="edad" title="Ingresa tu edad,
alt+e">Edad:</label><br>
<input type="number" id="_edad" name="edad"
placeholder="Entre 10 y 120 años" title="La edad adminitida debe estar entre 10 y 120 años" min="10"
max="120" maxlength="3" pattern="[0-9]" accesskey="E" required><!--El atributo requires, hace que
este dato sea de caracter obligatorio, la informacion ingresada en el formulario debe ser de tipo
numerica, cuyos valores no deben ser inferiores a 10 o superiores a 120, ademas tambien se valida por
expresiones regulares-->
</p>

<p>
<label class="titulos" title="Debes seleccionar tu
genero">Genero:</label><br><!--Radio button, los cuales nos permiten seleccionar el sexo de la
persona que contesta la encuesta-->
<label for="masculino" title="Selecciona es opcion si tu genero es
masculino, alt+m">Masculino: </label>
<input type="radio" id="_masculino" name="genero"
accesskey="M"/>
<label for="femenino" title="Selecciona es opcion si tu genero es
femenino,alt+f">Femenino: </label>
<input type="radio" id="_femenino" name="genero"
accesskey="F"/>
</p>

<p>
<label class="titulos" for="frecuencia" title="Despliega la lista y
selecciona la frecuencia con la que usas el servicio, alt+s">Frecuencia en la que se usa el
servicio:</label><br><!--Lista de seleccion, la cual nos permite seleccionar una opcion a la vez, en
referencia a la frecuencia del servicio-->
<select id="frecuencia" name="frecuencia" accesskey="s">
<optgroup>
<option value="nunca">Nunca</option>
<option value="poca">Poca
Frecuencia</option>
<option
value="regularmente">Regularmente</option>
<option value="todo">Todo el
Tiempo</option>
</optgroup>
</select>
</p>

<p>
<label class="titulos" for="horario" title="Despliega la lista y selecciona
el horario con el que usas el servicio, alt+h">Horario en que usa el Servicio:</label><br><!--Lista de
seleccion, la cual nos permite seleccionar una opcion a la vez, en referencia al horario de uso del
servicio-->
<select id="horario" name="horario" accesskey="h">
<optgroup>
<option value="punta">Horario Punta</option>
<option value="medio">Horario
Medio</option>
<option value="valle">Horario Valle</option>
</optgroup>
</select>
</p>

<p>
<label class="titulos" for="edad" title="Selecciona una o varias lineas
que usas con mas frecuencia, alt+1...5">Frecuencia:</label><br><!--CheckBox, los cuales nos permiten
seleccionar una, o varias lineas que utiliza el encuentado-->
<label>Linea 1: </label>
<input type="checkbox" id="_linea1" name="linea1"
accesskey="1">
<label>Linea 2: </label>
<input type="checkbox" id="_linea2" name="linea2"
accesskey="2">
<label>Linea 3: </label>
<input type="checkbox" id="_linea3" name="linea3"
accesskey="3">
<label>Linea 4: </label>
<input type="checkbox" id="_linea4" name="linea4"
accesskey="4">
<label>Linea 4: </label>
<input type="checkbox" id="_linea4" name="linea4"
accesskey="5">
</p>

<p>
<label class="titulos" for="calidad" title="Despliega la lista y selecciona
la calidad del servicio, alt+c">Calidad General del Servicio:</label><br><!--Lista de seleccion, la cual nos
permite seleccionar una opcion a la vez, en referencia a la Calidad del servicio-->
<select id="calidad" name="calidad" accesskey="C">
<optgroup>
<option value="malo">Malo</option>
<option
value="deficiente">Deficiente</option>
<option value="regular">Regular</option>
<option value="bueno">Bueno</option>
<option value="excelente">Excelente</option>
</optgroup>
</select>
</p>

<p>
<label class="titulos" for="opersonales" title="Puedes dejarnos tu
comentario en el siguiente cuadro de texto, alt+o">Observaciones Personales:</label><br><!--Area
detexto, la cual nos permite ingresar observaciones personales, con una maximo de 200 caracteres-->
<textarea class="opersonales" id="_opersonales"
maxlength="200" rows="10" placeholder="Dejanos tu comentario" accesskey="O"></textarea><!--el
atributo class, se usa para dar formato de estilo visual en hojas css-->
</p>

<p>
<input class="_fechahora" type="datetime" name="fechahora" step="1"
value="<?php date_default_timezone_set("America/Santiago"); echo date("Y-m-d\TH:i");?>"
disabled><!--Input data time, el cual muestra la fecha y la hora actual al momento de trabajar con el
formulario, esta no puede ser intervenida por el usuario final, gracias al atributo disabled-->
</p>
<p>
<input type="submit" name="enviar" value="Enviar Formulario"
title="Presiona el boton para enviar a la direccion de correo encuesta@merana.cl los datos ingresados,
alt+b" accesskey="b"><!--boton, el cual nos permite enviar la informacion ingresada-->

<input type="reset" name="reset" value="Limpiar Datos"


title="Presiona el boton para borrar o limpiar los datos ingresados, alt+L" accesskey="L"><!--boton, el
cual nos permite borrar o limpiar la informacion ingresada-->
</p>

</form>

</body>
</html>

estilo1.css:

body {background-color: #142b3b;


padding: 2em;}

h1 {font-family: Arial, Helvetica, sans-serif;


text-align : center;
color : #e8e8e7;}

p {font-family: Arial, Helvetica, sans-serif;


text-align : left;
color : #e8e8e7;
font-size: 12px;
font-style: normal;
}

.opersonales{width:500px;
height:100px;
border: 2px solid #000000;
font-family: Arial, Helvetica, sans-serif;
}

.titulos{font-size: 16px;
font-weight: bold;
}
._fechahora{
display: none;
}
Mejoras aplicadas en código:

Mejoras en index.php:

 En la versión anterior, se utilizaba un index.html el cual ahora se cambia por un index.php, con
la finalidad de ejecutar script de dicho lenguaje (php), en el formulario a utilizar.
 Atajos de teclado, con la finalidad de que el usuario final tenga una interacción un poco más
dinámica y que a su vez se haga más rápida al momento del ingreso de la información, los atajos
utilizados son:
o Tecla ALT+R: Hace el acceso al cuadro de texto, de una forma más rápida al momento
del ingreso del RUT.
o Tecla ALT+E: Hace el acceso al cuadro de texto, de una forma más rápida al momento
del ingreso de la Edad.
o Tecla ALT+M: Hace el acceso al radio button, de una forma más rápida al momento de
seleccionar el sexo de tipo masculino.
o Tecla ALT+F: Hace el acceso al radio button, de una forma más rápida al momento de
seleccionar el sexo de tipo femenino
o Tecla ALT+S: Hace el acceso la lista desplegable, de una forma más rápida al momento
de seleccionar la Frecuencia de uso del Servicio.
o Tecla ALT+H: Hace el acceso la lista desplegable, de una forma más rápida al momento
de seleccionar el Horario de uso del Servicio.
o Tecla ALT+S: Hace el acceso a los checkbox, de una forma más rápida al momento de
seleccionar la una o más Líneas de uso frecuente.
o Tecla ALT+C: Hace el acceso la lista desplegable, de una forma más rápida al momento
de seleccionar la Calidad del Servicio.
o Tecla ALT+O: Hace el acceso al área de texto, de una forma más rápida al momento de
seleccionar la Frecuencia de uso del Servicio.
o Tecla ALT+B: Hace el uso del botón de envió del formulario de una forma más rápida al
momento de seleccionarlo y posterior envió de la información.
o Tecla ALT+L: Hace el uso del botón de borrado o limpieza del formulario de una forma
más rápida al momento de seleccionarlo y posterior borrado o limpieza de la
información.
 Uso de Script en PHP, con la finalidad de que este capte y muestra la fecha y hora actual, pero
limitando al usuario final modifique ni vea la información recuperada por este script.
 El botón de envió del formulario, envía los datos al correo electrónico encuesta@merana.cl,
utilizando el gestor de correo preferido (Outlook, Thunderbird).
 Se agrega un botón con el cual se borra o limpia la información ingresada en el formulario.

Mejoras en estilo1.css:

 Se cambia el tipo de fuente del área de texto, en las siguientes líneas de código:
o .opersonales{width:500px;
height:100px;
border: 2px solid #000000;
font-family: Arial, Helvetica, sans-serif;
}
 Se cambian el tamaño y se establece negrita a los nombres de los títulos, para una mejor
identificación de los datos a ingresar por parte del usuario final, esto se aprecia en las siguientes
líneas de código:
o .titulos{font-size: 16px;
font-weight: bold;
}
 Con la finalidad de que la fecha y la hora rescatada por parte del formulario, no sea intervenida
por el usuario, esta se oculta, lo que se logra gracias a las siguientes líneas de código:
o ._fechahora{
display: none;
}
Bibliografía
IACC (2016). Formularios II – Programación HTML II. Semana 02

Aner Barrena. (2013). Datetime input HTML5: Un campo de fecha y hora para formularios. 12 de Marzo
2017, de Aner Barrena Sitio web: http://www.anerbarrena.com/datetime-input-html5-3008/

PHP.net. (2010). América - Listado de Zonas Horarias. 12 de Marzo 2017, de PHP.net Sitio web:
http://php.net/manual/es/timezones.america.php

marcofbb. (2011). Mostrar y ocultar datos CSS. 12 de Marzo 2017, de Marcofbb Sitio web:
http://www.marcofbb.com.ar/mostrar-y-ocultar-datos-css/