Curso de diseño Web HTML (página 2)

Enviado por rsequera20

Partes: 1, 2

9. Formularios

La manera general para que los lectores de nuestra página se puedan comunicar con nosotros es por medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos un e-mail convencional.

Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unas opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo.

Se puede, hacer todo esto, además de otras cosas, utilizando los formularios, con los que se pueden confeccionar páginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de selección, cajetines de introducción de texto y de control, etc., como vamos a ver.

Los formularios permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un botón de envío.

Esos datos los podemos recibir "en bruto" en nuestro correo, con los que confeccionaríamos manualmente dicha lista de correo, sin necesitar ningún programa para ello. Este proceso es el que vamos a comentar en este capítulo.

La otra posibilidad, de la que únicamente se va a hacer esta mención, es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos y añadirlos a la lista de correo, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son el Perl y el C.

El tipo de formulario que se describe a continuación podrá ser utilizado por la mayoría de los navegadores, con la notable excepción del Explorer (incluso la versión 3.0), por lo que es conveniente suministrar al final del formulario, como una alternativa para estos casos, un enlace de e-mail ordinario (ver el Capítulo 4)

Estructura de un formulario

La estructura general de un formulario es:

1.Etiqueta de inicio:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST"

ENCTYPE="TEXT/PLAIN">

2.Cuerpo del formulario

(Elementos para introducir los datos).

3.Botones de envío y de borrado.

4.Etiqueta de cierre </FORM>

1.Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de e-mail, nada más púlsar el usuario el botón de envío.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo de texto, perfectamente legible y sin codificar.

2.Cuerpo del Formulario (Elementos para introducir los datos)

Los vamos a dividir en tres clases:

1.Introducción por medio de texto

2.Introducción por medio de menús

3.Introducción por medio de botones

La introducción de los datos se consigue por medio de la etiqueta:

En donde:

XXX	Es la palabra que indica el tipo de datos a introduccir.
YYY	Es el nombre que le asignamos nosotros a la variable de introducción del dato.
ZZZ	Es la palabra asociada a un elemento.

Todo esto, que de momento parece muy confuso, se aclarará al ir viendo los distintos casos.

Introducción por medio de texto

Introducción por medio de texto (una línea)

En este caso es XXX=TEXT, es decir, INPUT TYPE="TEXT". El atributo VALUE no procede en este caso. Vamos a poner un ejemplo.

solicitamos el apellido del usuario:

Escribe tu apellido:

</FORM>

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el botón de envío (que veremos más adelante), recibiremos, un e-mail suyo con el siguiente texto:

Apellido=Ruiz

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, sea cual sea la longitud del formulario, si no se indica nada, el usuario puede introducir el número de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="número".

En el caso que hemos visto, si hubiéramos cambiado la etiqueta correspondiente por:

(Se puede comprobar cómo no se pueden introducir más de 12 caracteres).

También se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT TYPE="TEXT" por INPUT TYPE="PASSWORD". En el último ejemplo, si cambiamos la etiqueta correspondiente por:

(Se puede comprobar cómo los caracteres introducidos se representan por asteriscos)

Introducción por medio de texto (múltiples líneas)

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de múltiples líneas.

Esto se consigue con la etiqueta de inicio:

(en donde no se utiliza INPUT TYPE y donde ROWS representa el número de filas, y COLS el de columnas).

y la de cierre: </TEXTAREA>

Ejemplo: un formulario solicitando los comentarios del usuario:

Introduce tus comentarios:

</TEXTAREA>

</FORM>

(El salto de línea del texto introducido no se efectúa automáticamente).

Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsado el botón de envío, recibiremos un e-mail suyo con el siguiente texto:

Comentarios = mensaje escrito por el usuario

Introducción por medio de menús

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos uso de un formulario en forma de menú.

Se consigue con la etiqueta de inicio <SELECT NAME= "YYY"> y la de cierre </SELECT>.

Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.

