UNIVERSIDAD INTERNACIONAL DEL ECUADOR

FACULTADES DE DISTANCIA

PRIMER CICLO

ASIGANTURA: OFIMTICA III

TUTOR: ING. GALO PACHECO

Septiembre 2013

UNIDAD No. 6

OBJETIVO DE ESTUDIO

Al finalizar el presente captulo el estudiante estar en capacidad de: 1. Crear formularios en Dreamweaver. 2. Insertar campos, botones, etc. en el formulario 3. Validar las opciones del formulario

CONTENIDOS DE LA UNIDAD 1. Formularios 1.1. Elementos del Formulario 1.2. Crear formulario 1.3. Validar formulario Formularios

Los formularios se utilizan para recoger datos de los usuarios. Nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en PHP, en JavaScript o en otro lenguaje de programacin, y esto no entra en los objetivos del curso. A la derecha tienes un ejemplo de formulario simple. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.

Elementos de formulario Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario, o lo que es ms cmodo si vamos a insertar varios elementos, desde el panel Insertar en la seccin Formularios.

A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades. Antes de insertar estos elementos debemos crear el propio formulario tal y como veremos en el siguiente punto.

Campo de texto y rea de texto Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la opcin Una lnea o Multi lnea respectivamente. Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carcter como podrs ver en la imagen siguiente. A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
rea de texto

Campo de t

**********

A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.

Botn Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). Tambin es posible cambiar el texto del botn, a travs de la propiedad Valor del inspector de propiedades.

Como mnimo tiene que haber un botn del tipo Enviar formulario, imprescindible para enviar los datos. Adems le suele acompaar un botn Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo. Casilla de verificacin Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opcin o no. Deseo recibir informacin Puede asignrsele el Estado inicial como Activado o como Desactivado.

Botn de opcin Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el mismo nombre, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Esto obliga al usuario a slo poder elegir una opcin. Superman Spiderman

Seleccionar (Lista/Men) Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.

Los elementos se aaden a travs del botn Valores de lista... del Inspector de propiedades.

Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.

Etiqueta Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir en cada uno de ellos. Adems, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy prctico en casillas de verificacin y botones de opcin. Sin etiqueta. Hay que pulsar sobre la casilla. Con etiqueta. Podemos pulsar en el texto.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a travs del nombre sabremos qu control los enva.

Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de l, ya que cuando lo demos a enviar, slo se enviarn los datos de los elementos de dentro del formulario. Puedes crear formularios a travs del men Insertar Formulario, opcin Formulario, o desde el panel Insertar.

Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas naranjas discontinuas, similar al de la imagen siguiente.

Estas lneas son ayudas visuales al trabajar en diseo, pero no se vern en el formulario final. Entre las propiedades del formulario, encontramos el campo Accin. En el indicamos a dnde se envan los datos. Normalmente, una pgina PHP que se encara de tratarlos.

Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs del men Insertar, opcin Formulario o desde el panel Insertar.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia. Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.

Validar formularios La validacin de formularios sirve para hacer que JavaScript valide el formulario antes de que se enve, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho ms eficiente y rpido que enviar la pgina y validarla slo en el servidor. Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays + F4. Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botn

y pulsar sobre la opcin Validar formulario,

debers haber seleccionado el formulario previamente.

Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numrico (Nmero) y si ha de estar en un rango, una Direccin de correo electrnico, etc.

Para reforzar su aprendizaje revise toda la informacin que se adjunta en la plataforma para el desarrollo del sitio WEB y creacin de formularios en estas direcciones: http://www.youtube.com/watch?v=HeFGgkBUcFo http://www.youtube.com/watch?v=UFTTtkXoIxo http://www.youtube.com/watch?v=rsPlPAD7270 http://www.youtube.com/watch?v=j2_RxzdWwtw

PREPARACIN DEL TRABAJO INDIVIDUAL

Carcter: Individual obligatorio. Instrucciones: Se recomienda leer con mucho cuidado y detenimiento cada uno de los procesos que se realizan. Revise siempre los conceptos que queden claro, antes de resolver sus tareas, debe entender bien las definiciones, conceptos y adaptarse a la notacin de la gua Este trabajo lo debe realizar de forma digital de manera que se pueda visualizar el procedimiento realizado

La entrega de TAREA es de carcter obligatorio y semanalmente por

cada UNIDAD que corresponda, as como tambin los docentes calificara semanalmente los deberes para la semana siguiente.

ACTIVIDADES DE APRENDIZAJE Sobre los temas de la unidad 6 Instrucciones Importantes: 1. Revisar las instrucciones indicadas en la unidad 6 y desarrollar las actividades de aprendizaje 2. La entrega de la tarea es individual, si existe copias de la misma, el puntaje se dividir para los trabajos que se vean idnticos. 3. No se debe utilizar plantillas para la elaboracin del sitio web o en su defecto presentar como tarea sitios previamente creados que se encuentran disponibles en el internet; no sern evaluadas las tareas que presenten estas caractersticas y tendrn una calificacin de 1 punto. 4. El sitio debe contar por lo menos con las cuatro pginas principales como son: a. Pgina de inicio

b. Quienes somos c. Soluciones o Productos d. Contactos 5. En la evaluacin se tomar en cuenta la esttica, creatividad, contenidos, diseo del sitio web. Tarea 5 En Adobe Dreamweaver contine con el diseo del sitio web, realice las siguientes actividades: En el esquema de la pgina web realizada en la tarea anterior inserte los contenidos diseados para su pgina web, es decir las imgenes, listas, mens, informacin que se visualizar Cree un men Spry con el men y submen de opciones diseado para su pgina web. Un ejemplo seria: o o o o Empresa Soluciones Contactos Galera

A partir de la pgina creada, cree cuatro pginas web principales con las que debe contar en su sitio como son: o o o o Pgina de inicio Quienes somos Soluciones o Productos Contactos

Para crear nuevas pginas a partir de la pgina principal usted solo tiene que guardar como y grabarla en la carpeta del sitio con otro nombre (ejemplo: Quienes_somos) Agregar la informacin en la cada una de las pginas de contenidos que hace referencia como se muestra en el ejemplo al final del documento. Crear un Formulario de contacto en pgina de contactos que permita el envi de informacin al correo

Vincular cada una de las pginas en el men Spry para que se muestre el contenido de acuerdo a la opcin seleccionada, si usted creo varias opciones en el men y no cuenta con las dems pginas puede utilizar el signo de numeral (#) en el espacio de vinculo para omitir la creacin de las pginas adicionales y el funcionamiento del men Spry se realice correctamente.

Puntaje: El puntaje de cada unidad es sobre 5 puntos.

Las cuatro pginas que debe contener su sitio WEB

Pgina de Inicio

Quienes somos

Soluciones

Contactos