![]() ![]() ![]() |
► 13. Applets, JavaScript y XML
► 13.4 HTML
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 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.
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). |
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.
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. |
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 |
Para realizar esta práctica necesitamos disponer de varios archivos. Estos archivos se encuentran en el archivo comprimido "prueba.zip".
![]()
|
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:
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.
![]()
Ahora añadiremos el parámetro.
<param name="showResetIcon" value="true">
|
Ya hemos terminado, basta guardar el archivo y salir.
![]()
|
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).
|
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: