Manual de HTML - Trucos diversos

21. Trucos diversos

Aquí se pueden encontrar varios trucos útiles para las páginas. Algunos de ellos se basan en Javascript.

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>

Que resulta:

Para conseguir el programa, pulsa este enlace

Al pulsar el enlace resultante, el navegador da la opción de ejecutarlo o guardarlo. Se podría haber puesto el fichero sin comprimir, por ejemplo, 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 vio en el Capítulo 3, un ejemplo de etiqueta para un enlace es:

<A HREF="http://www.microsoft.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.microsoft.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.microsoft.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://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://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 vio 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_e-mail" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido: 
<BR><INPUT TYPE="text" NAME="Apellido"> 
<P><INPUT TYPE="submit" VALUE="Enviar datos"> 
</FORM>

Que resulta:

Escribe tu apellido:

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:

Escribe tu apellido: 
 

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 vio 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.com">Microsoft 
<OPTION VALUE="http://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://wmaestro.com/webmaestro), como si se 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 solamente 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:

Introduce la palabra clave para acceder a la página

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.


WebMaestro: http://wmaestro.com/webmaestro - © Francisco Arocena