Web Maestro - 21.-Trucos diversos

21. Trucos diversos

Aquí se pueden encontrar varios trucos útiles para las páginas. La mayoría de ellos se basan en el uso de rutinas de Javascript. Son los siguientes:

Distribución de programas desde una página del Web

Si tenemos un fichero ejecutable, es decir un programa, y lo queremos distribuir libremente, se puede conseguir fácilmente poniendo un enlace a dicho fichero. Por supuesto, hay que que colocarlo previamente en el servidor, junto con los demás elementos que forman la página (documentos HTML, ficheros de imagen, de sonido, etc.)

Es muy conveniente que el fichero esté comprimido (por ejemplo, en formato .zip) para reducir su tiempo de carga, y por otra razón que se dirá más adelante.

Supongamos entonces que ya tenemos instalado en el servidor el fichero comprimido programa.zip. Para ponerlo accesible a los demás, simplemente hay que poner un enlace directo a este fichero, como por ejemplo de esta manera:

Para conseguir el programa, pulsa este <A HREF="programa.zip">enlace</A>

Al pulsar el enlace resultante, el navegador da la opción de ejecutarlo o guardarlo. Se podría haber puesto el fichero sin comprimir, p. ej. como programa.exe, pero aparte de que ocupa más espacio, hay el peligro de que en algunos navegadores (como el Explorer) se ejecute inmediatamente, en vez de guardarlo.

Texto fijo de un enlace en la barra de estado

Como se vió en el Capítulo 3, un ejemplo de etiqueta para un enlace es:

<A HREF="http://www.microsft.com">Microsoft</A>

Que da como resultado: Microsoft

Al pasar el cursor del ratón por encima del enlace vemos que aparece en la barra de estado del navegador (en la parte inferior de la pantalla) el URL o dirección del enlace, en este caso http://www.microsft.com

Se puede hacer que aparezca el texto que queramos, y además que permanezca fijo hasta que se pase el cursor por encima de otro enlace. Para ello, basta con introducir lo siguiente, dentro de la etiqueta del enlace:

onMouseOver="window.status='Aquí el texto que se quiera';return true;"

En el ejemplo anterior podemos poner, por ejemplo:

<A HREF="http://www.microsft.com" onMouseOver="window.status='Página principal de Microsoft';return true;">Microsoft</A>

Que da este resultado: Microsoft

Obsérvese como queda permanentemente el texto escogido en la barra de estado, hasta que se pase el cursor por encima de otro enlace que tenga otro texto distinto.

Se puede conseguir (pero sólo con el Netscape, y no con el Explorer) un efecto similar, pero en vez de al llegar al enlace, al abandonar el enlace, si se añade a la etiqueta lo siguiente:

onMouseOut="window.status='Aquí el texto que se quiera';return true;"

Se puede poner sólo o combinado con el anterior, como en el siguiente ejemplo:

<A HREF="http://www.netscape.com" onMouseOver="window.status='Esto se ve al llegar al enlace';return true;" onMouseOut="window.status='Esto otro se ve al abandonar el enlace';return true;">Netscape</A>

Este es el resultado: Netscape

Con el Netscape se ve el texto al llegar al enlace y el otro texto al abandonar el enlace. Con el Explorer sólo se ve el primero (al llegar al enlace), pero no el segundo.

Salto automático de pantalla

Si ponemos en una página la siguiente etiqueta:

<META HTTP-EQUIV="Refresh" CONTENT="x;URL=URL_de_la_siguiente_página">

una vez de que se cargue, permanecerá a la vista durante x segundos, y luego saltará automáticamente a otra página cuyo URL hayamos especificado.

Por ejemplo:

<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.nasa.com">

después de 10 segundos nos transportará automáticamente a la página de la NASA.
Obsérvense el punto y coma después de la cifra de los segundos y la disposición de las comillas.

Esta etiqueta no se puede colocar en cualquier sitio del documento HTML. Debe ir situada en la cabecera (entre las etiquetas </TITLE> y </HEAD>).

Aunque lo implementan las últimas versiones del Netscape y del Explorer, hay algunos navegadores que no lo hacen, por lo que es conveniente suministrar, por si acaso, un enlace al URL deseado para que el propio usuario lo pueda activar.

A continuación, como un ejemplo completo, se va a crear una página que hará que salte automáticamente a la portada de este manual:

<HTML>
<HEAD>
<TITLE>Ejemplo de salto automatico de pantalla</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.wmaestro.com/webmaestro">
</HEAD>
<BODY>
Ejemplo de salto automatico de pantalla. Despues de 5 segundos debe saltar AUTOMATICAMENTE a la portada de WebMaestro.
<P>Si esto no ocurre, pulsa este
<A HREF="http://www.wmaestro.com/webmaestro">enlace</A>.
</BODY>
</HTML>