Ejemplo: Pedimos al usuario que elija su color preferido:

<BR>¿Cuál es tu color preferido?

<OPTION>Rojo

<OPTION>Verde

<OPTION>Azul

<OPTION>Amarillo

</SELECT >

</FORM>

Si el usuario ha escogido, p. ej. Azul y ha pulsado el botón de envío, recibiremos un e-mail suyo con el texto: ColorPreferido=Azul.

En el ejemplo anterior, sólo es visible en el formulario una opción. Si queremos que sean visibles múltiples opciones a la vez, añadimos en la etiqueta los atributos MULTIPLE SIZE="número", donde especificamos el número de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por:

Introducción por medio de botones

Caja de confirmación (checkbox)

Si queremos que el usuario confirme una opción determinada, podemos hacer uso de un formulario de confirmación, o checkbox, que se consigue con la etiqueta:

Ejemplo: Solicitamos al usuario que confirme su inclusión en una lista de correo:

Sí, deseo ser incluido en la lista de correo.

</FORM>

Si el usuario marca este formulario y pulsa el botón de envío, recibiremos un e-mail suyo con el texto: Lista=On.

Si queremos que el formulario aparezca inicialmente como marcado (el usuario no necesitará hacerlo), basta con añadir el atributo CHECKED dentro de la etiqueta. En el ejemplo anterior si sustituimos la etiqueta equivalente por:

Botones de radio

Cuando queremos que el usuario elija una única opción entre varias, podemos hace uso de los botones de radio, que se consiguen con la etiqueta:

Donde YYY es el nombre que le ponemos a la variable que se trata de elegir, y ZZZ es el nombre de cada una de las opciones en concreto.

Ejemplo: solicitamos al usuario que defina cuál es su sistema operativo preferido:

¿Cuál es tu sistema operativo preferido?

<BR>

<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC

<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac

<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix

</FORM>

Obsérvese el atributo opcional CHECKED que se ha añadido en la primera etiqueta. Esa será la opción que aparece marcada por defecto.

Obsérvese también que no es posible escoger más de una opción.

Si el usuario ha escogido la opción PC y pulsa el botón de envío, recibiremos un e-mail suyo con el texto: SistemaOperativo=PC.

3.Botones de envío y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el botón de envío de los datos, que se consigue con la etiqueta:

En donde ZZZ es el texto que queremos que aparezca en el botón.

Vamos a añadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:

Escribe tu apellido:

</FORM>

Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:

En donde ZZZ es el texto que queremos que aparezca en el botón.

Si añadimos al ejemplo anterior la etiqueta:

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el botón de borrado.

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningún inconveniente en usar, dentro del mismo formulario, distintos tipos de introducción de datos. Al pulsar el usuario el botón de envío recibiríamos en e-mail suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el símbolo &.

Ejemplo

Haremos como ejemplo práctico un libro de visitas a nuestra página.

<HTML>

<HEAD>

<TITLE>Libro de Visitas</TITLE>

</HEAD>

<BODY>

<H2>Libro de visitas</H2>

<P><FORM ACTION="mailto:" METHOD="POST"

ENCTYPE="TEXT/PLAIN">

Tu nombre:

<P>Escribe tus comentarios:

</TEXTAREA>

</FORM>

<P>

<HR>

</BODY>

</HTML>

10. Mapas

Hemos visto anteriormente dos maneras distintas de enlazar una página con otra: por medio de un enlace de texto o por medio de una imagen. Pero en este último caso se hacía uso de una imagen para enlazar a una única página.

Se puede utilizar una única imagen para enlazar con varias páginas, yendo a una u otra según la zona en donde se pulse el ratón. Este tipo de imágenes se llaman mapas.

Veremos cómo se crea un mapa partiendo de una imagen, y cómo se implementa dicho mapa con el lenguaje HTML en nuestra página.

Hay dos tipos de mapas:

