PDF                Anterior    Siguiente

► 13. Applets, JavaScript y XML

       ► 13.4 HTML

Objetivos

Para comprender bien la estructura y funcionamiento de un applet es recomendable conocer la estructura básica del lenguaje de etiquetas HTML, el lenguaje usado para crear páginas web.

Una página web puede constar de múltiples y variados elementos: textos, imágenes, enlaces, sonidos, videos, animaciones flash, applets de Java... Para diferenciarlos y usarlos necesitamos un sistema de etiquetado que diga qué es cada cosa y qué propiedades tiene.

Poder editar una página web que contiene una construcción de GeoGebra nos permite añadir algunas posibilidades de configuración.

El lenguaje HTML

El lenguaje HTML es este sistema de etiquetas. Las páginas web se llaman, por ello, archivos HTML, y su extensión es "html" o "htm". Su sintaxis es muy simple:

<etiqueta (opcional: propiedades)>     (entre < > colocamos la etiqueta)

...

</etiqueta>   (colocando el prefijo / indicamos que aquí se termina lo que va etiquetado)

Una página web consta de dos bloques, el encabezado y el cuerpo:

<head> (aquí van las instrucciones del encabezado) </head>  

<body> (aquí van las instrucciones del cuerpo) </body>  

Las etiquetas que aparecen en el encabezado se refieren al documento en sí: título, palabras clave, información para los robots indexadores como Google, etc.

Las etiquetas que aparecen en el cuerpo (entre las etiquetas <body> y </body>) estructuran la información que deseamos mostrar (textos, imágenes, applets...). Si al navegar por una página web pulsamos en el navegador la opción de menú "Ver código fuente", veremos todas las etiquetas que estructuran esa página.

Por ejemplo, la siguiente frase:

<p align="center">Soy una frase autoalusiva.</p>

se interpreta así: "Abre un nuevo párrafo con alineación central, escribe Soy una frase autoalusiva, cierra el párrafo."

La etiqueta p alude a un nuevo párrafo. Observemos que la etiqueta p va acompañada de una propiedad, align, que indica la alineación que se usará.

El archivo en_blanco.html es una página web sin nada. Si editamos el código fuente veremos la estructura básica de una página html:

<html>

<head>  </head>

<body> </body>

</html>

Todas las etiquetas del lenguaje HTML están predefinidas, el programador no puede ni añadir ni modificar ninguna etiqueta.

La etiqueta applet

De la misma forma que la etiqueta para iniciar un párrafo nuevo es "p", la etiqueta para iniciar un applet es "applet":

<applet (propiedades)> (aquí los parámetros del applet) </applet>  

Las propiedades del applet son las siguientes:

Ejemplos de sintaxis Descripción

code = "geogebra.GeoGebraApplet"

La propiedad code especifica el tipo de applet que se desea abrir.

codeBase = "./"

 

La propiedad codeBase especifica la ruta de directorios para la localización del applet. Si no se especifica, asume la misma que aparece en la URL del archivo html, es decir, la ruta de la página web (por ejemplo, http://mi web.com/mispaginas/).

archive = "../geogebra.jar"

 

archive = "http://www.geogebra.org/webstart/3.2/geogebra.jar"

La propiedad archive especifica la ruta completa (incluido nombre del archivo) donde se encuentra la aplicación que se debe usar para interpretar el applet. En este caso, debemos señalar la dirección (absoluta o relativa) en donde se encuentre el ejecutable "geogebra.jar".

width = "750"

Ancho de la ventana del applet.

height = "550"

Alto de la ventana del applet.

Si además deseamos que la construcción se comunique con algún código JavaScript presente en la página web, necesitamos darle un nombre al applet, imprescindible para que el programa JavaScript recoja o envíe información a la construcción de GeoGebra:

name = "Entrada"

Nombre del applet, como objeto integrado en el archivo html, para poder referirnos al él (puede haber varios applets en una misma página web). Esto permite a JavaScript recibir o pasar información al archivo GeoGebra.

Por último, si queremos que la construcción GeoGebra envíe información al JavaScript, necesitamos incorporar una propiedad más.

MAYSCRIPT

Añadiendo esta propiedad permitimos al archivo GeoGebra enviar información al JavaScript (que a su vez puede enviarla a otro applet).

Los parámetros del applet

Se habrá observado que entre las propiedades del applet de GeoGebra no figura lo más importante: el nombre de la construcción que deseamos mostrar. Esto es así porque ese nombre, junto con otras variables, forma parte de los parámetros del applet.

Entre las etiquetas <applet ...(propiedades)...> y </applet> podemos introducir varios parámetros. Su sintaxis general es:

etiqueta: param

propiedades: name y value

Por ejemplo:

<param   name = "filename"    value = "cuadrado.ggb" />

 Como valor del nombre del archivo se indicará la dirección relativa al mismo.

 La barra inclinada / final permite cerrar la etiqueta en la misma etiqueta de apertura.

Los parámetros del applet (en realidad, las distintas propiedades de la misma etiqueta param) son los que se detallan a continuación. En el caso de que exista un valor por defecto, aparece en primera posición.

Parámetros configurables desde la construcción

El único parámetro necesario es el que ya hemos mencionado, el parámetro name. Todos los demás parámetros son opcionales. Los que siguen a continuación son todos los parámetros que GeoGebra nos permite configurar directamente al usar la opción del menú Archivo opción "Exporta Hoja Dinámica como Página Web (html)", como se muestra en el apartado "Applets". Seguiremos el mismo orden en que allí aparecen.

Ejemplos de sintaxis Descripción

name = "filename"    value = "cuadrado.ggb"

Nombre de la construcción (archivo ggb).

name = "type"    value = "button"

 

Si se usa este parámetro sólo se mostrará un botón que abrirá la aplicación en una ventana independiente.

name = "enableRightClick"    value = "true"

name = "enableRightClick"    value = "false"

Clic derecho habilitado. Permite usar el botón derecho del ratón (menú contextual). Si se desactiva no se podrá disponer de los menús contextuales, cuadros de diálogo de propiedades o zoom mediante arrastre con el botón derecho pulsado. También se desactivarán algunas acciones de teclado, como la tecla supr o la tecla F9 (recálculo), siempre que la opción Mostrar la Barra de Menú se encuentre desactivada.

name = "enableLabelDrags"    value = "true"

name = "enableLabelDrags"    value = "false"

Establece si se permite arrastrar los rótulos.

name = "showResetIcon"    value = "false"

name = "showResetIcon"    value = "true"

Muestra el icono de reinicio de la construcción en la esquina superior derecha del applet. Haciendo clic en este icono se reinicia el applet, es decir, se vuelve a cargar la construcción.

name = "framePossible"    value = "true"

name = "framePossible"    value = "false"

Un doble clic abre la ventana de la aplicación.

Establece si se permite abrir la aplicación GeoGebra en una ventana independiente al hacer doble clic sobre el applet. Este parámetro se ignora si se ha incluido el parámetro name = "type"    value = "button".

name = "showMenuBar"    value = "false"

name = "showMenuBar"    value = "true"

 

Mostrar la Barra de Menú.

name = "showToolBar"    value = "false"

name = "showToolBar"    value = "true"

Mostrar la Barra de Herramientas. Recordemos que esta barra de herramientas puede ser configurada para que sólo aparezcan las herramientas que deseemos antes de exportar la construcción como página web.

name = "showToolBarHelp"    value = "false"

name = "showToolBarHelp"    value = "true"

Mostrar la Ayuda de la Barra de Herramientas.

 

name = "showAlgebraInput"    value = "false"

name = "showAlgebraInput"    value = "true"

Mostrar la barra de Entrada, que consta del Campo de Entrada y las listas desplegables de operadores, símbolos y comandos.

Parámetros no configurables desde la construcción

Los siguientes parámetros no pueden ser configurados desde la construcción, por lo que deben ser añadidos manualmente al código fuente.

Ejemplos de sintaxis Descripción

name = "bgcolor"    value = "#FFFFFF"

name = "bgcolor"    value = "#C0FFC0"

Color de fondo del botón, como cadena hexadecimal. El color por defecto es blanco. Sólo tiene efecto cuando se ha activado el parámetro:

name = "type"    value = "button"

name = "borderColor"    value = "#808080"

name = "borderColor"    value = "#FFFFFF"

Color del borde del applet, como cadena hexadecimal. El color por defecto es gris.

name = "enableShiftDragZoom"    value = "true"

name = "enableShiftDragZoom"    value = "false"

Establece si se permite desplazar la Vista Gráfica con el ratón, al arrastrar mientras se pulsa la tecla Ctrl (o Mayús), o realizar zoom con la rueda del ratón mientras se pulsa la misma tecla, o realizar zoom arrastrando con clic derecho el ratón. Desactivando esta opción se impide el desplazamiento o escalamiento de la Vista Gráfica.

name = "customToolBar"    value = "0 | 1 2 | 3 , 4 || 5 7"

Establece manualmente la configuración elegida para la Barra de Herramientas. Si no se especifica, será la que tenga la construcción (ya sea la inicial de GeoGebra o la guardada por el autor). Los códigos numéricos corresponden a cada una de las herramientas, que aparecerán en el orden indicado. La coma indica un separador horizontal en un menú, la barra | indica el comienzo de un nuevo menú y la doble barra || añade un separador vertical antes de comenzar el nuevo menú. Las herramientas personales tienen numeración correlativa a partir de 1001 (1001, 1002...). Los códigos del resto de las herramientas se pueden ver en la tabla siguiente a esta.

name = "language"    value = "es" (español)

name = "language"    value = "ca" (catalán)

name = "language"    value = "eu" (euskera)

name = "language"    value = "gl" (gallego)

Establece el código de idioma ISO. Si no se especifica, GeoGebra intentará asignar el idioma local automáticamente, en el caso de disponer del mismo (GeoGebra dispone de más de 40 idiomas), en caso contrario optará por el inglés. En la tabla de más abajo se pueden ver todos los códigos de idiomas que usa GeoGebra.

name = "country"    value = "AT" (Austria)

Establece el código de país ISO. Este parámetro sólo tiene sentido usado con el anterior. Sirve para especificar algunas diferencias idiomáticas entre países con la misma lengua (como Alemania y Austria, por ejemplo). En la tabla de más abajo se pueden ver estos códigos.

name = "errorDialogsActive"    value = "true"

name = "errorDialogsActive"    value = "false"

Establece si mostrarán los cuadros de aviso de error cuando (a través de la Barra de Entrada o mediante JavaScript) se realice una entrada inválida.

name = "java_arguments"    value = "-Xmx64m"

name = "java_arguments"    value = "-Xmx256m"

Permite dedicar memoria suplementaria (en MB) al applet. El valor por defecto es 64 MB. El otro ejemplo de sintaxis que exponemos dedicaría 256 MB. Este parámetro sólo tiene efecto en versiones de Java 1.6.0_10 o superiores.
CÓDIGOS NUMÉRICOS DE LAS HERRAMIENTAS

0

1

2

4

16

10

55

36

30

25

40

39

5

15

3

51

34

56

46

29

52

41

59

19

45

8

 

53

57

38

54

17

42

 

18

9

11

12

49

32

26

27

7

13

24

 

50

31

14

28

37

44

20

 

33

 

35

 

58

22

 

6

47

21

 
 

23

CÓDIGOS DE IDIOMA ISO
alemán

de

árabe

ar

bosnio

bs

búlgaro

bg

catalán

ca

checo

cs

chino

zh

coreano

ko

croata

hr

danés

da

eslovaco

sk

esloveno

sl

español

es

estonio

et

euskera

eu

finés

fi

francés

fr

galés

cy

gallego

gl

georgiano

ka

griego

el

hebreo

he

holandés

nl

húngaro

hu

indonesio

id

inglés

en

islandés

is

italiano

it

japonés

ja

lituano

lt

macedonio

mk

noruego

no

noruego bokmål

nb

persa

fa

polaco

pl

portugués

pt

 

ruso

ru

 

serbio

sr

 

sueco

sv

 

turco

tr

 

vietnamita

vi

 

 
CÓDIGOS DE PAÍS ISO
Estados

 Unidos

US

Reino

Unido

GB

Australia

AU

Alemania

DE

Austria

AT

Portugal

PT

Brasil

BR

Ejemplo de código HTML de un applet

Para realizar esta práctica necesitamos disponer de varios archivos. Estos archivos se encuentran en el archivo comprimido "prueba.zip".

Práctica Etapa 1

 

  • Guardar el archivo prueba.zip (clic derecho, Guardar destino como...) en el disco duro.
  • Descomprimir el archivo. Aparecerá una carpeta llamada "prueba" que contiene los archivos prueba.html, prueba.ggb y los archivos jar de GeoGebra.

El archivo prueba.html es una página web que incluye la construcción de GeoGebra presente en el archivo prueba.ggb.

El código fuente del applet, dentro del archivo prueba.html, es:

<applet code="geogebra.GeoGebraApplet" codebase="./" archive="geogebra.jar" width="1000" height="750">
<param name="filename" value="prueba.ggb">
<param name="showResetIcon" value="true">
Lo sentimos, el applet de GeoGebra no pudo iniciarse. Por favor, asegúrate que en tu navegador se encuentra instalada y activada la versión 1.4.2 o superior de Java. (<a href="http://java.sun.com/getjava">Haz clic aquí para instalar Java ahora.</a>)
</applet>

Obviando el texto "Lo sentimos..." que aparecerá cuando el applet no pueda cargarse debido a que en el ordenador del usuario no está instalado Java, el código anterior se traduciría como:

  • Usar Java para abrir la miniaplicación de GeoGebra (applet code="geogebra.GeoGebraApplet") que se encuentra en la misma dirección relativa que acompañará al nombre del archivo (codebase="./").
  • Para ello, cargar en Java el programa GeoGebra que se llama "geogebra.jar" que se halla en esta misma carpeta  (archive="geogebra.jar").
  • Reservar un ancho de pantalla de 1000 píxeles (width="1000") y un alto de 750 píxeles (height="750").
  • El archivo que se debe abrir se halla en esta misma carpeta y se llama "prueba.ggb" (name="filename" value="prueba.ggb").
  • Además, se debe mostrar el icono de reinicio del applet en la esquina superior derecha (name="showResetIcon" value="true").

Vamos a añadir una opción para un parámetro. En concreto queremos añadir, dentro del applet, la etiqueta:

<param   name = "enableShiftDragZoom"    value = "false" />

que impide el desplazamiento o escalamiento de la Vista Gráfica.

Práctica Etapa 2

 

  • Editamos el archivo prueba.html con un editor de texto (como el Bloc de Notas) o con un editor de páginas web. Si elegimos un editor de texto con formato (como Word) debemos tener cuidado en guardar el archivo, cuando acabemos, como texto plano (sin formato).

Ahora añadiremos el parámetro.

  • En el editor de texto, o en la vista HTML de un editor de páginas web, localizamos el párrafo que comienza por <applet y colocamos el cursor justo después de:

<param name="showResetIcon" value="true">

Ahora basta escribir:

<param   name = "enableShiftDragZoom"    value = "false" />

Ya hemos terminado, basta guardar el archivo y salir.

Práctica Propuesta de modificación de parámetros

 

 

En el mismo archivo prueba.html, añadir parámetros que modifiquen la Barra de Herramientas visibles de forma que sólo se permita crear o borrar rectas (ni siquiera se permita mover la Vista Gráfica ni seleccionar o mover los objetos).

 

Comentarios

Las páginas web se han convertido en un soporte habitual de la información. Es interesante distinguir al menos las etiquetas más usadas, como las etiquetas encargadas de insertar imágenes o enlaces.

Investigación Investigación:

  • Buscar en Internet información básica acerca del lenguaje de etiquetas HTML.

 

Anterior    Arriba     Siguiente