Curso completo de HTML
Anterior	Applets de Java y Controles ActiveX	Siguiente

2. Inserción de Applets Java.

De ahora en adelante consideraremos que ya tenemos un applet, bien porque lo hemos programado nosotros mismos, bien porque estamos usando un applet de distribución gratuita, es hora de aprender a insertarlo en nuestra página Web. Para ello usaremos una nueva etiqueta: APPLET. Esta etiqueta está formada por una instrucción de inicio, <APPLET>, y una instrucción de fin, </APPLET>.

La etiqueta APPLET fue introducida por Netscape en la versión 2.0 de Navigator fruto de un acuerdo con Sun para soportar la tecnología Java. Todos sus navegadores posteriores también la soportan. El otro gran navegador, Microsoft Internet Explorer, soporta la tecnología Java desde la versión 3.0. En cuanto al estándar se refiere, esta etiqueta se incluye en la especificación HTML 3.2, aunque no podemos asegurar que los navegadores posteriores que respetan la norma HTML 3.2 soporten la tecnología Java, simplemente entienden la etiqueta, pero no son capaces de ejecutar un applet.

La inserción de un applet en una página es similar a la inserción de una imagen, a lo cual ya estamos muy acostumbrados. Deberemos especificar el archivo donde se encuentra el applet y las dimensiones (anchura y altura) que este debe ocupar en la página. Al igual que ocurría con las imágenes el applet se introducirá en el lugar exacto donde indique su código, si es necesario se insertará entre el texto, pero no pasará a una nueva línea, como sucedía con las marquesinas, si no lo indicamos específicamente (con la etiqueta <BR>). Para indicar el archivo en el que se encuentra el applet usaremos el atributo CODE y para especificar la anchura y altura en pixeles usaremos WIDTH y HEIGHT respectivamente. En resumen, para insertar un applet debemos usar el siguiente código en cualquier lugar de la página:

		<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
		</APPLET>

Los tres atributos que hemos usado deben incluirse obligatoriamente siempre que insertemos un applet. Esto parece obvio con el atributo CODE, ya que no se podría insertar el applet sin indicar donde está, pero resulta más extraño con los atributos WIDTH y HEIGHT. Aun así, si no especificamos el tamaño que debe ocupar el applet en la página no será mostrado ni ejecutado por el navegador. Debemos estar muy atentos a este detalle ya que hasta ahora estos dos atributos eran totalmente optativos y por ello es un error común olvidarlos y no ser capaz de descubrir porqué no funciona el applet.

Y aquí vemos como insertar un applet de ejemplo:

		<HTML>
		<HEAD>
			<TITLE>Applet sonoro</TITLE>
		</HEAD>
		<BODY>
			<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT=50></APPLET>
		</BODY>
		</HTML>

Los applets de Java son sensibles a las mayúsculas y a las minúsculas, si no ponemos el nombre del archivo exactamente igual, incluyendo mayúsculas o minúsculas, no hubiera funcionado. Por ejemplo, si hubiéramos escrito CODE="soundexample.class" el código anterior no hubiera funcionado. Este es un ejemplo muy común por lo que debemos tener cuidado.

Si visualizamos este archivo con un navegador que soporte la tecnología Java debemos obtener el resultado de la figura 11.3.

Figura 11.3. Este es el aspecto que muestra nuestro primer applet insertado en una página Web. En un navegador con soporte Java podemos pulsar sobre los botones para obtener diferentes sonidos.

Los applets Java tienen la terminación .class, como ya hemos comentado antes, esto exige que para poder usar un applet debemos utilizar un sistema operativo que soporte nombres largos. Desgraciadamente los usuarios de Windows 3.1 no podrán probar esta tecnología localmente en su ordenador. Afortunadamente esto no significa que no puedan disfrutar los applets que estén publicados en el WWW.

