Difference between revisions of "Tutorial:Creating HTML5 documents with GeoGebraWeb"

From GeoGebra Manual
Jump to: navigation, search
(removed "offline" information (wrong) and tidied)
 
(7 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
== GeoGebraWeb Applets==
 
== GeoGebraWeb Applets==
  
−
With GeoGebra 4.2 we have introduced pure HTML5 GeoGebra documents. This way GeoGebra applets start even faster than before, and this technology provides availability of GeoGebra for smartphone users as well since Java is no longer a prerequisite. The main advantage is that GeoGebra runs on a wider set of hardware at a more comfortable speed, but to harness all the possibilities one should always use the latest web browsers. In short, we call this technology ''GeoGebraWeb'', and the documents created by this method are called ''GeoGebraWeb Applets''.
+
With GeoGebra 4.2 we have introduced pure HTML5 GeoGebra documents. This way GeoGebra applets start even faster than before, and this technology provides availability of GeoGebra for tablet users as well since Java is no longer a prerequisite.
 
<div style="overflow: auto;">
 
<div style="overflow: auto;">
 
<div style="float:right;">
 
<div style="float:right;">
Line 7: Line 7:
 
</div>
 
</div>
  
−
There are two types of GeoGebraWeb Applets: ''online'' and ''offline''. Online documents are usually on GeoGebra; and offline documents are usually put on intranet servers by members of the GeoGebra community, or even on the end users' own machine.
+
GeoGebra automatically detects a user's web browser and decides if it is running on a tablet, and serves the document in HTML5 format. Hence we strongly suggest to upload all your documents to GeoGebra if you want to publish teaching materials. This has a great advantage: they will work when viewed on a desktop computer or a tablet.
  
−
=== Online documents ===
+
The best way is to use the iframe version that you get get from GeoGebra by clicking on the "Embed" button on the teacher page:
−
 
+
<pre>
−
We suggest using online documents everywhere! GeoGebra automatically detects a user's web browser and decides if it is running on a smartphone, and serves the document in GeoGebraWeb format. Hence we strongly suggest to upload all your documents to GeoGebraWeb if you want to publish teaching materials. This has a great advantage: GeoGebra will always show the latest GeoGebraWeb document when a user wants to visit it on their smartphone.
+
<iframe scrolling="no"
−
 
+
src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false"
−
==How GeoGebraWeb works==
+
width="1600px"
−
 
+
height="715px"
−
GeoGebraWeb consists of a set of files which can be downloaded manually from http://dev.geogebra.org/download/web/GeoGebraWeb-latest.zip. However, these files are not intended for end users. For those who are still interested in the internal details, and want to tweak the HTML files, we provide some additional information here.
+
style="border:0px;">
−
 
+
</iframe>
−
An HTML document may contain several GeoGebraWeb documents. The HTML file should look something like this:
+
</pre>
  
 +
If you add '''<code>/at/preferhtml5</code>''' then the HTML5 version will be served except on very old browsers (eg IE6, IE7, IE8):
 
<pre>
 
<pre>
−
<script type="text/javascript" language="javascript" src="http://www.geogebra.org/web/4.2/web/web.nocache.js"></script>
+
<iframe scrolling="no"
−
<article class="geogebraweb" data-param-width="600" data-param-height="400"
+
src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false/at/preferhtml5"
−
data-param-showResetIcon="false" data-param-enableLabelDrags="false" data-param-showMenuBar="false"
+
width="1600px"
−
data-param-showToolBar="false" data-param-showAlgebraInput="true" enableLabelDrags="true"
+
height="715px"
−
data-param-ggbbase64="UEsDBBQACAAIAHOOh0AAAAAAAAAAAAAAAAAWAA...=="></article>...
+
style="border:0px;">
 +
</iframe>
 
</pre>
 
</pre>
−
 
−
Here we omit the beginning and closing parts of a typical HTML file and focus only the GeoGebraWeb parts. First of all, the GeoGebraWeb source must be loaded. For online documents the '''src''' must be '''http://www.geogebra.org/web/4.2/web/web.nocache.js''', for offline documents its correct setting is '''web/web.nocache.js'''. The '''data-param-width''' and '''data-param-height''' settings should be the desired applet size in pixels. The other parameters are direct settings for GeoGebraWeb. Finally, the '''data-param-ggbbase64''' setting must contain the .ggb file in base64 encoding (as generated by GeoGebra).
 
−
 
−
If you are a web developer, you can learn even more on this technology on the [http://dev.geogebra.org/trac/wiki/GeoGebraWeb GeoGebra Developer Site].
 
  
 
[[Category:Advanced Tutorials]]
 
[[Category:Advanced Tutorials]]
−
[[es:Creando Documentos HTML5 con GeoGebraWeb]]
 
−
[[it:Tutorial:Creare documenti HTML5 con GeoGebraWeb]]
 
−
[[fr:Tutoriel:Créer_un_document_Html5_avec_GeoGebraWeb]]
 

Latest revision as of 15:55, 29 November 2019

GeoGebraWeb Applets

With GeoGebra 4.2 we have introduced pure HTML5 GeoGebra documents. This way GeoGebra applets start even faster than before, and this technology provides availability of GeoGebra for tablet users as well since Java is no longer a prerequisite.

GeoGebra automatically detects a user's web browser and decides if it is running on a tablet, and serves the document in HTML5 format. Hence we strongly suggest to upload all your documents to GeoGebra if you want to publish teaching materials. This has a great advantage: they will work when viewed on a desktop computer or a tablet.

The best way is to use the iframe version that you get get from GeoGebra by clicking on the "Embed" button on the teacher page: 

<iframe scrolling="no"
src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false"
width="1600px"
height="715px"
style="border:0px;">
</iframe>

If you add /at/preferhtml5 then the HTML5 version will be served except on very old browsers (eg IE6, IE7, IE8): 

<iframe scrolling="no"
src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false/at/preferhtml5"
width="1600px"
height="715px"
style="border:0px;">
</iframe>
Retrieved from "http://wiki.geogebra.org/s/en/index.php?title=Tutorial:Creating_HTML5_documents_with_GeoGebraWeb&oldid=58994"
© 2020 International GeoGebra Institute