Elaboracin de pginas web dinmicas con GeoGebra.

Andrs Caro Chaparro I.E.S. La Campia, Arahal (Sevilla), Departamento de Economa, Mtodos Cuantitativos e Historia Econmica Universidad Pablo de Olavide de Sevilla Spain A. M. Martn Caraballo Departamento de Economa, Mtodos Cuantitativos e Historia Econmica Universidad Pablo de Olavide de Sevilla Spain [email protected] [email protected] Propuesta de comunicacin de 20 minutos para TICEMUS RESUMEN GeoGebra es un software interactivo de matemtica, libre, para aprender y ensear. Rene dinmicamente geometra, lgebra y clculo. Se elabora por Markus Hohenwarter junto a un equipo internacional de desarrolladores. Con l se generan grficos interactivos y son relacionados con el lgebra obteniendo planillas dinmicas. Cubre todos los niveles educativos, desde el escolar ms bsico al universitario, y permite la elaboracin de materiales de aprendizaje libres y gratuitos. Se muestra lo esencial para crear pginas de Web que permitan la interaccin de los usuarios con el Applet de GeoGebra a travs de formularios HTML. Se analizan algunos ejemplos de pginas interactivas con GeoGebra y se muestran cmo construir planillas dinmicas y exportarlas a HTML usando los comandos existentes en el software. Se analiza el HTML necesario para la manipulacin del applet de GeoGebra y se abordan algunos mtodos de JavaScript que permiten comunicar las applets de aplicaciones de GeoGebra con las pginas web.

Palabras Clave GeoGebra, Web dinmica, HTML, Javascript. Introduccin La metodologa activa de enseanza-aprendizaje contribuye a generar un aprendizaje significativo y constructivista. Deben potenciarse modelos en la prctica docente que creen oportunidades para que los alumnos se enfrenten a situaciones que entren en conflicto con sus experiencias previas, sugieran actividades para ayudar a que reestructuren su conocimiento, propongan actividades de resolucin de casos reales y fomenten actividades que requieran interaccin. El uso del software GeoGebra es un

excelente medio para experimentar, explorar, descubrir, ver, manipular, etc no slo la Geometra sino el lgebra, el anlisis matemtico y la Estadstica. La Escuela 2.0 significa: la colaboracin entre los docentes que comparten los contenidos creados; la bsqueda de mtodos ms participativos por el alumnado, para que los alumnos y alumnas se motiven, aprendan a aprender y vean la aplicacin de lo que estudian; la adquisicin de una serie de competencias por parte del alumnado y del profesorado, tales como cooperar, participar y poner en comn lo trabajado en equipo; y por ltimo, la disposicin de materiales y metodologas para la atencin a la diversidad. Para el desarrollo de la Escuela 2.0 es necesario que los materiales generados sean puestos a disposicin de toda la comunidad educativa: profesorado, alumnado y administracin, de tal forma que cualquiera pueda utilizarlo. La Web 2.0 pone a nuestra disposicin Blogs, Foros, Wikis, plataformas virtuales de aprendizaje, que permite al profesorado ste menester. HTML es el lenguaje de marcas ms habitual utilizado para la transmisin de conocimiento en la Web, las pginas ms simples que podemos encontrar trabajan con hipertexto. Se usa para describir la estructura y el contenido de una pgina web en forma de texto, as como para complementar el contenido textual con objetos tales como imgenes, vdeos, sonidos, etc. Un salto importante en la tecnologa Web vino de la mano del lenguaje de programacin Java, el cual permite ejecutar aplicaciones interactivas dentro de pginas web independientemente de la plataforma desde dnde se acceda con poco coste de transferencia de datos. Tales aplicaciones se denominan Applets de Java. GeoGebra provee de una serie de Applets que son capaces de interpretar las hojas diseadas con el software, permitiendo introducir en pginas web toda la funcionalidad de GeoGebra sin tener que haber instalado previamente el software. Este applet es parametrizable, pudiendo personalizarse su presentacin en la web. Adems, tiene implantados una serie de mtodos que permiten la interaccin entre HTML y el Applet de GeoGebra mediante instrucciones Javascript. Pginas web dinmicas a partir de una hoja de GeoGebra Para exportar una hoja de GeoGebra en forma de pgina Web se elige el Men Archivo de GeoGebra y se selecciona el tem Exporta y el sub-tem Hoja Dinmica como Pgina Web (html). En el cuadro de dilogo aparecen el ttulo, la autora y la fecha. Aparecen dos pestaas: General y Avanzado. En General existen varios campos que podrn ser editados por el usuario, y exportando GeoGebra crea el archivo en HTML y una copia del archivo GGB (extensin de fichero de GeoGebra). El separador avanzado controla las funcionalidades que estarn disponibles en la pgina web; diferentes opciones de interface, disponibilidad de las barras, grabacin e impresin de el archivo, etc Al seleccionar ggb Archivo & jar Archivos la aplicacin web funcionar en un equipo sin conexin a Internet, si el resultado se va a colgar en un servidor que disponga de los applets de GeoGebra no es necesaria esta opcin. Una vez exportado la hoja de GeoGebra cmo pgina Web dinmica, se abrir una instancia del navegador predeterminado mostrndola. La carpeta en la que se ha exportado la pgina aparecen el fichero GGB, que contiene a la construccin

