sviluppo e progettazione di una piattaforma e-learnig

Transcript

UNIVERSITÀ POLITECNICA DELLE MARCHE
FACOLTÀ DI INGEGNERIA
Corso di Laurea in Ingegneria Informatica e dell’Automazione
DIPARTIMENTO DI ELETTRONICA,
INTELLIGENZA ARTIFICIALE
E TELECOMUNICAZIONI
SVILUPPO E PROGETTAZIONE DI UNA
PIATTAFORMA E-LEARNIG ACCESSIBILE
MEDIANTE TECNOLOGIE TOUCH-SCREEN
Laureando:
Francesco GROTTA
Relatore:
Chiar.mo Prof
Aldo Franco DRAGONI
Anno accademico 2009/2010
"La teoria è quando si sa tutto ma non funziona niente.
La pratica è quando funziona tutto ma non si sa il perché.
In ogni caso si finisce sempre con il coniugare la teoria
con la pratica: non funziona niente e non si sa il perché.”
Albert Einstein
Vorrei dedicare queste poche righe a tutti coloro che mi hanno aiutato nell’arco della
mia carriera universitaria e in particolare nello svolgimento di questo lavoro.
Un ringraziamento speciale va alla mia famiglia e ai miei genitori perché senza i loro
sforzi e sacrifici non sarei mai arrivato a questo punto della mia carriera.
Un “grazie di cuore” va a Gian Maria, Emidio e Massimo, che oltre ad essere dei
fantastici coinquilini, mi hanno supportato e, soprattutto, sopportato in questi ultimi anni
universitari ad Ancona. Grazie mille per tutto il tempo passato insieme e per la
disponibilità che avete dimostrato nei miei confronti.
Un ringraziamento particolare va al professor Aldo Franco Dragoni, sempre disponibile
e pronto in ogni momento a fornire consigli e chiarimenti.
Ringraziamenti sono doverosi anche per Assunta Maria Vecchi, che mi ha dato
l’occasione di scrivere questa tesi, ed affrontare un problema che troppo spesso viene
sottovalutato nella nostra società.
Vorrei ringraziare anche tutti i miei compagni di corso, e tutti coloro con cui ho passato
il tempo libero e che mi hanno permesso di allontanare la monotonia del lavoro e dello
studio, con indimenticabili partite multi-player al computer in notturna: i Micheli,
Gionata, Francesco, Federico, Vittorio, Umberto, Stefano detto “Batman”, Andrea.
Aggiungo a questo elenco anche tutti i miei coinquilini passati, senza di voi non sarei chi
sono oggi: Emilio, Michelangelo, Rino, Fabrizio, Fabio, Tommaso, Luca e Andrea. Grazie
infinite, senza tutti voi non ce l’avrei mai fatta.
Un grazie particolare anche a tutti coloro che non ho citato per dimenticanza, perché tutte
le persone che mi sono state vicine in tutti gli anni della mia vita sono importanti per me.
Infine, un ringraziamento immenso ai miei nonni e agli zii, perché mi hanno sempre
incoraggiato, hanno sempre creduto in me e mi hanno dato la speranza, la
determinazione e la forza di arrivare fino alla fine; in particolare, un “immenso” grazie
ed un bacione a nonna Raffaela e a nonno Nunzio dicendo loro: “Vi voglio bene”.
Indice
Introduzione
1
Capitolo 1: L’ACCESSIBILITÀ NELL’UNIVERSITÀ ITALIANA
6
1.1Disabilità ed Università
1.1.1 Human Computer Interaction
1.1.2 Interfacce MultiModali
1.2 Accessibilità ed Usabilità
1.3 Un po’ di cifre
Capitolo 2: GLI STRUMENTI HARDWARE ESOFTWARE
UTILIZZATI
7
10
12
17
18
26
2.1 L’idea Progettuale
2.2 Strumenti Hardware
2.2 Schermi Touch-screen
2.2.1 Touch-screen con tecnologia Resistiva
2.2.2 Touch-screen con tecnologia Capacitiva
2.2.3 Touch-screen con tecnologia Infrarossa
2.2.4 Touch-screen con tecnologia Onde Acustiche
2.2.5 Touch-screen con tecnologia Piezo-elettrica
2.2.6 Touch-screen “virtuali”
2.2.6.1 Low-Cost Multi-point Interactive Whiteboards Using the
Wiimote
2.2.6.2 Libreria TouchLib
2.2.6.3 Progetti Paralleli
2.2.6.4 Altri progetti
2.3 Strumenti Software
2.3.1 Linguaggi Web Lato Server
2.3.1.1 Linguaggio Php
2.3.1.1.1 GD Graphics Library
2.3.1.2 MySql
2.3.2.1 Html
2.3.2.2 Css
2.3.2.3 JavaScript
2.3.2.3.1 MathJax
2.3.2.3.2 Pixastic
2.3.2.4 Latex
2.3.2.5 MathMl
27
28
29
30
30
31
32
33
34
34
Capitolo 3: SVILUPPO PIATTAFORMA: GESTIONE ESAMI
50
3.1 Inzio Sviluppo, la scelta ………..
3.2 Database
3.2.1 Tabella “esami”
3.2.2 Tabella “Domande”
3.2.3 Tabella “Risposte”
3.2.4 Tabella “Imm_dom”
3.2.5 Tabella “Imm_risp”
3.2.6 Tabella “Salvataggi_esami”
35
36
36
37
37
37
38
39
40
40
41
42
44
45
47
48
51
53
54
56
57
58
60
61
3.2.7 Schema Database completo
3.3 Sviluppo Strumenti di Gestione
3.3.1 Home
3.3.2 Strumento Creazione Esame
3.3.2.1 Inserimento Dati Esame
3.3.2.2 Inserimento Domanda
3.3.2.2.1 Caricamento Immagini
3.3.2.2.2 Inserimento Formula
3.3.3 Strumento di Ricerca Esame
3.3.4 Strumento di Visualizzazione Esami
3.3.5 Strumento di Modifica Esame
3.3.5.1 Strumento Modifica domanda
3.3.5.2 Strumento di Cancellazione domanda
3.3.6 Strumento di Cancellazione Esame
3.3.7 Strumento di Stampa Esame
3.3.8 Strumento di Back-Up Esame
3.3.9 Strumento di Gestione Back-Up
3.3.10 Strumento di Ricerca Back-Up
Capitolo 4 SVILUPPO PIATTAFORMA: INTERFACCIA ESAMI
4.1 Strumento per lo Svolgimento degli Esami
4.1.1 File Esame_.php
4.1.2 File Javascript esame_.js
4.1.3 Javascript funzioni.js
4.1.3.1 Azione MouseOver per schermi Touch
4.1.4 Regole di stile esame_.css
4.2 Interfacce
4.2.1 Interfaccia Base
4.2.2 Interfaccia Ipovedenti
4.2.3 Interfaccia “Simon” o Alternata
4.3 Risultati
4.3.1 Tabella Riepilogativa Esame
4.3.2 Tabella Riepilogativa Domande
4.3.3 Strumenti: Salvataggio esame
4.3.4 Strumenti: Stampa risultati
4.3.5 Strumento Stampa esame
Capitolo 5: TEST DELLE INTERFACCE E CONCLUSIONI
5.1 Testing
5.1.1 Apple iPad
5.1.2 Hp TouchSmart TM2-2101SL
5.1.3 Notebook Acer Aspire 5024WLMi + Proiettore Acer X1161 per uso software
“Project Wiimote controller”
5.1.4 Tablet Android 2.3 (emulazione)
5.2 Conclusioni e Possibili Sviluppi
Bibliografia
64
65
65
66
66
67
70
73
75
76
79
81
83
84
85
86
89
90
92
93
94
97
99
100
102
103
103
106
110
112
113
114
115
115
116
118
118
119
122
124
127
130
133
3
Introduzione
Introduzione
1
Introduzione
“La potenza è nulla senza controllo…” recitava lo slogan di una nota
marca di pneumatici1. Penso che tutti abbiano visto, almeno una volta, la
famosa campagna pubblicitaria del 1994 di una nota azienda italiana di
pneumatici che ritraeva il campione olimpionico dei 100 metri pronto a
scattare dai blocchi di partenza calzando un paio di scarpe dai tacchi a
spillo…
La logica di questo pay-off pubblicitario è evidente: si può essere il
migliore tra i campioni, ma non si aumentano le prestazioni che
incrementano le proprie performance. La metafora rende bene l’idea: al di là
dell’atleta, sono anche gli strumenti che utilizza, a determinarne o meno la
vittoria.
Lo stesso può dirsi per il mondo dell’informatica: troppo spesso non ci
si rende conto che nel campo del software l’inferaccia è parte preponderante
del tutto. Oltre all’impegno di un costante aggiornamento, se non si
supporta l’utente a “comunicare” con la macchina, il software diviene
inutile rilegato a pochi e privilegiati utenti e l’hardware capace di eseguire
miliardi di calcoli al secondo, diviene improvvisamente inutile ed
impotente. Con l’avvento del mouse e dei sistemi operativi a “finestre”,
l’informatica cambia radicalmente: è accessibile alla massa. Dall’insieme di
righe e comandi, si trasforma in un insieme armonico di forme geometriche,
nasce l’interfaccia uomo-macchina, così come la concepiamo.
Oggi siamo testimoni di una naturale evoluzione di quel passaggio,
grazie all’avvento delle periferiche touch-screen, l’utente ora ha la
possibilità di “toccare” i file utilizzando le dita come input, un esempio tra
1
http://www.it.pirelli.com/web/group/communication/adv-testimonials/default.page
2
Introduzione
tanti è quello di poter far scorrere una pagina di un libro semplicemente
sfiorando il monitor del nostro e-book, simulando quello che per secoli è un
gesto considerato assolutamente normale o ad esempio, quello di scorrere
la lista dei contatti in rubrica è diventato un gesto della realtà quotidiana.
L’era del touch-screen è iniziata da alcuni anni e i campi di utilizzo
ormai spaziano dall’informatica alle telecomunicazioni al mondo della
fotografia digitale. Ma stiamo compiendo davvero un passo avanti? Mi sono
soffermato molto su questa considerazione, e rendendomi conto che, se per
molti toccare uno schermo è una cosa naturale, per altri può essere un modo
tutto nuovo di poter comunicare e di affrontare un campo come quello
informatico sino ad ora precluso. Mi riferisco a tutte quelle persone che
trovano nell’impugnare un mouse e direzionarlo un’impresa ardua: penso a
tutte quelle persone che, diversamente da me, trovano l’informatica un
mondo sconosciuto e non uno strumento indispensabile di lavoro ed
apprendimento. Tutte queste persone sono definite “diversamente abili”, di
diverso hanno, però, solo il modo di affrontare alcuni problemi, che la
maggior parte di noi non si pone nemmeno.
Questa tesi vuole essere un punto di partenza per una nuova
“esperienza informatica” per alcuni di loro.
Come studente di Ingegneria Informatica ho cercato in questo mio
progetto di accorciare la distanza tra l’uomo e la macchina. Il mio obiettivo
principale è stato quello di avvicinare i miei colleghi universitari con
problemi visivi e motori a utilizzare lo strumento informatico alla mia stessa
stregua. Così come è utilizzato dal proprio vicino di banco e dal proprio
collega universitario, annullando la diversificazione di esami che sino ad
ora è stata messa in atto a causa dell’inaccessibilità di test e quiz.
3
Introduzione
L’idea progettuale è nata dall’osservazione sul campo della metodica
di preparazione degli esami svolta dalla responsabile Maria Assunta Vecchi
dell’Ufficio Disabili affiancata dai tutor degli studenti, durante la mia
attività di Part-Time.
Per permettere lo svolgimento dell’esame erano approntate prove
personalizzate per ogni studente attraverso l’utilizzo di tradizionali
supporti cartacei. Tali metodiche operative comportavano un impegno, in
termini di risorse umane e professionali, considerevole, e non sostenevano
adeguatamente gli studenti all’accesso informatico.
Ho pensato ad una semplificazione informatica per la predisposizione
dei test degli esami per l’approccio diretto degli studenti delle diverse
facoltà con il computer. Pertanto ho preso in esame la possibilità di
sviluppare alcune interfacce che, con l’ausilio di periferiche di input touchscreen, consentono di sostenere lo stesso esame ad un qualunque candidato,
sia esso disabile o meno.
Nel primo capitolo di questo elaborato è descritta la situazione della
disabilità nelle Università italiane. Sono inoltre presentati i monitoraggi
ministeriali
con
le
percentuali
riguardanti
l’incidenza
di
queste
problematiche sulla popolazione universitaria italiana.
Nel secondo capitolo si tracceranno gli strumenti software sviluppati
durante questo progetto. Si presenteranno inoltre tutti i tipi di input Touchscreen.
Nel terzo capitolo si sviluppa la piattaforma Web della gestione degli
esami e le scelte progettuali operate.
Nel quarto capitolo sono presentate le interfacce sviluppate in
collaborazione con l’Ufficio Disabili, le problematiche adottate e le soluzioni
4
Introduzione
approntate.
Nel capitolo quinto si espongono le simulazioni di test elaborate per la
verifica dell’usabilità della piattaforma. Nelle conclusioni sono indicati i
possibili scenari di sviluppo futuro.
5
Capitolo 1
Gli strumenti hardware e software per disabili visivi
Capitolo 1
L’ACCESSIBILITÀ
NELL’UNIVERSITÀ ITALIANA
6
Capitolo 1
1.1 Disabilità ed Università
Nei dibattiti sulle nuove tecnologie utilizzate in ambito educativo solo alcuni
anni fa si diffidava sull’utilità del computer in tale ambito valutandone i pro e i
contro1. Oggi, invece, sono riconosciute come strumento strategico il cui utilizzo
risulta un elemento importantissimo per il sistema universitario e formativo in
genere, il problema è, semmai, quello di offrire una diffusione mirata delle nuove
tecnologie atta a migliorare il supporto allo studio e all’accrescimento culturale.
Il tema dell’integrazione richiama il concetto di progettazione universale e
rientra all’interno di un filone di riflessioni che mirano a determinare le condizioni
per la piena usabilità da parte di tutti delle risorse fruibili in un determinato
ambiente. La personalizzazione dei software, del sistema operativo a software
dedicati all’integrazione scolastica, dovrebbero essere al centro di discussioni e
ambiti progettuali ad ampio raggio, al fine di radicare nella progettazione, nello
sviluppo e nella realizzazione di ogni applicativo l’idea dell’accessibilità universale
alle risorse.
Le tecnologie assistive sono una grande possibilità di evoluzione che si
configurano come strumenti sempre più efficaci in una società nella quale le
informazioni, le relazioni e la cultura sono veicolati prioritariamente attraverso
canali tecnologici quali Internet o Tv.
Tali tecnologie ormai hanno raggiunto un ruolo di rilevanza crescente anche
nell’istruzione formale. Ad esempio uno studente con disabilità motoria agli arti
superiori riesce, attraverso un sistema ausilio a scrivere e a disegnare utilizzando il
computer come strumento che gli consente l’esercizio del diritto allo studio,
superando così la problematica che gli impedisce di reggere con la mano la penna.
1
1. K. W. Richmond, Il computer nell’educazione. Pro e contro, Armando Editore, Roma 1985, p. 35.
7
Capitolo 1
Le tecnologie per l’integrazione sono strumenti hardware e software che
permettono l’accesso al computer all’utente con disabilità. L’importanza di tale
accesso non risiede solo nel fatto che anche studenti disabili possono svolgere
attività al computer come tutti gli altri loro colleghi, ma nel fatto che il computer,
attrezzato con periferiche hardware specifiche e software ottimizzati, consente
effettivamente a questi di realizzare al meglio delle loro possibilità l’attività di
apprendimento che è in diritto di tutti garantito dalla nostra costituzione. In questo
senso, il computer è una tecnologia assistiva, ossia una tecnologia che migliora la
“qualità di Vita” della persona. Sta a noi tutti garantire il diritto allo studio, il
diritto all’accesso universale alle informazioni.
Il «sistema ausilio» è uno strumento di adattamento della persona
all’ambiente, una risorsa tecnologica per compensare il deficit di funzionamento, al
fine di avvicinare la persona stessa alle altre. La relazione è “bilaterale”.
Come in un qualunque tipo di comunicazione occorre che tra l’emittente e il
ricevente sia presente un canale di trasmissione riconosciuto da entrambi. Lo
studente diversamente abile necessita di uno strumento che supporti la sua
comunicazione con la società di riferimento.
L’ausilio tecnologico funziona da canale fra la persona che acquisisce
opportunità di comunicazione e l’ambiente.
L’interazione con l’ambiente tramite il sistema di ausilio permette un continuo feedback.
8
Capitolo 1
In altre parole il sistema ausilio è il ponte di congiunzione fra colui che vuole
comunicare e l’ambiente con cui desidera interagire.
L’uso delle tecnologie assistive può consentire (per esempio a soggetti con
capacità motoria limitata degli arti superiori) performance adeguate ai bisogni di
base per l’apprendimento e per la messa in atto di attività che permettono migliori
livelli di partecipazione2.
Noi tutti sappiamo che per raggiungere un obiettivo necessitiamo della
capacità di svolgere un’azione. Tali capacità vengono equilibrate e contrapposte
dalle barriere o dagli ostacoli con cui siamo impegnati a confrontarci. Le tecnologie
informatiche sono viste in questo ambito come una delle migliori occasioni che uno
studente diversamente abile possiede per aumentare le proprie capacità,
superando gli ostacoli che incontra e raggiungendo il proprio obiettivo con
migliori performance; obiettivo che non avrebbe raggiunto senza il sostegno di
ausilio. Tutto questo porta ad una soddisfazione personale, ad un incitamento
auto-emotivo di grande importanza terapeutica e psicologica, a tutto giovamento
della “qualità della Vita”, sia del singolo sia del contesto sociale di cui fa parte.
FATTORI
CAPACITÀ
Supporti
PERFORMANCE
Ostacoli
2
S. Besio, Tecnologie assistive per la disabilità, Pensa Multimedia, Lecce 2005
9
Capitolo 1
1.1.1 Human Computer Interaction
La Human Computer Interaction (HCI), nata da poco più di dieci anni,
si occupa delle problematiche connesse alla ricerca e allo sviluppo delle
interfacce uomo-macchina cercando utili strategie e suggerimenti nel
tentativo di rendere possibile un’efficace interazione fra l’utente ed il
computer.
Alla ricerca contribuiscono molte discipline. Tra queste la psicologia
cognitiva che ha orientato i suoi studi verso l’uomo, inteso come elaboratore
di informazioni ed esecutore di compiti. Gli psicologi cognitivisti, infatti, si
sono concentrati sulla capacità dell’uomo di apprendere l’uso dei sistemi,
sul trasferimento di queste conoscenze, sulla rappresentazione mentale dei
sistemi e sulle prestazioni dell’uomo nell’interazione uomo-computer.
Un’altra area di ricerca che ha influenzato lo sviluppo della HCI è
l’information science and technology. La tecnologia ha avuto profondi effetti
nel modo in cui l’informazione può essere immagazzinata, consultata e
utilizzata e, di conseguenza, sull’organizzazione dell’ambiente di lavoro.
Anche la linguistica offre il suo contributo all’HCI, poiché le macchine
per quanto veloci e in grado di processare miliardi, e quelle più potenti
miliardi di miliardi, di informazioni ogni secondo, sono, e resteranno ancora
per lungo tempo in ambito domestico, niente altro che delle calcolatrici ,
grandi, costose e colorate calcolatrici che programmiamo per interfacciarci
in maniera sempre più semplice per accedere alle funzioni a cui noi stessi le
destiniamo. Risulta fondamentale, quindi, individuare i modelli migliore di
comunicazione per la facilitazione di tale interazione in ambito linguistico.
Il campo della HCI è talmente ampio da coinvolgere anche molte altre
10
Capitolo 1
discipline, tra cui l’usability e l’ergonomia. Quest’ultima apporta il suo
contributo all’HCI attraverso la determinazione delle definizioni del design
dei sistemi e suggerendo specifiche linee guida e standard da osservare in
fase di progettazione.
I computer sono diventati strumenti che sono utilizzati non solo da
esperti, ma da una vasta gamma di utenti per scopi lavorativi, ludici ed
educativi. Questo fenomeno ha indotto i progettisti a studiare sistemi
informatici che siano in grado di adattarsi ai diversi tipi di bisogni che un
utente può esprimere. Affinché un computer diventi un prodotto di
consumo dovrebbe essere ben progettato, questo non significa giungere fino
ad una progettazione personalizzata per il singolo utente, ma andare
incontro ai bisogni e alle capacità di classi di fruitori, attraverso l’utilizzo di
periferiche hardware comuni, con personalizzazioni di massima.
Gli obiettivi della Human Computer Interaction sono quelli di costruire
sistemi computerizzati che siano utili, sicuri, usabili e funzionali.
Nonostante non esista una teoria generale e unificata della HCI c’è,
comunque, un principio fondamentale che la riguarda: le persone utilizzano
il computer per svolgere dei compiti (il termine deve essere interpretato in
modo generico e non strettamente connesso al lavoro o allo studio).
Quindi nel processo sono coinvolti principalmente tre “elementi”:
l’uomo, il computer e l’attività da svolgere. Il sistema deve supportare
sempre l’utente nel portate a termine i suoi compiti e questo evidenzia un
quarto elemento: l’usabilità. Se il sistema pone l’utente in difficoltà nello
svolgimento del suo compito, questo significa che esso che non ha un buon
grado di usabilità.
11
Capitolo 1
1.1.2 Interfacce MultiModali
L’evoluzione che si vuole raggiungere non riguarda esclusivamente la
capacità di un computer di svolgere determinate operazioni, piuttosto il tipo
di interazione che coinvolge l’utente e il sistema. A tale scopo è sorta una
nuova area di studio della Human Computer Interaction: quella sulle
interfacce multimodali il cui obiettivo è quello di consentire una migliore
comunicazione tra l’uomo e il computer attraverso una sorta di
antropomorfizzazione di quest’ultimo.
Si parla di multi modalità quando un qualsiasi tipo di interazione
coinvolge più di un canale percettivo (o input di comunicazione). L’esempio
più eclatante è senz’altro la comunicazione umana, durante una
conversazione vengono stimolati più sensi contemporaneamente: l’udito, la
vista, il tatto ed anche l’olfatto. A questo punto è utile fare una precisazione:
distinguere la multi modalità dalla multimedialità: la prima è usata
specificatamente per riferirsi alle modalità di input dell’interazione, mentre
12
Capitolo 1
la multimedialità sottolinea la presenza contemporanea di più meccanismi
di output, come video e audio.
Rimanendo nell’ambito della Human Computer Interaction, una
definizione di multimodalità è la seguente: la comunicazione con sistemi di
computer attraverso le modalità di input percettivi comunemente utilizzate
dall’uomo per interagire con il mondo. Quindi non più ristretta all’uso della
tastiera o del mouse, ma anche attraverso la parola, i gesti o la scrittura (in
questo caso non si intende la videoscrittura, ovvero mediata da una tastiera,
ma piuttosto la tradizionale scrittura a mano).
La comunicazione monomediale è generalmente imposta agli utenti
dalle restrizioni tecnologiche. Si pensi al telefono ad esempio: non tutti i
generi di informazioni sono facili da veicolare e assimilare quando la parola
è l’unica modalità a disposizione. Anche l’interfaccia grafica di Windows,
tanto comune e impiegata dalla maggior parte degli utilizzatori di PC,
subisce le restrizioni imposte dal fatto che solitamente lo schermo, la tastiera
e il mouse sono gli unici dispositivi disponibili.
L’utilizzo del computer necessita della conoscenza e della capacità di
utilizzare una serie di strumenti sia hardware sia software. Gli utenti più
esperti spesso si stupiscono davanti ai neofiti che si trovano impacciati nel
manovrare in modo coordinato uno strumento tanto comune come il mouse,
o che non hanno idea di come si raggiungano e ottengano le informazioni
sulla disponibilità di un volo senza dover telefonare ad un’agenzia di viaggi.
Chi utilizza un computer da tempo quasi non si rende più conto che
per fare uso di tutti questi strumenti occorre servirsi di un preciso standard
di comunicazione tra utente e macchina, standard che è tipicamente
costituito sia da comandi inseriti in un linguaggio formale profondamente
13
Capitolo 1
strutturato, sia da azioni tipo “drag and drop”, ovvero “seleziona e rilascia”,
gestite dal mouse. Attualmente queste modalità sono molto evolute e
continuano a perfezionarsi, ma comunque non raggiungono i livelli del
linguaggio verbale naturale. Ciò non significa che sia necessario soppiantare
totalmente gli attuali sistemi di interazione, anche perché studi in merito
hanno evidenziato l’efficacia non solo del linguaggio sia scritto sia parlato,
ma anche delle indicazioni grafiche e delle selezioni via mouse che si
effettuano direttamente sul video, piuttosto, sembra adeguata una
comunicazione a più livelli, a seconda dell’ambiente in cui ci si trova
Se si riuscissero davvero a compensare i limiti che attualmente vigono
sulla tecnologia, molti servizi sarebbero molto più semplici da fruire e di
conseguenza molto più attraenti per un pubblico più ampio. A ottenere
vantaggi da un miglioramento della qualità dell’interazione fra uomo e
macchina, non sarebbero soltanto le persone poco esperte che riuscirebbero
ad utilizzare il computer con più facilità, ma, soprattutto, coloro che ad ora
sono ancora esclusi da questa iterazione: le persone disabili. Queste, pur
conoscendo molto bene gli standard attuali, potrebbero avere problematiche
di tipo fisico, o di tipo psicologico che impediscono loro di rapportarsi
correttamente
con
il
computer.
L’utilizzo
del
linguaggio
naturale
abbatterebbe questi ostacoli, ma la ricerca è ancora lontana dall’utilizzo di
tale tipo di interfaccia. Bisogna nel frattempo sopperire a questa carenza, e
individuare soluzioni, più o meno generali, in grado di garantire
l’interazione uomo-macchina ad un maggior numero di persone possibile, al
fine di garantire l’equità dei diritti individuali.
Tale necessità è venuta ad incontrarsi con un altro “bisogno” di multi
modalità, accresciuto dalla tendenza attuale che tenta di miniaturizzare tutti
14
Capitolo 1
i sistemi computerizzati (computer, palmari, telefoni cellulari etc.): basti
pensare ai computer, con schermi sempre più piccoli e più comodi da
trasportare: la tastiera, il classico sistema di input, dovrà trovare un valido
sostituto in grado di offrire le stesse funzioni in dimensioni molto ridotte.
Tale periferica di input è stata individuata nell’uso del “touch-screen”. Il
tatto è tra i nostri sensi quello più utilizzato per esplorare, conoscere ed
interagire con il mondo esterno. L’azione del contatto materno, sin
dall’antichità, è sempre stata definita strumento terapeutico, poiché,
contrariamente alla visione, nella forma mentis umana tutto ciò che si può
toccare è reale e tutto ciò che è reale può essere usato per interagire con il
mondo esterno.
La multimodalità è un elemento tipico della flessibilità delle nuove
tecnologie. La flessibilità delle nuove tecnologie consiste nel fatto che esse si
fondano su un sistema che può acquisire la forma di svariati codici e nel
quale, perciò, l’immissione di dati può avvenire nei modi più svariati.
L’esempio più evidente è quello della tastiera. Noi utilizziamo una
tastiera fisica che invia al programma di elaborazione testi un codice
alfanumerico. In realtà, lo sappiamo bene, ogni lettera che vediamo sullo
schermo è la riconversione in codice alfanumerico di una stringa binaria
creata precedentemente da tastiera. Che per scrivere si utilizzi una tastiera
reale o una tastiera emulata su schermo, non pone nessun problema al
software, poiché il software ignora che tipo di periferica stiamo utilizzando:
l’unica cosa importante è la stringa di codice binario che gli viene passata.
Allo stesso modo, possiamo liberamente scegliere se quella stringa di codice
debba produrre una lettera sullo schermo oppure debba essere riconvertita
non in una lettera visibile ma in un suono udibile, come avviene con la
15
Capitolo 1
sintesi vocale che trasforma quelle stringhe di codice binario in un codice
sonoro.
In altre parole le nuove tecnologie consentono di convertire ogni
informazione in un codice che può essere creato attraverso i più diversi
sistemi d’input, permettendo di riconvertire quel medesimo codice nei modi
previsti dai più svariati sistemi di produzione, ovvero l’output.
Flavio Fogarolo descrive chiaramente che cosa debba intendersi con
multimodalità del documento elettronico: «Nei testi tradizionali il contenuto
è strettamente connesso al supporto su cui è scritto o stampato… Nel
documento elettronico è diverso: il contenuto è una cosa, il modo in cui ci
appare e attraverso il quale lo possiamo leggere un’altra»3.
La multimodalità è quindi la capacità di un documento di poter essere fruito
secondo modalità diverse, dunque, attraverso le varie opportunità sensoriali
disponibili all’essere umano per l’acquisizione delle informazioni: la vista,
l’udito e il tatto. Certo non basterà il documento elettronico per tale varietà
di fruizione, essa potrà avvenire se il documento elettronico sarà associato a
specifiche periferiche di input e di output che stimoleranno l’uno o l’altro
senso, oppure più di uno insieme. Da qui si deduce il primo importante
accorgimento nell’uso del computer con studenti con disabilità: dovrà essere
individuata una periferica adeguata, poi impiegata con software mirati tali,
quindi, da avere le caratteristiche più adatte (nell’ambito dei feedback, dei
livelli di difficoltà, ecc.) allo sviluppo cognitivo dell’alunno.4
3
4
F. Fogarolo, Il computer di sostegno, Erickson, Trento 2007, p. 56.
S. Besio, Tecnologie assistive per la disabilità, cit., p. 112.
16
Capitolo 1
1.2 Accessibilità ed Usabilità
Con il termine accessibilità, in informatica, si intende la capacità di
un dispositivo, di un servizio o di una risorsa di essere fruibile con facilità
da una qualsiasi categoria di utenti.
Dal 1993 esiste a livello europeo la normativa ISO 9241, che definisce
l’usabilità: “il grado in cui un prodotto può essere usato da particolari utenti
per raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno
specifico contesto d’uso”.
I termini sono comunemente associati alla possibilità anche per persone
con ridotta o impedita capacità sensoriale, motoria, o psichica, di fruire
dei sistemi informatici e delle risorse software a disposizione della
collettività. Il problema dell’accessibilità riguarda svariati tipi di utenti, che
si differenziano per le problematiche che devono affrontare:
chi non può vedere, sentire, muoversi, usare una tastiera o un mouse
chi ha difficoltà a leggere e a capire un testo
chi ha uno schermo bianco e nero, o un dispositivo "solo testo", o una
connessione molto lenta
chi non comprende la lingua in cui è scritto un sito
chi si trova in un ambiente dove non può leggere e sentire bene
chi ha un browser molto vecchio o un particolare sistema operativo.
Quindi il tema dell’accessibilità e dell’usabilità di risorse informatiche
non riguarda solo le persone con handicap ma ciascuno di noi. Chiunque
può trovarsi in una situazione di difficoltà. Non è raro imbattersi in siti il cui
design è in netto contrasto con le più semplici regole per la fruizione dei
contenuti. È quindi compito del programmatore individuare il giusto
compromesso tra la cura estetica e facilità di fruizione dei contenuti.
17
Capitolo 1
Al fine di aiutare i designer ed i programmatori, esistono ormai da
diversi anni standard e linee guida che definiscono l'accessibilità di un
contenuto multimediale: le Wcag 2.0. Non verranno analizzate nel dettaglio
le Wcag 2.0, ma si proverà ad andare oltre, ipotizzando, ed attuando,
un’ambientazione non affrontata da tale regolamento: l’uso delle periferiche
touch-screen.
1.3 Un po’ di cifre
L’integrazione
sociale
delle
persone
con
disabilità,
obiettivo
riconosciuto e perseguito dalle politiche nazionali ed Europee, trova un suo
passaggio fondamentale nell’accesso all’istruzione. L’Italia ha pienamente
riconosciuto l’integrazione scolastica degli alunni con disabilità nella “scuola
normale” già dagli anni '70, assumendo un ruolo leader, anche in ambito
europeo, nelle politiche di istruzione e formazione.
Questa area tematica presenta dati su: i livelli di istruzione; la
consistenza degli studenti con disabilità iscritti all'Università per tipologia di
disabilità, per distribuzione regionale, per ateneo e facoltà. Tali dati
comprendono esclusivamente gli anni accademici tra 2001-02 ed il 2006-07,
in quanto nè presso il Ministero dell’Università e delle Ricerca, nè presso
l’Istat, nè in altre banche dati nazionali, sono presenti monitoraggi ad ampio
spettro più recenti. Si aggiunge, inoltre, che anche la segreteria
dell’Università Politecnica delle Marche, non è stata in grado di fornire alcun
dato aggiornato sulle inscrizioni di utenti disabili.
Le fonti dei dati sono:
Indagine "Condizioni di salute e ricorso ai servizi sanitari" per la sezione
relativa ai livelli di istruzione
18
Capitolo 1
Sistema Informativo del Ministero dell'Istruzione, dell'Università e della
Ricerca (SIMPI) per tutte le altre sezioni
Banca dati MUR-CINECA (Ministero dell'Università e della Ricerca Consorzio Interuniversitario)
Considerazioni generali:
I dati sugli studenti con disabilità iscritti all'Università statale presentano
un trend crescente. Infatti dall'anno accademico 2000-01 all'anno
accademico 2006-07 gli studenti con disabilità passano da 4.813 a 11.407
di iscritti; in particolare nel quinquennio considerato si è avuto un
incremento relativo pari al 137% (MUR-CINECA, 2007).
La distribuzione per tipologia di disabilità mostra che gli studenti con
disabilità motorie costituiscono la percentuale maggiore (27,5%) degli
iscritti disabili all'anno accademico 2006-07, mentre le percentuali minori
si riscontrano nei casi di studenti con difficoltà mentali (3,5%) e con
dislessia (0,9%) (MUR-CINECA, 2007).
Definizione utilizzata nel monitoraggio per disabilità:
Sono stati considerati studenti disabili delle Università statali gli
studenti che hanno un certificato attestante un'invalidità maggiore del 66%.
Tali studenti sono distinti in sei macro-aree: cecità e menomazioni visive,
sordità e menomazioni uditive, dislessia e difficoltà di linguaggio, disabilità
motorie permanenti e provvisorie, difficoltà mentali e altro.
19
Capitolo 1
Serie storica degli studenti con disabilità iscritti all'Università statale
per tipologia di disabilità. Valori percentuali.
Tipologia
di disabilità
Anno accademico
2001-02
2002-03
2003-04
2004-05
2005-06
2006-07
Cecità
9,5
9,7
8,8
8,4
8,1
8,3
Sordità
6,2
6,4
5,8
5,9
5,6
5,5
Dislessia
1,6
1,3
0,8
0,7
0,5
0,9
Disabilità motorie
30,9
33
32,2
30,8
28,4
27,5
Difficoltà mentali
2,3
3
3,1
3,2
3,2
3,5
Altro
49,5
46,6
49,2
51
54,2
54,3
Totale
100
100
100
100
100
100
60
Serie storica Immatricolazioni nell'Università statale per
tipologia di disabilità. Valori percentuali.
Cecità
50
Sordità
40
Dislessia
30
Disabilità
motorie
20
Difficoltà
mentali
10
Altro
0
2001-2002
2002-2003
2003-2004
2004-2005
2005-2006
2006-2007
Come risulta visibile dalla tabella, durante gli anni accademici presi in
esame le proporzioni tra le varie disabilità degli immatricolati rimangono
20
Capitolo 1
pressoché invariate.
Serie storica Immatricolazioni nell'Università statale
per tipologia di disabilità. Valori assoluti.
Anno accademico
Tipologia
di disabilità
2001-02
2002-03
2003-04
2004-05
2005-06
2006-07
Cecità
567
677
713
764
823
945
Sordità
368
449
470
542
567
630
Dislessia
95
92
63
68
47
107
Disabilità motorie
1.837
2.302
2.601
2.814
2.871
3.132
Difficoltà mentali
134
207
249
290
326
401
Altro
2.946
3.253
3.970
4.656
5.492
6.192
Totale
5.947
6.980
8.066
9.134
10.126
11.407
7000
Serie storica Immatricolazioni nell'Università statale per
tipologia di disabilità. Valori assoluti.
Cecità
6000
Sordità
5000
Dislessia
4000
3000
Disabilità
motorie
2000
Difficoltà
mentali
1000
Altro
0
2001-02
2002-03
2003-04
2004-05
2005-06
2006-07
Come si evince dalla tabella, ma in modo più marcato dal grafico,
21
Capitolo 1
durante gli anni accademici presi in esame nonostante le proporzioni tra le
varie disabilità rimangono pressoché invariate, il numero assoluto di
studenti diplomati diversamente abili che si inscrive all’università statale
quasi raddoppia nel giro di soli 5 anni, passando da circa 6000 unità, a oltre
11400. Tale aumento di studenti è presente in tutte le macro-aree d’interesse,
ad esclusione della dislessia, che complessivamente non incrementa in
maniere sostanziale il numero di immatricolati.
L’analisi di tale dato pone in evidenza che in tutti i campi d’interesse si
è riusciti ad attuare politiche assistive importanti con risultati eccezionali. Le
cause di questo incremento sono da ricercare sia in una maggiore
consapevolezza delle problematiche sociali, con la conseguente attivazione
di politiche mirate, sia nella rapida e generale adozione di attrezzature
tecnologiche di supporto alla lezione e all’apprendimento per questa
categoria svantaggiata di studenti.
Nell’area della disabilità dislessica, evidentemente, gli sforzi messi in
campo sino all’anno 2005-06 non sono risultati sufficienti, evidenziati dal
declino delle immatricolazioni che risulta dimezzato nel giro di 4 anni. Si
pone comunque in evidenza che nell’anno accademico 2006-07 il numero di
immatricolati afflitto da dislessia è più che raddoppiato rispetto all’anno
precedente. Non si hanno ulteriori dati per commentare quest’aumento
repentino di immatricolazioni, pertanto, non si può affermare se si tratta di
una anomalia statistica, o l’effetto dell’attuazione di politiche sociali mirate.
22
Capitolo 1
Serie storica degli studenti con disabilità iscritti all'Università statale per
tipologia di disabilità. Valori Percentuali.
Anno accademico
Tipologia di
disabilità
2001-02 2002-03 2003-04 2004-05 2005-06 2006-07 2007-08
Facoltà di Agraria
1,2
1,4
1,2
1,4
1,5
1,4
1,5
Facoltà di Architettura
2,7
2,8
2,9
2,6
2,3
2,4
2,2
Facoltà di Economia
10
10,3
9,1
9,5
9,2
9,4
8,7
Facoltà di Farmacia
Facoltà di
Giurisprudenza
Facoltà di Ingegneria
Facoltà di Lettere e
filosofia
Facoltà di Lingue e
lettere straniere
Facoltà di Medicina e
chirurgia
Facoltà di Medicina
veterinaria
Facoltà di Psicologia
Facoltà di Scienze
matematiche, fisiche e
naturali
Facoltà di Scienze
politiche
Facoltà di Scienze
statistiche
Facoltà di Sociologia
Facoltà di Scienze della
comunicazione
1,5
1,7
1,8
1,9
2,1
2,2
2,2
18,8
17,5
17,2
16,2
15,4
15
14,6
7,7
7,5
8
7,3
7,7
7,4
7
21,1
18,6
19,1
20,4
20,1
18,7
18,8
2,7
2,6
2,1
2,5
2,5
2,4
2,6
4,3
4,2
4,9
5,1
5,2
5,4
5,7
0,3
0,3
0,4
0,4
0,5
0,6
0,6
2,9
3,7
3,5
3,3
3,7
3,8
3,6
8,2
8,1
8,6
8,3
8,6
8,7
9,6
8,5
8,6
8,4
8,2
8,1
8,3
8
7,2
7,7
8
7,6
7,3
7,8
8,1
0,3
0,2
0,3
0,3
0,3
0,3
0,3
ND
ND
0,9
1
0,9
0,8
0,9
1,2
3
2,5
2,9
3,4
4,5
5,1
Altre facoltà
23
Capitolo 1
25
20
15
10
5
0
2000-01
2001-02
2002-03
2003-04
2004-05
2005-06
2006-07
Facoltà di Economia
Facoltà di Giurisprudenza
Facoltà di Ingegneria
Facoltà di Medicina e chirurgia
Facoltà di Lettere e filosofia
Facoltà di Scienze politiche
Il quadro delle preferenza della Facoltà risulta perlopiù stabile. Da
notare solo un lento declino delle immatricolazione nella facoltà di
Giurisprudenza. Non si hanno ulteriori informazioni per commentare
questa “perdita di appeal” del 4%.
24
Capitolo 1
Studenti con disabilità immatricolati presso l'Università Politecnica delle
Marche negli anni accademici 2000-07
2000-01
2001-02
2001-03
2003-04
2004-05
2005-06
2006-07
Valori Assoluti
28
26
46
45
54
62
66
Percentuale su
studenti immatricolati
2,1
1,9
3,3
3,1
3,6
4,2
5,5
70
6
60
5
50
4
40
Valori Assoluti
3
30
2
20
10
1
0
0
Percentuale su studenti
immatricolati
2000-01 2001-02 2001-03 2003-04 2004-05 2005-06 2006-07
Prima dalla tabella e dal grafico poi è possibile individuare una
importantissima crescita delle immatricolazioni presso l’Università delle
Marche negli anni accademici compresi in questo monitoraggio. Il numero
di studenti immatricolati nell’arco di 7 anni risulta triplicato, come la
percentuale rispetto al totale degli studenti iscritti ogni anno. Questo sta a
dimostrare che l’Università, negli anni passati, ha sviluppato un’attenta
politica sociale, attuando misure efficaci di supporto ed assistenza. Solo
poche altre università italiane possono vantare un simile risultato in così
poco tempo.
25
Capitolo 2
Gli strumenti hardware e software utilizzati
Capitolo 2
GLI STRUMENTI HARDWARE E
SOFTWARE UTILIZZATI
26
Capitolo 2
2.1 L’idea Progettuale
L’idea alla base di questo progetto è quella di facilitare l’accesso agli
esami a quiz agli utenti disabili e, in particolare, per utenti con difficoltà
visive: gli ipovedenti. Tale tipo di test risulta banale per un normo-dotato,
basti pensare che essi sono radicati nella vita di tutti i giorni. Ad esempio il
quotidiano uso del bancomat attraverso un monitor touch-screen e semplici
menù a scelte multiple, ci guidano verso l’operazione che vogliamo
compiere in modo semplice e veloce. Un disabile, sia esso ipovedente o
dislessico, è precluso da tale interfaccia, dovendo ricorrere, ove presenti,
all’ausilio del supporto audio, attraverso la presa per le cuffie presenti in
alcuni bancomat.
In questo lavoro si è cercato di ricreare lo stesso risultato con
l’obiettivo di far sentire lo studente a proprio agio: porlo, cioè, nella
condizione di sostenere un esame eliminando alla radice eventuali
discriminazioni, o facilitazioni, che potrebbero nascere nella creazione di
esami strutturati “ad hoc” dai professori.
La piattaforma è stata concepita per l’utilizzo sia dei normo-dotati sia
dei diversamente abili agendo esclusivamente sull’interfaccia di esame, e,
quindi, non sui contenuti disciplinari, ma sulla sua sola visualizzazione. In
questo modo sono garantiti due dei parametri fondamentali dell’esame
scritto a quiz: l’equità della difficoltà, data dall’uguaglianza delle domande
e delle risposte, e la totale equivalenza dei risultati, frutto della
corrispondenza totale dei test. L’unica differenza tra i due esami svolti
27
Capitolo 2
risulterà il grado di conoscenza dimostrato dallo studente da cui si
evincerà il numero di risposte corrette che, quindi, sarà tradotto in
valutazione oggettiva.
Nei capitoli successivi si evidenzieranno le difficoltà progettuali, le
soluzioni individuate e, nel capitolo finale, saranno indicati i possibili
sviluppi di tale approccio.
2.2 Strumenti Hardware
Come base dell’interfaccia uomo-macchina si è deciso di adoperare
l’approccio touch-screen. Tale approccio risulta molto più naturale per un
neofita informatico, di quanto possa essere l’utilizzo del mouse. A questa
costatazione si aggiunge la considerazione che un approccio di questo tipo
può aiutare ad annullare le difficoltà cognitive e motorie che alcuni studenti
possono dimostrare nell’utilizzo del computer, ci si rende subito conto che
tale tipo d’input risulta il più adatto per l’obiettivo che si vuole perseguire.
E’ inoltre possibile dimostrare che tale tipo di interfaccia risulta avere un
tempo di apprendimento di utilizzo nullo uguale a zero, al contrario di
interfacce standard basate sull’utilizzo del mouse, che richiedono una
coordinazione oculo-manuale che, in talune circostanze può risultare non
immediato accompagnato ad un processo di apprendimento più o meno
lungo, a seconda del soggetto e delle disabilità da cui è affetto. E’ comunque
doveroso segnalare che lo strumento che si va a presentare, data la fascia di
utenza cui si rivolge, dovrà essere sempre accompagnato dal supporto di un
28
Capitolo 2
tutor o di un responsabile, sia come supporto tecnico in caso di difficoltà
nell’utilizzo dell’interfaccia, sia come supporto emotivo, nel caso lo studente
abbia necessità di una figura “amica” nei momenti di stress.
Nella ricerca sono state individuate diverse periferiche hardware, o
misto hardware-software, che hanno come risultato l’input “tattile” che si
vuole raggiungere. Di seguito sarà fornito un elenco di quelle note, e meno
note, elencandone caratteristiche e peculiarità di ognuna. È evidente, e lo
sarà ancor di più alla fine di questo elenco che non risulta importante come
queste periferiche funzionino, risulta invece fondamentale la facilità con cui
l’utente si troverà ad interagire con la macchina.
2.2 Schermi Touch-screen
Gli schermi tattili o "touch-screen" sono dispositivi d’input per sistemi
digitali che utilizzano una rete di sensori posta sulla superficie. Essi
permettono di usare come dispositivo di puntamento il dito dell'utente, o
un suo prolungamento. Infatti "toccando" questi schermi in corrispondenza
di un'icona, di un link ipertestuale, o di un menù, si attivano le funzioni o le
applicazioni desiderate, grazie alla rilevazione della posizione su schermo
del dito.
Qualunque sia la tecnologia utilizzata è possibile sempre individuare
tre elementi principali: il gruppo sensore, il controller e il driver software. Il
gruppo sensore rileva il tocco dell'utente e lo invia sotto forma d’impulso
elettrico, digitale o analogico secondo le tecnologie, al controller. Il
controller elabora il segnale ricevuto dai sensori e invia le informazioni
ottenute al driver, tramite un cablaggio esterno che può essere una porta
29
Capitolo 2
usb o seriale. Il driver software si occupa di interfacciare la periferica con il
sistema operativo. Al sistema operativo questi passaggi sono del tutto
trasparenti e, pertanto, esso non è a conoscenza del tipo d’interfaccia touchscreen utilizzata, ma solo che essa è installata.
2.2.1 Touch-screen con tecnologia Resistiva
Tale tecnologia risulta la meno recente tra le tecnologie touch arrivate
al grande pubblico, infatti, i primi prodotti commerciali risalgono al 1995.
Gli schermi touch-screen realizzati con la tecnologia resistiva sono schermi
tattili composti da due strati sovrapposti di materiale plastico, ognuno
ricoperto da una patina conduttrice sulla superficie interna. Gli strati interni
conduttivi sono separati da punti separatori distribuiti regolarmente
sull’area attiva. La pressione del tocco del dito causa un contatto elettrico
fornendo al controller tensioni analogiche proporzionali alle coordinate
orizzontali e verticali. Le tensioni vengono convertite dal controller in
segnali digitali e le informazioni così elaborate vengono inviate al driver,
che le trasforma in coordinate. Questa tecnologia ha il vantaggio di avere
prezzi economici e buona precisione, ma gli schermi risultano molto scuri e
soggetta a graffi a causa del materiale di contatto che deve essere
necessariamente un pennino. L’implementazione multi-touch risulta di non
facile integrazione in quanto risulterebbe inefficiente.
2.2.2 Touch-screen con tecnologia Capacitiva
Gli schermi touch-screen realizzati con tecnologia capacitiva sono
costituiti da un pannello di materiale vetroso ricoperto da uno strato di
30
Capitolo 2
ossido di metallo trasparente situato sulla superficie rivolta all’utente. Viene
applicata una tensione ai quattro angoli in modo da creare un campo
elettrico uniforme su tutta la superficie dello schermo. Al tocco del dito sulla
superficie capacitiva viene prodotta una variazione di campo elettrico, le
coordinate del punto di contatto vengono determinate dal controller,
misurando la caduta di tensione sulle quattro sorgenti. Questa tecnologia ha
il vantaggio di avere grande precisione, schermi molto trasparenti, e la
possibilità di utilizzare le dita della mano come input. Al contrario, tale
tecnologia non funziona se l’utente indossa guanti, necessita di ricalibrazioni frequenti e ha costo elevato. Il vantaggio peculiare, che la sta
facendo apprezzare in più campi, è la possibilità, in abbinamento a
controller evoluti, di supportare input multi-touch, garantendo una migliore
esperienza dell’utente, grazie al riconoscimento di gesti.
Di questa tecnologia esistono diverse varianti, secondo il produttore di
schermi o d’interfaccia che si va a considerare. Esse si differenziano per
numero di sensori, accuratezza e supporto di un numero sempre crescente
d’input contemporanei.
2.2.3 Touch-screen Tramite tecnologia Infrarossi
Gli schermi touch-screen realizzati con tecnologia ad infrarossi sono
costituiti da un vetro circondato da una serie di diodi ad emissione
luminosa e di sensori fototransistor posti uno di fronte all’altro inseriti nella
cornice dello schermo. Vengono emesse sequenze di impulsi ad infrarosso
dai led in modo da formare un’invisibile rete di raggi luminosi davanti alla
superficie del pannello. Quando questa maglia viene interrotta da un
31
Capitolo 2
oggetto solido il controller identifica le coppie di sensori oscurati
estrapolando la posizione del contatto. Tale tecnologia risulta essere quella
più anziana tra le tecnologie proposte e tutt’ora quasi del tutto in disuso.
Questa tecnologia ha il vantaggio di offrire schermi molto trasparenti poiché
non sono presenti elementi davanti allo schermo. Risulta essere insensibile
alle abrasioni dello schermo, in quanto i sensori sono posizionati al bordo
dello stesso. Tra gli svantaggi si segnala un’elevata imprecisione in quanto
direttamente proporzionale al numero di fototransistor: una maggiore
risoluzione richiede un maggior numero di sensori con un aumento
esponenziale dei costi per inserire un maggior numero di elementi in uno
stesso spazio. Oltretutto annovera una scarsa velocità di risposta al tocco,
dettata dalla frequenza degli impulsi. Il controllo multitouch risulta
possibile solo con l’utilizzo di avanzati controller
2.2.4 Touch-screen con tecnologia Onde Acustiche
Gli schermi touch-screen realizzati con tecnologia onde acustiche
superficiali sono formati da lastre in puro vetro, dotati di trasduttori che
emettono e ricevono due fasci di onde acustiche superficiali non udibili
dall'uomo (un’orizzontale e l'altra verticale). Il dito dell'utente toccando il
vetro ne assorbe una porzione di segnale, la cui variazione viene analizzata
dal controller che individua le coordinate del punto di contatto. Questa
tecnologia ha il vantaggio di offrire schermi molto trasparenti, elevata
precisione e una stabilità di calibrazione eccellente. Lo svantaggio è il costo
degli schermi e gli stessi non sono adatti all'ambiente esterno o al contatto
con liquidi.
32
Capitolo 2
Una variante di questa tecnologia ad impulsi sonoro risulta essere un
brevetto tutto italiano del Politecnico di Milano. Essa utilizza comuni
microfoni posizionati agli angoli ed ai lati dello schermo che registrano le
onde di pressione che si vengono a creare al contatto tra il dito e la
superficie. Questo approccio innovativo risulta essere estremamente
economico ed efficiente, garantito dall’uso di comuni microfoni, ma ma si
contrappone come svantaggio una elevata capacità di calcolo necessaria per
l’elaborazione dei segnali acustici tesi ad individuare le coordinate del
punto di contatto sulla superficie. Inoltre, essendo una tecnologia
relativamente recente e allo stato di prototipo, non esistono applicazioni
commerciali, e non si hanno informazioni circa le capacità di riconoscimento
multi-touch della tecnologia.
2.2.5 Touch-screen con tecnologia Piezo-elettrica
Gli schermi touch-screen realizzati con tecnologia piezo-elettrica sono
formati da una cornice in alluminio che contiene quattro sensori
piezoelettrici posti in corrispondenza dei quattro angoli dello schermo.
Quando si esercita una pressione sul vetro (che è libero di muoversi) questo
trasmette la pressione ai quattro sensori, determinando lo sbilanciamento di
un ponte; il segnale analogico risultante viene analizzato dal controller che
determina le coordinate del punto di contatto. Questa tecnologia ha il
vantaggio di offrire schermi molto trasparenti, non risulta sensibile ai
liquidi e ed abrasioni dello schermo e, soprattutto, di essere indifferente
all’utilizzo di dita o supporti di altra natura. Tra gli svantaggi si annovera
l’elevata pressione di tocco necessaria e, conseguentemente, al fine di
33
Capitolo 2
garantire una sufficiente protezione allo schermo, l’utilizzo di materiali
resistenti, che portano ad una maggiorazione del costo degli schermi stessi.
2.2.6 Touch-screen “virtuali”
Si è voluto, in questo paragrafo, inserire alcune tecnologie emergenti,
poco diffuse, ma dall’alto potenziale innovativo, grazie all’utilizzo di
periferiche e sensori di uso comune, unite a software sviluppati “ad hoc”. In
questa sede si analizzeranno 2 progetti gratuiti che si ritengono molto
promettenti e di facile implementazione:
“Low-Cost Multi-point Interactive Whiteboards Using the Wiimote” di
Johnny Chung Lee
“TouchLib” del Nuigroup
2.2.6.1 Low-Cost Multi-point Interactive Whiteboards Using the
Wiimote di Chung Lee
Il primo progetto utilizza il controller della console Nintendo Wii, il
Wiimote è utilizzato insieme ad un software di riconoscimento di sorgenti
infrarosse sviluppato dallo stesso Chung Lee, oltre che ad un led da pochi
centesimi di euro. Il controller WiiMote si trasforma in un ricevitore di
segnale capace di riconoscere sino a 4 input luminosi contemporanei, tali
informazioni vengono inviate tramite bluetooth al software di controllo, il
quale analizza le immagini e restituisce la posizione sullo schermo del
puntatore creando, a bassissimo costo, un effetto touch-screen con capacità
multi-touch. L’innovazione di questo progetto risulta essere di rilievo,
considerate le potenziali applicazioni: lavagne luminose,
semplici
34
Capitolo 2
proiezioni su muro o tela acquisiscono capacità multi-touch con una spesa
di pochi Euro, necessari per l’acquisto del Wiimote e della controller
bluetooth. Il software di controllo, disponibile gratuitamente sul sito del
progetto, non richiede particolari impostazioni, se non i parametri iniziali
ad ogni utilizzo, per delimitare l’area dello schermo o della superficie che si
vuole utilizzare.
2.2.6.2 Libreria TouchLib
Il secondo progetto si basa sull’utilizzo di una comune webcam come
controller ricevente degli impulsi luminosi. La webcam, alla quale è stato
rimosso il filtro Ir sostituito da un filtro per la luce visibile (un comune
pezzo di pellicola fotografica), è utilizzata come ricevente dei raggi
infrarossi. I dati vengono poi trasmessi al software di controllo che
individua la posizione degli input e li trasmette al sistema operativo. Il
progetto non è molto dissimile dall’idea di Chung Lee, ma l’utilizzo di una
comune webcam abbatte i costi di implementazione, sino a scendere a 10€15€. L’efficienza del sistema è direttamente proporzionale alla risoluzione
massima della webcam usata, poiché una maggiore risoluzione permette
una più accurata localizzazione della sorgente luminosa. Anche questo
progetto è del tutto gratuito, poiché frutto del lavoro di un gruppo di
appassionati, inoltre il sito di riferimento offre un consistente numero di
documenti e articoli che spiegano come modificare le webcam e come
ottimizzare la disposizione delle stesse in base al monitor o alla superficie
adoperata. Tale libreria ha di recente acquistato il supporto agli input multitouch rendendola una delle più importanti ed apprezzate librerie
35
Capitolo 2
OpeSource attualmente disponibili per questo tipo di interfacce uomomacchina.
2.2.6.3 Progetti Paralleli
Entrambi i progetti prevedono una variante che sfrutta l’effetto di
rifrazione della luce su alcune superfici. Utilizzando una sorgente luminosa
infrarossa che circonda la periferica ricevente, rispettivamente il controller
Wiimote o la webcam, ed una superficie riflettente posta all’estremità di uno
o più dita, la luce riflessa in corrispondenza delle dita verrà riconosciuta dal
software di controllo delle periferiche, ricreando l’effetto touch sopra
descritto.
2.2.6.4 Altri progetti
A titolo di nota si inseriscono alcuni progetti che si basano sul
riconoscimento dei movimento delle mani o del corpo, di oggetti o di colori,
attraverso l’utilizzo di comuni webcam, poiché ritenuti importanti dal
punto di vista dell’interazione uomo-macchina, con possibili applicazioni
per l’interazione di utenti disabili con apparecchiature elettroniche:
EyeSight (Disponibile anche in ambito Mobile)
CamSpace (Innovativo per riconoscimento oggetti e colori)
OpenCV (Libreria multipiattaforma orientata alla computer vision)
Microsoft
Kinect
(Periferica
Hardware
per
riconoscimento
del
movimento del corpo umano)
36
Capitolo 2
2.3 Strumenti Software
Nel corso dello sviluppo di questa piattaforma si è scelto di utilizzare
diversi linguaggi di programmazione Web OpenSource disponibili.
2.3.1.1 Linguaggio Php
PHP (acronimo di "PHP: Hypertext reprocessor", preprocessore di
ipertesti) è un linguaggio di programmazione general-purpose (per svariati
utilizzi) con licenza OpenSource, concepito per la programmazione
Web ovvero la realizzazione di pagine web dinamiche, disponibile per la
maggior parte delle piattaforme software presenti sul mercato. Attualmente
è utilizzato principalmente per sviluppare applicazioni web lato server, ma
può essere usato anche per scrivere script o applicazioni standalone con
interfaccia grafica.
L'elaborazione di codice PHP sul server produce codice HTML che
viene inviato al browser dell'utente che ne fa richiesta. Il vantaggio dell'uso
di PHP, e di altri linguaggi Web come ASP e .NET, e che rispetto al classico
HTML risulta essere presente la possibilità di creare pagine dinamiche che
interagiscono attivamente con l'utente e che modificano le informazioni
visualizzate dall'utente in base agli input ricevuti dall'utente stesso. Questa
idea di programmazione consente, quindi, di creare una pagina base,
37
Capitolo 2
ovvero una struttura, il cui contenuto viene caricato o modificato a seconda
delle necessità e a seconda dei dati che si vogliono visualizzare.
Esempi tipici di applicazioni web dinamiche sono i siti di e-commerce,
che necessitano l’interazione con l'utente, con il fine di adeguarsi alle sue
preferenze. I siti web considerati 'dinamici' consentono all'utente di
personalizzare l'impaginazione, le informazioni mostrate, o di aggiornare in
maniera efficiente (dinamica appunto) i contenuti.
2.3.1.1.1 GD Graphics Library
La Graphics Library è una libreria scritta originariamente da Thomas
Boutell e altri programmatori indipendenti, adoperata per la manipolazione
dinamica di immagini. Scritta in linguaggio C, è in grado di generare
immagini GIF, JPEG e PNG. Tale libreria nel corso del tempo si è evoluta, ed
attualmente è possibile creare immagini composte da linee, archi, testo
(utilizzando i font), altre immagini e colori multipli. Nella versione 2.0 è
stato aggiunto il colore per le immagini Truecolor, il canale alfa (per la
trasparenza), il resampling dell'immagine e altre funzioni, cha la rendono
una delle librerie OpenSource più compete in ambito multimediale.
Essendo scritta in C risulta implementata in numerosi linguaggi di
programmazione tra i quali Php, Perl o il Pascal. Esiste, inoltre, uno
strumento chiamato “fly“che consente di accedere alle librerie GD da
qualsiasi linguaggio attraverso chiamate da linea di comando rendendola
virtualmente compatibile con qualunque linguaggio di programmazione.
Il suo maggior impiego oggigiorno è quello abbinato a Php; infatti,
dalla versione 4.3 del Php è stata introdotta una versione modificata della
libreria originale, che include funzioni aggiuntive, tali da semplificare
38
Capitolo 2
notevolmente il loro utilizzo. Tramite del semplice codice Php è possibile
creare dal nulla numerosi tipi d’immagini, o modificarne di esistenti.
L'utilità di questa libreria è enorme, basti pensare alla possibilità di
creare grafici o report in tempo reale, analizzando i dati da un database.
Esistono, inoltre, varie librerie che, appoggiandosi alla libreria GD,
forniscono funzioni aggiuntive e semplificate per la creazione di grafici.
2.3.1.2 MySql
MySQL è un “Relational database management system (RDBMS)”,
ovvero un contenitore di dati messi in relazioni tra loro tramite l’uso di
tabelle, colonne e righe. Questo “magazzino di dati”, è definito relazionale
poiché si basa sulle relazioni fra i dati, i quali vengono presentati in forma
tabellare, che sono legate tra loro da una “relazione”. È possibile affermare
che:
ogni tabella contiene i dati relativi ad una entità;
le colonne della tabella rappresentano i campi, ovvero le proprietà o
attribute dell'entità;
le righe della tabella esprimono le ricorrenze dell'entità.
Al fine di accedere a questi dati più velocemente, è stato introdotto il
linguaggio SQL (Structured Query Language), che consente di operare sui
dati e , quindi, sulle tabelle e sulle relazioni, tramite l’uso di regole formali e
strutturate che permettono selezioni di dati, anche complessi, mettendo in
relazioni anche molte tabelle contemporaneamente. Con la versione 5.0 tale
database ha acquisito capacità di memorizzazione e di interrogazioni
notevoli, al pari di prodotti commerciali, mantenendo però sempre la sua
39
Capitolo 2
connotazione gratuita che ne ha garantito, sino ad ora, un enorme successo.
Data la sua diffusione, esso risulta disponibile per la maggior parte
delle piattaforme software disponibili sul mercato.
Per tecnologie client, si intendono tutte quelle applicazioni che non
sono installate sul server remoto in cui è memorizzato l’esame, ma sono
attive sul computer da cui si visualizza la pagina. Esse sono già utilizzabili
da qualunque pc, su cui sia installato un browser aggiornato, non
necessitano pertanto di ulteriori operazioni di installazione o configurazione
da parte dell’utente.
2.3.2.1 Html
L'HyperText Markup Language (HTML) (linguaggio di descrizione
per ipertesti) è un linguaggio usato per controllare la struttura dei
documenti ipertestuali disponibili nel World Wide Web . Tutti I siti web
sono scritti o vengono trasformati in codice Html, codice che interpretato
dal web browser genera la pagina desiderata sullo schermo del computer, o
del palmare o da qualunque dispositivo multimediale datoato di browser.
L'HTML non è un linguaggio di programmazione vero e proprio, ma
un linguaggio di markup, descrive, cioè, le modalità di impaginazione,
formattazione e visualizzazione grafica, ovvero del layout, del contenuto,
testuale e multimediale, presente nella pagina web. Esso non supporta
nessuna gestione di istruzioni, di variabili, di sequenze o di strutture di
40
Capitolo 2
comando, e pertanto è affiancato da altri linguaggi sviluppati per questo
scopo.
L'HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita
dal World Wide Web Consortium (W3C), ed è basato su un altro linguaggio
avente scopi più generici, l'SGML. È stato sviluppato alla fine degli anni
ottanta da Tim Berners-Lee al CERN di Ginevra. Nel il 1994 ha avuto una
forte diffusione in seguito ai primi utilizzi commerciali del web. In questo
momento l'ultima relase disponibile è la versione 4.01, resa pubblica alla
fine del 1999. Nel 2007 è ricominciata l'attività di specifica con la
definizione, ancora in corso, della versione 5, attualmente in uno stato
avanzato di sviluppo tale da essere già supportato dalle versioni più recenti
di molti browser.
2.3.2.2 Css
Il linguaggio Cascading Style Sheets (CSS) (Fogli di stile a cascata) è
uno dei fondamentali linguaggi standard del W3C. La sua storia risulta
essere parallela rispetto a quella dell’HTML, di cui risulta essere l'ideale
complemento. Da sempre, infatti, l’HTML essendo un linguaggio strutturale
alieno da qualunque scopo attinente la presentazione di un documento,
necessita di definire delle regole per la visualizzazione dei contenuti. Per
questo obiettivo, ovvero definire l'aspetto visuale ed estetico ad una pagina,
si utilizzano i fogli di stile, o CSS. L'ideale perseguito nello sviluppo web è
quello di separare il contenuto dalla presentazione, ovvero i dati da come
vengono rappresentati.
La prima specifica ufficiale di CSS risale alla fine del 1996. Nel maggio
41
Capitolo 2
1998 è stata la volta della seconda versione: CSS2. La seconda versione
introdusse nuove caratteristiche, valori di proprietà e definizioni per stili
non canonici come quelli rivolti alla stampa o alla definizione di contenuti
audio, oltre all’introduzione della possibilità di creare fogli di stile separati
per i dispositivi portatili, o per browser diversi. Tale implementazione si
rese necessaria per regolamentare e standardizzare alcune regole che i
programmatori ritenevano necessarie per la visualizzazione delle proprie
pagine e che i browser avevano introdotto ognuno con una propria sintassi.
Il successo fu assicurato da una veloce implementazione del linguaggio nei
browser più diffusi, Internet Explorer 5 e Opera 7, e Firefox, che spinsero i
programmatori web ed i web designer a sfruttare appieno il nuovo
standard. E' attualmente allo stato di “Working Draft” la nuova specifica
CSS3, queste dovrebbero presentare soluzioni per la correzione di alcuni
bug di interpretazione di Internet Explorer, miglioramenti nella gestione
degli sfondi e una soluzione per realizzare I bordi arrotondati la cui
realizzazione affligge i web-designer da tempo, oltre all’introduzione di
nuovi effetti grafici avanzati.
2.3.2.3 JavaScript
JavaScript è un linguaggio di scripting orientato agli oggetti
comunemente usato nei siti web. Fu originariamente sviluppato da Brendan
Eich
della
Netscape
Communications
con
il nome
di
Mocha
e
successivamente di LiveScript, ma in seguito è stato rinominato "JavaScript".
Il linguaggio attuale è la versione 1.5, divenuto standard nel dicembre del
1999.
42
Capitolo 2
Non esiste una vera relazione tra Java e JavaScript; le loro somiglianze
sono soprattutto nella sintassi (derivata in entrambi dei casi dal linguaggio
C); tuttavia le loro semantiche sono abbastanza diverse e, in particolare i
loro “object model” non hanno relazione e sono ampiamente incompatibili.
La caratteristica principale di JavaScript è quella di essere un
linguaggio interpretato. Il codice non viene compilato bensì è presente un
interprete all’interno del browser che esegue riga per riga quanto definito
nel codice. JavaScript presenta, quindi, tutte le caratteristiche di un normale
linguaggio interpretato e di conseguenza i suoi vantaggi e svantaggi, ma
con una sintassi analoga a quella di un linguaggio compilato, quindi con la
possibilità
di
utilizzare
funzionalità
tipiche
dei
linguaggi
di
programmazione ad alto livello (strutture di controllo, cicli, etc.) con la
potenzialità di definire strutture più complesse, vicine a quelle adottate nei
normali linguaggi “object oriented” (creazione di prototipi, istanziazione di
oggetti, costruttori, etc…).
Altro aspetto interessante è che il JavaScript è una tecnologia che opera
esclusivamente lato client, liberando quindi il server da carichi inutili. Ciò è
un vantaggio in quanto anche con la presenza di script particolarmente
complessi il server non verrebbe sovraccaricato. Di contro, nel caso di script
che presentino una considerevole mole di dati, il tempo per lo scaricamento
risulta maggiore e la velocità di esecuzione risulta dipendente dal computer
in uso.
Molti siti web usano la tecnologia JavaScript lato client per creare
complesse applicazioni web dinamiche. Un uso principale del Javascript
basato su web è la scrittura di piccole funzioni integrate nelle pagine HTML
che interagiscono con il DOM (Document Object Model) del browser per
43
Capitolo 2
compiere determinate azioni non possibili con altri linguaggi, ad esempio
controllare i valori nei campi di input, nascondere o visualizzare
determinati elementi, modificando di volta in volta la pagina, a seconda
degli input dell’utente.
Gli script in questo linguaggio risultano ormai indispensabili nella
fruizione dei contenuto “Web 2.0”, dove le informazioni, i dati e la grafica
vengono aggiornati dinamicamente ed in modo del tutto trasparente per
l’utente.
2.3.2.3.1 MathJax
MathJax è una libreria open source scritta in JavaScript il cui compito è
quello di fornire un motore grafico per la visualizzazione di equazioni
scritte in codice LaTeX o il linguaggio MathML, in modo da essere
compatibili in tutti i browser moderni, comprese le versioni mobile. Punto
di forza di questa libreria è la totale trasparenza da parte dell’utente delle
equazioni, che vengono tradotte in modo completamente automatico, così
che il lettore non si accorga di nulla. Essendo uno script Javascript non
necessita di installazione, o di plug-in, risultando, come già detto,
compatibile con la maggior parte dei browser disponibili. Esistono due
modalità di visualizzazione delle formule definite: “Html-Css” e “MathMl”.
La prima fa uso di immagini, scaricate dal server, che vengono
opportunamente formattate ed allineate per formare l’equazione desiderata.
Nella seconda modalità, nel caso il browser supporti il linguaggio MathMl,
il compito di renderizzare l’equazione è lasciato al motore interno del
browser di visualizzazione delle pagine, mentre lo script si occupa della sola
44
Capitolo 2
traduzione dal linguaggio LaTex a MathMl.
Sono disponibili alcune funzionalità aggiuntive per l’accessibilità delle
formule, come lo zoom delle stesse, o caratteri ottimizzati. A tale scopo è
importante sottolineare la presenza di ottimizzazioni dello script per il plugin di Internet Explorer “MathPlayer”, tale da garantire un più completo
supporto agli standard web accessibili. Le Api JavaScript sviluppate dal
gruppo di programmatori interessati da questo progetto rende agevole, se
non immediato, l’utilizzo di MathJax con blog, wiki, pagine web e altre
applicazioni web, sono infatti disponibili già le informazioni per
l’installazione di MathJax nelle piattaforme web popolari come Wordpress,
MediaWiki, Drupal, e molte altre ancora, nonostante la versione completa
1.0 risulti disponibile pubblicamente soltanto nell’Agosto 2010.
2.3.2.3.2 Pixastic
Pixastic è una libreria JavaScript libreria, rilasciata con licenza MIT e
sviluppata da Jacob Seidelin, che permette la manipolazione e il rendering
dinamico
delle
immagini
sfruttando
l'elemento
HTML5
Canvas,
permettendo di applicare filtri semplici e complessi ad intere immagini o a
singole parti. Gli effetti supportati sono numerosi e spaziano dall’effetto
“Blur” o sfocato, all’inversione di colore, desaturazione, regolazione del
contrasto, saturazione e molte altre.
Pixastic opera direttamente sui singoli pixel agendo, grazie ai metodi
getImageData() e putImageData() disponibili nelle specifiche preliminari
dell’HTML5. A causa delle specifiche ancora non complete non tutti i
browser supportano tale libreria. I metodi sono attualmente completamente
45
Capitolo 2
supportati solo da Firefox dalla versione 2.0, Opera dalla versione 9.5, Safari
e Chrome nelle versioni più recenti. Internet Explorer nella sua versione
stabile ancora non supporta pienamente le specifiche HTML5, pertanto
alcuni effetti non risultano disponibili, ed altri risultano simulati attraverso
filtri proprietari tramite funzioni ActiveX.
Le immagini vengono scomposte in pixel e questi vengono modificati
uno alla volta, per poi essere ricomposti successivamente. Al termine di
questo processo l’oggetto ricomposto viene così convertito in un “Canvas” e
sostituito nella pagina originale, acquisendo tutte le proprietà, le classi e l’id
dell’immagine originale.
Durante lo sviluppo di questo progetto si è utilizzata questa libreria
per accedere alle formule matematiche visualizzate tramite immagini al fine
di modificare il colore dei font utilizzati. A tale scopo si è sviluppato uno
script
apposito,
per
modificare
il
colore
di
ogni
singolo
pixel
automaticamente. Tale script per la colorazione automatica delle formule
sarà integrato nelle prossime versioni della libreria MathJax in quanto, come
già detto, i metodi HTML5 necessari risultano, attualmente, compatibili solo
con le versioni aggiornate dei browser, non ancora, quindi, molto diffuse.
Nella Figura 1 è possibile vedere un utilizzo di questa libreria su una
singola parte di un immagini, attraverso l’applicazione del filtro “Inserse”.
46
Capitolo 2
Figura 1 - Esempio uso Filtro su Parte di una Immagine
2.3.2.4 Latex
LaTeX è un linguaggio di markup usato per la preparazione di testi
basato sul programma di composizione tipografica TEX. Utilizzato
soprattutto da scienziati, ingegneri e accademici, fornisce funzioni
di desktop publishing programmabili e mezzi per l'automazione della
maggior parte della composizione tipografica, inclusa la numerazione.
LaTeX venne creato nel 1985 da Leslie Lamport, ma tutt’ora risulta
sviluppato da da Frank Mittelbach ed è divenuto il principale metodo di
utilizzo di TEX per la redazione di documenti. La versione attuale è
denominata LaTeX2ε.
Oltre a documenti stampabili può produrre presentazioni della stessa
resa grafica grazie alla classe Beamer.
LaTeX ha trovato un'ampia diffusione nel mondo accademico, grazie
all'ottima gestione dell'impaginazione delle formule matematiche. È
distribuito con una licenza di OpenSource e questo l’ha reso disponibile per
47
Capitolo 2
la maggior parte delle architetture presenti sul mercato.
2.3.2.5 MathMl
MathML, basato sulle specifiche XML, è un linguaggio per la codifica
di matematica che è stato standardizzato dal World Wide Web Consortium
(W3C) nel 1998.
Le specifiche della versione 1.01 del formato furono rilasciate nel
giugno del 1999. La prima versione 2.0, o potremmo definirla la 2.0a
apparve nel febbraio 2001. Nell'ottobre 2003 fu pubblicata dal W3C la
seconda edizione di MathML versione 2.0, nota anche com 2.0b, in cui
furono riviste alcune definizioni. Nell’ottobre del 2010 è stata rilasciata la
versione 3.0, che risulta l’ultima versione stabile disponibile.
Sono disponibili molti programmi in grado di convertire espressioni
matematiche verso MathML o che permettono la visualizzazione e l’utilizzo
di questo linguaggio. Nonostante risulti essere uno standard da ormai 10
anni, anche, esso non risulta ancora diffuso, nella sua versione iniziale, a
causa dell’adozione tardiva nei browser. Attualmente solo Firefox offre il
pieno supporto integrato al linguaggio nella versione 2.0b, mentre Opera e
Safari offrono un supporto solo parziale. Internet Explorer e Google Chrome
non offrono nessun supporto, anche se per il primo esiste un plug-in di
terze parti che risolve questa incompatibilità. MathML è supportato inoltre
dai software per l'ufficio come OpenOffice, Microsoft Word e LibreOffice,
da software matematici come Mathematica che lo rendono comunque un
valido strumento in campo scientifico internazionale. Un esempio di codice
è sotto riportato. Anche se ad un primo approccio questo linguaggio potrà
48
Capitolo 2
sembrare prolisso e complesso, basandosi sul linguaggio Xml, esso è di
facile interpretazione, tanto che, contrariamente ad altri linguaggi, risulta
compatibile con screen-reader OpenSoucer come Festival.
Un esempio di scrittura LaTex e MathMl
Traduzione in codice LaTex:
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
Traduzione in linguaggio MathMl:
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mrow>
<mo>-</mo>
<mi>b</mi>
</mrow>
<mo>& plusmn;</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
49
Capitolo 3
Sviluppo Piattaforma: Gestione Esami
Capitolo 3
SVILUPPO PIATTAFORMA:
GESTIONE ESAMI
50
Capitolo 3
3.1 Inzio Sviluppo, la scelta ...
All’inizio dello sviluppo di questa piattaforma, ci si è trovati davanti
ad una scelta progettuale importante: scegliere se creare una piattaforma
software “ex-novo”, o di utilizzare una piattaforma già esistente
OpenSource.
Entrambe le possibilità avevano dei vantaggi e degli svantaggi.
Analizzando i vantaggi che la prima scelta avrebbe comportato ci si è subito
resi conto che un uno strumento “nuovo” sarebbe risultato di facile
integrazione in siti già esistenti, per ciò che concerne la parte grafica, infatti,
utilizzando una grafica minimale e facendo un uso esclusivo di regole Css,
l’integrazione in altre piattaforme delle pagine di gestione sarebbe risultata
immediata.
Altra considerazione è stata quella della semplicità di utilizzo;
sviluppando una nuova piattaforma si sarebbe avuta la possibilità di
disegnare i controlli e l’interfaccia di gestione, ponendo come punto cardine
la facilità di utilizzo; è stato infatti considerato, che dato l’uso saltuario che
si dovrà fare di tale strumento, è fondamentale mettere come punto cardine
durante la progettazione, la necessità di avere un tempo di apprendimento
pari a zero. Tale obiettivo è stato fondamentale nella scelta, poiché per una
più rapida adozione, si sarebbe dovuto scegliere lo strumento più semplice
da utilizzare, così tale da sollecitare gli operatori ad adoperarlo.
Altro vantaggio preso in considerazione nella creazione di una nuova
51
Capitolo 3
piattaforma è leggerezza dello strumento, ovvero, la possibilità di inserire
solo strumenti realmente utili e indispensabili per lo scopo che si vuole
raggiungere, evitando di integrare codice superfluo. Infine è stata
considerata la necessità di una profonda conoscenza della struttura del
codice al fine di poter integrare al meglio gli strumenti specifici che si sono
sviluppati e integrati. L’unico svantaggio notato della creazione di un nuoto
tool è stato il maggior impegno e lo sforzo indispensabile per lo sviluppo
prima della parte gestionale e, successivamente, delle interfacce. Tale scelta
avrebbe richiesto una maggiore quantità di tempo per la messa a punto e la
correzione di tutti i bug che si sarebbero presentati.
I vantaggi della seconda possibilità sono anch’essi evidenti, vale a dire,
la possibilità di avere a disposizione un tool, sviluppato da programmatori
sparsi in tutto il globo, con i vantaggi di una comunità attiva nella
correzione di bug e di un forum disponibile per il supporto, l’installazione e
l’ottimizzazione,
senza
escludere
piattaforma, e della disponibilità
il
costante
aggiornamento
della
di una documentazione ufficiale di
utilizzo. Tra gli svantaggi di questa scelta si è identificato il problema della
necessità di comprendere il funzionamento della piattaforma ed imparare la
struttura del codice per di modificarlo, per ampliarlo, e renderlo funzionale
alle esigenze del progetto. Inoltre, essendo uno strumento più complesso, si
è pensato che ai professori per il suo utilizzo, che si ricorda dover essere
occasionale, sarebbe stato necessario un periodo di apprendimento non
brevissimo.
Analizzando e confrontando le due opzioni, la scelta è ricaduta sulla
prima opzione. Creare uno strumento nuovo, avrebbe dato l’opportunità di
sviluppare una piattaforma di semplice utilizzo, essenziale, ma al tempo
52
Capitolo 3
stesso completa di tutte le funzionalità base, e con un veloce apprendimento
di utilizzo. Il tempo di sviluppo e debugging, si sarebbe sicuramente
equiparato al tempo di apprendimento della struttura del codice e di
modifica del tool open source che si sarebbe utilizzate nel secondo caso.
Una volta individuata la strada da seguire, sono stati individuati gli
strumenti che sono già stati presentati nel capitolo precedente, il database
MySql, per la memorizzazione delle informazioni, il linguaggio Php, per lo
sviluppo della piattaforma e tutti gli altri strumenti presentati nel Capito II
di quest’elaborato. La scelta è caduta principalmente su questi tool, poichè
disponibili con licenza Open source GNU GPL (General Public License), che
assicura all'utente libertà di utilizzo e modifica. A questi strumenti si
aggiunge l’utilizzo del software OpenSource PhpMyAdmin, scritto in
linguaggio Php. Tale programma non è altro che un'interfaccia grafica che
permette di amministrare il database MySql, di manipolare il database,
senza intervenire da linea di comando, ma usufruendo di una comoda e
funzionale interfaccia grafica.
3.2 Database
Si è deciso di sviluppare lo schema del database nel modo più semplice
possibile, inserendo esclusivamente le informazioni essenziali dell’esame,
quali le generalità dello studente, i dati del test, le domande e le risposte.
Analizzeremo di seguito nel dettaglio ogni singola tabella del database.
53
Capitolo 3
3.2.1 Tabella “esami”
Nella tabella “Esami”, come è possibile vedere dallo schema, sono
presenti gli attributi fondamentali per individuare l’esame e lo studente.
Figura 1 - Schema Tabella "Esami"
Risulta immediato l’utilizzo dei campi. Si analizzerà comunque nel
dettaglio ogni attributo:
Cod_Esam: fa riferimento al codice univoco che viene assegnato dal
sistema all’esame. Esso risulta essere l’associazione della matricola, del
nome dell’esame, e del nome del professore, esclusi gli spazi.
Es:
Matricola: 1020001
Nome Esame: Analisi 1
Nome Professore: Roberto Rossi
Il codice dell’esame sarà:
1020001Analisi1RobertoRossi
54
Capitolo 3
Tale stringa è necessaria al fine di evitare la possibilità che vengano a
crearsi 2 esami uguali, poiché è impossibile che due studenti abbiano la
stessa matricola. L’unico caso possibile di collisione di dati, deriva
dall’ipotesi di uno studente che ripete lo stesso esame dopo essere stato
bocciato; in questo caso dovrà essere cura del professore, o chi per lui,
modificare il test esistente, o cancellarlo e crearne uno nuovo.
Nome, Cognome: fanno riferimento al nome e al cognome dello studente.
Sono campi obbligatori, e quindi non possono essere nulli.
Matricola: fa riferimento alla matricola dello studente. È un campo
obbligatorio, e quindi non può essere nullo.
Facolta: fa riferimento alla facoltà di appartenenza dello studente, è
possibile scegliere tra cinque alternative: Ingegneria, Medicina, Scienze,
Agraria ed Economia. È un campo obbligatorio ed a scelta multipla, e
quindi non può essere nullo.
Nome_esam, Professore, Crediti: fanno riferimento ad i dati dell’esame, al
fine di individuare l’esame e il professore. Risultano campi obbligatori,
e quindi non possono essere nulli.
Info: fa riferimento ad un campo di testo supplementare, utile per
aggiungere informazioni ai dati dell’esame già inseriti. È l’unico campo
facoltativo della tabella, e quindi può essere nullo.
55
Capitolo 3
3.2.2 Tabella “Domande”
Figura 2 - Schema Tabella "Domande"
Nella tabella “Domande”, sono memorizzate le domande di tutti gli
esami, ad ognuna delle quali, vengono assegnate degli attributi:
Cod_es: fa riferimento al codice dell’esame. Esso è legato al codice
presente nella tabella “esami”. Risulta parte della chiave primaria.
Num_dom: corrisponde al numero della domanda dell’esame. È
utilizzato come indice nelle domande dell’esame, e parte da zero.
Risulta parte della chiave primaria.
Testo: qui viene memorizzato il testo della domanda, e pertanto non
può essere nullo.
Tipo: identifica il tipo di domanda memorizzato, e può avere i valori:
“lib” o “mul” che si riferiscono a domande a “Risposta Aperta” o
domande a “Risposta Multipla”. Non può essere nullo.
Punteggio: identifica il punteggio di ogni singola domanda, al fine di
estrapolare, alla conclusione del test, il punteggio totale. Esso è
disponibile sia per le domande a “Risposta Aperta”, sia per le
“Risposte Multiple”.
56
Capitolo 3
La chiave Primaria di questa tabella risulta essere la combinazione del
Codice Esame, e del Numero della domanda, in quanto non è possibile avere 2
domande con lo stesso indice, in un esame.
3.2.3 Tabella “Risposte”
Figura 3 - Schema Tabella “Risposte”
In questa tabella sono memorizzate le risposte associate alle domande a
risposta multipla. La chiave primaria è formata da più attributi.
Cod_es: fa riferimento al codice dell’esame. Esso è legato al codice presente
nella tabella “Domande”. Risulta parte della chiave primaria.
Num_dom: corrisponde al numero della domanda dell’esame. Esso
all’indice delle domande presente nella tabella “domande”. Risulta parte
della chiave primaria.
Num_risp: corrisponde al numero della disposta, riferita alla domanda
dell’esame. È utilizzato come indice delle risposte di una data domanda
dell’esame, e parte da uno. Risulta parte della chiave primaria.
57
Capitolo 3
Testo: qui viene memorizzato il testo della risposta, e pertanto non può
essere nullo.
Risp_giusta: grazie a questo campo viene identificata la risposta giusta alla
domanda data. Il valore di questo campo può essere uguale a “1” o “0”,
rispettivamente quando la risposta corrisponde alla risposta corretta, o a
una delle risposte errate.
La chiave Primaria di questa tabella risulta essere la combinazione del
Codice Esame, del Numero della domanda ed del Numero della risposta, in
quanto non è possibile avere 2 risposte con lo stesso indice appartenenti alla
stessa domanda di uno stesso esame.
3.2.4 Tabella “Imm_dom”
Figura 4 - Schema Tabella "Imm_dom"
In questa tabella, sono memorizzati i nomi dei file delle immagini
associate alle domande, se presenti. Si è deciso di aggiungere una nuova
tabella e non inserire un campo apposito nella tabella “domande”, poiché la
percentuale di domande con immagini risulta molto bassa e, pertanto, l’uso
58
Capitolo 3
del campo sarebbe stato minimo, per cui, per evitare frequenti campi vuoti,
si è preferito creare una nuova tabella dedicata allo scopo.
presente nella tabella “Domande”. Risulta parte della chiave primaria.
Num_dom: corrisponde al numero della domanda dell’esame. Esso è
legato all’indice delle domande presente nella tabella “domande”.
File_imm: corrisponde al campo in cui è memorizzato il nome del file
dell’immagine. Il nome deve essere univoco, in quanto tutte le
immagini risultano memorizzate sul server in un’unica cartella,
pertanto si è elaborata una combinazione del Codice esame, e del
Numero della domanda, che fanno si che il nome del file risulti
univoco.
Es:
Codice esame: 1020001Analisi1RobertoRossi
Numero Domanda: 2
Il nome del file associato alla domanda sarà:
1020001Analisi1RobertoRossi2.jpg
Il formato del file dipende esclusivamente dal formato dell’immagine
caricata sul server. I formati compatibili saranno discussi in seguito.
59
Capitolo 3
3.2.5 Tabella “Imm_risp”
Figura 5 - Schema Tabella "Imm_risp"
In questa tabella, sono memorizzati i nomi dei file delle immagini
associate alle risposte, ove presenti. È valida la stessa considerazione prese
in essere in precedenza per la tabella delle immagini riferita alle domande,
ovvero che si è deciso di aggiungere una nuova tabella, e non inserire un
campo apposito nella tabella “risposte”, poiché la percentuale di risposte
con immagini risulta estremamente bassa e, pertanto, si è preferito creare
una nuova tabella apposita per evitare frequenti campi vuoti.
presente nella tabella “Risposte”. Risulta parte della chiave primaria.
Num_dom: corrisponde al numero della domanda dell’esame. Esso è
legato all’indice delle domande presente nella tabella “domande”.
File_imm: corrisponde al campo in cui è memorizzato il nome del file
dell’immagine. Anche qui è stata elaborata una combinazione del
Codice esame, del Numero della domanda e del Numero della
risposta, tale da risultare univoco, poiché i file vengono salvati nella
stessa cartella.
60
Capitolo 3
Es:
Numero Domanda: 2
Numero Risposta:1
Il nome del file associato alla risposta specifica sarà:
1020001Analisi1RobertoRossi2_1.jpg
Il formato del file dipende esclusivamente dal formato dell’immagine
caricata sul server. I formati compatibili saranno discussi in seguito.
3.2.6 Tabella “Salvataggi_esami”
Figura 6 - Schema Tabella "Salvataggi_esami"
La tabella “Salvataggi_esami” è stata utilizzata per la memorizzazione
dei dati degli esami di cui è stato eseguito un Backup. Come è possibile
61
Capitolo 3
vedere dallo schema, esso riprende gli attributi fondamentali dell’esame e
dello studente, presenti nella tabella Esami, con l’aggiunta di alcuni attributi
specifici.
Cod_Esam: fa riferimento al codice univoco che viene assegnato dal
sistema all’esame. Esso è l’unione della matricola, del nome dell’esame,
e del nome del professore, esclusi gli spazi.
Datatime: in questo campo è memorizzata la data in cui è stato
eseguito il backup dell’esame. A tale scopo si è fatto uso della funzione
di “Timestamp” del Php, che corrisponde al “Timestamp” del sistema
operativo Linux. IL risultato di questa funzione è un codice numerico
che identifica i secondi trascorsi dal 1 gennaio 1970. Tale codice non
sarà mai visibile, ma è utilizzato esclusivamente per identificare
univocamente le date nel database.
Nome, Cognome: fanno riferimento al nome e al cognome dello studente.
Sono campi obbligatori, e quindi non possono essere nulli.
Matricola: fa riferimento alla matricola dello studente. È un campo
obbligatorio, e quindi non può essere nullo.
Facolta: fa riferimento alla facoltà di appartenenza dello studente, è
possibile scegliere tra cinque possibilità: Ingegneria, Medicina, Scienze,
Agraria o Economia. È un campo è un campo obbligatorio e a scelta
multipla, e quindi non può essere nullo.
Nome_esam, Professore, Crediti: fanno riferimento ad i dati dell’esame, al
fine di individuare l’esame o il professore. Sono campi obbligatori, e
quindi non possono essere nulli.
62
Capitolo 3
Info: fa riferimento ad un campo di testo supplementare, utile per
aggiungere informazioni ai dati dell’esame già disponibili. È l’unico
campo facoltativo della tabella, e quindi può essere nullo.
Risposte_presenti: fa riferimento alla presenza, o meno, delle risposte nel
file di backup, pertanto questo campo può avere valore “1” o “0”.
File_compresso_esa: in questo campo è memorizzato il nome del file del
backup, situato in una cartella specifica sul server. Il nome del file è
codificato utilizzando il codice esame ed il timestamp della richiesta.
Es:
TimeStamp (datatime): 1283014616
Il nome del file associato al backup sarà:
1020001Analisi1RobertoRossi_1283014616.zip
63
Capitolo 3
3.2.7 Schema Database completo
Figura 7 - Schema delle Tabelle del Database
Nella Figura 7, è possibile vedere lo schema, completo, della
composizione delle tabelle del Database utilizzato dal tool. È possibile
effettuare una prima constatazione riguardo alla tabella “salvataggi_esami”,
essa infatti non ha relazioni formali con le altre tabelle del database, questo
si è reso necessario affinché, nel caso si volesse cancellare i dati di un esame,
il backup non deve essere modificato, ne cancellato, e pertanto tutte le
informazioni sono sempre copiate nella tabella al momento della richiesta
del backup.
Altra considerazione che è possibile individuare riguarda i riferimenti
alle chiavi primarie: nel caso fosse necessario modificare l’indice di una
domanda, automaticamente saranno modificati anche i riferimenti alla
risposte e alle immagini, ove presenti, rendendo la modifica dell’esame
facile ed immediata. Utilizzando lo stesso concetto è possibile intuire che,
64
Capitolo 3
cancellando le sole informazioni dell’esame, a cascata saranno cancellate
tutte le informazioni del database ad esso collegata, escluse le informazioni
presenti nella tabella “salvataggi_esami”, che, come già esposto, mantiene
una propria autonomia dal resto del database.
3.3 Sviluppo Strumenti di Gestione
3.3.1 Home
Figura 8 - HomePage
La Figura 8 - HomePage riporta l’homepage della piattaforma. Risulta
molto semplice, priva di qualunque elemento decorativo e anche l’uso dei
colori risulta minimale. Questa scelta di austerità è stata scelta per la
semplificazione del processo di integrazione dello strumento in piattaforme
già esistenti, in quanto si è preferito evitare l’uso di regole di stile, con
65
Capitolo 3
l’intento di inserirle successivamente, al momento dell’integrazione dello
strumento in piattaforme software già utilizzate.
Sulla sinistra è presente il menù iniziale con 3 scelte principali, ed i
sotto-menù che danno accesso alle funzioni principali del tool.
È possibile individuare tre collegamenti alle funzioni principali:
Strumento di Visualizzazione
Strumento di Creazione
Strumento di Ricerca Back-Up
Nella parte centrale della pagina è presente una descrizione generale
dello strumento, che ricorda che il tool è frutto di un tirocinio, e si è avvalso
della collaborazione dell’Ufficio Disabili dell’Università.
3.3.2 Strumento Creazione Esame
3.3.2.1 Inserimento Dati Esame
Figura 9 - Strumento Creazione Esame
66
Capitolo 3
Nella Figura 9 è possibile vedere la prima schermata di inserimento di
un esame; tutte le informazioni dello studente e dell’esame vengono inserite
in questa pagina. E’ presente uno script in linguaggio JavaScript per il
controllo dei campi inseriti; tutti i campi vengono controllati e validati
prima dell’invio al server per la creazione del “record” del nuovo esame. I
campi “Matricola” e “Crediti” possono accogliere solo numeri e non
possono essere nulli. Tutti gli altri campi possono accogliere caratteri
alfanumerici e non possono essere nulli, eccetto il campo “Ulteriori
Informazioni”, che risulta facoltativo.
In alto a destra è possibile notare l’unica icona presente in questa
pagina; essa è presente in tutte le pagine del tool e fa riferimento alla guida
utente che si è integrata per facilitare l’utilizzo degli strumenti. Cliccandoci
si apre un pop-up con le informazioni di supporto per l’utilizzo della sola
pagina attiva, come si vedrà in seguito in un esempio.
3.3.2.2 Inserimento Domanda
Figura 10 – Strumento Inserimento Domanda - Parte 1
67
Capitolo 3
In questa immagine riporta la schermata di inserimento delle
domande. L’utilizzo è immediato.
I pulsanti ed i menù disponibili permettono di:
Selezionare il tipo di risposta, tra: “Risposta Multipla” o “Risposta
Libera”;
Selezionare il numero di risposte (funzione disponibile solo nel caso sia
attiva la risposta multipla);
Caricare un’immagine;
Inserire una Formule Scientifiche (sia Chimiche sia Matematiche);
Selezionare il punteggio della risposta;
Le funzioni sono immediate e quindi non saranno trattate nello
specifico. I tool di caricamento delle immagini e di inserimento delle
formule saranno commentati successivamente.
Una volta inserita la domanda, nel caso di “Risposta libera”, si
procederà immediatamente alla memorizzazione della stessa, come
mostrato nella Figura 11.
Figura 11 - Inserimento Domanda - Parte 2
68
Capitolo 3
Nel caso si stia inserendo una domanda a risposta multipla, il
passaggio successivo sarà l’inserimento delle risposte.
Figura 12 - Inserimento Domanda - Parte 3
Nella Figura 12 mostra la videata di inserimento delle risposte
multiple. In questo esempio sono visualizzate solo due risposte possibili, ma
il tool ne supporta sino a 12.
Come è possibile notare dalla figura ogni risposta ha i suoi pulsanti per
l’inserimento delle immagini e delle formule ed ogni pulsante funziona
esclusivamente con la risposta associata. Di lato ad ogni risposta è possibile
selezionare la risposta corretta, che potrà essere una sola per domanda.
In fondo alla pagina è possibile modificare il numero di risposte
possibili, rimuovendone alcune, o inserendone delle nuove, e, in
quest’ultimo caso, i dati delle risposte già inserite non andranno persi
durante il caricamento dei nuovi campi di inserimento.
69
Capitolo 3
Infine il pulsante “Inserisci Risposte”, in fondo alla pagina, serve per
memorizzare la domanda, le risposte, le immagini alle domande. Solo dopo
aver cliccato su questo pulsante, infatti, il server avvierà la procedura di
salvataggio dei dati nel database, restituendo l’esito dell’inserimento.
3.3.2.2.1 Caricamento Immagini
Questo strumento permette di caricare un’immagine nella domanda, o
nella risposta associata. All’attivazione del pulsante, si aprirà una finestra
come quella in figura 13, che richiederà il caricamento dell’immagine sul
server.
Figura 13 - Caricamento Immagine
Come visibile dalla breve descrizione visibile nel pop-up, i formati
accettati dal sistema:
Jpg o Jpeg
Png
Gif
Bmp
70
Capitolo 3
Nel caso siano caricati altri formati di immagini il sistema ritornerà con
un messaggio di errore. Le immagini una volta caricate sul server, saranno
analizzate, ed eventualmente modificate tramite l’uso delle librerie GD del
Php.
Tali librerie, nell’ambito di questo progetto, sono state utilizzate per
l’ottimizzazione delle immagini prima della memorizzazione sul server.
Le librerie GD entrano in azione al momento del caricamento del file
sul server. L’ottimizzazione avviene in maniera del tutto trasparente
all’utente, sul server in un file temporaneo. Lo script modifica la risoluzione,
analizzando il lato più lungo tra l’altezza e la larghezza, ridimensionandolo
se esso dovesse essere superiore a 400 pixel. L’altro lato viene alterato in
modo proporzionale
al fine di non deformare l’immagine. Questa
operazione ha il duplice scopo di migliorare l’immagine per l’integrazione
con l’interfaccia, e di razionalizzare lo spazio sul server e la velocità di
caricamento dell’esame, poiché molte immagini eccessivamente grandi (ed
inutilmente grandi), rallenterebbero il caricamento dell’esame, e sarebbero
comunque ridimensionate dal browser al momento della visualizzazione
dell’esame.
Oltre all’utilizzo delle librerie “standard” GD incluse nel Php, si è resa
necessaria l’introduzione del formato “Bmp”, ovvero Windows Bitmap, non
compatibile con queste librerie, poiché non adatto alle connessioni Internet.
L’introduzione del formato “Bitmap” si è decisa per facilitare il
caricamento delle immagini sul server. Precludere tale supporto avrebbe
significato un processo di conversione, a carico dell’utente,, in uno dei
71
Capitolo 3
formati compatibili dal tool. A tale scopo sono state incluse due funzioni
aggiuntive alle librerie standard. Queste funzioni entrano in azione qualora
venga rilevato, al caricamento dell’immagine sul server, un file con
estensione “Bmp”. Le funzioni hanno il compito, dopo che le librerie
standard GD hanno ottimizzato il file ricevuto dall’utente, di codificare
l’immagine utilizzando la codifica Jpg, migliorando notevolmente la
velocità di caricamento dell’esame, in quanto questo formato garantisce una
buona compressione dell’immagine, preservandone al tempo stesso la
qualità complessiva.
Alla conclusione del processo di processo di salvataggio ed
ottimizzazione il sistema risponderà con l’esito delle operazioni, ed in caso
di successo, mostrerà anteprima dell’immagine caricata e modificata.
Figura 13a - Caricamento immagine - Successo
72
Capitolo 3
3.3.2.2.2 Inserimento Formula
Figura 14 - Strumento Inserimento Formule
La Figura 14 mostra il tool di inserimento delle formule chimiche e
matematiche. Tale strumento utilizza il linguaggio LaTex, di più semplice
scrittura ed utilizzo del linguaggio MathMl.
Lo strumento si presenta con 13 pannelli che si aprono al passaggio del
mouse. Ogni pannello racchiude innumerevoli simboli matematici, le lettere
greche e latine maggiormente utilizzate in ambito scientifico. Sono presenti
anche script automatici per le matrici, ed un pannello completo di parentesi
di tutti i tipi, oltre che le funzioni trigonometriche, limiti e logaritmi.
73
Capitolo 3
Si è voluto aggiungere anche un supporto alla scrittura, raggiungibile
tramite il simbolo della “i”, che sta per “info” o “informazioni”, che conduce
alla pagina di Wikipedia sul codice LaTex e fornisce supporto per la
scrittura e la comprensione del linguaggio matematico. Sono, inoltre, state
inserite delle formule di esempio, divise per campi, raggiungibili cliccando
sul pulsante “Esempi”
Figura 15 - Strumento Inserimento Formule – Pannello Esempi
In aggiunta, è presente anche una cronologia delle equazioni inserite, e
la possibilità di annullare le operazioni effettuate, tornando indietro, o
andando avanti, utilizzando le frecce dedicate, posizionante in alto a destra,
di lato all’elenco di funzioni disponibili, come da immagini 14 e 16.
Figura 14 - Strumento Inserimento Formule – Esempio
74
Capitolo 3
La figura 16 riporta un esempio di utilizzo dello strumento. È possibile
notare l’anteprima dell’equazione che viene creata utilizzando lo script
MathJax, già dibattuto in precedenza, che si occupa della traduzione dal
linguaggio LaTex in simboli grafici o in linguaggio MathMl, a seconda che
il browser utilizzato lo supporti o meno. L’anteprima viene ri-creata ogni
qual volta il testo presente nel campo apposito di inserimento della formula
viene modificato, quindi sia con la scrittura manuale del codice tramite la
tastiera, sia utilizzando i pannelli dei simboli.
3.3.3 Strumento di Ricerca Esame
Figura 15 - Strumento Ricerca Esame
Dalla Homepage principale, andando sul menù, dalla voce “Visualizza
esami”, è possibile raggiungere lo strumento di ricerca cliccando su “Ricerca
Esame”. Tale strumento è fondamentale per l’individuazione dei test
desiderati. Inserendo un qualsiasi campo, anche solo in modo parziale, uno
qualsiasi dei dati, il sistema automaticamente ricercherà, e individuerà, tutti
gli esami con le caratteristiche selezionate. È quindi possibile effettuare
75
Capitolo 3
ricerche per studente, per professore, per facoltà, per esame, o utilizzando
un insieme di queste chiavi. Per facilitarne l’utilizzo la grafica rispecchia il
form di Inserimento dei Dati degli esami. Nel caso si avvii la ricerca,
cliccando sul pulsante “Cerca Esame”, senza aver inserito nessun dato, il
risultato presentato visualizzerà l’elenco di tutti gli esami presenti nel
sistema; tale funzione è ugualmente raggiungibile dal menù principale,
cliccando su “Visualizza Esami” e poi su “Visualizza tutti”.
Come nelle altre pagine della piattaforma in alto a destra è presente
l’icona di aiuto, che permettere di avvalersi di un pop-up con la descrizione
della pagina che si sta visitando e di individuare le funzioni di si hanno
bisogno.
3.3.4 Strumento di Visualizzazione Esami
Figura 16 - Strumento Visualizzazione Esami
Nella Figura 18 è possibile individuare la grafica della pagina di
elencazione degli esami salvati nella piattaforma. Dalla figura è possibile
vedere che ogni esame viene identificato dal nome dello studente, dalla
matricola, dalla facoltà, dal nome dell’esame e dal professore esaminatore.
La rappresentazione di queste informazioni è necessaria per la corretta
76
Capitolo 3
individuazione nell’elenco dell’esame che interessa. È inoltre presente
l’informazione aggiuntiva del numero di domande associate ad ogni esame.
Sulla parte destra di ogni riga sono presenti le icone delle operazioni
disponibili:
Quest’icona identifica lo strumento di Back-Up dell’esame. Se fatto
da questa pagina lo strumento memorizzerà in un file esclusivamente il
test, cioè le domande e le risposte memorizzate e le immagini associate.
Si avrà successivamente la possibilità di scaricare il file così creato.
Quest’icona identifica lo strumento di svolgimento esame. Il link
permette di
raggiungere la pagina per la scelta dell’interfaccia
adeguata allo studente.
Quest’icona identifica lo strumento di modifica dell’esame. Tale
strumento porta l’utente al pannello di modifica dell’esame, delle
domande e delle risposte.
Quest’icona identifica lo strumento di stampa dell’esame. È stata
creata una pagina ottimizzata per la stampa dell’esame, al fine di
fornire la possibilità di mantenere una copia cartacea del test
memorizzato.
Quest’icona identifica lo strumento di cancellazione dell’esame.
77
Capitolo 3
Tale visualizzazione è utilizzata anche dallo strumento Ricerca Esami i
cui risultati vengono visualizzati con la medesima interfaccia che mette a
disposizione gli stessi strumenti.
Come è possibile notare, in alto a destra, è possibile individuare il link
per raggiungere la guida, come nelle pagine già analizzate in questo
elaborato. Di seguito (Figura 19) è riportata un’immagine che mostra il
contenuto della guida dello strumento di visualizzazione degli esami.
Figura 19 - Esempio Guida Utente
78
Capitolo 3
3.3.5 Strumento di Modifica Esame
Figura 20 - Strumento Modifica Esame - Parte 1
Nella figura 20 è possibile osservare una videata dello strumento di
Modifica degli esami. Come è possibile vedere in alto alla pagina sono
presenti i dati riassuntivi dell’esame e dello studente.
Le domande che compongono l’esame sono elencate in base all’indice
delle stesse. Come abbiamo visto precedentemente, queste possono essere di
due tipi a risposta libera e a risposta multipla. Nella figura notiamo che a
lato al testo di alcune domande è presente la dicitura “(Risposta libera)”,
mentre su altre no; come è facile intuire le domande con questa dicitura
sono domande a risposta libera, al contrario le altre risultano essere a
risposta multipla. Come indicato ad inizio pagina, per visualizzare le
risposte delle domande a risposte multiple ad esse associate è necessario
cliccare sulle domande stesse. Il risultato è mostrato nella figura 21.
79
Capitolo 3
Figura 21 - Strumento Modifica Esame - Parte 2
Le risposte corrette sono visualizzate in grassetto; nella figura 21 la
risposta corretta è la numero 3.
Sono presenti due strumenti associati ad ogni domanda:
Lo strumento di modifica, che permette di accedere alla sezione di
modifica della domanda e delle risposte associate.
Lo strumento di cancellazione delle domande.
L’icona aggiuntiva serve ad indicare se nella domanda, o nella
risposta, sono presenti immagini.
Alla fine della pagina è presente un bottone che permette di inserire
una nuova domanda all’esame in coda a quelle già inserite.
Come nelle altre pagine della piattaforma, in altro a destra è presente
della pagina che si sta visitando e di individuare le funzioni di cui si hanno
bisogno.
80
Capitolo 3
3.3.5.1 Strumento Modifica domanda
Lo strumento di modifica delle domande riprende le funzionalità dello
strumento creazione, come visibile in Figura 22. I dati della domanda
vengono caricati ed è possibile modificarli in ogni parte. È possibile
modificare il tipo di una domanda, o il punteggio associato, o intervenire
anche solo sul numero delle risposte.
Nella parte superiore della pagine sono sempre presenti i dati generali
dell’esame e dello studente: questi non possono essere modificati.
Figura 22 - Strumento Modifica Domanda
Nell’esempio in Figura 22 è stato cambiato il tipo di domanda,
passando da una domanda a risposta libera ad una a risposta multipla con
la possibilità di 3 scelte, come da Figura 23.
81
Capitolo 3
Figura 23 - Strumento Modifica Risposte
È possibile osservare che anche lo strumento di modifica delle risposte
rispecchia lo strumento di inserimento, incluse le funzioni di aggiunta delle
Formule scientifiche, o delle immagini.
Come nelle altre pagine della piattaforma, in altro a destra, è presente
della pagina che si sta visitando e di individuare le funzioni di cui si ha
bisogno.
82
Capitolo 3
3.3.5.2 Strumento di Cancellazione domanda
Figura 17 - Strumento Cancellazione Domanda
L’utilizzo di tale strumento risulta immediato. Nella parte superiore
sono rappresentati i dati principali dell’esame e dello studente, nella parte
sottostante, la domanda che si vuole eliminare, il testo della stessa e le
risposte,
se
presenti.
Nel
caso
si
annulli
l’operazione,
si
verrà
immediatamente riportati alla visualizzazione precedente dell’esame.
bisogno.
83
Capitolo 3
3.3.6 Strumento di Cancellazione Esame
Figura 25 - Strumento Cancellazione Esame
Tale strumento, raggiungibile dalla pagina di modifica dell’esame,
tramite il bottone in alto, o dalla pagina di ricerca dei test, si occupa della
cancellazione di tutti i dati dell’esame, sia del corpo del test, ovvero
domande, risposte e immagini, sia i dati generali dello studente. Come è
possibile osservare è presente un elenco delle domande e delle risposte
presenti nel test, al fine di verificare il testo dell’esame che si sta procedendo
all’eliminazione.
È possibile annullare l’operazione utilizzando il bottoni in fondo alla
pagina. Si ricorda che sono disponibili le funzioni di back-up e di stampa,
raggiungibili dalla pagina di ricerca degli esami.
84
Capitolo 3
bisogno.
3.3.7 Strumento di Stampa Esame
Figura 26 - Strumento di Stampa Esame
Nella Figura 26 è possibile osservare la visualizzazione dell’esame
ottimizzata per la stampa. Come è possibile vedere le domande e le risposte
sono disposte in modo tabellare, le risposte corrette evidenziate con un
bordo più spesso e di colore rosso. Tale formattazione si è voluta al fine di
permettere la stampa sia a colori, che in bianco e nero,senza precludere la
possibilità di individuare le risposte corrette. Le immagini risulta
ridimensionate opportunamente, al fine di permettere una corretta stampa
nel formato standard A4.
85
Capitolo 3
In questa pagina si è evitato di inserire il supporto della guida utente,
poiché non sono presenti funzionalità aggiuntive.
3.3.8 Strumento di Back-Up Esame
Figura 27 - Strumento di Back-up Esame
Tale strumento è necessario nel caso si voglia effettuare una copia
dell’esame prima di proseguire con una modifica o una cancellazione. Come
è visibile dalla Figura 27, è presente un resoconto dei file salvati, che
includono i file delle immagini ed file aggiuntivi. I file vengono salvati in un
unico “file contenitore” codificato nel formato compresso “Zip”, al fine di
ottimizzare l’uso dello spazio sul server e di semplificare il download dello
stesso. Il nome del file risulta essere univoco, secondo la struttura già vista
precedentemente, nel paragrafo 3.2.5. La struttura del file compresso è:
Cartella Principale:



File di testo con Informazioni Esame
Cartella Domande

File di testo Domande

File Xml Domande
 Cartella Immagini Domande
Cartella Risposte

File di testo Risposte

File Xml Risposte

Cartella Immagini Risposte
86
Capitolo 3
Nel file di testo presente nella cartella principale del file compresso,
sono immagazzinate le informazioni dello studente, il nome dell’esame, in
coda a tali dati si sono inserite delle note sul tipo di codifica utilizzata per
salvare il corpo dell’esame. Al fine di agevolare una possibile reintegrazione
di un esame disponibile solo sotto forma di back-up, si è sono state
utilizzate due codifiche differenti per salvare i dati delle domande e delle
risposte. In entrambi i casi, è stata utilizzata la struttura della tabella
presente nel database della piattaforma. Le immagini, invece, risultano delle
copie di quelle presenti sul server mantengono pertanto formato e nomi
originali assegnati al momento del caricamento sul server.Il Formato Xml è
stato utilizzato essendo uno standard W3C. La struttura utilizzata per la
codifica delle domande è molto semplice:
<Esame cod_es="1010101EsameTipoQualsiasi">
<domanda numero_domanda="1">
<testo>Come si definisce il meccanismo di duplicazione del DNA?</testo>
<tipo>lib</tipo>
<immagine>null</immagine>
<punteggio>1</punteggio>
</domanda>
…
</Esame>
Come è possibile notare la struttura è molto semplice, ma al tempo
stesso completa di tutte le informazioni necessarie per una corretta
ricostruzione dell’esame originale. La struttura del file Xml associato alle
risposte è simile:
<Esame cod_es="1010101EsameTipoQualsiasi">
<risposta_domanda numero_domanda="1" tipo_risp="lib">
…
</risposta_domanda>
<risposta_domanda numero_domanda="2" tipo_risp="mul">
87
Capitolo 3
<risposta numero_risposta="1">
<testo>@E=0,V=0@</testo>
<giusta>0</giusta>
<immagine>null</immagine>
</risposta>
<risposta numero_risposta="…">
…
</risposta_domanda>
…
</Esame>
Il file di testo contiene le stesse informazioni, ma codificate tramite la
funzione “Serialize()”del linguaggio Php, che precedentemente erano state
raggruppate in una collezione di dati disomogenei su più livelli, ovvero in
un array multidimensionale, ovvero. La funzione Serialize() permette,
infatti, di codificare array ed oggetti, utilizzando semplici stringhe di testo,
permettendo una più facile memorizzazione, anche se non di semplice
interpretazione testuale. Utili$zzando in seguito la funzione opposta, ossia
“UnSerialize()” è possibile poi ricostruite l’oggetto originale sul server, ed in
questo caso, permette di ricreare le tabelle del database all’esame. La
risposta visualizzata nello spezzone di codice mostrato sopra risulta
codificata in questo formato dalla sola stringa:
a:9:{i:1;a:1:{i:0;s:0:"";}i:2;a:4:{i:1;a:3:{i:0;s:9:"@E=0,V=0@";i:1;s:1:"0";i:2;s:4
:"null";}…
Come è possibile osservare tale codifica risulta maggiormente
compatta, ma di difficile lettura, contrariamente alla codifica Xml che risulta
di più semplice comprensione, ma più prolissa.
88
Capitolo 3
3.3.9 Strumento di Gestione Back-Up
Figura 28 - Strumento Gestione Back-Up Esami
Da questa pagina, raggiungibile dalla Home della piattaforma, è
possile visualizzare tutti i back-up di esami presenti sul server. È possibile
osservare dalla Figura 28, che nella parte sinistra della tabella sono presenti
le informazioni generali dell’esame, nella parte centrale le informazioni
specifiche del back-up in memoria e nella parte destra gli strumenti associati
ad ogni back-up.
Sono disponibili 3 informazioni specifiche del back-up, ossia:
la data di salvataggio
la disponibilità nel database in memoria di un esame con lo stesso codice
il tipo di back-up effettuato
Per disponibilità si intende la presenza, tra gli esami visualizzabili e
modificabili, di un test con lo stesso “codice esame” di quello memorizzato
in questa tabella contente i dati dei backup. Infatti, come osservato
precedentemente nel paragrafo 3.2.6, la tabella dei salvataggi dei backup, è
del tutto autonoma e quindi un esame cancellato dal database potrebbe
89
Capitolo 3
risultare comunque presente in questa tabella sotto forma di back-up. Tale
funzionalità si rivela necessaria per identificare i back-up di esami ancora da
sostenere, da quelli disponibili in sola forma di back-up.
Per “tipo di back-up” si intende, se presente o meno nel back-up il file
contenete le risposte date dallo studente. Infatti è possibile portare a termine
il back-up sia del solo testo dell’esame, come visto nei paragrafi precedenti,
sia dell’esame svolto, come vedremo nel prossimo capitolo, quando
affronteremo lo sviluppo delle interfacce.
3.3.10 Strumento di Ricerca Back-Up
Figura 29 - Strumento Ricerca Back-Up
Raggiungibile dalla Home è disponibile un tool di ricerca degli esami
salvati. Tale strumento riprende la grafica già vista in precedenza per la
ricerca degli esami inseriti, ma, in questo caso, la ricerca avviene
esclusivamente nella tabella degli esami salvati. Anche in questo caso, la
ricerca può avvenire utilizzando uno, o più campi tra quelli proposti,
inserendo anche parzialmente il testo da ricercare. Tutti i record compatibili
90
Capitolo 3
con la ricerca effettuata sono visualizzati nella schermata proposta nel
paragrafo 3.2.8.
91
Capitolo 4
Sviluppo Piattaforma: Interfaccia Esami
Capitolo 4
SVILUPPO PIATTAFORMA:
INTERFACCIA ESAMI
92
Capitolo 4
4.1 Strumento per lo Svolgimento degli Esami
Nella pagina di Svolgimento degli esami, raggiungibile dalla pagina di
ricerca degli esami, cliccando sull’icona predisposta, sono raccolte le
interfacce disponibili nella piattaforma. Ogni interfaccia si discosta dalle altre
per forma e funzioni implementate, anche se la struttura base è identica.
Essendo esclusivamente delle interfacce ogni esame è visualizzabile
attraverso tutte le maschere presenti in questa pagina.
Figura 1 - Strumento Svolgimento Esame
Come è possibile vedere nella Figura 1, la pagina di scelta è essenziale
nella grafica: nella parte superiore è presente il riassunto dei dati dell’esame,
nella forma già utilizzata in altre parti della piattaforma, mentre nella parte
centrale è rappresentato l’elenco delle interfacce installate nella piattaforma.
Durante lo sviluppo si è scelto di implementare tre interfacce, una base, e
due ottimizzate per diverse tipologie di utenti.
Ogni interfaccia è composta da 4 file principali:
93
Capitolo 4
un file Php con il codice necessario per il caricamento dell’esame dal
database
un file JavaScript con il codice necessario per la creazione e lo
svolgimento dell’esame
un file JavaScript con il codice delle funzioni utilizzate per la
strutturazione dell’interfaccia d’esame
un file Css con il codice della parte grafica
4.1.1 File Esame_.php
Il file Php, denominato “esame_.php”, contiene l’algoritmo per il
prelevamento dell’esame dal database e dell’inizializzazione degli script di
funzionamento. Alla richiesta dell’esame questa pagina si occupa di caricare
tutti i dati del test scelto, ovvero le domande, le risposte e le immagini.
Queste
informazioni,
vengono
salvate
in
una
struttura
JavaScript,
opportunamente inizializzata. Tale operazione serve per riuscire a contenere
l’esame in una struttura organizzata e gerarchica, sempre disponibile lato
client, si ricorda, infatti, che la tecnologia Php e il database lavorano
esclusivamente lato server e, per scelta progettuale, non si è deciso di non
utilizzare alcun algoritmo Ajax. Si è scelto di replicare la struttura tabellare
del database utilizzando 2 array, ovvero: esame[] e risposta[]; il primo contiene
tutte le informazioni delle domande e delle immagini associate, mentre il
secondo contiene le informazioni delle risposte. Per mantenere una struttura
gerarchica coerente si sono utilizzati degli array multidimensionali.
94
Capitolo 4
L’array esame[] è strutturato seguendo lo schema della tabella domande
(paragrafo 3.3.2) del database, implementato grazie all’utilizzo di un array di
2 livelli:
esame[$k][$l]
L’indice $k fa riferimento al numero della domanda del test caricato.
Esso corrisponde al campo “num_dom” della tabella domande.
L’indice $l fa riferimento al valore dell’attributo della domanda, come
possiamo vedere dalla “Figura 2” del Capitolo 3, sono associati 4 campi
principali:
 Se l’indice $l è uguale a 0, nel record dell’array è memorizzato il
testo della domanda
 Se l’indice $l è uguale a 1, nel record è memorizzato il tipo di
domanda, ovvero se è una domanda a risposta multipla o libera
 Se l’indice $l è uguale a 2, nel record è memorizzato, nel caso siano
presenti, il nome del file dell’immagine associata alla domanda.
 Se l’indice $l è uguale a 3, nel record è memorizzato il punteggio
associato alla domanda.
Per le risposte, è stato necessario ricorrere ad un ulteriore indice,
realizzando così un un array di 3 livelli, così inizializzato:
risposta[$k][$i][$l]
L’indice $k fa riferimento al numero della domanda a cui la risposta fa
riferimento. Esso corrisponde, come nel caso precedente, al numero
della domanda, ovvero, al campo “num_dom” della tabella risposte.
95
Capitolo 4
L’indice $i fa riferimento al numero della risposta della domanda $k, in
quanto in presenza di domande a risposta multipla, sono presenti più
risposte associate allo stesso indice $k;
L’indice $l fa riferimento al valore dell’attributo della domanda, come
possiamo vedere dalla “Figura 2” del Capitolo 3, sono associati 3 campi
principali:
 Se l’indice $l è uguale a 0, nel record dell’array è memorizzato il
testo della risposta;
 Se l’indice $l è uguale a 1, nel record sono memorizzati i dati per
l’identificazione delle risposte corrette e di quelle errate
 Se l’indice $l è uguale a 2, nel record è memorizzato, nel caso siano
presenti, il nome del file dell’immagine associata alla risposta $i.
Essendo il file principale dell’interfaccia, nel codice di questa pagina
sono presenti anche i riferimenti per il caricamento di tutti gli script utilizzati
per la visualizzazione dell’esame.
Gli script Javascript per le funzioni esterne utilizzate:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="atooltip.js"></script>
<script type="text/javascript" src="./pixastic.js"></script>
<script type="text/javascript"
src="./MathJax/MathJax.js"></script>
Gli script Javascript per creazione della struttura di visualizzazione:
<script type="text/javascript" src="funzioni.js"></script>
<script type="text/javascript" src="esame_.js"></script>
96
Capitolo 4
Il codice CSS delle regole di stile per la stampa:
<link rel="stylesheet" href="./esame_stampa.css" type="text/css"
media="print">
È presente inoltre un piccolo script Php, in base ad un parametro dato in input,
permette il caricamento delle regole di visualizzazione della sola interfaccia scelta:
if ($mode_es=="ipo"){echo"<link rel=\"stylesheet\"
type=\"text/css\" href=\"esame_ipo.css\">\n";
}
else if ($mode_es=="alt"){echo"<link rel=\"stylesheet\"
type=\"text/css\" href=\"esame_sim.css\">\n";
}
else {echo"<link rel=\"stylesheet\" type=\"text/css\"
href=\"esame_.css\">\n";
}
Al completamento del caricamento di tutti i dati dell’esame, e degli
script, viene richiamata la funzione Javascript principale del file esame_.js,
tramite l’attributo onload(), del campo Body:
<body onload="caricamento();">
4.1.2 File Javascript Esame_.js
In questo file è memorizzato il codice per la creazione dell’interfaccia
dell’esame. Attraverso un uso avanzato del DOM, Document Object Model, si
è deciso di creare dinamicamente la struttura dell’interfaccia. Questa
implementazione, benché inusuale, è stata scelta di garantire la compatibilità
delle interfacce anche con altre piattaforme, per mantenere la possibilità di
implementare le maschere di visualizzazione anche su sistemi server che non
usino il linguaggio Php, ma usino altre tecnologie proprietarie o commerciali,
riscrivendo un file che imiti le funzioni del file esame_.php, ossia
97
Capitolo 4
l’acquisizione
dei
dati
e
la
memorizzazione
multidimensionali (mantenendo ovviamente
in
array
JavaScritp
l’uso degli indici come
precedentemente indicato), si otterrebbe una piena e totale compatibilità del
sistema pre-esistente con le interfacce sviluppate in questo progetto.
In questo file è possibile individuare 2 funzioni principali:
Caricamento() questo script, attraverso l’utilizzo dei dati dell’esame dagli
array esame[] e risposte[], disegna le interfacce utilizzando il modello DOM
attraverso funzioni standard. Tra le più usate possiamo trovare:
document.createElement("…");
appendChild(“…”);
setAttribute("…","…");
Al fine di diminuire la lunghezza del codice, si è deciso di semplificare
in alcune fasi la creazione di elementi nuovi, attraverso la definizione di una
funzione crea() la cui definizione, presente nel file funzioni.js è:
function crea(tipo,id,classe,valore,nodo,click){
var obj = this;
obj = document.createElement(tipo);
if (id!="" || id!= null) obj.setAttribute("id",id);
if (classe!="" ||classe!= null )obj.setAttribute("class",classe);
if (valore!="" || valore!= null) obj.setAttribute("value",valore);
if (click!="" || click!= null)obj.setAttribute("onclick",click);
if (nodo!="")
nodo.appendChild(obj);
return obj;
}
Risultati() una volta completato l’esame, questo script si occupa della
creazione della pagina di visualizzazione dei risultati, e della strutturazione
delle
tabelle
riassuntive.
Vedremo
nel
dettaglio
questa
funzione
dell’interfaccia in seguito nel paragrafo 4.3.
98
Capitolo 4
4.1.3 Javascript Funzioni.js
Il secondo file JavaScript funzioni.js contiene invece le funzioni principali
per i controlli, e lo svolgimento del test. Alcune di queste funzioni
richiamano in sequenza funzioni esterne degli altri script caricati all’avvio,
come:
function render_equ(id){
MathJax.Extension.tex2jax.PreProcess(id);
MathJax.Hub.Process(id);
}
Questa funzione richiama gli script MathJax per convertire le formule
scritte in codice LaTex in immagini; nello specifico la prima funzione
richiamata in queste riche di codice, analizza il testo contenuto nell’oggetto
“id” individuando le formule scientifiche, che saranno tradotte poi dalla
seconda funzione richiamata.
Altre funzioni risultano essere i metodi per il controllo e la modifica
delle immagini. Di seguito sono elencate le funzioni principali atte a questo
scopo:
automaticamente le
immagini al caricamento dell’interfaccia. E’ possibile modificare il
valore massimo della risoluzione tramite le variabili: imm_max_height e
function
rid_img_caricamento()Ridimensiona
imm_max_width;
Al fine di non occupare
troppo spazio per le immagini, si è voluto rappresentare parzialmente le
immagini, rendendole del tutto visibili solo al passaggio del mouse
sopra di esse. Questa soluzione ha richiesto l’implementazione di una
logica di controllo, normalmente non prevista dalla funzione
function
img_rid_small(self,
largh,
alt)
99
Capitolo 4
mouseOver, specifica per le periferiche Touch-Screen. Si vedrà nel
dettaglio in seguito.
Ridimensiona automaticamente le
immagini al caricamento della domanda. Contrariamente alla funzione
rid_img_caricamento(), questa funzione opera ogni qual volta viene
visualizzata una domanda o una risposta in cui sono presenti immagini,
in quanto la grandezza di quest’ultime risulta proporzionale alla
larghezza del struttura, ovvero dello schermo utilizzato. Tali proprietà
vengono inizializzate dal browser solo durante la fase di
visualizzazione delle domande, e pertanto non possono essere
inizializzate al caricamento della pagina, ma necessitano di un controllo
successivo. In questo script inoltre è contenuto un controllo per
verificare se l’immagine è completamente visibile, o parzialmente
esterna all’area di visualizzazione, ed in tal caso le ridimensiona
ulteriormente.
function avanti_dom(dom_suc) Tale funzione permette lo svolgimento
dell’esame, andando avanti tra le domande. E’ presente una politica di
controllo dell’interfaccia attiva, che permette di svolgere determinare
funzioni a seconda della rappresentazione scelta.
function img_rid(self, largh, alt)
Risultano presenti altre funzioni minori di minor interesse, ma
necessarie per lo svolgimento dell’esame e per il funzionamento di tutti gli
strumenti richiesti dalle interfacce.
4.1.3.1 Azione MouseOver per schermi Touch
Durante lo sviluppo delle interfacce ci si è resi conto che l’utilizzo della
funzione MouseOver su periferiche touch non risultava corretto in quanto,
diversamente dal normale utilizzo con periferiche come il mouse o trackball,
il puntatore touch lavora per tocchi, ossia per selezioni. L’uso della funzione
MouseOver, se associato ad una chiamata di funzione OnClick, risulta errato
in
quanto
i
browser,
in
presenza
di
periferiche
touch,
attivano
100
Capitolo 4
contemporaneamente entrambe le azioni. Nel corso di questo progetto si è
utilizzata l’azione MouseOver, adoperando regole di stile Css attraverso la
definizione delli classi: a:hover.img_risp e a.img_risp per attivare la completa
visualizzazione delle immagini associate alle risposte.
L’azione OnClick è stata utilizzata per la scelta delle risposte nella div
contenitore delle stesse:
onclick=”cambia_valore_radio(…,…)”
In tale scenario “puntando” sulle immagini si attiva contestualmente
l’azione OnClick associata al contenitore delle risposte, oltre all’effetto
MouseOver delle immagini. Mentre la seconda azione era voluta, la prima
risultava
un
comportamento
non
desiderato
dell’algoritmo,
poiché
visualizzando un’immagine si sarebbe contemporaneamente risposto alla
domanda.
Analizzando il problema ci si è resi conto che solo il browser Safari,
ottimizzato per un utilizzo touch su periferiche com l’Apple iPad o iPhone,
aveva una politica di controllo delle azioni da seguire, nel caso di presenza di
azioni di tipo MouseOver. La soluzione adoperata dal browser è di
procedere con l’attivazione della funzione associata all’azione MouseOver al
primo tocco e alle eventuali azioni associate a funzioni OnClick con un tocco
successivo o uno prolungato. Prendendo spunto da questo funzionamento si
è deciso di implementare una politica di controllo basata su “2 tocchi”. Tale
politica si è attuata utilizzando il seguente codice:
mouseover=false;
function click_img(){
mouseover=true;
}
101
Capitolo 4
function cambia_valore_radio(…,…){
if (mouseover==false){
…
}
else {mouseover=false;}
}
Una variabile booleana definita “mouseover” è inizializzata a “false” al
caricamento della pagina. Puntando o cliccando sull’immagine questa
modifica la sua condizione in “true”. Contestualmente si sono attuate delle
politiche di controllo nella selezione della risposta che viene attivata: si
controlla il valore della variabile “mouseover”, nel caso esso sia uguale a
“false” si procede con la funzione, altrimenti la si resetta al valore iniziale.
Utilizzando questo semplice algoritmo, si ha la possibilità di
visualizzare senza nessun tipo di problematica l’immagine, sia utilizzando
periferiche touchscreen, sia mouse convenzionali, inibendo l’azione OnClick
associata al contenitore della risposta in cui l’immagine è contenuta,
attivando esclusivamente l’effetto MouseOver.
4.1.4 Regole di stile Esame_.css
Nel file esame_.css, sono inserite le regole di stile, ovvero le
impostazioni grafiche delle interfacce, e le proprietà di tutte le strutture
definite nei file precedenti. È possibile definire questo file il fulcro delle
interfacce stesse, poiché responsabile della rappresentazione dei dati
dell’esame. Si è cercato di impostare lo sviluppo, in modo tale che per creare
nuove interfacce, o modificare quelle esistenti, fosse necessario modificare
esclusivamente le regole di stile, contenente le regole di visualizzazione, ad
102
Capitolo 4
esempio la grandezza massima dello spazio adibito alle domande o delle
risposte, o delle immagini, oppure della barra laterale contenente i
riferimenti per le domande.
4.2 Interfacce
4.2.1 Interfaccia Base
Figura 2 - Interfaccia Base
Come è possibile vedere nella Figura 2, l’interfaccia Base si presenta
suddivisa in 3 parti principali: una parte superiore, una inferiore, ed una
barra laterale di controllo. Nella parte superiore è possibile notare la
domanda attuale, nell’esempio proposto riferito a un esame reale di Fisica. Il
103
Capitolo 4
testo della domanda occupa tutto lo spazio disponibile, poiché non sono
presenti immagini o altri oggetti che richiedono di essere rappresentati.
Nella parte inferiore della schermata sono invece posizionate le risposte
pre-inserite. Il numero di risposte è variabile, da un minimo di 2 risposte
multiple, ad un massimo di 12 risposte, disposte su 3 file, con un massimo di
5 risposte per fila. Queste sono formattate in modo da occupare l’area di
schermo maggiore possibile. In questo particolare esempio si è voluto
rappresentare la possibilità della piattaforma di visualizzare formule
scientifiche.
Nella balla laterale sono enumerate le domande dell’esame. Si è scelto di
evidenziare la domanda attiva utilizzando esclusivamente un carattere con
una dimensione maggiore, al fine di non influire sull’attenzione dello
studente, si ricorda, infatti, che la piattaforma è dedicata anche ad utenti con
difficoltà di attenzione. Lo scorrimento delle domande del test è possibile sia
in maniera continua, procedendo dalla prima all’ultima utilizzando il
pulsante apposito in basso a destra, sia in maniera casuale-personale
selezionando a piacimento le domande da visualizzare raggiungibili dai
numeri. Non si è voluto introdurre una caratterizzazione di colore per le
domande già visualizzate, quelle risposte e quelle lasciate incomplete,
poiché,
come
sensibilmente
detto
precedentemente,
sull’attenzione
si
sarebbe
potuto
degli studenti durante
inciderete
lo svolgimento
dell’esame.
Nella Figura 2 è possibile altresì notare le formule scientifiche. Tali
formule sono visualizzate grazie all’utilizzo di una libreria JavaScritp
chiamata MathJax. Come detto nel capitolo precedente, le formule inserite
104
Capitolo 4
nella piattaforma sono memorizzate in codice LaTex e la libreria utilizzata
permette la traduzione del codice LaTex sia in linguaggio MathMl, lo
standard W3C per le formule matematiche attualmente non compatibile con
alcuni browser anche di recente sviluppo,
sia un una combinazione di
immagini opportunamente allineate definita “Html-Css”. Si è deciso di
eseguire lo script in modalità combinata, ovvero di supportare sia la codifica
in linguaggio MathJax, previo il supporto da parte del browser, sia la codifica
“Html-Css”, al fine di velocizzare la visualizzazione quando possibile.
Di seguito si riporta lo schema di funzionamento della libreria MathJax,
e della traduzione delle formule che esegue:
Figura 3 – Schema Visualizzazione Formule
105
Capitolo 4
4.2.2 Interfaccia Ipovedenti
Figura 4 - Interfaccia Ipovedenti
Nella Figura 4 è possibile vedere l’esempio già presentato
precedentemente, ma visualizzato utilizzando la maschera ottimizzata per gli
utenti con difficoltà visive. La caratteristica predominante di questa
interfaccia è la combinazione di colori utilizzata, questa risulta ottimizzata
per utenti con difficoltà visive accentuate. Il colore “Lime” delle scritte in
contrasto con il colore “Nero” dello sfondo, risulta una delle migliori
combinazioni possibili per la visualizzazione. Le linee guida dell’accessibilità
consigliano, infatti, di utilizzare una coppia di colori per lo sfondo e per il
testo con la maggiore differenza possibile in termini di contrasto sia di
tonalità, sia di luminosità. Tale accorgimento, unito all’utilizzo di un set di
caratteri della famiglia “Sans-Serif”, permette una migliore leggibilità del
testo, poiché permettono di accrescere l'impatto visivo tra lo sfondo ed il
testo, al fine di una più facile lettura.
106
Capitolo 4
Per questa interfaccia è stata inoltre utilizzata la libreria Pixastic. Come
già descritto nel capitolo 2, questa libreria permette la modifica delle
immagini, consentendo la manipolazione dei singoli pixel. In questo progetto
tale libreria è stata utilizzata, dopo la scrittura di un opportuno script di
modifica, per modificare le immagini che compongono le formule
matematiche. Come è stato descritto nel paragrafo precedente le formule
matematiche inserite nella piattaforma vengono memorizzate
in codice
LaTex nel database convertite successivamente in immagini dalla libreria
MathJax durante la visualizzazione dell’esame. Le immagini sono formate da
caratteri neri, sovrapposte ad uno sfondo trasparente. Durante l’utilizzo di
questa interfaccia tale conversione avrebbe portato all’assenza visibilità delle
formule, poiché i caratteri neri sovrapposti allo sfondo nero della pagina, non
avrebbero permesso la lettura delle stesse. Si è pertanto resa necessaria la
ricerca di uno strumento che intervenisse sulle immagini delle formule, dopo
che queste fossero state sostituite alle formule, in quanto il tool MathJax non
supporta formule di colore diverso dal nero, a causa dell’eccessivo spazio di
memorizzazione che tale supporto richiederebbe. L’idea è stata quindi quella
di accedere ad ogni singola immagine della formula e di modificare il colore
di ogni singolo pixel delle immagini. A tale scopo si è individuato la libreria
JavaScript Pixastic.
Tale strumento non includeva però una funzione necessaria a tale
scopo, benché rendesse possibile la modifica delle immagini, non la
sostituzione di un singolo colore con un altro non risultava accessibile. Si è
reso quindi necessario la scrittura di una funzione aggiuntiva, che
utilizzando le funzioni principali della libreria, permettesse la modifica dei
colori. Tale funzione, il cui codice risulta riportato di seguito, analizza ogni
107
Capitolo 4
pixel, uno ad uno, dell’immagine, andando a modificare i 4 byte associati alle
informazioni del colore, qualora il colore originario risulti essere uguale al
nero.
Il risultato deriva dalla conversione del colore dal nero al verde.
Pixastic.Actions.changecolor = { process : function(params) {
if (Pixastic.Client.hasCanvasImageData()) {
var data = Pixastic.prepareData(params);
var invertAlpha = !!params.options.invertAlpha;
var rect = params.options.rect;
var p = rect.width * rect.height;
var pix = p*4, pix1 = pix + 1, pix2 = pix + 2, pix3 = pix + 3;
while (p--) {
if((data[pix-=4]==0)&&(data[pix1-=4]==0)&&(data[pix2-=4]==0)){
data[pix]=0;
data[pix1]=255;
data[pix2]=0;
data[pix3-=4];
}
}return true;
} else if (Pixastic.Client.isIE()) {
params.image.style.filter += " invert";
return true;
}
},checkSupport : function() {
return (Pixastic.Client.hasCanvasImageData() || Pixastic.Client.isIE());
}
}
A titolo integrativo dello schema proposto nel paragrafo precedente
della libreria MathJax, si ripropone il grafico in Figura 3, completo della
libreria Pixastic.
108
Capitolo 4
Figura 5 – Schema Visualizzazione Formule Completo
109
Capitolo 4
4.2.3 Interfaccia “Simon” o Alternata
Figura 6 – Interfaccia Alternata - Domanda
Figura 7 – Interfaccia Alternata - Risposta
110
Capitolo 4
Come risulta visibile dalle Figure 6 e 7, contrariamente alle precedenti,
questa interfaccia non include in un’unica schermata la domanda e la
risposta. Tale rappresentazione, sviluppata partendo da una specifica
richiesta della dottoressa Maria Assunta Vecchi dell’Ufficio Disabili
dell’Università Politecnica delle Marche, tende alla focalizzare l’attenzione
dello studente sull’esame. La separazione delle domande dalle risposte è
necessaria poiché degli utenti destinati all’utilizzo di tale interfaccia, erano
abituati a svolgere l’esame alternando le domande alle risposte attraverso
l’utilizzo di carta stampata, dove da un lato è presente la domanda e
dell’altro le risposte.
Al fine di favorire l’approccio al pc, si è deciso di mantenere tale
metodica, introducendo come unico elemento di “distrazione” la barra
laterale. Si sono volute apportare solo alcune modifiche regole di
visualizzazione e con la scrittura di una funzione apposita per alternare le
domande alle risposte, mantenendo la veste grafica della visualizzazione
base. Si è inoltre inserita una caratteristica non presente nelle altre maschere,
ovvero il feedback immediato della risposta, come risulta visibile nella
Figura 8. Tale strumento è parte della metodica attuale di svolgimento a cui
sono abituati gli studenti, poiché ricevevano immediatamente l’esito della
risposta.
111
Capitolo 4
Figura 8 – Interfaccia Alternata – Feedback Risposta immediato
4.3 Risultati
Figura 9 – Risultati Esami
Una volta completato l’esame cliccando sul pulsante “FINE”, che
comparirà in basso a destra, si accederà alla pagina riguardante i risultati
dell’esame. Tale pagina è suddivisa in 3 sezioni principali, una tabella
112
Capitolo 4
riepilogativa sintetica dell’esame, una tabella riepilogativa delle domande e,
infine, i bottoni che permettono l’accesso agli strumenti di backup e stampa.
Si è pensato, inoltre, di aggiungere la possibilità di tornare all’esame,
cliccando su un apposito bottone.
4.3.1 Tabella Riepilogativa Esame
Posta
sulla
sinistra
della
schermata,
tale
tabella
riassume
le
informazione dell’esame. Al suo interno è possibile individuare:
Il numero delle domande a risposta multipla;
Il numero delle domande a risposta aperta;
Il numero delle risposte date;
Il numero delle risposte multiple corrette;
Il numero delle risposte multiple errate;
Il punteggio delle risposte multiple;
Il punteggio “potenziale” delle risposte aperte.
L’ultimo punteggio viene definito “potenziale”, poiché il tool di
correzione non è in grado di decodificare il testo scritto e, pertanto, risulta
inefficace nella correzione delle domande a risposta aperta. Pertanto in
questo campo viene visualizzato solo la somma dei punteggi delle domande
a risposta aperta presenti nell’esame.
113
Capitolo 4
4.3.2 Tabella Riepilogativa Domande
Posizionate nella parte centrale della pagina in questa tabella sono
enumerate tutte le domande dell’esame, evidenziate in verde qualora le
risposte siano corrette, in rosso se errate e in giallo se associate a risposte
libere da verificare. Risultano con uno sfondo bianco, tutte quelle domanda a
cui non è stata data risposta. All’interno della tabella è inoltre possibile
individuare:
Il tipo di domanda
Il numero della risposta data
L’esito della risposta
Il punteggio associato alla domanda
Cliccando inoltre su ogni singola riga della tabelle, sarà possibile
approfondire l’analisi della domanda e della risposta data e verificare l’errore
commesso. Nella Figura 10 è possibile notare questo pop-up di verifica, nella
fattispecie la possibilità di visualizzare il testo della domanda, il testo della
risposta data e, nel caso quest’ultima sia errata, il testo della risposta corretta
associata alla domanda. In questo pop-up sono sempre disponibili sia le
immagini, opportunamente ridimensionate, sia le formule scientifiche,
renderizzate secondo lo schema illustrato nei paragrafi precedenti. In questa
finestra è possibile inoltre leggere le risposte date alle domande aperte, con
l’obiettivo di verificare l’esattezza delle stesse e assegnarne il punteggio.
114
Capitolo 4
Figura 10 – Correzione Domande
4.3.3 Strumenti: Salvataggio esame
Come descritto nel capitolo precedente, la piattaforma è provvista di
uno strumento per il backup degli esami. Accedendo a tale strumento, dopo
aver svolto un esame, è possibile effettuare un backup dei dati dell’esame,
come descritto nel paragrafo 3.4.9, includendo anche l’elenco delle risposte
date, funzione non disponibile dal tool descritto precedente per ovvi motivi.
4.3.4 Strumenti: Stampa risultati
Tale strumento, utilizzando delle regole di stile apposite, consente la
stampa delle tabelle riepilogative dei risultati dell’esame, permettendo di
115
Capitolo 4
mantenere una copia cartacea delle risposte date e del punteggio totalizzato
dallo studente durante lo svolgimento del test.
4.3.5 Strumento Stampa esame
Tale funzione richiama la pagina di stampa in precedenza discussa nel
paragrafo 3.6 del capitolo 3, che permette la stampa del solo esame
evidenziando le risposte corrette, non includendo le risposte date dallo
studente durante lo svolgimento. Per la stampa dell’esame svolto completo
di domande è necessario utilizzare lo strumento di stampa dei Risultati,
congiuntamente a quanto qui descritto.
116
Capitolo 5
Test delli interfacce e Conclusioni
Capitolo 5
TEST DELLE INTERFACCE
E CONCLUSIONI
117
Capitolo 5
5.1 Testing
La fase di testing della piattaforma è avvenuta sia in modo privato sia
con la consulenza dell’Ufficio Disabili in una simulazione di esame.
L’utilizzo della piattaforma si è rivelato intuitivo oltre ogni aspettativa.
La simulazione in collaborazione con l’Ufficio Disabili è avvenuta
utilizzando come periferica di input un mouse. Tale limitazione è stata
determinata dalla mancanza di un supporto Touch-screen disponibile per il
test. La simulazione è stata, comunque, un successo ed ha permesso di
evidenziare come l’utilizzo delle interfacce, benché ideato ed ottimizzato per
supporti input Touch-screen, ben si adatta all’utilizzo associato ad un mouse.
La sessione in esame ha permesso, inoltre di evidenziare l’importanza delle
soluzioni adottate per l’utilizzo delle immagini e le scelte fatte in termini di
visibilità, posizionamento e dimensioni. Fondamentali sono le soluzioni
individuate per la fruizione delle formule scientifiche, anche se a tal
proposito si sono riscontrate alcune difficoltà nell’utilizzo di alcuni browser.
Successivamente sono state effettuate delle simulazioni con l’utilizzo di
diverse periferiche Touch-Screen utilizzando lo stesso test di esame, per di
verificare l’accessibilità della piattaforma, secondo gli standard che ci si era
prefissi all’inizio dello sviluppo del progetto di studio.
Si sono utilizzate le seguendi piattaforme Hardware:
Apple iPad
Hp TouchSmart TS2-2101SL
VirtualTouch with WiiMote Lee Chung
118
Capitolo 5
Tablet Android (emulazione)
5.1.1 Apple iPad
Caratteristiche Hardware e Software
CPU:
Apple A4
FREQUENZA CPU:
1 GHz
DISPLAY INCORPORATO:
LED 9,7" IPS Multi-touch
SISTEMA OPERATIVO
iOS 4.2.1
RISOLUZIONI VIDEO:
768 x 1024 px, 132 ppi
SITO WEB:
apple.com/it/ipad
Impressioni:
Il browser, derivato direttamente da Safari 5, pemette la navigazione
senza alcun problema attraverso la piattaforma. L’utilizzo degli strumenti è
agevole, ma sconsigliato per l’inserimento di esami, se non in presenza di
una tastiera fisica. L’inserimento di lunghi testi comporta alcune difficoltà.
L’uso dell’interfaccia risulta impeccabile, la velocità di caricamento
dell’esame, delle immagini e delle formule è istantanea.
119
Capitolo 5
Esempio Formule su Interfaccia Standard funzionante su iPad
Esempio Immagini su Interfaccia Alternata funzionante su iPad
120
Capitolo 5
Esempio Formule su Interfaccia Ipovedenti funzionante su iPad
Come visibile dalle immagini sia lo script MathJax sia lo script Pixastic,
sono pienamente compatibili con la periferica. L’unica nota da segnalare è
l’impossibilità di nascondere la barra degli indirizzi del browser, che
comporta la diminuzione dello spazio visualizzabile e una fonte di
distrazione per l’utente.
121
Capitolo 5
5.1.2 Hp TouchSmart TM2-2101SL
CPU:
Intel Core i3-380UM
FREQUENZA CPU:
1,33 GHz
LED 12,1” Multi-touch
SISTEMA OPERATIVO
Windows 7 Home Premium 64bit
RISOLUZIONI VIDEO:
1.280 x 800 px
SITO WEB:
www.hp.com
Impressioni:
il computer, apparente alla categoria dei “convertibili”, è un notebook
di media potenza con una buona autonomia, che possiede la peculiarità di
potersi trasformare in un TabletPc, grazie ad uno schermo ruotante e
ruotabile e ribaltabile sulla tastiera. Avendo in dotazione il sistema
operativo Microsoft Windows 7 permette l’installazione di un qualunque
browser disponibile per questa piattaforma, per la simulazione, si è preferito
utilizzare Mozilla FireFox nella sua ultima versione stabile 3.6.13.
L’utilizzo degli strumenti è agevole. Grazie alla duplice natura del
prodotto l’inserimento di esami è stato facilitato dalla presenza della tastiera
fisica in modalità notebook e dalla presenza di un touchpad. La velocità di
caricamento dell’esame, delle immagini e delle formule è estremamente
veloce, per alla presenza di un Hardware completo, e all’utilizzo di uno dei
più recenti browser esistenti in rete.
122
Capitolo 5
Esempio Immagini su Interfaccia Alternata funzionante su TabletPc Hp
Esempio Immagini e Feedback su Interfaccia Alternata funzionante su TabletPc Hp
123
Capitolo 5
L’utilizzo del touch-screen non si è rilevato all’altezza delle aspettative.
Essendo di tipo capacitivo è stato possibile interagire esclusivamente tramite
il tocco con le dita, ma il sistema mostrava una latenza di risposta di circa 11,5 secondi, eccessiva per l’utilizzo che se ne vuole fare.
5.1.3 Notebook Acer Aspire 5024WLMi + Proiettore Acer
X1161 per uso software “Project Wiimote controller”
CPU:
Turion 64bit ML-34
FREQUENZA CPU:
1,80 GHz
Proiettore Acer X1161
SISTEMA OPERATIVO
Windows Xp Professional SP3 32bit
RISOLUZIONI VIDEO:
1.024 x 768 px (Proiettore)
SITO WEB:
johnnylee.net/projects/wii/
CONTROLLER
BLUETOOTH
CONTROLLER
WIIMOTE
Generico 2.0
Originale Nintendo
Impressioni:
Dopo aver installato i driver Bluetooth ed aver collegato il controller
WiiMote Nintendo al notebook, Windows riconosce il controller come HID
(Human Interface Device) attraverso il driver generico per tutte le periferiche
d’input. Successivamente è possibile avviare il programma scritto da Lee
Chung per l’utilizzo del controller Nintendo sfruttando il ricevitore
Infrarossi al suo interno.
124
Capitolo 5
Esempio Interfaccia Standard funzionante con uso WiiMote e Proiettore
125
Capitolo 5
Esempio Interfaccia Alternata funzionante con uso WiiMote e Proiettore
Esempio Interfaccia Ipovedenti funzionante con uso WiiMote e Proiettore
126
Capitolo 5
Esempio Interfaccia Ipovedenti funzionante con uso WiiMote e Proiettore
L’utilizzo del software abbinato al controller è stato incredibilmente
positivo. Non si sono riscontrate latenze di alcun genere, nonostante
l’hardware del notebook datato. Poter utilizzare il proiettore come una
costosa LIM (Lavagna Interattiva Multimediale) è stato una piacevole
scoperta, se a questo aggiungiamo che la spesa totale risulta inferiore di due
ordini di grandezza, ci si rende conto della portata dell’innovazione.
L’entità e l’importanza di tale supporto tecnologico è del tutto evidente
nella scelta che il MIUR (Ministero dell'Istruzione, dell'Università e della
Ricerca) di dotale le scuole statali di tutta l’Italia di un numero considerevole,
ed in rapido ulteriore incremento di LIM1.
L’utilizzo di questo Progetto nella sua connotazione innovativa
1 http://www.lavoce.info/binary/la_voce/dossier/cap.0_introduzione_.1296231435.pdf
127
Capitolo 5
potrebbe essere un supporto altrettanto valido per la sua semplicità di
utilizzo.
5.1.4 Tablet Android 2.3 (emulazione)
CPU:
Generica (Emulata)
SISTEMA OPERATIVO
Android v.2.3.1
RISOLUZIONI VIDEO:
800x640 px
SITO WEB:
www. android.com
Non è possibile dare impressioni di utilizzo del sintema operativo
Android in quanto le emulazioni sono notoriamente lente. Inoltre l’efficienza
degli input Touch, la loro precisione e velocità è strettamente legata al
hardware del tablet usato. Si è deciso di effettuare l’emulazione software
esclusivamente per valutare la compatibilità della piattaforma sviluppata con
il browser integrato nel sistema operativo di casa Google.
128
Capitolo 5
Esempio Immagine su Interfaccia Standard funzionante su emulazione Android 2.3.1
129
Capitolo 5
Esempio Formule e Feedback su Interfaccia Alternata funzionante su emulazione Android 2.3.1
L’unica considerazione possibile è che, data la compatibilità con la
versione 2.3 destinata prevalentemente agli smartphone, risulta probabile la
compatibilità del browser integrato nel sistema operativo, anche della
versione 3.0 di recente introduzione destinata al mondo tablet.
130
Capitolo 5
5.2 Conclusioni e Possibili Sviluppi
In conclusione il lavoro svolto e mostrato in questo elaborato ha posto in
evidenza che è possibile fare ancora molto.
Il campo di applicazione è estremamente ampio. Le possibili
applicazioni
sono
implementabili
con
altri
adattamenti
funzionali
all’approccio alle nuove tecnologie sia da coloro normo-dotati sia da coloro
che hanno disabilità di diverso tipo. Ad esempio: l’integrazione di un
sintonizzatore vocale Web è uno dei possibili obiettivi da raggiungere.
Sono state già effettuate diverse prove di integrazione del software
OpenSorce Festival, attraverso la creazione di un servizio web, utilizzando
uno script Php attivo sul server, che codifica i testi delle domande, delle
risposte e delle formule scientifiche ( grazie al supporto del software e della
piattaforma sviluppata del linguaggio MathMl ) e restituisce un file audio
Mp3 contenente la codifica, ma si sono riscontrate eccessive latenze di
codifica e download dei file audio risultanti. Questo possibile sviluppo
richiederà, pertanto, soluzioni atte a garantire una maggiore fruibilità del
servizio, magari introducendo lo streaming in tempo reale del testo
codificato, o suddividendo il testo in porzioni più piccole.
Ulteriore sviluppo potrebbe essere la creazione di un tool per lo
sviluppo facilitato delle interfacce di esame, così da migliorarne la
personalizzazione rispetto al destinatario finale.
Altri sviluppi potrebbero essere mirati sull’inserimento di un editor
WYSIWYG (What You See Is What You Get) per facilitare e personalizzare
131
Capitolo 5
ulteriormente la creazione degli esami.
La piattaforma non è perfetta, si pone, appunto, all’inizio di un percorso
tutto da esplorare, ampliare e migliorare al fine di integrarla nell’uso
quotidiano universitario.
Migliorare la vita di chi ci sta in torno è un nostro dovere. Usare le
nostre capacità e conoscenze per aiutare chi ci sta intorno è un nostro onere
ed una nostra responsabilità, se vogliamo concorrere alla costruzione di un
mondo in cui le difficoltà individuali non siano barriere da abbattere, ma
stimolo per una ricerca che arricchisca tutti, ciascuno per le proprie capacità
di incidere positivamente e migliorare l’ambiente in cui vive e da cui trae
vita.
132
Bibliografia
Risorse Web:
HCI – Interfacce MultiModali - www. webaccessibile.org - Alessandra
Verzelloni
“Nuove prospettive per la partecipazione scolastica degli alunni con
disabilità” – MIUR - Pasquale Pardi e Giovanni Simoneschi
Statistiche e dati - www.disabilitaincifre.it - www.miur.it
Definizioni e Cenni storici - www.wikipedia.it
Touch-Screen tecnologie - www.nonsolocittanova.it/
Accessibilità Guida completa - M. Diodati –
www.accessibile.diodati.org/agc/
Web Usability – Jakob Nielsen - www.useit.com
Strumenti Adoperati:
Script scrittura Latex - www.codecogs.com
“Low-Cost Multi-point Interactive Whiteboards Using the Wiimote” –
www.johnnylee.net/projects/wii – Lee Chung
“TouchLib” – www.touchlib.com
Php – www.php.com
GD Graphics Library – www.libgd.com
Mysql – www.mysql.com
Html – Css – MathMl - www.w3.org
133
Latex - www.latex-project.org
MathJax – www.mathjax.com
Pixastic – www.pixastic.com
Server utilizzato: Netsons.org
Editor Html - Php - JavaScript – Css: NotePad++
Esempi codice Javascript e Css utilizzati: www.html.it ww.w3schools.com www.htmldog.com
134

sviluppo e progettazione di una piattaforma e-learnig

Transcript

Documenti analoghi

Il tirocinio formativo in Accenture Technology Solutions è rivolto a

indice generale

Bernard Shaw scrive a proposito di Wellington : "Il duca muore, va in

Scarica

CAPITOLI CATTEDRALI - COLLEGIATE e la Chiesa in Italia

Programmazione in Java

2/Dispensa culina logistics

proposta completa allegata - e-Lite

L`ANELITO DI OETZI

interfaccia ios

metasploit framework

Manuale d`istruzioni

Ubuntu Desktop Guide - Documentazione ufficiale di Ubuntu

AnsaMed - Borsa Mediterranea del Turismo Archeologico

Progettazione di un Intrusion Detection System

Manuale per il Soccorritore Volontario

pdf ITA - The Italian Honey Project

Free PDF Version - professionaldreamers

Ottobre 2011 - Royal Academy Of Dance

laurea magistrale in ingegneria del cinema e dei mezzi di - e-Lite

GUIDA AL NOMAD XR4000

Guida agli script interni di CA Desktop Migration