martes, 16 de marzo de 2010

Formularios de Selección Multiple

Los formularios pueden ser utilizados de varias formas, en esta ocasión los utilizaremos para la creación de una evaluación para el curso de computación de cuarto grado diversificado, con cinco preguntas, cuatro posibles respuestas evaluadas automáticamente, por cada respuesta correcta se darán cinco puntos y al final dará el resultado obtenido, evaluando si el resultado es excelente, muy bueno, bueno o malo.

Paso No. 1 - Hacer el formulario con códigos HTML
Nombre del archivo:  examen.html

< HTML>
< HEAD>
    < TITLE>Examen de Computación< /TITLE>
< /HEAD>
< BODY>
< h1>Proporcione sus datos, y seleccione las repuestas que considere correctas< /h1>
// Aquí empezamos la creación del formulario
// El archivo calificar.php será archivo que evaluará los datos del formulario
    < form action="calificar.php" method="post">
       Nombre: < input type="text" name="nombre" maxlength="50">
       Grado: < input type="text" name="grado" maxlength="5">
       Carrera: < input type="text" name="carrera" maxlength="15">
       Pregunta 1:  ¿Cuál es el nombre del padre de la computación?
       < select name="p1">
            < option value="1">Alan Turing < /option>
            < option value="2">Charles Babage < /option>
            < option value="3">Bill Gates < /option>
            < option value="4">Ninguno < /option>
      < /select>
       Pregunta 2:  ¿Cuál es la característica principal de la cuarta generación de computadoras?
       < select name="p2">
            < option value="1">Transitores < /option>

            < option value="2">Tubos de vacio < /option>
            < option value="3">Microprocesador < /option>
            < option value="4">Ninguno < /option>
      < /select>
       Pregunta 3:  ¿Qué es un virus?
       < select name="p3">
            < option value="1">Archivo malicioso que busca dañar tu computadora < /option>

            < option value="2">Archivo malicioso que penetra la computadora interrumpir su buen funcionamiento < /option>
            < option value="3">Archivo malicioso que permite entrada de otros archivos con fines de destrucción < /option>
            < option value="4">Todos son correctos < /option>
      < /select>
      Pregunta 4:  ¿Cuál es la característica principal de la Segunda generación de computadoras?
       < select name="p4">
            < option value="1">Procesadores < /option>

            < option value="2">Tubos de vacio < /option>
            < option value="3">Transitores < /option>
            < option value="4">Ninguno < /option>
      < /select>
      Pregunta 5:  ¿Cuál es la característica principal de la Tercera generación de computadoras?
       < select name="p5">
            < option value="1">Procesadores < /option>

            < option value="2">Microchip < /option>
            < option value="3">Transitores < /option>
            < option value="4">Ninguno < /option>
      < /select>

      < input type="submit" value="Calificar">
< /form>
< /BODY>
< /HTML>

Paso No. 2 - Hacer el programa que procesará la irformación
Nombre del archivo: calificar.php

< ?
// Validamos el ingreso de los datos de identificación
// if(!$nombre || $grado || $carrera) {
--     echo "No ha ingresado todos los datos de identificación requeridos, vuelva e ingrese todos los datos";
--     exit;
-- }

-- Calificamos las preguntas usando switch

-- $nota = 0;
-- $correcta = 0;
-- $incorrecta = 0;
-- switch($p1) {
--     case 1:
--       $incorrecta += 1;
--     break;
--     case 2:
--       $correcta += 1;
--       $nota += 5;
--     break;
--     case 3:
--       $incorrecta += 1;
--     break;
--     case 4:
--       $incorrecta += 1;
--     break;
-- }

-- switch($p2) {
--     case 1:
--       $incorrecta += 1;
--     break;
--     case 2:
--       $incorrecta += 1;
--     break;
--     case 3:
--       $correcta += 1;
--       $nota += 5;
--     break;
--     case 4:
--       $incorrecta += 1;
--     break;
-- }

-- switch($p3) {
--     case 1:
--       $incorrecta += 1;
--     break;
--     case 2:
--       $incorrecta += 1;
--     break;
--     case 3:
--       $incorrecta += 1;
--     break;
--     case 4:
--       $correcta += 1;
--       $nota += 5;
--     break;
-- }