GEOGEBRA, el fichero HTML, que contiene a la pgina Web y seis ficheros JAR, que contienen a los applets. El cdigo HTML de la pgina es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> circunferencia - GeoGebra Hoja Din&#225;mica </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="GeoGebra" /> <style type="text/css"><!--body { fontfamily:Arial,Helvetica,sans-serif; margin-left:40px }-></style> </head> <body> <table border="0" width="600"> <tr> <td> <h2>circunferencia</h2> <p> Dibujo de una circunferencia dado su radio</p> <applet name="ggbApplet" code="GeoGebra.GeoGebraApplet" archive="GeoGebra.jar" codebase="./" width="339" height="310" MAYSCRIPT> <param name="filename" value="circunferencia.ggb"/> <param name="java_arguments" value="-Xmx512m" /> <param name="cache_archive" value="GeoGebra.jar, GeoGebra_main.jar, GeoGebra_gui.jar, GeoGebra_cas.jar, GeoGebra_export.jar, GeoGebra_properties.jar" /> <param name="cache_version" value="3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0, 3.2.41.0" /> <param name="framePossible" value="false" /> <param name="showResetIcon" value="false" /> <param name="showAnimationButton" value="true" /> <param name="enableRightClick" value="false" /> <param name="errorDialogsActive" value="true" /> <param name="enableLabelDrags" value="false" /> <param name="showMenuBar" value="false" /> <param name="showToolBar" value="false" /> <param name="showToolBarHelp" value="false" /> <param name="showAlgebraInput" value="false" /> <param name="allowRescaling" value="true" /> Sorry, the GeoGebra Applet could not be started. Please make sure that Java 1.4.2 (or later) is installed and active in your browser (<a href="http://java.sun.com/getjava">Click here to install Java now</a>) </applet> <p><span style="font-size:small">Andr&#233;s Caro Chaparro, Creaci&#243;n realizada con <a href="http://www.GeoGebra.org/" target="_blank" >GeoGebra</a></span></p> </td> </tr> </table> </body>

</html>1

HTML A continuacin se muestra lo esencial para comprender el cdigo anterior. Los estndares HTML (HyperText Markup Laguage) y XHTML (eXtensible HyperText Markup Laguage) son lenguajes de marcado que, junto con el texto, incorporan etiquetas que contienen informacin adicional sobre la estructura del texto o su representacin. Cada una de las etiquetas est rodeadas por corchetes angulares (<,>) y cada vez que se abre una etiqueta debe cerrarse con la misma etiqueta precedida de /, una vez que se hayan cerrado las abiertas con posterioridad. En una pgina Web se distinguen principalmente las siguientes etiquetas:
<!DOCTYPE que no es exactamente una etiqueta HTML, sirve para indicar a

los navegadores en qu versin del lenguaje de marcas se est escribiendo. sta es la nica que no se cierra. <html>: define el inicio del documento. </html> marca el final. <head>: define la cabecera del documento. sta cabecera no se muestra en la pgina, pero contiene informacin sobre la autora, ttulo de la ventana del navegador, estilos de la pgina, etc. <body>: dentro se escribe el contenido o cuerpo del documento. Contiene la informacin que se muestra en el navegador. Dentro de ella se pueden destacar las siguientes: o <h1> a <h6>: Se utilizan para distinguir los encabezados del documento. o <p> : Marca los prrafos. o <table>,<td> y <tr>: Marcan la definicin de una tabla, sus lneas y dentro de ellas sus celdas. o <applet>: Contiene un applet de java, cmo el generado por GeoGebra. o <a>; Enlaza a contenido dentro o fuera del sitio web. o <div>; Divide la pgina en partes. o <img>; Muestra una imagen. o <li>,<ol>,<ul>; Marcan listas.

