Pedro Alvarez Control2

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 r egularmente.  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:

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

class="titulos"

for="rut"

title="Ingresa

tu

rut,

(alt+r)">RUT:

class="titulos"

for="edad"

title="Ingresa

tu

edad,

alt+e">Edad:

Genero:


Masculino: Femenino:

Frecuencia en la que se usa el servicio:
Nunca Poca Frecuencia Regularmente Todo el Tiempo

Horario en que usa el Servicio:
Horario Punta Horario Medio Horario Valle

Frecuencia:
Linea 1:


type="checkbox"

id="_linea1"

name="linea1"

Linea 2:
id="_linea2"

name="linea2"

Linea 3:
id="_linea3"

name="linea3"

Linea 4:
id="_linea4"

name="linea4"

Linea 4:
id="_linea4"

name="linea4"

accesskey="1">

accesskey="2">

accesskey="3">

accesskey="4">

accesskey="5">

Calidad General del Servicio:
Malo Deficiente Regular Bueno Excelente

Observaciones Personales:

" disabled>

 

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: Tecla ALT+R: Hace el acceso al cuadro de texto, de una forma más rápida al momento o 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. Tecla ALT+M: Hace el acceso al radio button, de una forma más rápida al momento de o seleccionar el sexo de tipo masculino. Tecla ALT+F: Hace el acceso al radio button, de una forma más rápida al momento de o seleccionar el sexo de tipo femenino Tecla ALT+S: Hace el acceso la lista desplegable, de una forma más rápida al momento o de seleccionar la Frecuencia de uso del Servicio. Tecla ALT+H: Hace el acceso la lista desplegable, de una forma más rápida al momento o de seleccionar el Horario de uso del Servicio. Tecla ALT+S: Hace el acceso a los checkbox, de una forma más rápida al momento de o seleccionar la una o más Líneas de uso frecuente. Tecla ALT+C: Hace el acceso la lista desplegable, de una forma más rápida al momento o 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. Tecla ALT+B: Hace el uso del botón de envió del formulario de una forma más rápida al o momento de seleccionarlo y posterior envió de la información. Tecla ALT+L: Hace el uso del botón de borrado o limpieza del formulario de una forma o 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 [email protected], 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 e l 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: ._fechahora{ o 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/