1.	Mapas gestionados por el servidor
2.	Mapas gestionados por el cliente

En nuestro caso, trataremos sobre los mapas gestionados por el cliente, pero cabe hacer mención de los mapas gestionados por el servidor.

1.Mapas gestionados por el servidor

En este tipo de mapas al desplazar el cursor sobre la imagen que forma el mapa se van obteniendo las distintas coordenadas. Cuando se pulsa el ratón en un punto determinado, el navegador envía esas coordenadas al servidor, y éste comprueba en un archivo MAP (situado en su directorio cgi-bin) cuál es la página que se corresponde con estas coordenadas, envía esta información al navegador, y éste solicita a su vez al servidor que le enlace con dicha página.

Estos mapas, tienen una ventaja: que pueden ser utilizados por todos los navegadores, incluso por las versiones más antiguas.

Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que pueda funcionar un mapa de este tipo. Además hay que conocer el tipo de servidor (NCSA, el más común, o CERN), pues el código a aplicar es distinto en un caso u otro. Por otra parte, al requerir un trasiego de información entre el navegador y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos a continuación.

2.Mapas gestionados por el cliente

Estos mapas son gestionados por el cliente (es decir, nuestro navegador) y no por el servidor, como en el caso anterior.

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas se convierte en el símbolo normal para enlazar con otras páginas (una mano, habitualmente).

Si se pulsa en estas zonas activas (HOTSPOTS), el navegador consulta con el documento HTML que ha recibido, y decide a qué página o dirección corresponde esa zona activa.

Es decir, no necesita enviar la información al servidor y esperar la respuesta de éste, con lo que el proceso es más rápido que en el caso anterior, reduciéndose además el tráfico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar por una zona activa se muestra la dirección a la que se corresponde (al contrario que en el caso anterior, en la que sólo se ven unas coordenadas). Además, estos mapas se pueden utilizar off-line, al contrario también que en el otro tipo, ya que no requieren la ayuda del servidor.

Pero tiene el inconveniente de que estos mapas no son implementados por todos los navegadores, como en el caso anterior, aunque sí por la mayoría de los utilizados actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navegadores que no implementen este tipo de mapas.

En lo que sigue, vamos a ver exclusivamente cómo implementar este tipo de mapas, es decir, mapas gestionados por el cliente (client-side image maps).

Confección de la imagen del mapa

Antes que nada, es necesario confeccionar la imagen que va a servir como mapa. Se hará con un programa gráfico, y pueden utilizarse los formatos GIF o JPG.

Para crear una mapa para utilizarlo en nuestra página HTML, debemos seguir los siguientes pasos:

Se confecciona con un programa gráfico la imagen que nos va a servir como mapa.

Para definir un área activa rectangular, necesitamos conocer las coordenadas de su ángulo superior izquierdo (X1,Y1) y las de su ángulo inferior derecho(X2,Y2).

Estas coordenadas las obtenemos con el programa gráfico con el que hemos confeccionado la imagen.

Al obtener los datos necesarios (las coordenadas) podemos escribir el código HTML que convierta esta imagen en un mapa.

Código HTML para definir un mapa gestionado por el cliente

En este caso, el código que debemos escribir es el siguiente:

</MAP>

Veamos ahora cada una de las etiquetas:

<MAP NAME="nombre">	Esta es la etiqueta de apertura del mapa, y en donde se define su nombre.
<AREA SHAPE="RECT" COORDS="X1,Y1,X2,Y2" HREF="paginaXX.html">	Esta etiqueta define la primera zona activa. Se indica que su forma (SHAPE, en inglés) es rectangular, y que las coordenadas de su ángulo superior izquierdo son (X1,Y1), y que las del ángulo inferior derecho son (X2,Y2). A continuación se indica cuál es enlace que se desea obtener.
<AREA SHAPE="DEFAULT" NOHREF>	Con esta etiqueta se define el área completa del mapa, indicando que su forma es la que tiene por defecto (default), o sea rectangular. Si se quisiera que el mapa no abarcara la totalidad de la imagen, o incluso que tuviera una forma distinta, habría que indicarlo aquí, en lugar de la instrucción DEFAULT, haciendo uso del mismo tipo de instrucciones que las de las zonas activas.
</MAP>	Etiqueta de cierre del mapa.
<IMG SRC="imagen.gif" USEMAP="#nombre">	Con esta etiqueta se solicita primero al servidor que envíe una imagen llamada imagen.gif. Con USEMAP="#nombre" se indica que esta imagen es el mapa definido anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones del ratón, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto.

