GeoGebra, geometría, álgebra, estadística y cálculo

GeoGebra es una aplicación de matemáticas interactiva que combina geometría, álgebra, estadística y cálculo

GeoGebra Web — Guía completa

GeoGebra está disponible en geogebra.org sin necesidad de instalar nada. Aquí tienes todo lo que necesitas saber:

1. Acceso y cuenta

Entra a geogebra.org y puedes usarlo directamente como invitado, aunque crear una cuenta gratuita te permite guardar y compartir tus trabajos. El registro es con email o cuenta de Google/Microsoft.

2. Las aplicaciones disponibles en la web

GeoGebra no es una sola herramienta, sino un conjunto de apps. Desde el menú principal puedes elegir:

Calculadora Gráfica — graficar funciones 2D, encontrar intersecciones, 
                        máximos/mínimos

Geometría — construcciones geométricas con compás y regla virtual

Álgebra 3D — superficies y sólidos en tres dimensiones

CAS (Computer Algebra System) — álgebra simbólica, derivadas, integrales, 
                        factorización

Hoja de Cálculo — combinar datos con gráficas

Probabilidad y Estadística — distribuciones, histogramas, regresiones

Calculadora Científica — calculadora avanzada

3. Interfaz general

La interfaz tiene tres zonas principales:

la Vista Algebraica (izquierda, donde aparecen las ecuaciones y objetos definidos),

la Vista Gráfica (centro/derecha, el plano o espacio visual) y

la Barra de Herramientas (arriba, con las herramientas de construcción).

Puedes mostrar u ocultar cada panel desde el menú Vista.

4. Cómo ingresar expresiones

Escribes directamente en la barra de entrada (parte inferior o lateral). Algunos ejemplos:

f(x) = x^2 + 3x - 1 → grafica una parábola
y = 2x + 1 → recta
x^2 + y^2 = 25 → circunferencia
Derivada(f) → calcula la derivada
Integral(f, 0, 3) → integral definida
A = (2, 3) → define un punto

5. Herramientas de la barra superior

Las herramientas están agrupadas. Al hacer clic en el triángulo de cada ícono se despliegan variantes. Las más usadas son: Punto, Recta, Segmento, Circunferencia, Mover (flecha), Deslizador e Intersección.

6. Deslizadores (Sliders)

Son uno de los elementos más poderosos. Permiten crear parámetros animados. Por ejemplo, defines a = 1 como deslizador y luego graficas f(x) = a*x^2, y al mover el deslizador ves cómo cambia la parábola en tiempo real. Se crean con la herramienta Deslizador o escribiendo simplemente una letra en la barra de entrada.

7. Guardar y compartir

   Guardar en la nube: necesitas cuenta, usas Archivo → Guardar

   Descargar: puedes exportar como archivo .ggb para usar offline

   Compartir: GeoGebra genera un enlace o puedes incrustar la actividad en una web con el código de embed

   GeoGebra Classroom: si eres docente, puedes enviar actividades a estudiantes y ver su progreso en tiempo real

8. Recursos para aprender

   geogebra.org/learn — tutoriales oficiales en video

   GeoGebra Materials — millones de actividades creadas por la comunidad que puedes explorar y reutilizar

   La ayuda contextual aparece al pasar el cursor sobre cualquier herramienta

9. Alternativas open source completamente independientes

Si quieres cero dependencia de GeoGebra, existen bibliotecas que hacen cosas similares: Para geometría y gráficas:

JSXGraph — jsxgraph.uni-bayreuth.de, completamente open source (LGPL), muy potente para geometría dinámica e interactiva. Es la alternativa más cercana a GeoGebra. Es probablemente la opción más interesante si quieres independencia total y funcionalidad comparable.

Self-hosted (independiente total): Descarga los archivos desde jsxgraph.uni-bayreuth.de/distrib/ y colócalos en static/js/jsxgraph/.

a. Añadirlo a la plantilla base de Zola. En templates/base.html, dentro del o antes de :

    html{% if page.extra.jsxgraph %}
    <link rel="stylesheet" href="/js/jsxgraph/jsxgraph.css">
    <script src="/js/jsxgraph/jsxgraphcore.js"></script>
    {% endif %}

Así la librería solo se carga en las páginas que la necesiten. En el frontmatter de esa página pones:

    toml
    +++
    title = "Mi lección de geometría"
    [extra]
    jsxgraph = true
    +++

    Crear un shortcode reutilizable

b. Crea templates/shortcodes/jsxgraph.html:

html

    <div id="{{ id }}" class="jxgbox"
    style="width: {{ width | default(value='100%') }}; height: {{ height | default(value='400px') }};">
    </div>
    <script>
    (function() {
    var board = JXG.JSXGraph.initBoard('{{ id }}', {
        boundingbox: [{{ bbox | default(value='[-5, 5, 5, -5]') }}],
        axis: {{ axis | default(value='true') }},
        grid: {{ grid | default(value='true') }},
        showNavigation: {{ nav | default(value='true') }}
    });

    {{ code }}
    })();
    </script>
    

    ---

    ### 4. Usarlo en Markdown
    ```
    Ejemplo graficando una parábola:
    
    { { jsxgraph(id="board1", code="
    var f = board.create('functiongraph', [function(x){ return x*x; }], {strokeColor: '#e74c3c', strokeWidth: 2});
    ") }}
    

    Ejemplo con un triángulo interactivo:
    
    { { jsxgraph(id="board2", bbox="[-2, 8, 8, -2]", code="
    var A = board.create('point', [0, 0], {name:'A', color:'blue'});
    var B = board.create('point', [5, 0], {name:'B', color:'blue'});
    var C = board.create('point', [2, 4], {name:'C', color:'blue'});
    var tri = board.create('polygon', [A, B, C], {fillColor:'#3498db', fillOpacity:0.3});
    ") }}
    ```

c. CSS para hacerlo responsivo. En tu archivo sass/ o CSS:

css.jxgbox {
max-width: 100%;
touch-action: none; /* importante para móviles */
border: 1px solid #ddd;
border-radius: 4px;
}

d. Ejemplos de lo que puedes hacer con JSXGraph

Función con deslizador:

javascriptvar a = board.create('slider', [[1, 4], [4, 4], [-3, 1, 3]], {name:'a'});
var f = board.create('functiongraph', [function(x){ return a.Value()*x*x; }]);

Circunferencia con radio dinámico:
javascriptvar c = board.create('circle', [[0,0], [3,0]], {strokeColor:'#27ae60'});

Tangente a una curva:
javascriptvar f  = board.create('functiongraph', [function(x){ return Math.sin(x); }]);
var p  = board.create('glider', [1, 0, f]);
var t  = board.create('tangent', [p], {strokeColor:'red'});
```

---

### Estructura final del proyecto
```
mi-sitio-zola/
├── static/
│   └── js/
│       └── jsxgraph/
│           ├── jsxgraphcore.js
│           └── jsxgraph.css
├── templates/
│   ├── base.html
│   └── shortcodes/
│       └── jsxgraph.html
└── content/
    └── leccion-geometria.md

Con esto tienes una integración completamente independiente, reutilizable y que solo carga la librería cuando la necesitas.

Te muestro una comparativa directa para que veas las equivalencias:

Objetos básicos GeoGebra/JSXGraph

A = (2, 3)
board.create('point', [2, 3], {name:'A'})

Segmento(A, B)
board.create('segment', [A, B])

Recta(A, B)
board.create('line', [A, B])

Circunferencia(A, B)
board.create('circle', [A, B])

Polígono(A, B, C)
board.create('polygon', [A, B, C])

Funciones y cálculo

GeoGebra/JSXGraph

f(x) = x^2 + 1
board.create('functiongraph', [x => x**2 + 1])

Derivada(f)
board.create('functiongraph', [x => 2*x]) (manual o con math.js)

Integral(f, a, b)
board.create('integral', [[a, b], f])

Tangente(punto, f)
board.create('tangent', [punto])

Transformaciones y construcciones

GeoGebra/JSXGraph

Mediatriz(A, B)
board.create('perpendicularbisector', [A, B])

Bisectriz(A, B, C)
board.create('bisector', [A, B, C])

Perpendicular(recta, punto)
board.create('perpendicular', [recta, punto])

Paralela(recta, punto)
board.create('parallel', [recta, punto])

Punto Medio(A, B)
board.create('midpoint', [A, B])

Deslizadores y animación

GeoGebra 
Deslizador a con rango [-3, 3]

JSXGraph
board.create('slider', [[x1,y1],[x2,y2], [-3, 1, 3]], {name:'a'})

GeoGebra 
Animar (botón play)

JSXGraph
slider.startAnimation()

La diferencia conceptual más importante. En GeoGebra escribes de forma declarativa y matemática, casi como en un libro:

f(x) = x^2
A = (2, 3)
Mediatriz(A, B)

En JSXGraph escribes de forma programática en JavaScript:

javascriptvar f = board.create('functiongraph', [x => x**2]);
var A = board.create('point', [2, 3]);
var m = board.create('perpendicularbisector', [A, B]);

¿Cómo suavizar la diferencia? Puedes crear una capa de abstracción propia en JavaScript que imite la sintaxis de GeoGebra. Por ejemplo, un pequeño helper en tu proyecto:

javascriptconst ggb = {
point: (b, x, y, name) => b.create('point', [x, y], {name}),
segment: (b, A, B) => b.create('segment', [A, B]),
circle: (b, center, point) => b.create('circle', [center, point]),
f: (b, fn) => b.create('functiongraph', [fn]),
};

// Y lo usas así, más parecido a GeoGebra:
const A = ggb.point(board, 2, 3, 'A');
const f = ggb.f(board, x => x**2);

En resumen: la lógica matemática es la misma, pero la sintaxis es más verbosa y orientada a JavaScript.