ESTENSIONE DEL PROGETTO DRAGMATH, VERSO UN EQUATION EDITOR PER IL WEB

Transcript

1 ESTENSIONE DEL PROGETTO DRAGMATH, VERSO UN EQUATION EDITOR PER IL WEB Giuseppe Fiorentino 1, Samuele Scatena 2 1 Accademia Navale di Livorno giuseppe_fiorentino@marina.difesa.it 2 Dipartimento di Informatica Università di Pisa samuele.scatena@gmail.com 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 Livorno 2012 ISBN

2 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

3 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

4 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

5 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: [3] Sito del progetto LaTeX: [4] Sito del TeX Users Group (TUG): [5] Sito del Progetto tinymce: [6] Sito del Progetto htmlarea: [7] Sito del progetto Coco/R: MoodleMoot Italia