Puzzle

1. Extrae a la carpeta miweb el contenido del archivo: puzzle.zip. Como resultado de esa extracción encontrarás una nueva carpeta llamada puzzle y en su interior los siguientes archivos: puzzle.html, bufon.gif y Jigsaw.jar.

2. Abre Kompozer y a continuación abre el archivo puzzle.html.

3. Clic en el pestaña Código fuente para ver la etiqueta que integra el applet.

<applet codebase="./" archive="Jigsaw.jar" code="Jigsaw.class" height="380" width="480">
<param name="Image" value="bufon.gif">
<param name="ImgWidth" value="216">
<param name="ImgHeight" value="298">
<param name="Rows" value="2">
<param name="Cols" value="2">
<param name="AutoSnap" value="3">
<param name="KeepBoardClear" value="true">
<param name="Connector" value="-1">
<param name="CanRotate" value="false">
<param name="DimHelpImage" value="60">
<param name="BreakupText" value="Comenzar">
<param name="TidyText" value="Mezclar">
<param name="SolveText" value="Resolver">
<param name="MessageText" value="¡ MUY BIEN !">
<param name="AllowSolve" value="true">
<param name="HelpImageGrayed" value="true">
<param name="OuterFrameColor" value="#FFCC00">
<param name="BgColor" value="#FFCC00">
<param name="LosePieces" value="false">
<param name="AutoShowPieces " value="true">
</applet>

4. A continuación se especifican los nombres de los principales parámetros y sus valores para el applet Jigsaw.class contenido dentro del archivo comprimido Jigsaw.jar.

Párametros obligatorios

Image. Es el nombre del archivo que contiene la imagen del puzzle. Ejemplo: bufon.gif. Debe estar situado en la misma carpeta.
ImgWidth. La anchura en píxeles de la imagen en el puzzle. La imagen original se ajustará al tamaño especificado.
ImgHeight. La altura en píxeles de la imagen en el puzzle. La imagen original se ajustará al tamaño especificado.
Rows. El número de filas del puzzle.
Cols. El número de columnas del puzzle.

Párametros opcionales

AutoSnap. Se usa para facilitar la ubicación correcta de las piezas. Cuando la pieza se acerca a su posición correcta se enganchará a modo de imán. Este valor puede oscilar entre 0 y 15. El valor 15 permite que la pieza se sitúe automáticamente sobre la posición correcta desde lejos.
KeepBoardClear. Si está activado (true) las piezas desordenadas se situarán siempre fuera del área de construcción del puzzle tanto al comenzar como al pulsar el botón Mezclar.
Connector. Define el tamaño de los enganches en las piezas del puzzle. Es un valor entre -1 y 4 aunque se recomienda el valor -1.
CanRotate. Permite que las piezas puedan girarse pulsando el botón derecho del ratón sobre ellas. Su valor puede ser true o false.
DimHelpImage. Si está definido muestra una copia de la imagen en el área de construcción del puzzle para ayudar a su diseño. Es un valor numérico de 0 a 100 que indica la transparencia de la imagen sólo si el parámetro HelpImageGrayed está activado.
HelpImageGrayed. Si está activado (true) y se usa la imagen de guía, ésta se convertirá a una escala de grises.
Bicolor. Color de fondo del applet. Ejemplo: #FFCC00
OuterFrameColor. Color del borde del marco del applet.
InnerFrameColor. Color del marco alrededor del área de construcción del puzzle.
BoardColor. Color del área de construcción del puzzle si no se usa la imagen guía.
SelectColor. Color que rodea a una pieza cuando se sitúa el puntero del ratón sobre ella.
TextColor. Color del texto que aparece cuando se resuelve el juego.
AllowSolve. Si está desactivado (false) no aparecerá el botón de Resolver. Este botón se muestra por defecto si no se especifica este parámetro.
BreakupText. Define el texto que aparecerá en el botón Comenzar
TidyText. Define el texto del botón Mezclar. Observa que el botón Mezclar sólo revuelve las piezas no colocadas.
SolveText. Texto del botón Resolver.
MessageText. Texto del feedback al alumno cuando concluye con éxito el puzzle.
RunTarget. Nombre del marco donde se mostrará la página indicada por el parámetro RunURL cuando se resuelva el puzzle.
RunURL. URL de la página que se mostrará cuando el puzzle se resuelva adecuadamente.

5. Puedes utilizar la vista Código fuente de Kompozer para acceder al código HTML de la página y modificar los valores de estos parámetros.

6. Recuerda que debes seleccionar Archivo > Guardar para guardar los cambios realizados.

7. Para comprobar el funcionamiento de esta aplicación, ábrela desde Kompozer y luega pulsa en el botón Navegar. Otra posibilidad es utilizar el explorador de archivos y hacer doble clic sobre el archivo miweb\puzzle\puzzle.html. Debes esperar unos segundos a que se cargue la máquina virtual de Java e inicie el subprograma.

8. Se puede insertar este applet en una página HTML en blanco con sólo copiar y pegar el código HTML antes indicado. No olvides copiar el archivo *.JAR y *.GIF en la misma carpeta de esta nueva página.