1.- Introducción.

Un formulario se hace, añadiendo el elemento <FORM> a una página.

El procesamiento de los datos introducidos en el formulario (cliente) se debe hacer utilizando un programa aparte (o bien enviándo dichos datos utilizando el correo electrónico), localizado en un servidor remoto (indicado en una URL en un parámetro de la etiqueta) que hará algo con dicha información (meterla en una BD, modificarla y devolverla al cliente, etc).

Un formulario se construye con las etiquetas <FORM> y </FORM>, y contiene texto normal, elementos HTML de cualquier tipo (tablas, etc) y elementos de formulario (campos de texto, áreas de texto, botones, desplegables, etc).

Para lograr que el formulario funcione y se pueda enviar a un CGI remoto se deben especificar tres cosas: la dirección del programa que manipulará los contenidos del formulario (ACTION), el método en el que se van a pasar los

datos del formulario (METHOD), y potencialmente, cómo se van a codificar los datos del formulario (ENCTYPE).

2.- Elementos de formulario

Ver la página de elementos de formulario:

http://geneura.ugr.es/~pedro/curso_cgi/elementosformulario.htm

3.- El atributo ACTION

La manera en la que se va a manipular el formulario HTML se establece empleando el atributo ACTION para el elemento de formulario. El atributo ACTION se fija generalmente a un URL del programa que manipulará los datos del formulario. Este URL apuntará habitualmente aun CGI para decodificar los resultados. Por ejemplo:

<FORM ACTION=“http://geneura.ugr.es/cgi-bin/pedro/prueba.cgi” METHOD=“POST”>

4.- El atributo METHOD

Es también necesario especificar cómo se va a enviar el formulario a la dirección especificada por el atributo ACTION. El atributo METHOD indica cómo se enviarán los datos. Hay dos valores aceptables para el atributo METHOD: GET y POST. Por defecto, se utiliza GET.

Método GET

El método GET es el utilizado para enviar la información (documentos HTML, por ejemplo).

Usando este método es necesario pasar los datos del formulario junto con el nombre del programa que hay que ejecutar. Para hcer esto, se adjunta toda la información del formulario al final del URL que se solicita:

http://geneura.ugr.es/cgi-bin/pedro/prueba.cgi?nombre=pepito+grillo&edad=21

El método GET no es un método muy seguro, ya que la entrada de datos aparece en el URL. Además, hay un límite en cuanto a la cantidad de datos que se pueden pasar con el método GET.

Se suele utilizar mucho en buscadores y demás, ya que la cadena de búsqueda se pasa en la URL y de esta forma podemos crear un marcador y enlaces a un CGI, pasándole diferentes parámetros (cosa que no se puede hacer con POST).

Método POST

El método POST transmite la información de entrada del formulario inmediatamente después del URL. De alguna forma, este método requiere hacer dos contactos con el servidor Web. El método GET sólo necesita uno, ya que el método viene con los datos a usar directamente en la solicitud.

La ventaja de usar POST es que de esta manera se puede enviar una gran cantidad de información, ya que los contenidos del formulario no están en el URL. Es incluso posible enviar contenidos de archivos usando este método.

En el caso de usar POST, hay que indicarlo en la etiqueta FORM, mediante la propiedad METHOD:

<FORM ACTION=“http://geneura.ugr.es/cgi-bin/pedro/prueba.cgi” METHOD=“POST”>

5.- Recepción de datos por e-mail

Una forma sencilla de obtener los datos introducidos en un formulario es recibirlos por correo electrónico. De esta manera no es necesario realizar un script CGI, aunque en muchos casos será necesario realizar un programa que posteriormente procese el correo recibido.

Para obtener los datos por correo se debe especificar:

ACTION=“email”

La forma de crear un formulario para enviarlo por email es la siguiente: 

<FORM METHOD="POST"
      ACTION="mailto:email@serv.dom?subject=asunto"
      ENCTYPE="text/plain">

…………. el formulario …………..

<FORM>

El modificador ENCTYPE es opcional, pero aconsejable para que los datos nos lleguen en un formato medianamente comprensible.

Ejercicio

Crear una página web que contenga un formulario sencillo (un par de campos de texto para pedir nombre y edad, por ejemplo) y enviarlo utilizando el correo electrónico a vuestra cuenta..

5.- Ejemplo de proceso de formularios con un CGI 

#!/usr/bin/perl

if( $ENV{"REQUEST_METHOD"} eq "GET" ) {
  $argumento=$ENV{"QUERY_STRING"};
}else{
  $argumento=<STDIN>;
}


