I . E . P.

CG
EN

INSTITUCIN EDUCATIVA PRIVADA VIRGEN DE GUADALUPE NIVEL SECUNDARIA DE MENORES CICLO VII BIMESTRE IV

D E G UAD 1975

LU

V IR

PE

COMPUTACIN

Secundaria

Grad Grad o o

I I N N D D I I C C E E

IV BIMESTRE
Del 13 de Octubre 2008 al 16 de Diciembre 2008

Al:________________

UNIDAD

Del:

____________

9
10

Introduccin a los formularios

22 22 3 3

Al:________________

UNIDAD

Del:

____________

Al:________________

11

1 0

Crear un formulario

226 226

UNIDAD

Del:

____________

1 1

Los resultados del formulario

23 23 2 2

I . E . P.

GUIA DE APRENDIZAJE N 09
Tema: Introduccin a los formularios.
LU

CG
EN

D E G UAD 1975

PE

Contenidos: Descripcin y componentes de los formularios.

Introduccin a los formularios

Los formularios son uno de los elementos ms utilizados para crear interactividad entre un sitio web y el internauta. Entre los usos ms comunes de los formularios se encuentran las encuestas, los formularios de pedido y las interfaces de bsqueda. Descripcin Los formularios necesitan dos componentes para que funcionen correctamente: el cdigo HTML (que describe el formulario) y una aplicacin en la parte del servidor o una secuencia de comandos en la parte del cliente (para procesar la informacin que el usuario introduce en los campos del formulario). Con Frontpage es muy fcil insertar formularios en tus pginas web, como ste que ves abajo:

Componentes de los formularios Los formularios sirven para recabar informacin de los visitantes y se componen de cuadros de texto de una lnea, cuadros de texto con desplazamiento, casillas de verificacin, botn de opciones, men desplegable o botn de comando. El uso de uno u otro de estos componentes depender de la informacin que se solicite al visitante. Vamos a verlos uno por uno.
Cuadro de texto de una lnea

V IR

Estos cuadros de texto se utilizan para que el visitante escriba un texto corto, como el nombre y apellidos, el nmero de telfono o el correo electrnico.

Cuadro de texto con desplazamiento

Estos cuadros de texto se utilizan en los casos en que el visitante debe introducir un texto ms largo, como un comentario o una observacin. Se puede navegar a travs del texto con una barra de desplazamiento.

Casilla de verificacin

Estas casillas pueden ser activadas o desactivadas por el visitante. Se utilizan para hacer una pregunta al visitante cuya respuesta consiste en dos opciones: s/no.

Botn de opcin

Cuando existen ms de dos posibles respuestas a una pregunta o una peticin, se utilizan los botones de opcin. El visitante deber marcar una de las opciones.

Men desplegable

El men desplegable cumple la misma funcin que los botones de opcin: consiste en que el visitante elija una de entre las opciones propuestas. Su ventaja radica en que ocupa menos espacio en el formulario, pues las opciones se recogen en un men desplegable. Otra de sus ventajas es que permite varias selecciones.

Botn de comando

Los botones ejecutan acciones concretas. Se suelen utilizar para que los visitantes enven el formulario despus de rellenarlo o borren los campos restableciendo el formulario en blanco.

__________________________________________

Adems de estos componentes bsicos de un formulario, puedes introducir en un formulario un campo oculto, que contiene informacin que no quieres que vea el visitante, o un campo de imagen, que es un botn que contiene una imagen en lugar de un texto.
__________________________________________

Comprobacin
Completa.
1. Los formularios son uno de los elementos ms utlizados para crear interactividad entre un .. y el . 2. Entre los usos ms comunes de los formularios se encuentran, las ., los.. y las .. 3. Los formularios necesitan dos componentes para que funcionen correctamente: a) b) . 4. Los componentes de los formularios son: a) .. b) .. c) .. d) .. e) ..

Autoevaluacin
Relaciona. 1. Cuadro de texto de una lnea ( ) Ejecutan acciones concretas. ) Para escribir texto corto. ) Para escribir texto largo. ) Cuando existen ms de dos posibles ) Pueden ser activadas o por el visitante. ( ) Consiste en elegir una de entre las opciones propuestas

