Escolar Documentos
Profissional Documentos
Cultura Documentos
Applets de Java
Java es un lenguaje de programacin orientado a objetos que ha sido desarrollado por la compaa Sun Microsystems, basndose en el lenguaje C++. Aunque es tambin un lenguaje de carcter general, su principal caracterstica es la de ser independiente de cualquier plataforma, lo que le hace ser muy adecuado para ser utilizado en Internet, ya que puede ejecutarse en cualquier ordenador que tenga un navegador compatible con Java. Esto quiere decir que el mismo programa se puede utilizar, sin ningn cambio, en un PC, Mac o mquina Unix. Esto es as porque un programa Java no corre directamente en el ordenador, sino que lo hace en una mquina virtual (la Mquina Virtual Java), quedando adems confinado dentro de ella, lo que hace que sea un lenguaje seguro, ya que no puede acceder a otros recursos de nuestro ordenador.
Java y Javascript
Existe bastante confusin entre los trminos Java y Javascript. Son dos lenguajes distintos. El Javascript fue creado por Netscape inicialmente con otro nombre, adoptando finalmente (por evidentes razones de oportunismo) el de Javascript. Se trata de un lenguaje interpretado, cuyo cdigo se incluye directamente en el documento HTML (En el Captulo 16 se utilizaron varios ejemplos).
Si ves el lema: "WebMaestro Crea tu pgina del Web!" desplazndose en una lnea sinusoidal, es que tu navegador es compatible con Java. (Pulsando con el ratn, se invierte el sentido del desplazamiento) Si, por el contrario, ves el mensaje esttico "[Aqu debera haber un applet de Java]", es que tu navegador no es compatible con Java, o que sindolo, tiene inhabilitada la carga de programas de Java.
Se trata de un applet que hace que un texto (elegido por el usuario) se desplace formando una onda sinusoidal, en direccin reversible con un click del ratn. Se pueden escoger los colores del fondo y de las letras, elegir entre algunos tipos de fuentes, su tamao, velocidad de desplazamiento, etc. Su autor es Mattias Tollet y proviene de The Java(TM) Boutique Para conseguirlo ahora mismo, pulsa el enlace:
Estos programas tienen la extensin .class Hay que respetar escrupulosamente la disposicin de las maysculas y minsculas en su nombre (en este caso se debe poner SineText.class y no sinetext.class, por ejemplo). Es un verdadero programa binario, y por tanto no se puede leer en un procesador de textos, como podemos hacer con un documento HTML.
Para colocar el applet en la pgina, debemos utilizar las siguientes etiquetas (que se colocan donde queramos dentro del cuerpo del documento HTML, es decir entre las etiquetas <BODY> y </BODY>):
<APPLET CODE=SineText.class WIDTH=500 HEIGHT=100> </APPLET>
Con esto se le indica al navegador que cargue un applet, cuyo cdigo compilado es SineText.class, que se encuentra en el mismo directorio que el propio documento HTML, y que le reserve un rea de 500x100 pixels. Pero en este caso concreto, nos falta aadir los parmetros que personalizan el applet a nuestro gusto (sobre todo el texto que queremos que aparezca). Para ello se aaden etiquetas de este tipo:
<PARAM NAME=nombre_del_parmetro VALUE="contenido_del_parmetro">
De momento no vamos a definir ms parmetros. El resto de ellos sern los que ha escogido su autor por defecto. Las etiquetas del applet quedan de momento as:
<APPLET CODE=SineText.class WIDTH=500 HEIGHT=100> <PARAM NAME=Text VALUE="Gracias por tu visita!"> </APPLET>
Este es el resultado. (Para no recargar demasiado esta pgina, se van a ver los ejemplos en pginas separadas) Cmo sabemos qu parmetros hay, cules son sus nombres y cules son los que hay por defecto? Pues sencillamente, leyendo la documentacin del applet, ya que son variables que se le han ocurrido al autor al confeccionar el programa. Esto quiere decir que para otro applet distinto los parmetros sern tambin distintos. En este applet, su autor ha definido los siguientes parmetros: Text - Texto que se va a ver. Rate - Nmero de imgenes por segundo. Font - Fuente: Helvetica (defecto), TimesRoman o Courier. FontSize - Tamao de la fuente. TextStyle - Estilo de la fuente: Plain, Bold (defecto) o Italic. Speed - Velocidad de desplazamiento 1-10 (5 es por defecto) Direction - Direccin inicial del desplazamiento. Left (defecto) o Right. Background - Color del fondo. 000000 (negro) es por defecto. ForeGround - Color del texto. FF0000 (rojo) es por defecto. Vamos a aadir algunos parmetros al ejemplo anterior (el orden en el que se colocan es indiferente). Variaremos tambin el rea del applet a 600x75, y el texto del mensaje.
<APPLET CODE=SineText.class WIDTH=600 HEIGHT=75> <PARAM NAME=Text VALUE="Gracias por tu visita! Vuelve pronto"> <PARAM NAME=Rate VALUE="4"> <PARAM NAME=Font VALUE="TimesRoman"> <PARAM NAME=Background VALUE="FFFFFF"> <PARAM NAME=Foreground VALUE="0000FF"> </APPLET>
Este es el resultado.
<APPLET CODE=SineText.class WIDTH=600 HEIGHT=75> <PARAM NAME=Text VALUE="Gracias por tu visita! Vuelve pronto"> <PARAM NAME=Rate VALUE="4"> <PARAM NAME=Font VALUE="TimesRoman"> <PARAM NAME=Background VALUE="FFFFFF"> <PARAM NAME=ForeGround VALUE="0000FF"> Lo siento, pero no puedes ver este applet funcionando. </APPLET>
Este es el resultado. Quien use un navegador compatible slo podr ver el mensaje si inhabilita la carga de programas de Java.
Y este es el resultado:
Obsrvese que en este caso no hay etiquetas de parmetos, por no ser necesarias. (La hora que que visualice el usuario ser la de su ordenador)
El atributo CODEBASE
En todos los ejemplos anteriores hemos supuesto que el fichero del applet (el que tiene la extensin .class), est en el mismo directorio que el documento HTML donde queremos incrustarlo. Pero puede ser que lo hayamos colocado en otro directorio distinto. En estos casos hay que aadir el atributo CODEBASE dentro de la etiqueta <APPLET> indicando el directorio donde se encuentra. Si en el ltimo ejemplo hubiramos colocado el fichero DigClk.class en un subdirectorio llamado java (por ejemplo), la etiqueta hubiera quedado as:
<APPLET CODEBASE=java CODE="DigClk.class" WIDTH=122 HEIGHT=29>
Al pulsar el enlace resultante, el navegador da la opcin de ejecutarlo o guardarlo. Se podra haber puesto el fichero sin comprimir, p. ej. como programa.exe, pero aparte de
que ocupa ms espacio, hay el peligro de que en algunos navegadores (como el Explorer) se ejecute inmediatamente, en vez de guardarlo.
Que da como resultado: Microsoft Al pasar el cursor del ratn por encima del enlace vemos que aparece en la barra de estado del navegador (en la parte inferior de la pantalla) el URL o direccin del enlace, en este caso http://www.microsft.com Se puede hacer que aparezca el texto que queramos, y adems 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;"
Que da este resultado: Microsoft Obsrvese 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 slo 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 aade a la etiqueta lo siguiente:
onMouseOut="window.status='Aqu el texto que se quiera';return true;"
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 slo se ve el primero (al llegar al enlace), pero no el segundo.
una vez de que se cargue, permanecer a la vista durante x segundos, y luego saltar automticamente a otra pgina cuyo URL hayamos especificado. Por ejemplo:
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://www.nasa.com">
despus de 10 segundos nos transportar automticamente a la pgina de la NASA. Obsrvense el punto y coma despus de la cifra de los segundos y la disposicin 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 continuacin, como un ejemplo completo, se va a crear una pgina que har que salte automticamente 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>
Vase el resultado.
En donde zzz era el texto que queramos que apareciera en el botn. Se ilustraba con el siguiente ejemplo:
<FORM ACTION="mailto:direccin_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: Escribe tu apellido: Se puede sustituir este botn de envo estndar por una imagen, como por ejemplo la siguiente imagen (pulsa.gif):
Se puede comprobar cmo pulsando la imagen se tiene el mismo efecto que con un botn estndar de un formulario. Nota: No se puede, sin embargo, sustituir por una imagen el botn de borrado, que se consigue con la etiqueta <INPUT TYPE="reset" VALUE="zzz">
Men de direcciones
En el Captulo 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 botn. Vemoslo 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.selected Index].value"> </FORM>
Este es el resultado: Se pueden poner tantas opciones como se quiera. Tambin se puede dirigir a pginas propias (como la opcin WebMaestro, que dirige a la portada de este manual), pero en este caso se debe poner el URL completo de la pgina (http://www.wmaestro.com/webmaestro), como si tratara de una pgina ajena.
</SCRIPT> </HEAD> <BODY> <FORM> Introduce la palabra clave para acceder a la pgina <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 pgina de acceso restringido precisamente este nombre: xyz123.html, es decir, se debe dar a la pgina restringida el nombre compuesto por la clave, ms la extensin .html (o .htm) No hay que cambiar ni aadir nada en el script. Si se utiliza las extensiones .htm en vez de .html la pgina se llamara xyz123.htm pero entonces hay que sustituir la lnea del script window.location=pal+".html" por window.location=pal+".htm" Este es el resultado: Introduce la palabra clave para acceder a la pgina
Como comprobacin, introduce la clave xyz123, y pulsa el botn y vers cmo accedes a la pgina reservada, y por el contrario, si introduces otra clave, recibirs un mensaje de error.
La creacin 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 pgina 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 botn (y no al cargarse una pgina 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 pgina):
<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 pgina que se desee, se crea un botn, 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 botn, se cargar la ventana. El texto del botn se puede variar, cambiando lo que est entrecomillado en el atributo value.
Pero con esto slo se carga un nico documento en un nico frame. Por la razn 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 simultneamente 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 slo el primero de ellos, pero al aadir el atributo onClick="fnUpdate();", la rutina de Javascript hace que se carguen tambin los otros. Aunque en el caso visto se trata de tres frames, se puede hacer esto mismo con el nmero de frames que se desee.