14-ESTENSIONE DEL PROGETTO DRAGMATH

ESTENSIONE DEL PROGETTO DRAGMATH,
VERSO UN EQUATION EDITOR PER IL WEB
Giuseppe Fiorentino1, Samuele Scatena2
1
Accademia Navale di Livorno
[email protected]
2
Dipartimento di Informatica Università di Pisa
[email protected]
FULL PAPER
ARGOMENTO: Aspetti tecnici – Tecnologie Web
Abstract
L’editor integrato in Moodle permette la composizione delle pagine senza richiedere la
conoscenza del HTML, generato in modo del tutto trasparente. Analogamente, il suo
plugin DragMath consente di comporre graficamente anche le equazioni evitandone la
codifica in LaTeX. L’applet, però, non consente di rieditare le formule generate perché
non prevede la possibilità di ripartire dal codice LaTeX. Questa mancanza ne limita
fortemente l’uso perché, per modificare le equazioni, impone la conoscenza del LaTeX o
la loro riscrittura. È stata realizzata un’estensione di DragMath che permette il passaggio
inverso, rendendo possibile ripartire dal codice LaTeX presente nella pagina, riottenere la
rappresentazione grafica, modificarla ulteriormente con DragMath e quindi salvare la
nuova codifica. L’applicazione è completa e se ne illustra l’integrazione con Moodle. Il
risultato ottenuto rappresenta un primo passo verso un “equation editor per il web”, in
grado di gestire le equazioni in modo trasparente relegandone la codifica (in LaTeX o
altro) a una semplice “rappresentazione interna”.
Keywords: Plugin per Moodle, tecnologia, progetti di ricerca.
1
INTRODUZIONE
La gestione delle equazioni nelle pagine web è ancora un’operazione non banale. Nell’attesa che uno
standard come MathML [2] si affermi e sia supportato dai browser più diffusi, si sta imponendo una
soluzione che prevede due fasi. Nella fase di authoring, si incorpora nella pagina la codifica LaTeX [3]
(il linguaggio di markup che si basa sul programma di composizione tipografica TeX [4])
dell’equazione, demandando alla successiva fase di rendering, spesso implementata sul lato server,
la trasformazione di questa nell’immagine (GIF o PNG) che la rappresenta.
1.1
Il limite del LaTeX per il web
Il LaTeX, com’è noto, è un linguaggio di markup di tipo testuale/descrittivo; quest’aspetto, tutt’altro che
secondario, costringe chi desidera utilizzare le equazioni per il web a impadronirsi di un “nuovo
linguaggio” per poterle codificare correttamente, anche quando si utilizzano degli editori grafici per
comporre le pagine (come il TinyMCE, adottato dalle ultime versioni di Moodle).
Tale difficoltà ha limitato l’uso del web per i contenuti matematici ai pochi “iniziati” che conoscono il
LaTeX, impedendo di fatto ogni possibilità di interazione alla pari tra docenti e studenti, poiché non è
realistico pensare di aggiungere tale fardello sulle spalle di questi ultimi (soprattutto se nella fascia di
età scolastica).
La soluzione alternativa, che prevede l’uso di un programma di videoscrittura per la composizione
delle pagine (passando magari per la generazione del codice HTML), spesso produce delle pagine
con uno stile difforme da quello adottato dal sito che le contiene e, talvolta, richiede un laborioso
upload delle immagini generate (una per ogni equazione presente nella pagina).
G. Fiorentino (Ed) – MoodleMoot Italia 2012 - Livorno – 2012 – ISBN 978-88-907493-0-8
1.2
DragMath
Un passo significativo per rendere accessibile a tutti l’inserimento delle equazioni in una pagina web è
stato l’adozione di plugin specializzati come DragMath, un piccolo editore visuale di equazioni scritto
in Java e facilmente integrabile negli editor online. Con tale strumento è possibile comporre
graficamente anche le equazioni, ottenendo alla fine il codice LaTeX da inserire nella pagina. Questa
soluzione è adottata da importanti piattaforme come Moodle e Wikipedia, giusto per citarne due.
Il punto debole di quest’approccio è costituito dal fatto che DragMath non prevede la trasformazione
inversa, ossia il passaggio dal LaTeX alla sua rappresentazione grafica editabile. Per tale motivo, se
si vuole modificare un’equazione, è necessario o agire direttamente sul codice LaTeX (sapendo cosa
si sta facendo) o sostituirlo completamente, ricomponendo l’equazione daccapo.
1.3
Oltre DragMath
Si presenta un’estensione di DragMath che rende possibile il passaggio inverso indicato nel paragrafo
precedente. Il sistema ottenuto aggiunge la possibilità di ripartire dal codice LaTeX presente sulla
pagina, riottenere la rappresentazione grafica all’interno di DragMath per modificarla ulteriormente e
quindi salvare la nuova codifica LaTeX nella pagina, pronta per essere elaborata dal filtro per la
notazione matematica.
1.4
Outline
Nei paragrafi successivi si illustra il processo di sviluppo dell’estensione, riportando le principali
difficoltà incontrate e le soluzioni adottate. Se ne presenta poi l’integrazione in Moodle mostrando il
passaggio del codice LaTeX e la segnalazione degli eventuali errori presenti. L’ultimo paragrafo prova
a tirare le somme sul risultato ottenuto e traccia le linee di un ulteriore sviluppo per ottenere un
“equation editor per il web”.
2
SVILUPPARE PER MOODLE
Agli occhi dello sviluppatore, Moodle e tutto quanto gli è necessario per il suo corretto funzionamento,
dal sistema operativo ai pacchetti software con cui interagisce, può essere visto come un complesso
ambiente di sviluppo. Modificare o creare estensioni per Moodle richiede la padronanza di una vasta
gamma di linguaggi di programmazione e di tecnologie web.
Il lavoro di progettazione di una qualsiasi di queste “feature” comporta la conoscenza approfondita
della gerarchia di progettazione della piattaforma. Essa può essere assimilata a un albero i cui nodi
rappresentano le varie cartelle in cui Moodle è suddiviso. Iniziando con il discendere dalla radice
“moodle/” troviamo, per esempio, le cartelle “lib/”, “filter/” o “theme/”. Generalmente una funzionalità, o
plugin, è contenuta in una o più di queste cartelle, in funzione del lavoro che svolge. Ad esempio, il
plugin che modifica l’interfaccia grafica della piattaforma è una funzionalità tipica dei temi e andrà
sotto la directory “theme”. I plugin che interagiscono con l’utente sono posti nella cartella “lib” e, nel
nostro caso, nella sottocartella “editor”. Questo poiché l’estensione realizzata aggiunge nuove
funzionalità a un plugin già disponibile per l’editor di Moodle.
2.1
TinyMCE come plugin di Moodle
TinyMCE è l’editor integrato nelle versioni di Moodle più recenti ovvero quelle successive alla 1.9. In
precedenza, era utilizzato htmlArea [6] ma i numerosi vantaggi, tra i quali la maggiore facilità di
configurazione e customizzazione, hanno portato gli sviluppatori della piattaforma verso il più robusto
tinyMCE. La sua interfaccia grafica, è molto simile a quella del pacchetto Word di Office e, com’è
possibile vedere in Figura 1, permette l’editing di testi in maniera semplice e completa. Ogni pulsante
visibile nell’interfaccia rappresenta un plugin utilizzabile all’interno dell’editor. Per esempio, il pulsante
con il simbolo della “pellicola” è quello relativo al plugin che inserisce i contenuti multimediali nella
pagina, mentre quello con il simbolo di “radice di beta”, rappresenta il nostro plugin discusso nei
paragrafi successivi.
MoodleMoot Italia 2012
2
Figura 1 – L’editor di Moodle, il tinyMCE
3
L’ESTENSIONE DI DRAGMATH
Nel paragrafo precedente abbiamo introdotto l’organizzazione della piattaforma di Moodle e il suo
editor di default, il tinyMCE. Discuteremo ora del lavoro svolto per estendere DragMath e dei risultati
ottenuti. DragMath è un ottimo strumento per inserire le espressioni matematiche nei documenti web:
consente la composizione grafica (WYSIWYG) nella fase di authoring, salvando nella pagina il
corrispondente codice LaTeX come un formato intermedio. Successivamente, quando la pagina viene
servita, il LaTeX è convertito nella corrispondente immagine (GIF o PNG) dai “filtri” attivi sul lato
server (ne è un esempio quello della notazione matematica presente in Moodle).
DragMath si presenta all’utente come un applet Java nella cui interfaccia è possibile riconoscere gli
elementi matematici più comuni, dai semplici operatori aritmetici a quelli specialistici organizzati
razionalmente in più schede. L’utente “assembla” l’espressione trascinando i vari elementi utili dalle
schede alla formula in costruzione, come mostrato in Figura 2.
Figura 2 – Una schermata di DragMath
Alla fine, DragMath genera il codice LaTeX dell’equazione liberando l’utente dalla conoscenza di tale
formalismo. Il processo descritto è però unidirezionale: chiuso DragMath e salvato il codice LaTeX
nella pagina, l’utente non può utilizzare l’editor grafico per modificare l’equazione perché non è
previsto il passaggio inverso, dal codice LaTeX alla rappresentazione grafica interna del plugin.
Questo è un forte limite poiché anche un piccolo errore commesso nella fase di composizione grafica
costringe l’utente a rifare tutto daccapo. L’estensione realizzata permette invece di (ri)partire dal
codice LaTeX già presente sulla pagina.
3.1
DragMath “visto dall’interno”
Nel paragrafo precedente, abbiamo richiamato, in maniera molto sintetica e descrittiva, il
funzionamento globale di DragMath. Proveremo ora a descrivere altrettanto sinteticamente le
operazioni svolte al suo interno. Per generare il codice LaTeX, il plugin utilizza un albero sintattico che
riflette una delle possibili semantiche sottese dalla rappresentazione grafica (la notazione matematica,
purtroppo, è irrimediabilmente ambigua). All’interno di DragMath, ogni componente matematico è
modellato da un oggetto Java che ne memorizza tutte le informazioni. Il trascinamento da parte
dell’utente di un elemento matematico, come il simbolo di addizione, provoca la creazione del
corrispettivo oggetto Java (di classe MathObject) e il suo corretto inserimento nell’albero sintattico.
MoodleMoot Italia 2012
3
L’albero è rappresentato da una struttura dati dedicata (di classe MathTree) e aggiornato a ogni nuovo
inserimento. La Figura 3 mostra la rappresentazione di un MathTree per l’espressione x+y·k.
Figura 3 – L’albero sintattico dell’espressione x+y*k
Al termine della composizione, mediante una visita ricorsiva dell’intero albero, DragMath genera il
codice LaTeX dell’equazione rappresentata. La nostra estensione si basa sul processo inverso.
3.2
L’estensione di DragMath
Avendo introdotto il funzionamento interno di DragMath, è ora più agevole presentare lo sviluppo che
è stato necessario per realizzare il passaggio dalla codifica LaTeX alla rappresentazione interna di
DragMath. Quello che segue è una sintesi un po’ per “iniziati” (informatici) degli strumenti utilizzati o
sviluppati allo scopo. La descrizione sarà necessariamente superficiale per esigenze di spazio, per i
dettagli rimandiamo il lettore alla tesi di laurea triennale in informatica [1], di cui questo plugin è stato il
frutto.
Per consentire una buona manutenibilità del codice, il problema è stato affrontato “ad alto livello”, con
tecniche proprie dei linguaggi formali e dei compilatori.
Il primo passo è stato il riconoscimento del LaTeX come un linguaggio generabile da una grammatica
LL(1), a patto di non adoperare il prodotto implicito. In tali “linguaggi” basta un unico simbolo (token)
iniziale per guidare, univocamente, il riconoscimento di tutte le strutture sintattiche.
Il secondo passo è stato quindi ottenere esplicitamente la grammatica LL(1) in grado di “produrre”
tutto il LaTeX utile. Questo passaggio, fondamentale nello sviluppo dell’intero progetto, ha richiesto la
conoscenza di tecniche specialistiche, ma ormai standard, dei linguaggi formali per ricondurre una
grammatica compatibile a una LL(1).
Ottenuta la grammatica, è stato utilizzato uno strumento di alto livello (Coco/R [7], un generatore di
compilatori) per ottenere, quasi automaticamente, uno scanner e un parser per il LaTeX.
•
Il primo è un tool in grado di suddividere la stringa del codice LaTeX nei suoi “token” essenziali,
ovvero le parti semanticamente consistenti per il linguaggio: numeri, operatori, elementi lessicali
come “\begin”, “\sum”, ecc.
•
Il secondo, a partire dalla sequenza dei token individuati dallo scanner, fa un’analisi (tecnicamente
parlando, a discesa ricorsiva) in grado di riconoscere tutte le strutture del LaTeX.
Completando lo scheletro del parser generato da Coco/R, è stato realizzato l’interprete/compilatore in
grado di produrre, per ogni struttura lessicale riconosciuta, il corrispondente sottoalbero codificato
come MathTree. Il parser, analizzando i token man mano che si presentano, segue le produzioni della
grammatica costruendo una struttura dati simile a quella prodotta da DragMath. Combinando
ricorsivamente i MathTree si perviene alla rappresentazione completa dell’equazione decodificata,
pronta per essere inviata a DragMath e ulteriormente editata.
3.3
Obiettivi raggiunti
L’estensione ottenuta consente un uso più flessibile e naturale di DragMath. L’utente può ancora
partire da zero e, composta l’equazione, inserire il corrispondente codice LaTeX nella pagina; ma ora
può anche selezionare del codice LaTeX già presente sulla pagina e poi avviare DragMath. Il testo
selezionato diventa un argomento in input al plugin che, ricevutolo, avvia il riconoscimento automatico
descritto nel paragrafo precedente.
MoodleMoot Italia 2012
4
Per facilitare l’uso del plugin e per avvicinare l’utente al LaTeX, è stata prevista anche la gestione
degli errori durante la fase di riconoscimento. Il codice selezionato potrebbe essere stato generato da
DragMath (e quindi di errori non dovrebbero essercene) ma potrebbe anche essere stato modificato o
scritto di sana pianta “a mano”, e quindi è necessario prevedere un error recovery che aiuti l’utente a
rintracciare gli errori. Nel caso in cui vi sia (almeno) un errore, un popup lo notifica all’utente
chiedendogli di scegliere se continuare con ciò che è stato possibile ricostruire, oppure tornare
all’editor per correggere l’errore. In quest’ultimo caso, con un’altra integrazione con l’ambiente
Moodle, il cursore si posiziona sul carattere che ha dato luogo al primo errore riconosciuto.
Alcune modifiche dell’editor tinyMCE e del codice di DragMath permettono di controllare che la
selezione sia sempre svolta correttamente (includendo l’intera espressione). Il codice LaTeX, infatti, è
racchiuso da delimitatori che ne marcano l’inizio e la fine; tipicamente questi sono i doppi dollari “$$”,
ma non necessariamente; il plugin memorizza i delimitatori usati e li reinserisce alla fine dell’editing.
3.4
Ulteriori estensioni
Un’interessante estensione, già in fase di realizzazione, prevede la visualizzazione in tempo reale
della codifica LaTeX dell’equazione che si va componendo. Questo consentirebbe un approccio
graduale al LaTeX, rendendo gli utenti maggiormente confidenti nell’apportare piccole modifiche “a
mano” direttamente nel codice evitando di invocare l’editor anche per piccoli ritocchi.
Com’è noto, DragMath permette di generare codice anche in altri formati, come MathML. A oggi, è
stata implementata la ricostruzione nel formato interno del solo LaTeX. Il riconoscimento degli altri
formalismi farà parte di un prossimo aggiornamento.
4
CONCLUSIONI E PROSPETTIVE
Crediamo che il plugin ottenuto semplifichi notevolmente la creazione e il mantenimento delle pagine
contenenti equazioni matematiche. La modalità di interazione semplificata consente di coinvolgere
anche gli studenti in tale attività.
Vista in prospettiva, l’estensione realizzata rappresenta un primo passo verso un “equation editor per
il web”; infatti, il risultato raggiunto lascia già intravvedere il passo successivo: far sparire la codifica
LaTeX dalle pagine web anche in fase di authoring!
Tecnologie ormai affermate come AJAX e jQuery, già operanti in Moodle, permettono di interagire col
server in modo sufficientemente sofisticato e trasparente da riuscire a generare “al volo” l’immagine
che rappresenta l’equazione (invocando un rendering sul lato server). In tal modo è possibile
visualizzare l’equazione immediatamente dopo averla composta, inoltre, “nascondendo” la codifica
dell’equazione nell’attributo “ALT” dell’immagine (come avviene su Wikipedia), sarà poi possibile
ripartire dall’immagine con un approccio simile a quello presentato. In tal modo l’utente potrebbe
ignorare completamente il LaTeX, relegato così al ruolo di “rappresentazione interna” dell’equazione
(come avviene nei word-processor). Tale sviluppo, già in corso, fornirebbe uno strumento “familiare” a
tutti quelli che sono coinvolti con la matematica e il web.
Riferimenti bibliografici/Sitografia (aggiornata al luglio 2012)
[1] Samuele Scatena, Estensione del Progetto DragMath, Tesi di Laurea Triennale in Informatica,
Pisa (2012)
[2] Sito del MathML presso il W3C: http://www.w3.org/Math/
[3] Sito del progetto LaTeX: http://www.latex-project.org/
[4] Sito del TeX Users Group (TUG): http://www.tug.org/
[5] Sito del Progetto tinyMCE: http://www.tinymce.com/
[6] Sito del Progetto htmlArea: http://www.htmlarea.com/
[7] Sito del progetto Coco/R: http://www.ssw.uni-linz.ac.at/coco/
MoodleMoot Italia 2012
5