Pasemos a explicar que ocurre cuando el navegador se encuentra con el código anterior. En primer lugar busca el archivo SoundExample.class en la misma dirección URL y en el mismo directorio donde se encuentre la página actual y lo baja a nuestro ordenador (este es un ejemplo en el que ambos archivos ya están en nuestro ordenador, con lo que este paso no sería necesario). Mientras reserva un rectángulo, con las dimensiones especificadas por los atributos WIDTH y HEIGHT, donde será mostrado el applet. Una vez ha llegado el archivo anterior el navegador llama a lo que se conoce como máquina virtual Java (también llamada JVM, Java Virtual Machine) que pasará a ejecutar el applet. A partir de ese momento el applet se ejecutará como cualquier otro programa de nuestro ordenador, aunque lo hará en el interior de la página Web. De esta forma cuando nuestro cursos este dentro del rectángulo de 450x50 creado el control pasará al applet y si pulsamos los botones el propio applet será el encargado de realizar las acciones oportunas. La Máquina Virtual Java implementa además ciertas medidas de seguridad para que el applet no pueda, por ejemplo, borrar nuestro disco duro. Una vez conocemos el funcionamiento de los applets podemos adentrarnos más a fondo en las diferentes características de estos que pueden ser modificadas con el lenguaje HTML.

2.1. Especificando la dirección del applet.

Dejando a un lado el ejemplo y volviendo al código general es obvio que el código es, todavía, muy sencillo. Para empezar el archivo con el applet (que siempre tiene la extensión .class) se encuentra en el mismo directorio que el documento HTML de la página actual. Lo habitual, sin embargo, es agrupar todos los applets Java en un directorio dedicado de la misma manera que hacíamos con las imágenes. Podríamos pensar que para reflejar este cambio no tendríamos más que cambiar ligeramente el código y escribir:

			<APPLET CODE="applets/nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
			</APPLET>

Por desgracia, este código es incorrecto. El atributo CODE permite únicamente especificar el nombre del archivo donde se encuentra el applet, pero no podemos incluir un directorio ni, por supuesto, una dirección de Internet. ¿Significa esto que es imposible? Afortunadamente no, los diseñadores de esta etiqueta pensaron en ello e introdujeron un nuevo atributo, CODEBASE, que nos permitirá indicar la dirección URL o ruta de directorios donde se encuentre el archivo especificado en el atributo CODE. Usando CODEBASE podemos reescribir el código anterior de manera correcta:

			<APPLET CODEBASE="applets/" CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
			</APPLET>

Sin embargo podemos ir más allá. Podemos usar en nuestra página un applet que se encuentre en cualquier otro lugar del WWW sin tener que copiarlo a nuestro servidor. Para ello no tendremos más que usar el atributo CODEBASE para especificar la dirección base. Por ejemplo:

			<APPLET code=TicTacToe.class width=120 height=120 CODEBASE="http://Java.sun.com/applets/TicTacToe/1.1/">
			</APPLET>

Esta dirección es real, si incluimos este código en una página habremos insertado un juego de las tres en raya como el que vemos en la figura 11.4 en el que cualquier visitante de nuestra página podrá jugar (contra el ordenador). Si vemos en cualquier página un applet que nos gusta y sus autores permiten que sea utilizado en páginas ajenas (esto es muy importante) no debemos dudarlo y usarlo. La carga del applet no será más lenta que si estuviera en nuestro mismo servidor y además tendremos a nuestra disposición una mayor cantidad de applets, ya que muchos autores permiten el uso de applets siempre y cuando estos no sean copiados de su servidor sino usados directamente desde él.

Figura 11.4. Usando applets Java podemos insertar juegos interactivos como en este caso. Usando el atributo CODEBASE no es necesario que el applet esté en nuestro servidor.

2.2. Otros atributos de la etiqueta `APPLET`.

Además de los cuatro atributos que hemos vistos hasta ahora, que suelen usarse prácticamente siempre, existen otros que pueden resultarnos muy útiles. Todos ellos se encuentran incluidos en el estándar HTML 3.2:

NAME="nombre del applet":: Este atributo es usado para identificar el applet entre el resto de elementos u otros applets de la página. Poner el nombre del applet no es necesario, pero los buenos programadores aconsejan hacerlo por una cuestión de estilo. Por otro lado tener el applet identificado es tremendamente útil o incluso obligatorio si posteriormente queremos que este se comunique, por ejemplo, con código JavaScript.
ALIGN:: Con esta etiqueta podremos controlar el alineamiento horizontal de la página. Puede tomar tres valores: left, right y center para conseguir que el applet esté alineado a la izquierda, a la derecha o esté centrado respectivamente. El funcionamiento de estos tres valores es similar al de las imágenes y si especificamos un alineamiento a cualquiera de los dos lados el texto circundante envolverá al applet.
VSPACE="pixeles":: Con este atributo establecemos un margen vertical del tamaño en pixeles especificado. El margen vertical se refiere a la distancia entre la parte superior del applet y los elementos de la página que estén sobre él y entre la parte inferior y los elementos situados debajo.
HSPACE="pixeles":: Este atributo nos permite establecer el ancho del margen horizontal, es decir el espacio entre el applet y los elementos que estén situados a su derecha y a su izquierda.
ALT="texto alternativo":: Esta etiqueta es usada por aquellos navegadores que sí entienden la etiqueta APPLET, pero no soportan la tecnología Java. Todos los navegadores que cumplan la norma HTML 3.2 entienden esta etiqueta, pero eso no quiere decir que sean capaces de ejecutar un applet. Esto ocurre, por ejemplo, con los navegadores de sólo texto, ya que al ser los applets gráficos en su mayoría no son capaces de mostrarlos en pantalla. Este texto también es mostrado si en un navegador con soporte de tecnología Java tiene algún problema y no es capaz de ejecutar el applet.

Continuando con el ejemplo anteriormente mostrado podemos usar estos atributos para obtener un código más completo. Para empezar es muy recomendable usar siempre los atributos NAME y ALT, con lo que quedaría (mostramos únicamente el código correspondiente a la inserción del applet):

			<APPLET CODE="SoundExample.class" WIDTH=450 HEIGHT=50 ALT="Su navegador soporta la tecnología Java, pero por algún error no es capaz de mostrar este applet" NAME="Ejemplo Sonoro">
			</APPLET>

Por otro lado podemos usar el atributo ALIGN para que el texto bordee el applet. En este caso es recomendable usar también VSPACE y HSPACE para crear un margen:

			<APPLET CODEBASE="ej1/" CODE="SoundExample.class" WIDTH=450 HEIGHT=50 ALIGN="left" HSPACE=15 VSPACE=15>
			</APPLET>

Escribiendo texto antes y después de esta etiqueta obtenemos el resultado de la figura 11.5.

Figura 11.5. Usando los atributos ALIGN, VSPACE y HSPACE podemos insertar un applet rodeado de texto.

Los atributos anteriores son los que aparecieron inicialmente junto con la etiqueta APPLET y que fueron adoptados por el estándar HTML 3.2 pero además de estas, tanto Microsoft como Netscape han ido incorporando otros nuevos en sus navegadores:

ARCHIVE="archivo_comprimido":: Permite especificar un archivo auxiliar al applet de Java donde pueden ser insertados todas las imágenes, sonidos y cualquier otro archivo auxiliar que pueda ser necesario para la ejecución del applet. La existencia de este atributo ha sido pensada para comprimir todos los archivos auxiliares en uno sólo de menor tamaño para que el tiempo de carga sea menor. Cualquier otro fichero que necesite el applet que no este incluido en este archivo comprimido será buscado por los métodos habituales. Este atributo es exclusivo del navegador Netscape Navigator.
MAYSCRIPT:: Este atributo se usa por si sólo, sin ningún valor, y su presencia significa que el applet Java puede ser accedido usando código JavaScript.
TITLE="texto":: Este atributo exclusivo de Internet Explorer 4.0 permite indicar un texto que será mostrado en un bocadillo cuando el navegante pase el ratón por encima del applet. Aunque el contenido de este atributo sólo es entendido por Explorer puede ser usado con total libertad, ya que no perjudica nada a los usuarios del resto de navegadores.

Estos son todos los atributos que pueden ser usados en la etiqueta APPLET, pero existe otro método adicional para especificar parámetros particulares de cada uno de estos programas escritos en Java: la etiqueta PARAM.

