Quero compartir o sistema que utilizo para publicar applets de Geogebra na web. Esta deseñado para minimizar a carga de traballo do navegador, cando na páxina hai múltiples applets, e para poder acceder aos mesmos dende javascript, co fin de interrelacionalos e controlalos a través do código da páxina. Este sistema é o que utilicei en artigos como Manipular Geogebra con Javascript ou O paradoxo de Leonardo e vou tratar de explicalo para que resulte doado copiar, pegar ou modificar os elementos necesarios para utilizalo.
Para as prácticas do obradoiro sobre modelos dinámicos para o ensino da Xeometría Descritiva descarga a seguinte carpeta comprimida con todos os materiais que utilizaremos.
Para ver como funcionan os exemplos deste artigo, podes descargar a seguinte carpeta comprimida con todos os materiais ou acceder aos mesmos a través de GitHub -https://github.com/horaciogd/geogebra-.
Para definir unhas directivas de seguridade concretas nas nosas páxinas web e poder cargar elementos aloxados en servidores diferentes ao noso, podemos facer uso dunha etiqueta meta na cabeceira da páxina web como a que segue. En concreo, a etiqueta deste exemplo permite a carga de imaxes img-src procedentes de calquera servidor * , embebidas como datos no código HTML da páxina data: e, tamén procedentes do mesmo servidor que a páxina web ’self’ .
<!-- Content-Security-Policy -->
<meta http-equiv="Content-Security-Policy" content="img-src * data: 'self';">Podedes atopar unha boa documentación en inglés sobre Content Security Policy aquí -https://content-security-policy.com/- ou utilizar un xerador automático das regras que require a túa páxina a través dun formulario como este -https://report-uri.com/home/generate-.
Con todo, no hai ningunha regra que faga referencia á carga de arquivos locais do ordenador e que funcione correctamente en todos os navegadores. Fixen multitude de probas e ao final cheguei a conclusión de que, polo de agora, o mais práctico e non usar Content Security Policy e facer as probas locais con Firefox, que permite a carga de arquivos locais por defecto. En calquera caso, unha vez subidos á web, todos os exemplos deste artigo funcionan correctamente tanto en Chrome, como en Firefox e Safari.
As librerías externas de javascript poden resultar algo opacas para as persoas inexpertas xa que, á vez que facilitan determinados procesos, os ocultan e fan menos accesibles. Traballando con librerías externas corremos perigo de encher unha web de código que descoñecemos, que sobrecarga as nosas páxinas e do que non sacamos proveito ningún. Con todo, para embeber os nosos applets, é imprescindible utilizar a librería que utiliza o propio GeoGebra para embeber os applets en GeoGebraTube. Esta librería chámase deployggb.js e pódese descargar da páxina de GeoGebra ou neste mesmo artigo, tamén podedes chamala directamente dende as vosas páxinas web á páxina de GeoGebra.
Nas páxinas webs que queiramos embeber os nosos applets incluiremos este código para chamar á librería deployggb.js. Normalmente o faremos dentro da cabeceira, pero podemos poñelo en calquera parte da páxina antes do primeiro applet e bastará poñelo unha soa vez en toda a páxina.
<!-- deploy ggb -->
<script type="text/javascript" src="deployggb.js"></script>Neste exemplo imos utilizar unha segunda librería chamada jQuery. Esta librería podería ser prescindible, xa que é factible escribir todo o código unicamente con javascript, pero trátase dunha librería perfectamente consolidada no ámbito do desenvolvemento web que vai facilitar moito o traballo e que utilizo en todos os proxectos web que fago.
<!-- jQuery -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>Para facer o efecto de rollover ao pasar o rato pola imaxe do applet que se amosa mentres non está cargado, utilizaremos unha serie de estilos gráficos definidos mediante css. Os estilos poden engadirse nun documento aparte e enlazarse ou poñerse dentro da cabeceira. O único cambio que debes facer é modificar a id do elemento html que conterá cada applet para asignarlle unha id única a cada un deles. A primeira parte dos estilos gráficos é única e igual para todos os applets que haxa na túa páxina, pero a segunda é específica para cada applet polo que debes duplicala e corrixir o identificador para cada applet que engadas.
<!-- Estilos gráficos para os elementos dos applets →
<style>
.geogebra { text-align: center; position: relative; }
.geogebra .loader { display: none; }
.geogebra:hover .loader {
cursor: pointer;
display: block;
background-color: rgba(0, 0, 0, 0.2);
background-image: url('geogebra-logo-name-600.png');
background-size: 300px 45px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
}
/* É necesario utilizar un identificador único para cada applet substitúe '_id'
polo identificador concreto da túa construción. Tamén podes aproveitar para
asignar o aspecto que desexes (cor, tamaño, bordes, etc.) a cada applet */
#applet_container_id, #applet_container_id img.previous {
width:850px;
height:600px;
}
#applet_container_id span {
display: inline-block;
margin-top: 45px;
line-height:600px;
}
</style>* No exemplo que podes descargar, como o arquivo de GeoGebra chámase ’pentagono.ggb’ utilizouse como identificador ’pentagono’ e no código verás que pon ’applet_container_pentagono’ en lugar de ’applet_container_id’.
* No exemplo que podes descargar, como a xanela da costrucción en Geogebra é de 342 x 371 no código verás ’width:342px; height:371px;’ e ’line-height:371px;’ en lugar de ’width:850px; height:600px;’ e ’line-height:600px;’.
* Para averiguar o tamaño exacto do teu applet e campturar unha imaxe do mesmo exactamente igual á que se verá despois de cargalo podes subilo a medias a GeoGebraTube sen chegar a gardalo.
O código javascript que necesitaremos é moi sinxelo, simplemente almacena o applet nunha variable e o embebe nunha etiqueta da páxina web cando pulsamos co rato sobre a mesma. Este script será necesario utilizalo tantas veces como applets poñamos na nosa páxina e haberá que modificar tanto o identificador do applet como os valores do seu tamaño. Modifica o código en función do nome do arquivo de Geogebra ou do seu identificador en GeoGebraTube e inclúeo xusto antes da etiqueta html na que desexes embeber o applet.
<!-- O seguinte código crea e carga o Applet -->
<script type="text/javascript">
// Creamos unha variable para almacenar o Applet de GeoGebra
var applet_id = new GGBApplet({id:"applet_id", width:371, height:342, filename:"id.ggb"}, true);
// Cando estea cargada a páxina,
$(document).ready(function(){
// ao pulsar na etiqueta 'loader',
$("#applet_container_id .loader").click(function(){
// valeira a etiqueta 'applet_container_id'
$("#applet_container_id").empty();
// e embebe o applet
applet_id.inject('applet_container_id', 'preferHTML5');
});
});
</script>* No exemplo que podes descargar, como o arquivo de GeoGebra chámase ’pentagono.ggb’, polo que utilízase o identificador ’pentagono’ e no código verás que pon ’applet_pentagono’, ’pentagono.ggb’ e ’applet_container_pentagono’.
Podemos embeber o applet en case calquera etiqueta html, o fundamental é que teña unha id para poder baleirala e inxectar o applet. No exemplo que podes descargar, utilizouse unha etiqueta div e o truco consiste en poñer unha imaxe do applet dentro da etiqueta e un texto que fai as veces de botón rollover, de xeito que ata que pulsamos, o único que carga o navegador e unha imaxe do applet. Igual que co código de javascript, será necesario incluír as etiquetas html tantas veces como applets poñamos na nosa páxina e haberá que modificar identificador para cada applet.
<!-- Esta etiqueta vai conter o applet aínda que ao proncipio só ten unha imaxe do mesmo e un botón para cargalo -->
<div class="applet geogebra" id="applet_container_id">
<img class="previous" src="id.png" alt="">
<div class="loader">
<span>Pulsa para cargar a construcción en Geogebra</span>
</div>
</div>* No exemplo que podes descargar, como o arquivo de GeoGebra chámase ’pentagono.ggb’, polo que utilízase o identificador ’pentagono’ e no código verás que pon ’applet_container_pentagono’ e ’pentagono.png’ en lugar de ’applet_container_id’ e ’identificador.png’.
Para este segundo exemplo de publicación de applets sincronizados, utilizáronse as mesmas librerías de javascript que no primeiro exemplo.
<!-- deploy ggb -->
<script type="text/javascript" src="deployggb.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>Os estilos gráficos tamén son case idénticos aos do primeiro exemplo, cunha única excepción, ao haber dous applets a segunda parte dos estilos está duplicada con dous identificadores diferentes.
<!-- Estilos gráficos para os elementos dos applets →
<style>
.geogebra { text-align: center; position: relative; }
.geogebra .loader { display: none; }
.geogebra:hover .loader {
cursor: pointer;
display: block;
background-color: rgba(0, 0, 0, 0.2);
background-image: url('geogebra-logo-name-600.png');
background-size: 300px 45px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
}
/* É necesario utilizar un identificador único para cada Applet substitúe
'_pentagono' e '_lenzo' polos identificadores concretos das túas construcións.
Tamén podes aproveitar para asignar o aspecto que desexes (cor, tamaño,
bordes, etc.) a cada applet. */
#applet_container_pentagono, #applet_container_pentagono img.previous {
width:371px;
height:342px;
}
#applet_container_pentagono span {
display: inline-block;
margin-top: 45px;
line-height:342px;
}
#applet_container_lenzo, #applet_container_lenzo img.previous {
width:371px;
height:342px;
}
#applet_container_lenzo span {
display: inline-block;
margin-top: 45px;
line-height:342px;
}
</style>É no código javascript onde atoaremos as diferencias entre o primeiro e o segundo exemplo. Neste caso utilízase unha función, chamada inicia_applets(), para iniciar simultaneamente os dous applets. Esta función, ademais de baleirar o contido das etiquetas html e inxectar os applets, vincula o pulsado do botón do rato sobre o primeiro dos applets a unha segunda función, chamada sincroniza_lenzo().
Despois de pulsar o botón do rato no primeiro dos applets sincroniza_lenzo() se executará a intervalos regulares de tempo de 20 milisegundos, recollerá datos do primeiro applet e llos enviará ao segundo. Ao soltar o botón do rato no primeiro dos applets sincroniza_lenzo() deixara de executarse a intervalos regulares de tempo.
<!-- O seguinte código crea e carga o applet -->
<script type="text/javascript">
// Creamos unha variable para almacenar cada applet de GeoGebra
var applet_pentagono = new GGBApplet({id:"applet_pentagono", width:371, height:342, filename:"pentagono-debuxar.ggb"}, true);
var applet_lenzo = new GGBApplet({id:"applet_lenzo", width:371, height:342, filename:"lenzo.ggb", enableShiftDragZoom: false }, true);
// Variable para almacenar o obxecto interval
var accion_lenzo;
// Cando estea cargada a páxina,
$(document).ready(function(){
// ao pulsar as etiquetas 'loader',
$("#applet_container_pentagono .loader").click(function(){
inicia_applets();
});
$("#applet_container_lenzo .loader").click(function(){
inicia_applets();
});
});
// Función para iniciar os applets
function inicia_applets() {
// valeirampos as etiqueta 'applet_container'
$("#applet_container_pentagono").empty();
$("#applet_container_lenzo").empty();
// e embebemos os applets
applet_pentagono.inject('applet_container_pentagono', 'preferHTML5');
applet_lenzo.inject('applet_container_lenzo', 'preferHTML5');
// cando pulsemos o botón do rato no aplet do pentagono iniciamos a sincronización
$("#applet_container_pentagono").mousedown(function() {
accion_lenzo = setInterval(function (){
sincroniza_lenzo();
}, 20);
});
// cando soltemos o botón do rato no aplet do pentagono interrompemos a sincronización
$("#applet_container_pentagono").mouseup(function() {
clearInterval(accion_lenzo);
});
}
// Función para recoller os datos de applet_pentagono e envialos a applet_lenzo
function sincroniza_lenzo() {
// recollemos a posición do punto "F" do applet pentagono en dúas variables
var x = applet_pentagono.getXcoord("F");
var y = applet_pentagono.getYcoord("F");
// cambiamos as coordenadas do punto "A" do applet lenzo
applet_lenzo.setCoords("A", x, y);
}
</script>A clave para recoller datos dun applet de GeoGebra é que, ao utilizar este sistema para embebelos, quedan asociados a unha variable global de javascript.
var applet_pentagono = new GGBApplet({id:"applet_pentagono", width:371, height:342, filename:"pentagono-debuxar.ggb"}, true);Deste xeito basta chamar a dita variable e utilizar un dos métodos da lista que aparece na seguinte ligazón, para recoller calquera valor ou coordenada dos obxectos da nosa construción.
https://wiki.geogebra.org/es/Referencia:JavaScript#Sobre_Estado_de_Objetos
var x = applet_pentagono.getXcoord("F");
var y = applet_pentagono.getYcoord("F");Se o que queremos é enviar datos a outro applet, como o segundo applet tamén está asociados a unha variable global de javascript, podemos acceder igualmente ao mesmo.
var applet_lenzo = new GGBApplet({id:"applet_lenzo", width:371, height:342, filename:"lenzo.ggb", enableShiftDragZoom: false }, true);Basta chamar a dita variable e utilizar un dos métodos da lista que aparece na seguinte ligazón, para enviar calquera valor ou coordenada aos obxectos da nosa construción.
https://wiki.geogebra.org/es/Referencia:JavaScript#Fijando_Estado_de_Objeto
applet_lenzo.setCoords("A", x, y);Finalmente as etiquetas html serán tamén case idénticas ás do primeiro exemplo. Coa excepción de que igual que os estilos estarán duplicadas con dous identificadores diferentes.
<!-- Esta etiqueta vai conter o primeiro applet aínda que ao proncipio só ten unha imaxe do mesmo e un botón para cargalo -->
<div class="applet geogebra" id="applet_container_pentagono">
<img class="previous" src="pentagono-deduxar.png" alt="">
<div class="loader">
<span>Pulsa para cargar a construcción en Geogebra</span>
</div>
</div>
<!-- Esta etiqueta vai conter o segundo applet aínda que ao proncipio só ten unha imaxe do mesmo e un botón para cargalo -->
<div class="applet geogebra" id="applet_container_lenzo">
<img class="previous" src="lenzo.png" alt="">
<div class="loader">
<span>Pulsa para cargar a construcción en Geogebra</span>
</div>
</div>Utilizando o sistema descrito podemos publicar e sincronizar indistintamente applets gardados en arquivos locais e applets subidos a GeoGebraTube. Cando utilicemos arquivos locais utilizaremos o parámetro ’filename’ e o nome do arquivo como identificador ao crear o obxecto GGBApplet e cando utilicemos arquivos de GeoGebraTube utilizaremos o parámetro ’material_id’ e o identificador do recurso na páxina web de Geogebra.
var applet_pentagono = new GGBApplet({id:"applet_pentagono", width:371, height:342, filename:"pentagono-debuxar.ggb"}, true);
var applet_wngm8rkc = new GGBApplet({id:"applet_wngm8rkc", width:841, height:552, material_id:"wngm8rkc"}, true); Utiliza filename:"xxxxxxxx.ggb" para os apples cando estean no teu servidor.
Para mais seguridade, sempre que usemos recursos de GeoGebraTube debemos utilizar a versión da librería deployggb.js da propia páxina web de GeoGebra.
<!-- deploy ggb -->
<script type="text/javascript" src="deployggb.js"></script>
<!-- deploy ggb -->
<script type="text/javascript" src="https://cdn.geogebra.org/apps/deployggb.js"></script>Utiliza deployggb.js cando os applets estean no teu servidor.
Igual que en todos os exemplos anteriores, para esta última proposta é necesario utilizar as librerías deployggb.js e jQuery.
<!-- deploy ggb -->
<script type="text/javascript" src="deployggb.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>Os estilos gráficos tamén son case idénticos aos do primeiro exemplo. A única diferencia é que nesta ocasión utilizouse a palabra acelerometro como identificador do applet e o seu tamaño será de 850px por 472px.
<!-- Estilos gráficos para os elementos dos applets -->
<style>
.geogebra { text-align: center; position: relative; }
.geogebra .loader { display: none; }
.geogebra:hover .loader {
cursor: pointer;
display: block;
background-color: rgba(0, 0, 0, 0.2);
background-image: url('geogebra-logo-name-600.png');
background-size: 300px 45px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
}
/* É necesario utilizar un identificador único para cada Applet substitúe
'_acelerometro' polo identificador concreto da túa construción.
Tamén podes aproveitar para asignar o aspecto que desexes (cor, tamaño,
bordes, etc.) a cada applet. */
#applet_container_acelerometro, #applet_container_acelerometro img.previous {
width:850px;
height:472px;
}
#applet_container_acelerometro span {
display: inline-block;
margin-top: 45px;
line-height:472px;
}
</style>Igual que nos exemplos anteriores, no código javascript é onde atoaremos as claves do funcionamento desta proposta. En primeiro lugar usáronse tres parámetros novos á hora de crear o applet; Un para comezar a enviar os datos do acelerómetro só cando o applet estea completamente cargado, outro para adaptar o tamaño da construción feita por Xabier Lorenzo ao ancho da miña web, e outro para amosar un pequeno botón que permite ver o applet a pantalla completa. Este botón resultará moi práctico para axustar o tamaño do applet á pantalla do dispositivo móbil cando carguemos o exemplo nun teléfono ou nunha tablet e poder velo o mais grande posible.
Por outra banda, creáronse dúas variables globais para almacenar os valores dos ángulos de xiro da animación e unha función chamada handleOrientation que recolle os valores beta, gamma e alpha do acelerómetro, para enviarllos aos esvaradores a e b da construción de GeoGebra. Ao cargar o applet despois de pulsar co rato na imaxe, deployggb.js fai que se execute a función definida a través do parámetro appletOnLoad. Nese intre, dita función liga handleOrientation ao evento deviceorientation, de xeito que cada vez que cambie a orientación do dispositivo se executara a función handleOrientation, que recollerá os novos valores de inclinación do dispositivo para enviaralos a GeoGebra.
<!-- O seguinte código crea e carga o Applet -->
<script type="text/javascript">
// Creamos unha variable para almacenar o Applet de GeoGebra
var applet_acelerometro = new GGBApplet({
id:"applet_acelerometro",
scale: 0.7019,
showFullscreenButton: true,
material_id:"pgkfyrqh",
appletOnLoad: function() {
// Comeza a enviar datos do acelerómetro a GeoGebra
window.addEventListener("deviceorientation", handleOrientation, true);
}
}, true);
// Creamos dúas variables para almacenar os águlos de xiro
var angulo = 0;
var angulo2 = 0;
// Creamos unha función para recoller os datos do acelerómetro e envialos ao applet
function handleOrientation(event) {
var beta = Math.round(event.beta);
var gamma = Math.round(event.gamma);
var alpha = Math.round(event.alpha);
angulo = -alpha* Math.PI / 180;
angulo2 = (gamma* Math.PI / 180)-90;
applet_acelerometro.setValue("a", angulo);
applet_acelerometro.setValue("b", angulo2);
}
// Cando estea cargada a páxina,
$(document).ready(function(){
// Damos unha alerta no caso de que o navegador non poda usar Device Orientation
if (!window.DeviceOrientationEvent) {
alert("O teu navegador non soporta Device Orientation");
}
// ao pulsar na etiqueta 'loader',
$("#applet_container_acelerometro .loader").click(function(){
// valeira a etiqueta 'applet_container_acelerometro'
$("#applet_container_acelerometro").empty();
// e embebe o applet
applet_acelerometro.setHTML5CodebaseVersion('5.0');
applet_acelerometro.inject('applet_container_acelerometro', 'preferHTML5');
});
});
</script>
scale: 0.7019,O parámetro showFullscreenButton permite ocultar ou amosar o botón para ver en pantalla completa o applet.
showFullscreenButton: true,O parámetro appletOnLoad permite executar unha función de javascript xusto despois de cargar o applet.
appletOnLoad: function() {
},Podes consultar o listado completo de parámetros do obxecto GGBApplet aquí:
https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters
window.addEventListener("deviceorientation", actua, true);
function actua(parametro) {
var beta = parametro.beta;
var gamma = parametro.gamma;
var alpha = parametro.alpha;
}Finalmente as etiquetas html tamén serán as mesmas que as do primeiro exemplo, a única diferencia e que novamente utilizaremos palabra acelerometro como identificador.
<!-- Esta etiqueta vai conter o applet aínda que ao proncipio só ten unha imaxe do mesmo e un botón para cargalo -->
<div class="applet geogebra" id="applet_container_acelerometro">
<img class="previous" src="acelerometro.png" alt="">
<div class="loader">
<span>Pulsa para cargar a construcción en Geogebra</span>
</div>
</div>