En el codigo del ejemplo anterior se puede distinguir el DOCTYPE, el cdigo HTML, encerrado entre las marcas <html> y </html>. Dentro de l la cabecera, delimitada por <head> y </head>, y el cuerpo, por <body> y </body>. En el cuerpo se puede distinguir el applet de GeoGebra con sus parmetros. El applet de GeoGebra. Un applet es una aplicacin que se ejecuta en dentro de otro programa, por ejemplo un navegador web. El navegador web es el anfitrin dnde se ejecuta el applet o en aplicaciones como telfonos mviles que soportan el modelo de programacin por applets. El applet de GeoGebra est programado en Java y es un subprograma que
1

Los documentos HTML son texto plano, los colores se utilizan aqu solamente de forma ilustrativa, para diferenciar las distintas partes del cdigo.

puede ser incrustado en un documento HTML, por lo que debe tenerse instalada la mquina virtual de Java2 en el navegador desde dnde se acceda. Arriba se ha mostrado la pgina que genera GeoGebra automticamente. Para introducir el applet a mano en una pgina web se debe incluir el siguiente cdigo mnimo:
<applet name="ggbApplet" code="GeoGebra.GeoGebraApplet" archive="GeoGebra.jar" codebase="http://www.GeoGebra.org/webstart/" width="700" height="500" MAYSCRIPT> <param name="filename" value="raiz2.ggb"/> <param name="framePossible" value="false" /> Sorry, the GeoGebra Applet could not be started. Please make sure that Java 1.4.2 (or later) is installed and active in your browser (<a href="http://java.sun.com/getjava">Click here to install Java now</a>) </applet>

Modificando width y height se cambia el tamao del rea de la pantalla que ocupa el applet. Con los siguientes parmetros se puede personalizar la apariencia y la funcionalidad del applet de GeoGebra. nombre filename Type valor Por ejemplo: "raiz2.ggb" button Descripcin Fichero de una construccin en GeoGebra. Si se utiliza ste parmetro el applet slo mostrar un botn que abre una ventana de GeoGebra. Establece si un doble click en el dibujo puede abrir una ventana de GeoGebra. ste parmetro se ignora si Type=button. Por defecto: True Color de fondo del applet. ste parmetro se usa si el tipo button est seleccionado. Por defecto: white Color de la lnea que se dibuja alrededor del applet. Por defecto: gray Controla si se muestra una ventana emergente cuando se hace click sobre mltiples objetos. Por defecto: trae Establece si se puede utilizar el botn derecho sobre el applet. Si se establece el valor false se deshabilitan los mens contextuales, dilogos de propiedades, zoom con el ratn y algunas teclas de acceso rpido. Por defecto: true. Establece si las etiquetas pueden ser borradas. Por defecto: true.

framePossible

True o false

bgcolor

borderColor

enableChooserPopups

Por ejemplo: #FFFFFF o white Por ejemplo: #FFFFFF o white True o false

enableRightClick

True o false

enableLabelDrags

True o false

Si el navegador no tiene instalada la mquina virtual de Java necesaria, redirige automticamente al usuario a una pgina desde dnde la puede instalar.

allowRescaling

True o false

enableShiftDragZoom

True o false

errorDialogsActive

True o false

showMenuBar

True o false

showToolBar

True o false

maxIconSize showToolBarHelp

16 a 32 True o false

customToolBar

Por ejemplo: "0 | 1 2 | 3 , 4 || 5 6 7"

showAlgebraInput showResetIcon

True o false True o false

language

Cadena ISO del lenguaje4

country
3

Cadena ISO del

Determina si se puede cambiar la escala de la vista grfica del applet cuando se cargue o se cambie su tamao. Si se muestran la vista de lgebra o la hoja de clculo est desactivado. Por defecto: False. Establece si el rea de dibujo puede ser movida con Maysculas + arrastre del ratn o hacer zoom sobre ella con Maysculas+ rueda del ratn. Por defecto: true. Determina si se muestran las cajas de dialogo si se introduce una entrada invalida. Por defecto: true. Determina si la barra de men de GeoGebra se muestra en el Applet. Por defecto: False. Determina si la barra de herramientas con los botones de construccin se muestra en el Applet. Por defecto: False. Mximo tamao de los iconos usados en la barra de herramientas. Por defecto: 32. Determina si se muestra la barra de herramientas de ayuda a la derecha de la barra de herramientas. Personaliza la barra de herramientas de acuerdo con una cadena de caracteres. Los valores enteros son los valores de Modo3 de la barra, , aade un separador dentro de un men, | comienza un nuevo men y || aade un separador en la barra de herramientas antes de empezar un nuevo men. Las herramientas creadas se numeran 1001,1002, etc Determina si se muestra la lnea de entrada de lgebra. Determina si se muestra un pequeo icono en la esquina superior derecha del applet. Si se hace click sobre l, se resetea el applet. GeoGebra intenta tomar el lenguaje de la mquina automticamente. Se usa este parmetro si se quiere especificar una lengua manualmente. Slo tiene sentido si se usa junto con el