2. Cuadro de texto con desplazamiento ( 3. Casilla de verificacin 4. Botn de opcin respuestas. 5. Men desplegable desactivadas 6. Botn de comando Dibuja ( ( (

Un Formulario con cualquiera de sus componentes.

I . E . P.

GUIA DE APRENDIZAJE N 10
Tema: Crear un formulrio.
LU

CG
EN

A D E G UAD 1975

PE

Contenidos: Procedimiento, Propiedades.

Crear un formulario
El primer paso para crear un formulario es definir para qu se va a utilizar, ya que en funcin de su utilidad se utilizarn unos campos y no otros. Normalmente los formularios se usan para recibir peticiones, organizar consultas, pedir a los visitantes que se identifiquen en un sitio web con nombre de usuario y contrasea, etc. Procedimiento

V IR

Puedes crear un formulario nuevo o crearlo a partir de las plantillas que ofrece Frontpage. En el primer caso, la forma de crearlo es a travs de Men Insertar > Formulario > Formulario, aunque tambin puedes hacerlo a partir de las plantillas de Frontpage. Para crearlo desde una plantilla, elige Men Archivo > Nuevo > Pgina. En la pestaa General encontrars algunas plantillas, como Formulario de comentarios, Libro de invitados, Registro de usuarios, etc.

Al crear un nuevo formulario sin utilizar las plantillas, Frontpage crea un cuadro de lneas discontinuas, que ser la zona activa del formulario. Ningn elemento del formulario puede crearse fuera de esta zona rectangular. Al mismo tiempo, Frontpage tambin ha insertado los botones Enviar y Restablecer, ya que todo formulario debe tener estos botones.

El siguiente paso es introducir los campos que conformarn el formulario. Para ello, utiliza las distintas opciones de Men Insertar > Formulario. Cada uno de los campos puede colocarse en la pgina de la misma forma que el texto: puedes utilizar saltos de lnea, tablas, alineaciones, lneas horizontales, etc. Cada uno de los campos, sean del tipo que sean, se componen de dos elementos: la etiqueta y el contenido. La primera especifica qu se le est pidiendo al visitante y el segundo es el espacio que se reserva para que el visitante introduzca los datos. Para escribir una etiqueta, simplemente sita el cursor al lado del campo y escribe. Por ejemplo:

Propiedades de los elementos de formulario Una vez has establecido dentro del formulario todos los elementos que lo conforman, puedes modificar las propiedades de cada uno. Para ello, haz doble clic sobre cada elemento. Para cada tipo de elemento aparece un cuadro de dilogo distinto. Vamos a verlos:
Propiedades de un cuadro de texto

1. Nombre

Es una referencia interna, no debes confundirlo con el texto que se muestra junto al campo en el formulario, que es la etiqueta. T1, T2, T3, ... son los nombres predeterminados para los cuadros de texto de una lnea, aunque puedes cambiarlos por otros nombres que sean ms significativos para ti. Debes tener en cuenta que los resultados del formulario incluirn estos nombres de campos.
2. Valor inicial

En este campo puedes escribir el texto que aparecer en el cuadro de texto cuando el formulario se abra por primera vez.
3. Ancho en caracteres

Introduce el nmero de caracteres que va a determinar el ancho del cuadro de texto. No significa que el visitante solamente podr introducir este nmero de caracteres, sino que es una medida de longitud de la anchura del campo.

4. Orden de tabulacin

Determinar la posicin del campo en el orden de tabulacin del formulario. Crea un orden lgico, de arriba a abajo y de izquierda a derecha. Haciendo clic en la tecla Tabulador, el visitante podr saltar de forma sencilla de un campo a otro.
5. Campo de contrasea

Marca la opcin S si se trata de un campo que va a contener una contrasea. De esta forma, cada carcter introducido se convierte en un asterisco.
Propiedades de una casilla de verificacin

1. Nombre y Orden de tabulacin

Para rellenar estos campos sirven las indicaciones vistas arriba.

2. Valor

En este campo est el valor que se devuelve con los resultados del formulario si se selecciona la casilla. Puedes cambiar el valor predeterminado ON por S.
3. Estado inicial

En este campo elige una de las dos opciones, que aparezca activada al cargar la pgina o que aparezca desactivada.
Propiedades de un botn de opcin

Para los cuatro campos que te aparecen en este cuadro de dilogo sirven las indicaciones vistas para la casilla de verificacin.

Propiedades de un men desplegable

1. Nombre y Orden de tabulacin

Estos campos los rellenars siguiendo las indicaciones vistas arriba.

2. Opciones

En la parte central del cuadro de dilogo se disponen las diversas opciones que tendr el men desplegable. Puedes hacer clic en el botn Agregar para introducirlas. Despus, utiliza los botones Subir y Bajar para determinar qu opciones se mostrarn ms arriba del men y cules ms abajo.
3. Alto

En este campo especifica la cantidad de lneas de texto que deseas que aparezcan en el cuadro desplegable. Por ejemplo, si el men desplegable tiene tres opciones, puedes establecer la altura en 3 para que todas las opciones estn visibles.
4. Permitir selecciones mltiples

Si seleccionas la opcin No, el visitante solamente podr seleccionar una opcin.

Propiedades de un botn de comando

1. Nombre y Orden de tabulacin

Para rellenar estos campos sigue las indicaciones vistas arriba.

2. Tipo de botn

Normalmente utilizars dos tipos de botones en tus formularios: Enviar y Restablecer. El tipo Normal crea un botn de comando personalizado para el que debers definir una secuencia de comandos que ejecute la accin concreta que deseas.
3. Valor/Etiqueta

Dependiendo del tipo de botn elegido, el valor de la etiqueta ser, de forma predeterminada, Enviar o Restablecer. Puedes cambiar estos valores por otros, como Envalo, Borrar, Ya est, etc.
__________________________________________

La mejor manera de alinear las etiquetas con sus contenidos es mediante una tabla. Para ello crea una tabla de dos columnas, en la de la izquierda puedes poner las etiquetas, y en la de la derecha los campos. De esta forma tu formulario quedar ms organizado y profesional.
__________________________________________

Comprobacin
Completa.
1. El primer paso para crear un formulario es definir para que se va a .

2.

Normalmente los formularios se usan para recibir . .... , ,

3. 4.

Puedes crear un formulario o a partir de las .. Los campos se componentes de dos elementos: a) . b) .

5. Todos los elementos del formulario se pueden ..

Autoevaluacin
Dibuja. Dibuja un cuadro de texto con sus propiedades.

PRCTICA Crear un formulario de sugerencia tienes ms informacin sobre el grupo de msica Juliet y quieres compartirlo con nosotros, o simplemente quieres decirnos lo que piensas de este sitio, puedes hacerlo aqu. Agradeceremos todos sus comentarios y sugerencias.
2. Sita el punto de insercin bajo este texto y elige Men Insertar > Formulario > Formulario. Frontpage crea un cuadro de lneas discontinuas que marcan los lmites del formulario. Adems, agrega de forma predeterminada los botones Enviar y Restablecer.

3. Sita el punto de insercin sobre los botones y escribe Clase de comentario. Salta una lnea y elige Men Insertar > Formulario > Botn de opcin. Crea de esta forma 4 botones de opcin en la misma lnea. Cada uno de ellos tendr una etiqueta, que sern: Queja, Problema, Sugerencia, Elogio. 4. Bajo la lnea de botones de opcin inserta un campo de texto con desplazamiento. Su etiqueta debe ser: Escribe tus comentarios en ese espacio 5. Deja los botones de Enviar y Restablecer como estn y guarda la pgina dentro de tu sitio con el nombre comentario.htm Resultado Previsualiza el resultado de tu trabajo en la pestaa Vista Previa. Al final tu nueva pgina debe quedar ms o menos as:

I . E . P.

GUIA DE APRENDIZAJE N 11
Tema: Los resultados del formulario.
LU

CG
EN

D E G UAD 1975

PE

Contenidos: Destino de los resultados.

V IR

Los resultados del formulario

El fin de todo formulario es recopilar los datos que ha enviado el visitante para guardarlos y utilizarlos. A esto se llama resultados del formulario y Frontpage proporciona distintos sistemas para gestionarlos. Destino de los resultados Una vez que el visitante enva el formulario, deben reunirse los datos que se han introducido, llamados resultados del formulario, para poder verlos, mostrarlos al visitante o trabajar con ellos si es necesario. FrontPage proporciona varios controladores de formulario, que toman los resultados y llevan a cabo distintas acciones. Por ejemplo, puedes guardar los resultados en un archivo de texto o de HTML, puedes enviar los resultados por correo electrnico, puedes guardar los resultados en una base de datos, o bien utilizar secuencias de comandos personalizadas para controlar los resultados del formulario. Para definir el destino que van a tener los resultados de un formulario, sitate sobre l y elige Propiedades de formulario del men contextual. Te aparecer una ventana como sta:

Puedes elegir entre:

1. Guardar los resultados en un archivo

Cada vez que un visitante enva un formulario, Frontpage anexar los resultados en un archivo del que debes definir su nombre y su ubicacin. Despus, puedes abrir el archivo y ver los resultados. Haz clic en el botn Opciones para ver las posibilidades de formato de archivo que te permite el programa. Si tienes un libro de visitas para tu web, puede resultar interesante guardar los resultados en un archivo HTML. As, podrs crear un vnculo a ese archivo para que los visitantes puedan ver lo que otros han escrito.
2. Enviar los resultados por correo electrnico

Cada vez que un visitante enva un formulario, Frontpage enviar un mensaje de correo electrnico a la direccin que establezcas que contiene los resultados de dicho formulario. Haz clic en el botn Opciones para ver las distintas posibilidades de esta opcin, como por ejemplo elegir el formato del correo, el asunto que llevar, etc.
3. Guardar los resultados en una base de datos

Cada vez que un visitante enva un formulario, Frontpage guardar la informacin en una base de datos. Por ejemplo, si utilizas un formulario para reunir informacin de contacto, puedes guardar los resultados directamente en una base de datos. Si haces clic en el botn Opciones podrs elegir la base de datos en la que se guardar la informacin del formulario, crear una nueva base de datos, elegir los campos que se guardarn y la tabla de la base de datos en la que lo harn, etc.
4. Usar una secuencia de comandos personalizada

Puedes utilizar tu propia secuencia de comandos personalizada (ISAPI, NSAPI o CGI) como controlador de formulario. Utiliza el botn Opciones para ver ms opciones. La pgina de confirmacin El ltimo paso en la creacin de un formulario consiste en definir una pgina de confirmacin, que es la que vern los visitantes una vez que hayan enviado un formulario. La pgina de confirmacin suele mostrar un mensaje de agradecimiento y el contenido de uno o ms campos del formulario. El visitante puede confirmar que la informacin se introdujo correctamente y, si es necesario, puede volver al formulario y rellenarlo nuevamente.

Puedes crear tu propia pgina de confirmacin o dejar que sea Frontpage quien la cree. La pgina de confirmacin predeterminada de Frontpage muestra una lista de nombres de campos del formulario y sus valores. Para crear una pgina de confirmacin personalizada, sigue estos pasos: 1. Abre una pgina en blanco y escribe el texto que quieres mostrar despus de que el visitante haya enviado el formulario. Por ejemplo: Muchas gracias por su comentario. Con l nos ayuda a mejorar constantemente. 2. Si quieres mostrar la informacin que el visitante ha introducido en el formulario para que verifique si los datos son correctos, elige Men Insertar > Componente > Campo de confirmacin.

3. En el cuadro Nombre del campo de formulario que se va a confirmar, escribe el nombre del campo a partir del cual se muestra la informacin y despus haz clic en Aceptar. El nombre del campo aparecer entre parntesis en la pgina. Cuando se muestre la pgina de confirmacin al visitante, este campo mostrar en su lugar el dato que ha introducido del visitante. Repite este paso en cada campo que desees mostrar. 4. Guarda la pgina. 5. Para asignar la pgina de confirmacin que has creado al formulario, abre la pgina que lo contiene y Propiedades de formulario en el men contextual. Despus, haz clic en el botn Opciones y en la ficha Pgina de confirmacin.

6. En el cuadro Direccin URL escribe el nombre y la ubicacin de la pgina de confirmacin que acabas de crear o haz clic en Examinar para localizarla.
__________________________________________

Si vas a utilizar alguno de los controladores de formulario en lugar de una secuencia de comandos personalizada, debes asegurarte antes de que las Extensiones de servidor de

Frontpage estn instaladas en el servidor en el que est ubicado el sitio web.

__________________________________________

Comprobacin
Dibujar 2 formularios distintos.

PRCTICA
Crear una pgina de confirmacin
La pgina de confirmacin se suele utilizar para agradecer al visitante el haber rellenado el formulario y tambin para confirmar que los datos introducidos en l son correctos. Desarrollo 1. Crea una pgina en blanco y escribe: Muchas gracias por su comentario, con l nos ayuda a mejorar constantemente. 2. Guarda la pgina en tu sitio con el nombre confirmacion.htm. 3. Cierra la pgina confirmacion.htm y abre la pgina que contiene el formulario: comentario.htm. Haz clic con el botn derecho dentro del formulario y elige Propiedades de formulario. Despus haz clic en el botn Opciones y en la ficha Pgina de confirmacin. 4. Haz clic en el botn Examinar para seleccionar la pgina confirmacion.htm.

Resultado Esto es todo. Con estos sencillos pasos habrs creado una pgina para agradecer a los visitantes el haber rellenado el formulario.