Con el atributo NOHREF, se define que el área completa de la imagen es una zona no activa, excepto en las áreas definidas anteriormente como activas.

Enlaces alternativos de texto

Como se ha dicho anteriormente, no todos los navegadores implementan este tipo de mapas gestionados por el cliente. Por ello, es necesario suministrar unos enlaces alternativos convencionales de texto, para obviar este inconveniente.

Por ejemplo, a continuación del mapa, se pueden poner enlaces de texto, correspondientes a las dos zonas activas (reduciendo la fuente, para hacerlo menos antiestético):

<A HREF="paginaXX.html">Mi página XX</A> |

<A HREF="paginaYY.html">Mi página YY</A>

</FONT>

Zonas activas en forma de círculos o polígonos

Hasta ahora se han definido las zonas activas en forma de rectángulos. Pero se pueden definir también estas zonas activas como círculos o como polígonos.

Para definir una zona activa circular es necesario conocer las coordenadas de su centro (X,Y) y la longitud de su radio (R). Una vez sabidos estos datos, la etiqueta es como sigue:

Para definir una zona activa poligonal hay que conocer las coordenadas de los distintos puntos (X1,Y1), (X2,Y2), (X3,Y3), etc. Con estos datos, la etiqueta se escribe como sigue:

11. Frames

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y el Explorer 2.0 en adelante.

Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.

Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una página con dos Frames. El de la izquierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presentación.

Documento de definición de los frames

Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas.

En el ejemplo que vamos a desarrollar, la página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas).

Con respecto al tamaño, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante.

Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que veamos en el otro (y que vamos a llamar mi_indice.html), y el de la derecha otro documento HTML que va a servir de página de presentación (al que llamaremos mi_presentacion.html).

Todo lo anterior se refleja en el siguiente documento HTML:

<HTML>

<HEAD>

<TITLE>Mi primera pagina con frames</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Obsérvese lo siguiente:

Es un documento parecido a los que conocíamos hasta ahora. La diferencia está en que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET (definir los frames).

En este caso, con la etiqueta <FRAMESET COLS="20%, 80%"> se define que va a haber dos frames y que van a ir en columnas. Si hubiéramos querido que fueran en filas, habríamos puesto ROWS (filas, en inglés). También se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que representaría el número de pixels a ocupar.

Ya se ha definido el número de frames, su distribución y su tamaño, pero falta por definir el contenido de cada frame. Esto se hace con las etiquetas:

Con esto se define que el contenido del primer frame (el de la izquierda) sea el documento HTML mi_indice.html y el del segundo (el de la derecha) sea el documento HTML mipresentacion.html.

Obsérvese que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el primero. El motivo es que se necesita dar un nombre al segundo frame, pues, como veremos a continuación, en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.

A este documento le vamos a llamar mi_pagina.html, pero todavía no lo vamos a guardar, pues falta por añadir algo que veremos más adelante.

Documentos HTML de cada frame

Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuérdese que son como páginas independientes, que pueden tener cada una su propio fondo, etc., y todo lo que queramos añadir en ellos y que hemos aprendido hasta ahora.

Documento del frame de la izquierda

Va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha.

<HTML>

<HEAD>

<TITLE> Indice </TITLE>

</HEAD>