Véase el resultado.

Botón de envío de un formulario con una imagen

En el Capítulo 11 se vió la etiqueta para conseguir el botón de envío de los datos de un formulario:

<INPUT TYPE="submit" VALUE="zzz">

En donde zzz era el texto que queríamos que apareciera en el botón. Se ilustraba con el siguiente ejemplo:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Escribe tu apellido: <BR><INPUT TYPE="text" NAME="Apellido"> <P><INPUT TYPE="submit" VALUE="Enviar datos"> </FORM>

Que resulta:

Se puede sustituir este botón de envío estándar por una imagen, como por ejemplo la siguiente imagen (pulsa.gif):

Se consigue sustituyendo la etiqueta:
<INPUT TYPE="submit" VALUE="Enviar datos">
por esta otra:
<INPUT TYPE="image" SRC="pulsa.gif" BORDER=0>

con lo que el ejemplo anterior quedaría así:

<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Escribe tu apellido: <BR><INPUT TYPE="text" NAME="Apellido"> <P><INPUT TYPE="image" SRC="pulsa.gif" BORDER=0> </FORM>

Este es el resultado:

Se puede comprobar cómo pulsando la imagen se tiene el mismo efecto que con un botón estándar de un formulario.

Nota: No se puede, sin embargo, sustituir por una imagen el botón de borrado, que se consigue con la etiqueta <INPUT TYPE="reset" VALUE="zzz">

Menú de direcciones

En el Capítulo 11 (Formularios) se vió la manera de elegir entre distintas opciones de texto en un menú desplegable. Ahora vamos a ver un menú similar, pero en el que se puedan elegir entre distintas direcciones del Web, a donde será dirigido el usuario una vez que pulse un botón.

Veámoslo con un ejemplo:

<FORM> <SELECT NAME="list"> <OPTION VALUE="http://www.microsoft">Microsoft <OPTION VALUE="http://www.wmaestro.com/webmaestro">WebMaestro <OPTION VALUE="http://www.netscape.com">Netscape <OPTION VALUE="http://www.infoseek.com">Infoseek </SELECT><P> <INPUT TYPE=button VALUE="Pulsa para ir" onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value"> </FORM>

Este es el resultado:

Se pueden poner tantas opciones como se quiera. También se puede dirigir a páginas propias (como la opción WebMaestro, que dirige a la portada de este manual), pero en este caso se debe poner el URL completo de la página (http://www.wmaestro.com/webmaestro), como si tratara de una página ajena.

Acceso a una página por medio de un password

Puede ocurrir que tengamos una página cuyo contenido no queremos que sea accesible por todo el mundo, sino sólamente por quien nos interese. Para conseguirlo, podemos suministrar un password o clave con el que se pueda acceder a dicha página.

La manera más rigurosa es hacerlo por medio de un CGI, es decir, un programa especial que se coloca en el servidor y que actúa de filtro. Pero, como se ha comentado en varias ocasiones en este manual, el inconveniente de esta solución es que es muy poco frecuente que los administradores de los servidores permitan a sus usuarios la instalación de estos programas, como medida de seguridad.

Una solución alternativa es utilizar el siguiente programa en Javascript (Véase en el Cap. 16 sobre cómo incluir un programa de Javascript en un documento HTML; recuérdese que el script se coloca en la cabecera, entre las etiquetas </TITLE> y </HEAD>).

<HTML>
<HEAD>
<TITLE>Ejemplo de acceso con password</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Saltar(pal) {
window.location=pal+".html"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Introduce la palabra clave para acceder a la página
<P>
<INPUT TYPE="password" NAME="palclave" SIZE=25 VALUE="">
<INPUT TYPE="button" VALUE="Acceder" onClick="Saltar(this.form.palclave.value)">
</FORM>
</BODY>
</HTML>

Esto funciona de la siguiente manera: una vez escogida la clave (por ejemplo: xyz123), debemos dar a la página de acceso restringido precisamente este nombre: xyz123.html, es decir, se debe dar a la página restringida el nombre compuesto por la clave, más la extensión .html (o .htm)

No hay que cambiar ni añadir nada en el script. Si se utiliza las extensiones .htm en vez de .html la página se llamaría xyz123.htm pero entonces hay que sustituir la línea del script window.location=pal+".html" por window.location=pal+".htm"

Este es el resultado:

Como comprobación, introduce la clave xyz123, y pulsa el botón y verás cómo accedes a la página reservada, y por el contrario, si introduces otra clave, recibirás un mensaje de error.

Apertura de una ventana dimensionable

A veces es muy interesante que al cargarse una página aparezca sobre ella una pequeña ventana (de las dimensiones que queramos) en la que se dé algún tipo de información concreta, y que el usuario puede cerrar, o dejar permanentemente abierta mientras navega por otras páginas.

Se ha utilizado el término "ventana", porque es esa la sensación que normalmente se quiere dar, pero en realidad se abre una nueva página del Web, únicamente que suele ser de un tamaño reducido, sin las barras de scroll ni de herramientas (si se desean eliminar, aunque también puede tenerlas si se desea, como veremos).

Debido a que dicha ventana es realmente una página del Web, es evidente que puede contener todo lo que habitualmente contienen (fondo, imágenes, enlaces a otras páginas, incluso frames, etc.). También puede contener un sonido, que sonará mientras permanece abierta, aunque el usuario se dedique a navegar por otras páginas.

La creación de una ventana de este tipo se consigue con la siguiente rutina de Javascript, que como siempre, se deberá colocar en la cabecera del documento HTML , entre las etiquetas </TITLE> y </HEAD>:

</TITLE>
<SCRIPT LANGUAGE="JavaScript">
open('ventana.html', 'Sizewindow', 'width=300,height=350,scrollbars=no,toolbar=no')
</SCRIPT>
</HEAD>

Esto hará que se cargue una ventana, cuyo contenido es un documento HTML que habremos creado, llamado ventana.html, sin barras de scroll ni de herramientas, y de unas dimensiones de 300 de ancho por 350 de alto. Se pueden variar las dimensiones o hacer que tenga barras de scroll (poniendo scrollbars=yes) o barra de herramientas (toolbar=yes).

Pulsando aquí se puede ver una página de prueba, que es la que contiene la rutina en su cabecera, que hará que aparezca una ventana.

Si lo que se desea es que se abra la ventana al pulsar el usuario un botón (y no al cargarse una página nueva, como en el caso anterior), entoces hay que colocar la siguiente rutina (como siempre, entre la etiquetas </TITLE> y </HEAD> de la cabecera, en este caso, de esta misma página):

<SCRIPT LANGUAGE="JavaScript">
function SizeWin() {
open("ventana.html", "Sizewindow", "width=300,height=350,scrollbars=no,toolbar=no");
}
</SCRIPTt>

Y luego, en el sitio de la página que se desee, se crea un botón, con la siguientes etiquetas:

<form>
<input type="button" name="sizewindow" value="Pulsa para abrir una ventana" onclick="SizeWin()">
</form>

Que da el siguiente resultado:

Se puede comprobar que al pulsar este botón, se cargará la ventana. El texto del botón se puede variar, cambiando lo que está entrecomillado en el atributo value.

Carga de varios frames con un único enlace

Como se vió en el capítulo 14 (Frames), si queremos que al pulsar un enlace se cargue un documento HTML en un frame concreto, hay que incluir en la etiqueta del enlace el atributo TARGET="nombre_dado_al_frame". Este nombre es el atribuído al frame en el documento de definición de frames con al atributo NAME.

O sea, un enlace de este tipo es de esta forma:

<A HREF="documento.html" TARGET="nombre"> Texto del enlace </A>

Pero con esto sólo se carga un único documento en un único frame. Por la razón que sea, nos puede interesar que al pulsar un enlace se carguen varios frames a la vez. Esto se consigue recurriendo a la siguiente rutina de Javascript (colocada, como siempre, entre las etiquetas </TITLE> y </HEAD>:

<SCRIPT LANGUAGE="JavaScript">
<!--
function fnUpdate(){
   top.nombre1.location="documento1.html";
   top.nombre2.location="documento2.html";
   top.nombre3.location="documento3.html";
}
// -->
</SCRIPT>

Aquí se ha supuesto que se desean cargar simultáneamente tres documentos HTML en tres frames distintos (que se llaman nombre1, nombre2 y nombre3). Hay que sustituirlos por los nombres de nuestros frames, así como los de los documentos HTML correspondientes.

El enlace, que provocará la carga de estos tres frames será como sigue:

<A HREF="documento1.html" TARGET="nombre1" onClick="fnUpdate();"> Texto del enlace </A>

Como se puede ver, en el enlace se solicita sólo el primero de ellos, pero al añadir el atributo onClick="fnUpdate();", la rutina de Javascript hace que se carguen también los otros.

Aunque en el caso visto se trata de tres frames, se puede hacer esto mismo con el número de frames que se desee.