2.3. La etiqueta `PARAM`.

Esta etiqueta consta de una única instrucción, <PARAM>, que debe ser insertada en el interior de la etiqueta APPLET (entre la instrucción de inicio y la instrucción de fin) y cuya función será definir parámetros para el applet. Los parámetros son propiedades específicas de cada applet que permiten modificar sus características. Los parámetros constan de un nombre y un valor que son indicados usando los atributos NAME y VALUE de la siguiente manera:

			<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
			<PARAM NAME="nombre_parámetro" VALUE="valor_parámetro">
			</APPLET>

La etiqueta PARAM puede ser usada tantas veces sea necesario para un mismo applet siendo necesario usarla una vez para cada uno de los parámetros. En general los applets que se distribuyen gratuitamente constan de gran número de parámetros, para poder adaptarse a las necesidades de los distintos usuarios que vayan a utilizarlo. Por esta razón siempre van acompañados de documentación. Quizá el applet más conocido es Animator.class, este applet toma un conjunto de imágenes y las va mostrando ordenadamente para crear un efecto de animación. Este era el único método existente para crear animaciones antes de la aparición de los GIFS animados. Tras la aparición de estos la utilización de este applet ha decrecido, pero sigue siendo útil en ciertas ocasiones y nos servirá como excelente ejemplo para mostrar el uso de la etiqueta PARAM. Para insertar el applet debemos copiar el contenido de este directorio a otra ubicación y crear un documento HTML con el siguiente código:

			<HTML>
			<HEAD>
				<TITLE>El saludo de Duke</TITLE>
			</HEAD>
			<BODY>
				<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68>
     			<PARAM NAME="imagesource" VALUE=".">
     			<PARAM NAME=ENDIMAGE VALUE=10>
     			<PARAM NAME=PAUSE VALUE=100>
     			<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100|100|100">
				</APPLET>
			</BODY>
			</HTML>

En este caso hemos usado 4 parámetros del applet, aunque en realidad tiene muchos más. Los explicaremos brevemente. El parámetro imagesource nos permite indicar el directorio donde se encuentran las imágenes, un punto significa el directorio actual. Estas imágenes deben llamarse obligatoriamente T1.gif, T2.gif, T3.gif, etc. El parámetro endimage indica el número de imágenes de los que consta la animación y en esta ocasión serán 10, desde T1.gif hasta T2.gif. Los parámetros pause y pauses nos permiten controlar las pausas entre las imágenes, con el último controlamos de manera independiente las pausas que se realizan entre cada una de las imágenes de manera individual. Al visualizar este código con un navegador con soporte Java veremos la mascota de Java, Duke, saludando. En la figura 11.6 podemos apreciar una captura del resultado. Una gran ventaja de este método para crear animaciones es que simplemente cambiando las imágenes T1.gif, T2.gif, etc. por unas propias podemos crear otra animación distinta sin necesitar ninguna aplicación como era el caso de los GIFs animados.

Figura 11.6. El applet Animator.class es uno de los más conocidos y usados en las páginas Web por la facilidad que ofrece para crear animaciones.

Para obtener más información sobre el applet Animator.class o sobre muchos otros applets de distribución gratuita podemos visitar la página antes mencionada Java.sun.com.

2.4. Alternativas a los applets Java.

Dado que la tecnología Java es relativamente nueva y requiere grandes recursos por parte del navegador, sólo algunos como Netscape Navigator 2.0 o superior y Internet Explorer 3.0 o superior la soportan. Dado que no sabemos que navegadores usarán los visitantes de nuestras páginas es conveniente añadir alternativas para aquellos que no sean capaces de mostrar el applet. Anteriormente hemos visto la existencia del atributo ALT que permite especificar un texto alternativo. Sin embargo tiene dos inconvenientes:

Este atributo sólo será entendido por aquellos navegadores que entiendan la etiqueta APPLET, con lo que seguimos sin tener una alternativa para el resto de navegadores.
Con ALT únicamente podemos insertar un texto, ni imágenes ni ningún otro elemento HTML, con lo que nuestras posibilidades para ofrecer alternativas quedan muy menguadas.