Los valores de Modo de la barra de herramientas se pueden encontrar en http://www.GeoGebra.org/en/wiki/index.php/GeoGebra_Toolbar_Mode_Values 4 La lista de cadenas ISO de lenguaje se puede consultar en http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes y la de pases en http://www.iso.org/iso/english_country_names_and_code_elements, Para Espaol y Espaa son es y ES, respectivamente

ggbOnInitParam

pas Por ejemplo applet2

java_arguments

Por ejemplo: Xmx256m

parmetro language. Este parmetro permite especificar el argumento pasado a la funcin de JavaScript ggbOnInit(), la cual es llamada cuando el applet est completamente inicializado. Esto es til cuando se tienen varios applets en la pgina. Este parmetro permite reservar ms memoria (en megabytes) para el applet de GeoGebra.

El siguiente cdigo es un ejemplo de un applet button que consiste en un botn que abre una ventana de GeoGebra. El rea alrededor del botn est inicializada en blanco.
<applet code="GeoGebra.GeoGebraApplet" archive="GeoGebra.jar" width=200 height=40> <param name="filename" value="circle.ggb"/> <param name="type" value="button"/> <param name="bgcolor" value="#FFFFFF"/> Please <a href="http://java.sun.com/getjava">install Java 1.4</a> (or later) to use this page. </applet>

Formularios en HTML Los formularios aportan interactividad a las pginas Web, suelen utilizarse para mandar su contenido a una cuenta de correo o para interaccionar con un programa mediante un script. ste ltimo uso es el que se adopta para la interaccin de la pgina Web con el Applet de GeoGebra (programa) mediante cdigo script (JavaScript). Las marcas que, habitualmente, se utilizan en los formularios son las siguientes: Marca <form> <imput> <label> Nombre Formulario Control de un formulario Descripcin Se emplea para insertar un formulario en la pgina Se emplea para insertar un control en un formulario

Ttulo o leyenda Se emplea para definir el ttulo o leyenda de los de un campo de campos definidos en un formulario formulario

La marca <form> es la que delimita el formulario dentro de la pgina HTML, <label> se utiliza para establecer el ttulo de cada campo del formulario y <input> sirve para crear la mayora de los controles. <input> tiene los siguientes atributos: Type. Indica el tipo de control que se incluye en el formulario: text, password, checkbox, radio, submit, reset, file, hidden, image, button. Name. Asigna un nombre al control. Value. Valor inicial del control. Size. Tamao inicial del control.

Maxlength. Mximo nmero de caracteres para los controles de texto y de password. checked = "checked". Para los controles checkbox y radiobutton permite indicar qu opcin aparece preseleccionada. disabled = "disabled. El control aparece deshabilitado y su valor no se enva junto con el resto de datos. readonly = "readonly". El contenido del control no se puede modificar. src = "url". Para el control que permite crear botones con imgenes, indica la URL de la imagen que se emplea como botn de formulario. alt = "texto". Descripcin del control.

En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso. Para cada control se puede programar una accin de respuesta a cada evento, aunque el ms interesa es el evento Onclick para un control button que se dispara una vez que se hace click sobre un botn. Realicemos un ejemplo de cmo controlar un applet en el que se muestra una circunferencia dado su radio, crearemos una construccin con GeoGebra con una circunferencia dado su centro y su radio, la exportaremos a HTML y editaremos la pgina con un editor de texto plano para aadir un formulario con una etiqueta, un cuadro de texto, dnde se introduzca el valor del radio y dos botones, uno para modificar el valor del radio de la circunferencia en el applet y otro para resetear el applet. Generemos la construccin con GeoGebra: Se abre una ventana de GeoGebra, se aade un punto, que puede llamarse A y un deslizador, al que denominaremos r. Se construye una circunferencia dado su centro y su radio, pinchamos en A y se muestra un cuadro de dilogo que requiere la entrada del radio, introducimos el valor r. Podemos comprobar que si cambiamos el valor del deslizador, cambia la circunferencia. En la barra de lgebra, pinchamos sobre el botn de r para que desaparezca, cerramos la ventana de lgebra y en el men vista quitamos los ejes y aadimos la cuadrcula, establecemos el valor r=2 y modificamos el tamao de la ventana para que quede algo parecido a

