Colegio Gimnasio Campestre San Sebastin

TALLER 9 GRADO Resuelve las siguientes preguntas en tu cuaderno de informtica, de este taller se tomara una nota para cuaderno y trabajo individual.

1. Define que es rollover y como insertamos un rollover en nuestra pgina web utilizando Dreamweaver? 2. Como insertamos una pelcula o animacin flash con Dreamweaver? 3. Cmo insertamos un archivo de audio con Dreamweaver? 4. Para que se usan los formularios en una pgina web? 5. Como pueden insertarse los elementos del formulario? 6. 7. 8. 9. Defina Campo de texto, rea de texto y campo de contrasea. Defina botn de formulario, casilla de verificacin, y botn de opcin. Defina lista o men. Para qu sirve la validacin de formularios?

10. Escriba F o V segn corresponda. a. ( ) En un formulario, El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir varias. b. ( ) El botn del formulario 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). c. ( ) La casilla de verificacin es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opcin o no. d. ( ) Una lista o men es un pequeo botn redondo que puede activarse o desactivarse.

11. Completar el siguiente enunciado con las palabras correspondientes. Formulario, validacin, campos, lista. a. Una lista o men es un elemento de_________________ que lleva asociada una __________de opciones. b. La ________________de formularios sirve para hacer que JavaScript valide el formulario antes de que se enve, avisando al usuario para que corrija los errores, como ___________obligatorios sin rellenar.

Colegio Gimnasio Campestre San Sebastin

12. Dibuja en tu cuaderno y seala en el formulario los siguientes elementos: Campo de texto, lista-men, botn de opcin, rea de texto, casilla de verificacin, botn para borrar, botn de enviar.

13. Seala a continuacin cual es el rea de texto, el campo de texto y el campo de contrasea?

************

14. La siguiente imagen pertenece al inspector de propiedades de: a. b. c. d. Lista o men. Botn. Casilla de verificacin. Ninguna de las anteriores.

Colegio Gimnasio Campestre San Sebastin

IMGENES Imagen de sustitucin. Rollover Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas. Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes

Hemos creado el siguiente rollover. Sita el cursor sobre l para ver qu es lo que ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original y la de sustitucin.

Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada. Multimedia Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo, que son los ms empleados. Pelculas Flash (SWF) Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin

Colegio Gimnasio Campestre San Sebastin

hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia ms empleado en las pginas web. Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el navegador.

Las pelculas o animaciones Flash pueden insertarse en una pgina a travs del men Insertar Media, opcin SWF, o pulsando Ctrl + Alt + F. Tambin pueden insertarse empleando el panel Insertar en la categora Comn, pulsando sobre la opcin SWF que aparece al desplegar el men Media.

Veamos las opciones ms importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As, para editarlo, bastar con pulsar Editar. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula hasta que el usuario la

Colegio Gimnasio Campestre San Sebastin

activase. Por tanto interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento. La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla en Alta para verlo tal cul se cre. La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del tamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo. Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un prrafo) empleando CSS. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se haya especificado un color de fondo en el Flash). El botn Reproducir nos permite ver la pelcula.

Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se vern. De todas formas, Dreamweaver nos avisar cuando incluya archivos.

Sonido No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto.

Colegio Gimnasio Campestre San Sebastin

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo. Siempre es mejor a que el usuario abandone la pgina. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A continuacin, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).

Pueden ocurrir dos cosas: Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se mostrar un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad de hacerlo, como en esta imagen de Firefox.

Un plugin es un aadido al navegador, que nos permite realizar funciones extra, como en este caso, reproducir un archivo de msica. Al insertar un elemento como plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitar a instalarlo.

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plugin aparecen representados dentro de Dreamweaver por una imagen como la de la izquierda. En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.

Colegio Gimnasio Campestre San Sebastin

Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden definirse como propiedades a travs del inspector de propiedades, pero si los conocemos podemos emplear el botn Parmetros....

Por ejemplo, para que el archivo se reproduzca continuamente se hemos aadido loop="true". Si no queremos que se reproduzca automticamente, podemos aadir tambin autostart="false" La lnea de cdigo del archivo de audio nos quedara del siguiente modo: <embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo). No obstante, insistimos en que no es recomendable poner msica sin controles de reproduccin.

Lo ms habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los controles personalizados. Otras pginas de Internet, como goear nos permiten insertar en nuestra web un reproductor con msica del sitio, que nuestros visitantes podrn escuchar. Vdeos En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. En este apartado nos referimos a insertar vdeo de un archivo alojado en nuestro sitio. No a mostrar vdeos de sitios especializados, como Youtube. Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

Colegio Gimnasio Campestre San Sebastin

Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. Puedes ver el vdeo (si tienes el plugin adecuado) a continuacin: El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plugin.

Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es mejor borrarlos, y as el vdeo se mostrar con su tamao original. Si conocemos el tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamao de los controles de reproduccin, que depende de cada navegador. Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs botn Parmetros, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true".

Como ya hemos dicho, todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de reproducirse. En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en la que pueda encontrarlo. No ser necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un archivo ms raro.

Colegio Gimnasio Campestre San Sebastin

Formularios Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo pueden validarse los datos introducidos en l. Introduccin

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.

Colegio Gimnasio Campestre San Sebastin

Campo de texto , rea de texto y Contrasea 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 textolllllllllllllllllllllllllllllllllllllllllll lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll kkkkkkkkkkkkkkkkkkkkkkkkkkkk

Campo deo

**********

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 de formuario 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.

Colegio Gimnasio Campestre San Sebastin

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.

Crear formularios 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.

Colegio Gimnasio Campestre San Sebastin

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.

Colegio Gimnasio Campestre San Sebastin

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.