Afortunadamente existe otro método. Como hemos indicado al principio de esta sección, y como ya hemos comprobado por los ejemplos, la etiqueta APPLET consta de una instrucción de inicio y de una instrucción de fin. Vimos que entre ellas podíamos insertar una o varias etiquetas PARAM para especificar los parámetros específicos de cada applet. Pero además podemos insertar otras etiquetas HTML que serán ignoradas por aquellos navegadores con soporte Java, pero serán mostradas por todos aquellos que no soporten esta tecnología, con lo que nos servirá como contenido alternativo al applet:

			<APPLET CODE="nombre_applet.class" WIDTH="ancho" HEIGHT="alto">
			<PARAM NAME="nombre_parámetro" VALUE="valor_parámetro">
			... Código HTML alternativo ...
			</APPLET>

Siguiendo con el ejemplo de la mascota de Java, si queremos que nuestra página este preparada para todos los navegadores debemos añadir el atributo ALT así como contenido alternativo antes de la instrucción </APPLET>. He aquí un ejemplo:

			<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68 ALT="Lo siento no puede ver el applet">
     			<PARAM NAME="imagesource" VALUE=".">
     			<PARAM NAME=ENDIMAGE VALUE=10>
     			<PARAM NAME=PAUSE VALUE=100>
     			<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100|100|100">
  			<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te saluda">
			</APPLET>

En este caso los usuarios de navegadores sin soporte Java verán una imagen de Duke saludando (aunque sin movimiento) del mismo tamaño que el applet. Si en el texto de la página hemos hecho referencia a que los navegantes van a ver un applet en acción debemos insertar también junto con la imagen un texto que advierta que el applet no puede ser visualizado con ese navegador y que a cambio se muestra una imagen. En la figura 11.7 vemos el ejemplo anterior visto con el navegador Opera, que no soporta la tecnología Java. En un medio estático como este no se aprecia la diferencia, pero esta existe, ya que en este caso la imagen no tiene movimiento.

Figura 11.7. El navegador Opera no soporta la tecnología Java, por lo que mostrará el código alternativo, en este caso uno de los GIFs de la animación.

Con este ejemplo damos por concluido el aprendizaje de la etiqueta APPLET. En la figura 11.8 podemos ver un ejemplo.

Figura 11.8. Resumen de todos los atributos de la etiqueta APPLET y de su subetiqueta PARAM.

2.5. El nuevo estándar: la etiqueta `OBJECT`.

Hasta ahora hemos aprendido a insertar diferentes tipos de objetos en las páginas Web, para insertar imágenes usábamos la etiqueta IMG, para insertar objetos para plug-ins usábamos EMBED, para insertar frames flotantes IFRAME, para insertar applets Java APPLET, etc. Observando esta diversidad y viendo que cada desarrollador de navegadores creaba sus propios métodos para incluir objetos en las páginas el consorcio W3C creo un grupo de trabajo para buscar una solución que englobará y unificara todos los métodos actualmente existentes. La solución fue la creación de una nueva etiqueta para el lenguaje HTML: OBJECT, que fue introducida en el estándar HTML 3.2, aunque es a partir de la versión HTML 4.0 cuando se está empezando a darle la importancia que merece.

Usando esta etiqueta es posible incluir varios tipos de ficheros multimedia (vídeo y sonido MPEG, ficheros Shockwave/Director, etc.), applets de Java, controles ActiveX (que veremos en la siguiente sección), documentos HTML o prácticamente cualquier otro tipo de objeto. Por ejemplo para incluir un vídeo AVI debemos usar el siguiente código:

			<OBJECT DATA="flores.avi" TYPE="video/avi" WIDTH=100 HEIGHT=100>
			<IMG SRC="flores.gif" WIDTH=100 HEIGHT=100 ALT="[FLORES]">
			</OBJECT>

En este caso el funcionamiento es muy similar al de la etiqueta EMBED y ahora el código alternativo deberá ser mostrado entre <OBJECT> y </OBJECT>. Este código será ignorado por los navegadores que entiendan la etiqueta OBJECT.

¿Qué navegadores soportan este nuevo estándar? Las versiones 4.0 y posteriores de Internet Explorer y Netscape Navigator entienden la etiqueta, aunque todavía no soportan todas las posibilidades que ofrece. Sin embargo el Web Consortium le esta dando un fuerte impulso, con lo es de suponer que las futuras versiones de estos navegadores si no hagan y que poco a poco se tenderá hacia un mayor uso de la etiqueta OBJECT.

Esta sección es sólo una introducción a este nuevo estándar. Hemos considerado que un estudio detallado no era apropiado porque esta etiqueta no puede ser usada todavía de manera fiable(excepto para insertar controles ActiveX que enseguida veremos). El lector interesado puede adquirir más información a través del Web Consortium en las siguientes direcciones:

http://www.w3.org/pub/www/TR/WD-object.html
http://www.w3.org/TR/WD-html40/struct/objects.html#h-14.3

En la figura 11.9 hemos incluido de modo informativo la página del Web Consortium que explica el funcionamiento del atributo OBJECT y todos sus atributos.

Figura 11.9. La etiqueta OBJECT ha sido creada por los expertos del Web Consortium para englobar la inclusión de todo tipo de objetos en las páginas Web.

Una sección que si hemos considerado importante explicar es la inserción de los applets Java recién vistos usando la etiqueta applet, ya que aunque actualmente este método sea operativo, se irá imponiendo con el tiempo.

2.6. Inserción de un applet Java.

El objetivo actual del Web Consortium es que la etiqueta OBJECT conviva por un tiempo con la etiqueta APPLET para sustituirla más adelante. Hoy en día el uso de la etiqueta OBJECT no está muy extendido con lo que la forma más segura de insertar un applet sigue siendo usando la etiqueta APPLET, sin embargo la siguiente generación de navegadores permitirá también el uso de OBJECT que acabará siendo el único método aceptado y como buenos programadores nosotros debemos estar preparados.

Para poder llevar a cabo todas las funciones de la etiqueta APPLET también es posible usar la etiqueta <PARAM> para especificar parámetros para los applets u otros objetos que los necesiten. Aunque esta etiqueta debe ser insertada entre <OBJECT> y </OBJECT> no será ignorado por los navegadores que entiendan esta etiqueta.

Además la etiqueta PARAM tiene dos nuevos atributos al ser usada en el interior de OBJECT, estos son:

VALUETYPE="...":

Este atributo especifica que tipo de valor recibirá el parámetro. Hay tres posibles valores:

Data:: El valor especificado será pasado al objeto como una cadena de caracteres. Este es el valor por defecto y antes de la existencia del atributo VALUETYPE era la única posibilidad.

Ref:: El valor especificado es una dirección URL que indica donde están almacenados los valores para dicho parámetro. La dirección debe ser pasada tal cual al objeto.

Object:: El valor es el nombre de otro objeto del mismo documento precedido del símbolo '#'.

TYPE="tipo_mime":

Este atributo especifica el tipo mime del valor asignado a este atributo con VALUE.

Exceptuando estas diferencias, el funcionamiento es idéntico. Por ejemplo, para insertar el applet del segundo de nuestros ejemplos ('El saludo de Duke') usando la etiqueta OBJECT debemos escribir:

			<OBJECT codetype="application/octet-stream"
        			classid="Java:Animator.class"
        			width=55 height=68
 				ALT="Lo siento, no puede ver el applet">
			<PARAM NAME="imagesource" VALUE=".">
			<PARAM NAME=ENDIMAGE VALUE=10>
			<PARAM NAME=PAUSE VALUE=100>
			<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|100|100|100|100">
			<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te saluda">
			</OBJECT>

Como vemos la diferencia con la etiqueta APPLET es pequeña, con la única complejidad añadida de indicar en el atributo CODETYPE el tipo MIME del applet, que es el indicado en este ejemplo siempre. Esto es necesario para indicar al navegador que se trata de un applet de modo que si no soporta esta tecnología este pueda ser capaz de decidir no bajar el archivo.

Anterior	Inicio	Siguiente
Java en las Páginas Web.	Subir	ActiveX, la tecnología del futuro.