Una vez exportada la construccin cmo hoja dinmica se obtiene una pgina HTML con la codificacin dada arriba. Para aadir interaccin entre HTML y el Applet se va aadir el siguiente cdigo en la pgina justo despus del applet:
<form> <center> <p>Radio de la circunferencia: <b>r=</b> <INPUT TYPE="text" SIZE="20" NAME="T1" VALUE="2"/></p> <input type=button value=modifica name=Boton1 onclick="document.ggbApplet.evalCommand('r='+T1.value);"> <input type=button value=Reinicia name=Boton2 onclick="T1.value='2';document.ggbApplet.reset();"> </center> </form>

Quedando la pgina como sigue:

Cmo muestra el ejemplo, dentro de un formulario se pueden utilizar marcas orientadas a la presentacin del texto, por ejemplo <p> y <b>, qu muestra la salida en negrita. Los 3 controles que se muestran en el formulario son una caja de texto, a la que se ha denominado T1 y dos botones Boton1 y Boton2. Al hacer click en Boton1 se llama a la funcin JavaScript
document.ggbApplet.evalCommand('r='+T1.value)

sta funcin llama al mtodo del applet de GeoGebra evalCommand que evala el comando que encierra entre parntesis como si se estuviese introduciendo en la barra de comandos de GeoGebra. En ste caso se introduce el cdigo r= seguido del valor introducido en el cuadro de texto T1, que se especifica con T1.value. El nombre document hace referencia al documento HTML actual y document.ggbApplet hace referencia al objeto ggbApplet de document, que es cmo se ha denominado al Applet con el atributo name=ggbApplet. El botn Boton2 realiza dos acciones cuando se hace click sobre l: Modifica el valor de T1 con el cdigo T1.value=2 y resetea el applet document.ggbApplet con el mtodo reset(). Otros mtodos que se disponibles por el applet de GeoGebra son: Nombre setVisible(objName,True o False) setCoords(objName, x, y) setAnimating(objName, True o False) Descripcin Determina si el objeto del applet objName es visible o no. Establece las coordenadas de ObjName como (x,y). Establece si el objeto objName puede ser animado o no.

getValue(objName) getAllObjectNames() setCoordSystem(xmin, xmax, ymin, ymax) setAxesVisible(xAxis, yAxis) registerAddListener(JSFu nctionName)

Obtiene el valor de objName. (Por ejemplo la longitud de un segmento, el rea de un polgono, etc.) Obtiene una lista con los nombres de todos los objetos de la construccin. Establece las coordenadas cartesianas de la ventana grfica del applet. Establece si los ejes de coordenadas son visibles. xAxis e yAxis pueden tomar los valores True y False. Registra una function JavaScript y aade un listener para el applet de GeoGebra. Cuando un nuevo objeto se crea en el applet, se llama a la funcin JavaScript JSFunctionName usando el nombre del nuevo objeto creado cmo argumento. Ejemplo: Primero, registra una funcin Listener JavaScript: ggbApplet.registerAddListener("myAddLis tenerFunction"); Cuando un objeto A se crea, el applet de GeoGebra llama a la funcin JavaScript: myAddListenerFunction("A");

Un listado exhaustivo de los mtodos disponibles en el applet se puede encontrar en: http://www.GeoGebra.org/en/wiki/index.php/GeoGebra_JavaScript_Methods Bibliografa Hohenwarter, M; Preiner, J; Yi,T. Incorporating GeoGebra into Teaching Mathematics at the College Level. Proceedings of ICTCM 2007, GeoGebra at the College Level. Hohenwarter, M; Hohenwarter, J. Introduction to GeoGebra. Disponible en www.GeoGebra.org Hohenwarter,M; Borcherds, M; GeoGebra Applet Parameters. Disponible en www.GeoGebra.org Hohenwarter,M; Borcherds, M; GeoGebra Applet methods. Disponible en www.GeoGebra.org Lpez Qijado, J.; Domine JavaScript. RA-MA. Saint Louis University Department of Mathematics and Computer Science. Math Applets for Calculus at SLU. http://www.slu.edu/classes/maymk/MathAppletsSLU.html#Continuity Schmitt, C; Profesional CSS para diseo Web. Anaya Multimedia.