<P><A HREF="mi_presentacion.html" TARGET="principal"> Presentación </A>

<P><A HREF="otra_pagina.html" TARGET="principal"> Esta es otra página </A>

</BODY>

</HTML>

Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definición de los frames.

En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a cargar los documentos HTML.

Guardamos este documento con el nombre de mi_indice.html.

Documento del frame de la derecha

Va a tener un fondo negro, y va a contener sólamente un texto.

<HTML>

<HEAD>

<TITLE> Presentacion </TITLE>

</HEAD>

<P>ESTA ES LA VERSION

<BR><FONT COLOR="#FF0000">CON FRAMES</FONT>

<BR>DE MI PAGINA

</STRONG>

</FONT>

</CENTER>

</BODY>

</HTML>

Guardamos este documento con el nombre de mi_presentacion.html

Alternativa para los navegadores que no soportan frames

Con lo visto anteriormente, ya tenemos las tres piezas que necesitamos:

Documento de definición de los frames

Documento del contenido del primer frame

Documento del contenido del segundo frame

Hay que prever el caso en que los navegadores no soportan o desconocen las etiquetas FRAMESET y FRAME.

Para estos casos está prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se añaden al final del documento de definición de los frames, y a se pone entre ambas lo que queremos que vean los que acceden con un navegador que no soporta frames. Puede incluso ser el código HTML de una página completa (lo que normalmente va entre las etiquetas <BODY> y </BODY>)

En nuestro caso, pudiéramos poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace normal, hacia una página que hayamos definido como principal o de presentacion para estos casos. (También podríamos no decir nada sobre frames, y colocar aquí el código de la página de presentación)

Estas utilizando un navegador que no soporta frames. <P>Pulsa para visitar mi <A HREF="presentacion.html"> página</A>.

</NOFRAMES>

<HTML>

<HEAD>

<TITLE>Mi pagina con frames</TITLE>

</HEAD>

</FRAMESET>

Estas utilizando un navegador que no soporta frames.

<P>Pulsa para visitar mi <A HREF="presentacion.html"> página</A>.

</NOFRAMES>

</HTML>

Ahora sí podemos guardar este documento con el nombre de mi_pagina.html.

Atributos de la etiqueta <FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo.

Define el número de frames que habrá, pues, por ejemplo:

<FRAMESET COLS="XX, YY">	(habrá dos frames en columnas)
<FRAMESET COLS="XX, YY, ZZ">	(habrá tres frames en columnas)

Define el tamaño de los frames, según el valor que demos a XX, YY, ZZ…. Este valor se puede expresar en:

Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Así, por ejemplo:

<FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)

<FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)

Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas). Así, por ejemplo:

<FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600). Pero es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro. Si se va a usar algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver acontinuación, para que se ajuste el total a la pantalla del usuario

Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante. Por ejemplo:

<FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).

Si hay más de un frame con asterisco, ese espacio restante se dividirá por igual entre ellos.

Si hay un número antes del asterisco, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría dos tercios para el primer frame y un tercio para el otro.

Frames sin bordes

Si se desea que no haya un borde de separación entre los frames, se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan.

Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo que la etiqueta completa quedaría:

Atributos de la etiqueta <FRAME>

Esta etiqueta define las cararacterísticas de un frame concreto, no del conjunto de los frames, como era el caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>:

*SRC="dirección"*	Esta dirección puede ser la de un documento HTML (tal como hemos utilizado en el ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecerá inicialmente vacío, aunque tendrá las dimensiones asignadas.
*NAME="nombre_de_la_ventana"*	Este atributo se usa para asignar un nombre a un frame. De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página. Es decir, que pulsando en otra página un enlace, se cargará precisamente en ésta, tal como hemos visto en el ejemplo. El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico (una letra o un número, pero no otro tipo de símbolo).
*MARGINWIDTH="número"*	Se utiliza este atributo cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número que se ponga representa los pixels de los márgenes. Este atributo es opcional.
*MARGINHEIGHT="número"*	Igual que el anterior, pero referido a los márgenes en altura.
*SCROLLING="yes\|no\|auto"*	Este atributo se utiliza para decidir si el frame tendrá o no una barra deslizadora. Si se escoje "yes" tendrá siempre una barra deslizadora. Si se escoje "no" no la tendrá nunca, y si se escoje "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto".
*NORESIZE*	A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para que la ventana no se pueda re-dimensionar (en inglés, resize) por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
*FRAMEBORDER="no"*	Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.

El atributo TARGET

En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:

TARGET="nombre_dado_a_otro_frame".

Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condición que el primer carácter sea alfanumérico (letra o número).

Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas (blank, self y top) en minúsculas.

TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.

TARGET="_self". Hace que el enlace se cargue en el propio frame.

TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados, la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro sitio del WEB, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de las etiquetas de los enlaces.

Frames anidados dentro de otros frames

Hasta ahora hemos contemplado sólo la posibilidad de tener una distribución de los frames bien en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez.

Se pueden obtener distribuciones más complejas anidando filas dentro de una columna, o a la inversa, columnas dentro de una fila.

Supongamos que queremos la siguiente distribución:

Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%)

Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%)

Un tercero ocupando el resto de la pantalla.

Vemos que, en realidad, esto equivale a la siguiente distribución:

Dos filas. La superior ocupa el 15% y la inferior el resto.

La fila inferior está a su vez dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto.

El documento de definición de las dos filas (olvidémonos de momento que la de abajo está subdividida), sería:

<HTML>

<HEAD>

