da PGB, cose serie... e meno serie.
PGB's - serious stuff... & lesser one.

 
  • Increase font size
  • Default font size
  • Decrease font size
Home Blog (weB LOG) Informatica e computer jsMath, formule matematiche sulle tue pagine web
jsMath, formule matematiche sulle tue pagine web

jsMath, formule matematiche sulle tue pagine web

E-mail Stampa PDF

Il sito web di jsMathCara?! Mi è venuta voglia di... mettere formule matematiche di una certa complessità sul mio sito web.

Mi sono chiesto come si faccia a metterle online, dato che l'html non consente di rappresentarle bene, a parte quelle immediate tipo y = ax2 + bx + c (Wow! Parlo per parabole! Sono un incrocio fra Gesù e SKY TV!).

Raccattando un po' di materiale sul uorld uàid uèb (world wide web, la rete vasta quanto il mondo - o Internet) ho scoperto che l'argomento è stato affrontato (e continua ad esserlo) da diverse persone e che le soluzioni sono numerose.

La più semplice è scrivere la formula con un programma apposito e mettere un'immagine della formula nel punto del documento dove va posizionata. Svantaggi: quando ridimensiono i caratteri l'immagine resta tale, e viene un brutto lavoro. Se poi dovessi salvare il documento per consultarlo in seguito, mi devo salvare tutta la cartella col file html e le immagini. Se mi accorgo che la formula è sbagliata, devo riaprire il programma, ri-esportare l'immagine, ri-trasferire l'immagine... un lavoraccio!

Qualcuno sta cercando di standardizzare un linguaggio (il MathML, se non sbaglio...) ma a parte i soliti brauser noti che lo supportano nativamente (ma hanno bisogno comunque di istallare i caratteri appositi per la visualizzazione), la maggior parte necessitano di un programma esterno aggiuntivo (un plàghìn, o plugin) che visualizzi più o meno correttamente il risultato. In alternativa ci sono soluzioni commerciali (cioé a pagamento), ossia software che creano loro le pagine web con le formule. Siccome gratis è meglio, non le prendiamo nemmeno in considerazione.

Per rimanere in ambito gratuito, utilizzando Openoffice ed il suo editor di formule, ho notato che la sintassi somiglia molto a quella del LaTeX1 (o latech, clicca qui per saperne di più), un "sistema di preparazione di documenti" non visuale ma tipografico2, che ho imparato ad usare per qualche tempo fa...

Contemporaneamente ho scoperto che esiste un progetto, chiamato jsMath (clicca qui per saperne di più), che si propone di visualizzare nelle pagine web le formule scritte con la sintassi del LaTeX, sfruttando il linguaggio javascript per renderizzarle3 ed incorporarle nei documenti html, consentendo la scalabilità delle stesse (ingrandimenti o riduzioni).

Per ora l'ho installato sul mio server. E cosa fa? Per esempio mi stampa:

\( \tan \frac{\beta}{2}= \pm \sqrt {\frac{1-\cos \beta}{1 + \cos \beta}} = \frac{\sin \beta}{1 + \cos \beta} = \frac{1 - \cos \beta}{\sin \beta}\)

anziché:

tan(β/2) = ±√((1-cosβ)/(1+cosβ)) = sinβ/(1+cosβ) = (1-cosβ)/sinβ

Non vi sembra parecchio ganzo? A me sì! A voi? Sì! No! Boh!? Vabbeh... Ma come si usa?

Innanzitutto distinguiamo fra utenti ed autori: i primi al massimo possono istallare i caratteri LaTeX (clicca qui per scaricarli) per velocizzare la visualizzazione ed abilitare il  javascript nel proprio browser (ops... volevo dire brauser) e... stare a guardare. I secondi dovranno istallare nel proprio server  i file di jsMath , che funziona in due modi:

a) sfruttando l'applicazione ed i caratteri che risiedono sul proprio server;

b) sfruttando solo l'applicazione jsMath (che risiede nel proprio server) ma i caratteri li pesca da un'altra parte.

Nel primo caso si copiano le cartelle scompresse dei pacchetti di installazione - fra cui l'applet (la parte scritta in javascript che si occupa di visualizzare le formule) e i caratteri (o fonts) - nella cartella del proprio sito del server che la ospita. I caratteri occupano diverso spazio (80 megabàit), quindi faranno così quelli che in un certo senso se lo possono permettere (in termini du spazio, banda e pazienza).

Nel secondo caso, se non si dispone di spazio sul server, si utilizza solo l'applet che fa riferimento ad un sito dove le suddette cartelle ci sono già in modo che quando il brauser incontra una formula si collega a questo sito per visualizzarla correttamente (ma è più lento).

In entrambi i casi è consigliato - ma non indispensabile - istallare sul proprio sistema operativo i caratteri LaTeX usati da jsMath, per velocizzare la visualizzazione. 

Sulle proprie pagine HTML si mette nella sezione head l'istruzione che carica l'applet e poi si scrivono le equazioni nella pagina con la sintassi del LaTeX e il giochino è fatto (vedi più avanti).

Come lo faccio convivere su Joomla!? Per questo ringrazio Mario Luciani (clicca qui per aprire il suo sito web) che ha portato il sole su due o tre punti nebbiosi. Scrivo la lista di operazioni da compiere, in modo semplice e - spero - intelligibile per tutti. Io ho optato per la soluzione a) e quindi la lista si riferisce a questo tipo di installazione.

1) Scaricare i pacchetti di jsMath dal sito web (jsMath e jsMath Image fonts) e scomprimerli.

2) Modificare il file load.js che si trova sotto la cartella jsMath/easy scrivendo alla voce root:=""  fra le virgolette l'indirizzo della cartella di jsMath sul vostro server. Se per esempio il vostro sito ha indirizzo "www.miosito.it" e intendete copiare la cartella di jsMath sulla cartella principale, la modifica risulerà root="http://www.miosito.it/jsMath". Salvate le modifiche.

3) Copiare la cartella scompressa jsMath sul proprio server in un posto quasiasi (meglio se facilmente raggiungibile, per esempio nella cartella principale).

4) Copiare la cartella "fonts" del pacchetto jsMath Image Fonts sotto la cartella jsMAth nel server (ci vorrà tempo).

A questo punto tutto è pronto per funzionare. Potete fare una prova digitando l'indirizzo http://www.miosito.it/jsMath/test (inteso come spiegato al punto 2. Se nella pagina che si apre vedete le formule e il messaggio in verde "jsMath appears to be working" allora è andato tutto liscio.

5) Modificare il file index.php del template di Joomla! utilizzato per il proprio sito (nel server sotto la cartella col nome del template sotto la cartella  della cartella di Joomla! "template") aggiungendo nella sezione HEAD (fra i marcatori <HEAD> e </HEAD>) l'istruzione per caricare jsMath: <script type="javascript/text" src="http://www.miosito.it/jsMath/easy/load.js"></script> e salvare le modifiche (indirizzo inteso come spiegto al punto 2).

6) scrivere le formule da visualizzare fra i segni di apertura \( e di chiusura \), oppure fra i marcatori <span></span> per visualizzarle in linea al testo o <div></div> per visulaizzarle a capo.

Questo dovrebbe essere tutto...

--*--

1. LaTeX: no, non sono feticista del lattice! Si tratta di un acronimo (t.p.c. - ah ah ah...) che sta per LAmport TeX, dove il TeX (pronuciato tèch, come in greco) è il sistema di composizione del documento e il sig. LAmport ne è il creatore. E' un sistema WYSIWYM, o uòt iù sii is uòt iù min e cioè "quello che vedi e quello che intendi (vedere)".

2. in parole semplici un editor (o anche elaboratore...) visuale è quello in cui man mano che si scrive o modifica il documento si vedono subito le correzioni e il risultato. Come fa per esempio Word di Microsoft Office o Write di Openoffice. Un elaboratore non visuale accetta un file con il testo e le "istruzioni" di come dovrà stamparlo e poi al momento della sua compliazione (lavora come un linguaggio di programmazione a tuti gli effetti) viene creato il risultato. Gli elaboratori visuali sono anche detti WYSIYWG, acronimo di uòt iù sii it iù uill ghèt ossia "ciò che vedi è quello che otterrai" (What You See It You Will Get)... forse. Il "tipografico" si riferisce alle regole di impaginazione che tale sistema possiede, che offrono un risultato molto gradevole alla vista e decisamente professionale.

3. termine italianizzato dall'inglese "render"che significa "interpretare" e/o "tradurre" e viene usato negli applicativi di grafica tridimensionale quando si tratta di ricostruire la scena creata per vedere come è venuta o renderla verosimile.