Unidad 8. Formularios


Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.

1. Introducción

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 botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo 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 programación, ya sea en PHP, en JavaScript o en otro lenguaje de programación, 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, menús desplegables, y botones.

2. Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

  • Campo de texto
  • Área de texto
  • Botón
  • Casilla de verificación
  • Botón de opción
  • Lista/Menú
  • Etiqueta
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.


**Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

**Botón
Es el botón tradicional de Windows. El botón 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).


También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.

**Casilla de verificación
Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opción o no.
Deseo recibir información 
Puede asignársele el Estado inicial como Activado o como Desactivado.

**Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el mismo nombre, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás. Esto obliga al usuario a sólo poder elegir una opción.
 Superman
 Spiderman

**Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
                                                                                                                                                        
Los elementos se añaden a través del botón 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 través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

**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. Además, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy práctico en casillas de verificación y botones de opción.
 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 través del nombre sabremos qué control los envía.


3. 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, sólo se enviarán los datos de los elementos de dentro del formulario.
Puedes crear formularios a través del menú Insertar  Formulario, opción Formulario, o desde el panel Insertar.
Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas, similar al de la imagen siguiente.
Estas líneas son ayudas visuales al trabajar en diseño, pero no se verán en el formulario final.
Entre las propiedades del formulario, encontramos el campo Acción. En el indicamos a dónde se envían los datos. Normalmente, una página PHP que se encara de tratarlos.
Propiedades formulario
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario o desde el panel Insertar.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.


4. Validar formularios
La validación de formularios sirve para hacer que JavaScript valide el formulario antes de que se envíe, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho más eficaz que enviar la página y validarla sólo en el servidor.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir  a través del menú Ventana, opción Comportamientos, o pulsando Mayús + F4. 
Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botón  y pulsar sobre la opción Validar formulario, deberás 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 numérico (Número) y si ha de estar en un rango, una Dirección de correo electrónico, etc.

Unidad 7: Tablas


En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.
1. Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.
Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

2. Insertar una tabla
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el número de Filas Columnas que tendrá la tabla, así como el Ancho de la tabla.
El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeleses siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elmento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.
Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.
En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

3. Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.




imagen y texto


C
O
L
U
M
N
A


Texto dentro de una celda




CELDA


FILA


Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.
Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacíamos, por ejemplo, con las listas.

4. Formato de tabla
Las propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..


5. Cambiar tamaño de tabla y celdas
Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An(anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana.
No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

6. Añadir y eliminar filas y columnas.
Existen varias formas de añadir y eliminar filas y columnas a una tabla.
Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menúModificar. En ambos casos aparece la opción Tabla.
Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.
También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.
También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).

7. Anidar, dividir y combinar celdas
Descripción: • Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.
  
  
 
  

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto.
Descripción: • Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola.
Mientras que dividir celdas consiste en partir en dos una celda.
Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.
Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón  del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.
Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación de como resultado un rectángulo. No podemos combinarlas para formar una "L". Por ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.
12
34
Podemos combinar celdas en vertical y horizontal:
      
  
       
       
    
   
     
        

Descripción: • Para dividir una celda hay que pulsar sobre el botón  del inspector de propiedades, o sobre la opción Dividir celda de la opción Tabla.

Unidad 6: Imágenes


1. Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada gato.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/gato.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/gato.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así  indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:.

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

2. Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:


Desde aquí podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.
Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen. Puedes ver cómo en este aquí .
En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.
En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.
Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados:

Puedes asignarle un grosor de borde desde el campo Borde.
Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

3. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:
Tamaño original 
   Con tamaño modificado
El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

Redimensionable

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella. 
flecha restablecer tamaño
Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

4. Imagen de sustitución. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

  
Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, 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 algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.