if( $argumento eq "" ) {

print "Content-type: text/html\n\n";

print <<EOC;
    <html>
    <body>

    <h1>Formulario a procesar sin usar la libreria de CGI.</h1>

    <FORM method="POST">

	Campo de texto: <input type="text" name="texto">
        <p>
	Campo de clave: <input type="password" name="clave">
        <p>
	Campo de seleccion:
		<select name="seleccion">
		    <option> s1
		    <option> s2
		    <option> s3
		</select>
	<p>
        Area de texto: <textarea name="area" rows="5" cols="20"></textarea>
        <p>
	<input type="submit" value="Enviar">
	<input type="reset"  value="Limpiar">

    </FORM>

    </body>
    </html>
EOC

}else{

#analizar los parametros:
foreach( split(/&/, $argumento)){
    ($variable,$valor) = split(/=/, $_);
    $valor=~tr/+/ /;
    $valor=~s/%([0-9|A-F]{2})/pack(C,hex($1))/eg;
    $datos{$variable} = $valor;
}


print "Content-type: text/html\n\n";

print "<html><body> \n";
print "<h1>Datos introducidos:</h1> <P> \n";

foreach ( keys(%datos) ){
	print "\n<BR>$_ = $datos{$_}";
}

print "</body></html>\n";
}

Probar el CGI…

Competencias Digitales (Tic’s Basicas) a practicar con este TEMA:

  • Usar (click en )www.Google.com para buscar y localizar UN material academico apropiado y que se pueda recomendar para el tema, ver VIDEO BUSQUEDAS abajo en esta pagina.
  • En el post ( o tema ) apropiado en el Libro de Blogger, pegar el material localizado y que se recomienda para este tema, ver VIDEO BLOGGER abajo en esta pagina.

pd: Recordar incluir la fuente del tema usando el formato de citacion apropiado, ver VIDEO WIKIPEDIA abajo en esta pagina.

  • En el editor de Blogger usar colores para destacar los parrafos mas importantes y usar subrayados para las citas mas relevantes.
  • En el post ( o tema ) apropiado en el libro en Blogger, para incluir ecuaciones o notacion matematica se debera usar el icono del editor de Blogger IMAGE y construir esta notacion matematica con imagenes Latex, ver VIDEO LATEX ABAJO.
  • Construir al final y despues de la fuente del material, un breve resumen ( no mas de 2–3 parrafos) explicando palabras propias el contenido del tema.

pd: Se pueden usar alguna de las citas que encontradas dentro del tema, solo recordar encerrarla entre comillas.

pd: Se pueden usar tambien cambios en fonts para darle mas visibilidad, consistencia y relevancia al resumen del tema.

  • PUNTOS EXTRAS Si se usa una segunda fuente valiosa de informacion y recordar encadenar los dos materiales mediante uno o dos parrafos apropiados.
  • Enviar a el maestro o compañeros un correo electronico que incluya la liga a el tema en blogger para revision, recomendacion, sugerencias y evaluacion, ver VIDEO LIGAS GMAIL abajo.
  • Sacar una cuenta (click en)http://docs.google.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se construyo en Gmail y Blogger ver VIDEO GOOGLE DOCS abajo en esta pagina.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

pd: Google Docs es el equivalente a OFFICE pero con la caracteristica que todos sus componentes ( procesador de palabras, presentacion electronica y hoja de calculo) estan completamente en internet, es decir todos los archivos o material estaran en linea, seguros y siempre disponibles, ademas de que se pueden trabajarlos desde cualquier pc, ya sea la personal, la del laboratorio de la escuela o la de un lugar publico como la biblioteca o un cafe internet.

  • Construir una Presentacion Electronica ( usando muy pocos slides) del tema en GOOGLE DOCS e incrustrarla en el tema de bloger ver VIDEO GOOGLE DOCS en esta pagina abajo.

pd: Recordar que una presentacion electronica, es solamente un resumen muy condensado del tema ( o mapa o guia mental ), que ayuda a recordar los elementos y conceptos mas basicos del tema, cuando se estan exponiendo frente a un grupo.

pd: No olvidar incluir un primer slide con el titulo de la presentacion electronica, un segundo slide con un indice de la presentacion electronica y un ultimo slide con dos o tres parrafos de conclusiones y bibliografia.

  • Buscar en Google Imagenes o www.Flickr.com o www.PhotoBucket.com una galeria de fotos o de imagenes apropiadas al tema actual,
  • Para los casos de Photobucket y Flicker, ambos sitios proporcionan ligas a sus imagenes y tambien objetos (los recuerdan??), que se pueden incluir en el tema del libro apropiado en Blogger.

