Diferencia entre revisiones de «Referencia:Incrustación de Aplicaciones GeoGebra»
Línea 4: | Línea 4: | ||
{{Note|1=Para incorporar una hoja dinámica a una página web, se cuenta con la opción | {{Note|1=Para incorporar una hoja dinámica a una página web, se cuenta con la opción | ||
[[Menú Archivo#Comparte|Archivo > Comparte...]] para copiar el código - ''embed code'' - a incrustar en el correspondiente destino.<br> El método a describir, de mayor flexibilidad, propicia una integración más profunda.}} | [[Menú Archivo#Comparte|Archivo > Comparte...]] para copiar el código - ''embed code'' - a incrustar en el correspondiente destino.<br> El método a describir, de mayor flexibilidad, propicia una integración más profunda.}} | ||
− | =Incrustar | + | =Incrustar vía [[Referencia:JavaScript|JavaScript]]= |
− | + | Con [[Referencia:JavaScript|JavaScript]] se pueden incrustar fácilmente Aplicaciones GeoGebra en un sitio web e interactuar con [http://wiki.geogebra.org/es/Referencia:JavaScript JavaScript API]. | |
− | Aquí | + | Aquí se listan ejemplos de páginas web con applets incrustados: |
* [http://dev.geogebra.org/examples/html/example2.html Live demo] | * [http://dev.geogebra.org/examples/html/example2.html Live demo] |
Revisión del 20:03 19 dic 2019
Página en proceso de traducción. |
El método a describir, de mayor flexibilidad, propicia una integración más profunda.
Incrustar vía JavaScript
Con JavaScript se pueden incrustar fácilmente Aplicaciones GeoGebra en un sitio web e interactuar con JavaScript API. Aquí se listan ejemplos de páginas web con applets incrustados:
Se necesita incluir las siguientes tres partes en el archivo HTML:
1 La librería javascript deployggb.js se incluye con la siguiente etiqueta:
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
2 Crea elementos en los cuales incrustar los applets
<div id="applet_container1"></div> <div id="applet_container2"></div>
3 Configura e inserta los applets
<script> var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true); var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showToolbar":true}, true); window.addEventListener("load", function() { applet1.inject('applet_container1'); applet2.inject('applet_container2'); }); </script>
El 'snippet' que está aquí arriba, incrusta un applet dado por su ID y una dada URL y lo incorpora dentro de elementos con ID 'applet_container1' y 'applet_container2' respectivamente (el elemento ID se pasa al método 'inject') . Para uso fuera de línea, es necesario especificar el archivo utilizando un base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).
When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform. Optionally you can override these settings by passing them in the parameters. See Reference:Applet_Parameters for the list of all parameters.
In the example the parameter "showToolbar":true
overrides the material setting from the file.
Examples
- Single applet
- Single applet 3D
- Two applets
- Single applet + API
- Two applets + API
- Single applet + API for saving
- Apps with toolbar
- Apps with toolbar in a popup dialog
- Event listeners
- Communication between applets
- Exercise (beta)
Offline and Self-Hosted Solution
We suggest you use use Math Apps from our CDN (cdn.geogebra.org) as shown above, but in case you need to use the materials offline or host all the necessary file yourself you can do so using the Math Apps Bundle. Download Math Apps Bundle The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
<script src="GeoGebra/deployggb.js"></script>
and you need to include the following two lines below the definition of applet2
applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/'); applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');