Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Pedro Alvarez Control2

    Încărcat de

    puertalabs
    208 vizualizări9 pagini
    Programacion HTML II

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Programacion HTML II

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    208 vizualizări9 pagini

    Pedro Alvarez Control2

    Încărcat de

    puertalabs
    Programacion HTML II

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 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/

    S-ar putea să vă placă și