pd: para estos sitios deberan obtener una cuenta usando el correo de gmail y de preferencia obtener el mismo usario que se ha venido manejando a lo largo del curso.

pd: Tratar de usar resoluciones y tamaños de imagenes chicos o medianos, recordar que todo este material termina en el post del tema en Blogger y esa pagina no tiene mucho espacio para desplegar fotos o imagenes.

pd: El formato apropiado para fotos o imagenes es JPG, tratar de no usar otros formatos.

pd: Se puede construir y conseguir esta coleccion o galeria de imagenes con:

1) Usando Google Imagenes, recordar conseguir solo imagenes que tengan permiso de publicacion abierto, no usar imagenes o fotos que tengan derechos reservados.

pd: Estas fotos almacenarlas en un folder en el desktop o escritorio de su computadora y subirlas a el post en blogger usando el icono IMAGE del editor de Blogger.

2) Flickr y Photo Bucket tambien tienen una gran cantidad de imagenes que se pueden usar o mejor dicho enlazar a el tema o post en Blogger.

3) Tambien se puede usar la camaras digitales o las camaras de sus telefonos celulares.

4) Tambien se puede usar el programa o aplicacion llamado Srip32.exe( solo buscar srip32 en google) bajarlo e instalarlo, este programa permite capturar una pantalla de la pc, es decir si se encuentra un sitio con imagenes o incluso texto apropiado o relevante al tema, capturar la pantalla con srip32 y ya se tendra la imagen, ver VIDEO Srip32 abajo.

  • Incluir al menos una imagen de cada uno de los dos sitios (flickr y Photobucket) en el tema o post que se esta construyendo en Blogger.
  • PUNTOS EXTRAS Si se incluyen una galeria completa de imagenes apropiadas desde cualquiera de estos sitios de FLICKR o Photobucket.
  • Sacar una cuenta (click en)www.DivShare.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se consiguio en Gmail y Blogger y Flickr ver VIDEO DIVSHARE abajo en esta pagina.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

pd: Usar Divshare para almacenar material en audio (MP3) apropiado a el tema ( no usarlo para almacenar material comercial o les suspenden la cuenta)

pd: El material en Audio, con formato MP3 se debera producir usando un microfono en la pc y programas de aplicacion apropiados, llamados editores de audio, un ejemplo de ellos es el SOUND RECORDER que ya viene en Windows, pero se recomienda usar mejor AUDACITY ( solo buscar en google AUDACITY) bajarlo e instalarlo, ver VIDEO AUDACITY abajo.

  • Crear al menos dos archivos de audio mp3:

1) El primero de ellos sera la lectura completa de este tema en voz apropiada. ( o aprender a editar con audacity la voz)

2) El segundo de ellos sera un resumen del tema. ( buena voz o editarla con audacity)

3) Ambos archivos subirlos a Div Share (recordor que tienen que ser MP3) y el reproductor que proporciona gratis Div Share, ver VIDEO DIVSHARE abajo e insertarlo en el lugar apropiado del tema que se esta construyendo en Blogger.

4) Ejemplo del reproductor incrustado en una pagina:

  • Sacar una cuenta (click en)www.YouTube.com, usando el correo de Gmail y tratar de conseguir el mismo usuario que se consiguio en Gmail y Blogger y Flickr.

pd: Si ya se tiene una cuenta ignorar esta competencia digital.

  • Para producir video se pueden usar tres fuentes:

1) Localizar Videos apropiados en Youtube.

2) Usar nuestras camaras digitales o nuestros telefonos celulares para producir video.

3) Producir un video de la propia pantalla de la computadora ( muy similar a lo que se hizo con Srip32) pero usando un programa especializado en video, tal como CAMSTUDIO (click en www.CamStudio.org) bajar e instalar ( no olvidar bajar e instalar el CODEC que esta abajo en el mismo sitio.

3.1) para Usar Camstudio solo recordar que es muy similar a Srip32 Solo que el resultado final es un archivo de video AVI.

  • Producir un video de resumen del tema (usar camstudio con el fondo de la pagina con el tema e irlo comentando en voz apropiada)
  • Producir un video en vivo con la exposicion del tema ( pueden usar la presentacion electronica de fondo o cualquier otro material, pizarron, filminas, rotafolios, etc.)
  • Subir los videos a su cuenta en Youtube e incluirlos o ligarlos en la pagina en Blogger, tambien los pueden subir directamente a BLOGGER ver VIDEO BLOGGER VIDEO abajo.

Saludos y suerte prof Lauro Soto, Ensenada, BC, Mexico.