<TITLE>Pagina con dos filas</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Como la fila inferior, en realidad, son dos columnas (con una distribución del 20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC="documento_fila_inferior"> por:

</FRAMESET>

Con lo que queda el documento definitvo así:

<HTML>

<HEAD>

<TITLE>Pagina con fila superior y dos columnas inferiores</TITLE>

</HEAD>

</FRAMESET>

</HTML>

12. Sonidos

Una página del WEB puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario.

Capacidades sonoras de los navegadores

Para poder escuchar los sonidos es necesario disponer, como es lógico, de una tarjeta de sonido con sus correspondientes altavoces. Pero esto no es suficiente, pues no todos los programas navegadores están capacitados en la misma medida.

Explorer de Microsoft

Es el que está mejor adaptado para el sonido, pues a partir de la versión 2.0 es capaz de reproducir fondos sonoros sin necesidad de añadir nada, y no hay ninguna complicación con los servidores, como ocurre con el Netscape. Además, a partir de la versión 3.0 del Explorer, es incluso compatible con los plug-ins del Netscape.

Netscape

Las versiones anteriores a la 2.0 no son capaces de reproducir fondos sonoros que se ejecuten automáticamente, sino que requerirá que se activen los programas auxiliares asociados a los formatos, .WAV o .MID.

La versión 2.0 sí es capaz de reproducir un fondo sonoro, pero es necesario que tenga instalado un plug-in llamado Crescendo.

La versión 3.0 lleva implícito el plug-in Live Audio (pero sólo la versión completa, no la reducida). En caso afirmativo, es capaz de reproducir un fondo sonoro.

Pero a todas estas complicaciones de las distintas versiones de los navegadores de los usuarios, hay otra más y es que el servidor donde esté alojada la página del WEB debe tener configurados como MIME los formatos, .MID y .WAV. Si esto no es así, aunque depositemos en el servidor nuestro documento HTLM acompañado por el correspondiente archivo de sonido, éste no se ejecutará. En dicho caso, es necesario ponerse en contacto con los administradores del servidor para que configuren como MIME los formatos, .MID y .WAV.

Este problema no existe, sin embargo para el Explorer, con el que no nos tenemos que preocupar por este tema.

Fondo sonoro para el Microsoft Internet Explorer

Para las versiones 2.0 en adelante, se utiliza la etiqueta:

El archivo de sonido puede estar en formato .MID o .WAV.

El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar el archivo de sonido. Si se escoge el número n=-1 o se pone LOOP=INFINITE, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el archivo se ejecutará una sola vez.

La etiqueta para que se ejecute el archivo sonido.mid dos veces en el Explorer es:

(Para poder oirlo, hay que estar utilizando el Explorer)

Fondo sonoro para el Netscape

La etiqueta básica para el Netscape es:

donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene diferentes teclas (Play, Stop, Pausa, etc.). Respecto a las dimensiones XXX e YY estas dependerán del plug-ins que existe para Netscape.

El archivo de sonido puede estar en formato, .MID o .WAV, pero recuérdese la advertencia hecha anteriormente, de que estos formatos deben estar configurados como MIME por el servidor donde esté alojada la página.

Dentro de la etiqueta se pueden añadir los siguientes atributos opcionales:

AUTOSTART="TRUE"	Arranca automáticamente.
LOOP="TRUE"	Se ejecuta ininterrumpidamente

Para conseguir que la consola sea invisible hay que añadirle el atributo HIDDEN="TRUE".

Fondo sonoro combinado para el Explorer y el Netscape

Se pueden combinar los dos tipos distintos de etiquetas para conseguir que un fondo sonoro sea escuchado por usuarios que utilicen tanto el Explorer como el Netscape (siempre que éste último esté preparado para ello). En este caso, el Explorer ignorará la etiqueta del Netscape, y a la inversa.

Las dos etiquetas necesarias para que se reproduzca un archivo de sonido ya sea en formato, .WAV o .MID, como sonido de fondo, tanto por el Explorer como por el Netscape (lo hará una sola vez):

<BGSOUND SRC="sonido.mid">	Para el Explorer.
<EMBED SRC= "sonido.mid" HIDDEN="TRUE">	Para el Netscape.

Como vimos anteriormente para que un archivo de sonido, .MID o .WAV se ejecute como sonido de fondo, tanto por el Explorer como por el Netscape y que se ejecute indefinidamente, a la etiqueta del Explorer basta con añadirle el atributo LOOP=INFINITE, como se ha visto anteriormente. Y con respecto a la etiqueta del Netscape, teóricamente debería también bastar añadirle el atributo LOOP="TRUE", pero curiosamente esto no es así, porque hay que poner las dimensiones de la consola (que no se va a ver).

Las dos etiquetas quedarian de esta manera:

Activación del sonido por el propio usuario

Hemos visto cómo poner un sonido de fondo en una página. Hay otra opción, mucho más sencilla, y es la de poner un enlace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute el archivo. (Ver la Capítulo 4, en el que se explica cómo crear enlaces).

Por ejemplo, poner un enlace a un archivo sonido.mid:

Escucha esta <A HREF= "sonido.mid">musica</A>

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. Esto es válido para todos los navegadores, incluso las versiones más antiguas, con la única condición de que se haya configurado un programa auxiliar capaz de ejecutar archivos .MID o .WAV.

Se puede hacer el enlace con un icono (Ver el Capítulo 5).

Por ejemplo al hacer un enlace con un icono llamado snd.gif al archivo de sonido sondiowav el enlace quedaria así:

En el capítulo anterior creamos una versión con frames, en la que aparece inicialmente en el frame de la derecha una página de presentación.

Se puede colocar a esta página una música de fondo, para que sea ejecutada por el Explorer y el Netscape. Para ello debemos hacer lo siguiente:

En el documento de la derecha que llamamos como presentacion.html debemos añadir entre las etiquetas </SRONG> y </FONT> (situadas al final), lo siguiente:

<BR><FONT COLOR="#FF0000">¡Escucha la música de fondo!</FONT>

Autor:

Richard A. Sequera A.

Partes: 1, 2

Página anterior

Volver al principio del trabajo

Página siguiente