-- switch($p4) {
--     case 1:
--       $incorrecta += 1;
--     break;
--     case 2:
--       $incorrecta += 1;
--     break;
--     case 3:
--       $correcta += 1;
--       $nota += 5;
--     break;
--     case 4:
--       $incorrecta += 1;
--     break;
-- }

-- switch($p5) {
--     case 1:
--       $incorrecta += 1;
--     break;
--     case 2:
--       $incorrecta += 1;
--     break;
--     case 3:
--       $correcta += 1;
--       $nota += 5;
--     break;
--     case 4:
--       $incorrecta += 1;
--     break;
-- }

//Evaluamos si resultados son excelentes, muy buenos, bueno o malo

-- swicth($correcta){
--    case $correcta = 5:
--       $resultado = "Excelente";
--    break;
--    case $correcta = 4:
--       $resultado = "Muy bueno";
--    break;
--    case $correcta = 3:
--       $resultado = "Bueno";
--    break;
--    default
--    $resultado = "Malo";
--    }

// Ahora damos el resultado

-- echo "< h1>$nombre< /h1>";
-- echo "< h2>$grado $carrera< /h2>";
-- echo "Su resultado es: < h3> $resultado< /h3>";
-- echo "No. de resupuestas correctas: < h3> $correcta< /h3>";
-- echo "No. de resupuestas incorrectas: < h3> $incorrecta< /h3>";
-- echo "Resultado Final: < h2> $nota< /h2>";
-- ?>

martes, 9 de marzo de 2010

Formularios

¿Qué son los formularios?

Los formularios son posiblemente la herramineta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada.

Este tema a diferencia de los anteriores es bastante más complejo y oscuro, aparecerán terminos como CGI scripts, Perl o bien lenguajes de programación como C, que seguramente nos desalentarán al principio, pero que con el tiempo asumiremos como familiares. La idea de esta sintética guía de formularios es brindar al newbie o novato un pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio web.
¿Cómo definimos los formularios?

Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: < FORM>, < INPUT>, < SELECT>, < OPTION> y < TEXTAREA>. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.

Etiqueta < FORM>

Todo formulario debe estar encerrado entre el par de etiquetas < FORM> y < /FORM>", y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas < BODY> y < /BODY>". Esta etiqueta < FORM> presenta tres atributos posibles:




Comando Descripción
ACTION el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.
METHOD puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.
ENCTYPE este atributo está reservado para que la información viaje en forma encriptada a través de Internet.


Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente importante.

Etiqueta < INPUT>

La etiqueta < INPUT> es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta < INPUT> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.

Etiqueta < SELECT>

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.

Etiqueta < OPTION>

Con esta etiqueta definimos cada elemento de las listas designadas con el par < SELECT> y < /SELECT>.

Etiqueta < TEXTAREA>

Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.

¿Cómo se ven?

Abrimos nuestro editor de texto preferido y creamos el siguiente archivo html:

< HTML>
< HEAD>
 < TITLE>FORMULARIOS
< /HEAD>
 < BODY>
< FORM ACTION="mailto:solocomputacion@gmail.com" METHOD=POST>
< table align="center" border="0">
< td align="left" width="100">Nombre:
< /td>
< td align="center" width="150">< INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE="">
< /td>
< tr>
< td align="left" width="100">Email:
< /td>
< td align="center" width="150">< INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE="">
< /td>
< tr>
< td align="left" width="100">Motivo:
< /td>
< td align="center" width="150">< INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE="">
< /td>
< tr>
< td align="left" width="100"> Mensaje:

< /td>
< td>< TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
< /TEXTAREA>
< /td>
< tr>
< td widht="100">
< /td>
< td align="right" width="150">< INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">
< /td>
< /TABLE>
< /FORM>
< /BODY>
< /HTML>


Lo que se vería de esta forma:
Nombre:
Email:
Motivo:
Mensaje:

Aunque parezca complicado a primera vista el código anterior, con un poco de práctica puede resultar muy natural.