theses

Università degli Studi Mediterranea di Reggio Calabria
Dipartimento di Ingegneria dell’Informazione, delle Infrastrutture e
dell’Energia Sostenibile
Corso di Laurea in Ingegneria dell’Informazione
Tesi di Laurea
Utilizzo del paradigma di implementazione basato sui
componenti per la realizzazione di una web app a supporto
dei ragazzi dislessici
Relatore
Candidato
Prof. Domenico Ursino
Giorgio Vizzari
Anno Accademico 2015-2016
Indice
Introduzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
Il progetto SmileForDys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.1 Obiettivi del progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Struttura del progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.1 Cos’è una Web-Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.2 La metafora dell’isola del tesoro . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.3 La componente Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2.4 La Componente Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3 Il ruolo dello UXD nel progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
7
8
8
10
10
11
14
Component Based Paradigm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1 Component Based Software Engineering . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.1 Architettura dei software Component Based . . . . . . . . . . . . . . .
2.1.2 Definizione e caratterizzazione dei Componenti software . . . . .
2.2 Ciclo e processo di sviluppo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3 L’applicazione del paradigma al progetto SmileForDys . . . . . . . . . . . .
2.4 Differenze con il paradigma ad oggetti e sua breve descrizione . . . . .
2.4.1 Vantaggi e svantaggi del Component Based Paradigm . . . . . . .
15
15
16
18
22
23
25
27
Il CMS di supporto e i plugin individuati . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1 Cosa sono i CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.1 Nascita dei primi CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.2 Caratteristiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2 WordPress, ovvero il CMS utilizzato nel progetto . . . . . . . . . . . . . . . .
3.2.1 Struttura dell’installazione WordPress . . . . . . . . . . . . . . . . . . . .
3.2.2 Perché WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3 I plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.1 I requisiti del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.2 I plugin individuati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
29
30
30
32
32
37
38
38
39
IV
Indice
La personalizzazione dei plug in per la realizzazione della web app . .
4.1 Analisi e prove svolte sui plugin individuati . . . . . . . . . . . . . . . . . . . . . .
4.1.1 La tecnologia usata dai plugin . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1.2 I plugin scartati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1.3 I plugin scelti per il progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2 Personalizzazione dei contenuti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.1 La realizzazione dei giochi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2.2 Personalizzazioni effettuate tramite le interfacce dei plugin . . .
4.3 Modifiche apportate all’aspetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3.1 Modifiche relative al design ed al layout delle pagine del
progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.3.2 Modifiche grafiche apportate ai plugin . . . . . . . . . . . . . . . . . . . .
4.4 Modifiche apportate al codice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4.1 Modifiche apportate per gestire l’accesso ai livelli di gioco
da parte degli utenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
43
43
44
44
46
47
47
49
50
Manuale del sistema realizzato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1 Il manuale dell’amministratore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.1 Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.2 Il pannello di controllo di WordPress . . . . . . . . . . . . . . . . . . . . . .
5.1.3 Aggiornamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.4 Operazioni CUD sui profili utente . . . . . . . . . . . . . . . . . . . . . . . .
5.1.5 Statistiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.6 Backup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2 Il manuale dell’utente generico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.1 Menù . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.2 Home page - Login - Logout . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.3 Registrazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.4 Selezione livello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.5 Selezione gioco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.6 Gestione profilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2.7 Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
61
61
61
62
62
64
64
64
65
66
67
67
68
68
68
Discussione in merito al lavoro svolto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.1 Esperienze e competenze maturate durante la realizzazione del
progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2 Possibili competenze da acquisire continuando il lavoro sul progetto .
6.3 Confronti con sistemi software concorrenti . . . . . . . . . . . . . . . . . . . . . . .
6.3.1 Portali web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3.2 Applicazioni Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4 SWOT analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4.1 Punti di forza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4.2 Punti di debolezza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4.3 Opportunità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4.4 Minacce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
50
54
55
59
75
76
77
77
78
78
79
79
80
80
Conclusioni e uno sguardo al futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Indice
V
Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Riferimenti bibliografici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Elenco delle figure
1.1
1.2
1.3
1.4
1.5
1.6
caratteristiche di una “web app” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Piattaforma LAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Logo di Altervista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Architettura della componente server di Smile4Dys . . . . . . . . . . . . . . . .
Pagina di benvenuto e login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Responsività del layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
9
11
12
13
14
Esempio di un’applicazione che utilizza file Excel . . . . . . . . . . . . . . . . .
Esempio di gestione di una possibile ereditarietà nel CBP . . . . . . . . . .
Esempio di un’architettura three-tier . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Esempio in UML di un componente e sue interfacce . . . . . . . . . . . . . . .
Esempio di un componente accessibile da due diverse interfacce . . . . .
Esempio di una connessione tra client e server stabilita da COM . . . .
Wordpress Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
La ricerca di un plugin su Wordpress . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pagina di un generico plugin dalla quale è possibile visualizzare una
descrizione, una guida all’installazione e altre informazioni . . . . . . . . .
2.10 come vengono visualizzati: recensioni, requisiti, download e autori
di un Generico plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
17
17
19
19
21
24
24
3.1
3.2
3.3
3.4
3.5
30
31
33
34
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
3.6
3.7
4.1
I CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Possibilità dei CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Livello più alto (root) dell’installazione di WordPress . . . . . . . . . . . . . .
Contenuto principale dell’installazione di WordPress . . . . . . . . . . . . . . .
Impostazioni MySQL contenute nel file wp-config.php (nome
database, username dell’utilizzatore, password di accesso al database
ed indirizzo host del database) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Security key protette da cifratura “double hash” . . . . . . . . . . . . . . . . . .
Pannello WordPress nella pagina wp-admin . . . . . . . . . . . . . . . . . . . . . . .
25
26
34
35
36
Porzione di codice che realizza l’inserimento della tabella del plugin
WP-Sudoku Plus all’interno del database e ne permette l’attivazione . 44
VIII
Elenco delle figure
4.2
4.3
4.4
Menu principale, visibile in tutte le pagine. Il primo pulsante
partendo dalla sinistra reindirizza alla home page, il secondo alla
pagina personale, il terzo alla pagina d’aiuto. . . . . . . . . . . . . . . . . . . . . . 47
Esempio di una domanda del gioco “Le doppie”: dove l’utente
visualizza l’immagine di una forchetta e deve scegliere il modo
corretto di scriverne il nome. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Esempio di una domanda del gioco “B o P”: l’utente visualizza
l’immagine di un’ape e deve riscrivere la parola in modo corretto. . . . . 49
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.10
5.11
5.12
5.13
5.14
5.15
5.16
5.17
5.18
5.19
Pagina di login di WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modifica di un utente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Barra di amministrazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pannello di controllo di WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestione degli aggiornamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Visualizzazione degli utenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Home page dell’applicazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modifica di un utente direttamente dall’applicazione . . . . . . . . . . . . . . .
Creazione di un utente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Visualizzazione delle statistiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gestione del backup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Menù della web application in versione desktop . . . . . . . . . . . . . . . . . . .
Menù della web application in versione mobile . . . . . . . . . . . . . . . . . . . .
Home page visualizzata dopo il login . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pagina di registrazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pagina di selezione dei livelli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Istanza di gioco . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pagina di gestione del profilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pagina di aiuto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
63
63
64
65
65
66
67
68
69
69
69
70
70
71
72
72
73
73
6.1
6.2
Un esempio di utilizzo dell’elemento Canvas, nel quale all’interno
dell’area grigia (che altro non è che l’elemento stesso) sottesa dal
quadrato è possibile risolvere il famoso cubo di Rubik. . . . . . . . . . . . . . 77
I punti principali dell’analisi SWOT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
7.1
Logo della BIAT 2017 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Elenco delle tabelle
Elenco dei listati
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
Codice relativo alla modifica dello sfondo . . . . . . . . . . . . . . . . . . . . . . . . .
Codice relativo alla modifica dell’header . . . . . . . . . . . . . . . . . . . . . . . . . .
Codice relativo alla modifica della versione desktop del menù . . . . . . .
Codice relativo alla modifica del menù per dispositivi mobili . . . . . . . .
Codice relativo alla modifica del titolo delle pagine . . . . . . . . . . . . . . . .
Codice relativo alla modifica del corpo della pagina . . . . . . . . . . . . . . . .
Codice relativo alla creazione del tasto per il logout . . . . . . . . . . . . . . . .
Codice relativo alla grafica della pagina di selezione dei livelli . . . . . . .
Codice relativo alla personalizzazione della grafica della pagina di
aiuto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Codice relativo alla personalizzazione della grafica del plug-in
“Profile Builder” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Codice relativo alla personalizzazione di un gioco . . . . . . . . . . . . . . . . . .
Codice relativo all’aggiunta di alcune funzionalità ai plug-in . . . . . . . .
Codice relativo all’implementazione della home page . . . . . . . . . . . . . . .
Codice relativo al controllo dell’autenticazione . . . . . . . . . . . . . . . . . . . .
Codice relativo al menù di selezione dei livelli . . . . . . . . . . . . . . . . . . . . .
Codice relativo alla creazione della pagina di aiuto . . . . . . . . . . . . . . . . .
Codice relativo al controllo dell’accesso ai livelli . . . . . . . . . . . . . . . . . . .
50
51
51
51
52
52
53
53
54
54
55
55
56
56
57
58
59
Introduzione
In questo elaborato di tesi vengono presentate la progettazione e la realizzazione
del progetto Smile4Dys, che consiste in una web application ideata per il sostegno
alla didattica dei soggetti affetti da Disturbi Specifici dell’Apprendimento (DSA).
Con il termine “DSA” si intendono quei disturbi consistenti in significative difficoltà nell’acquisizione e nell’uso di abilità di ascolto, espressione orale, lettura, ragionamento e matematica, presumibilmente dovuti a disfunzioni del sistema nervoso
centrale. Possono coesistere col Disturbo Specifico di Apprendimento problemi nei
comportamenti di autoregolazione, nella percezione sociale e nell’interazione sociale;
questi, però, non costituiscono di per sé un Disturbo Specifico dell’Apprendimento.
I Disturbi Specifici dell’Apprendimento possono verificarsi in concomitanza con
altri fattori di disabilità, o con influenze estrinseche (culturali, d’istruzione, etc.),
ma non sono il risultato nè di questi fattori nè di tali influenze.
I principali DSA sono: dislessia, disgrafia, disortografia, disturbo specifico della
compitazione e discalculia.
Tra questi, la più diffusa e conosciuta è la dislessia, che, difatti, è presente nel
46% dei casi di DSA.
Solitamente, la dislessia si manifesta nei primi anni di scuola, quando i bambini
presentano inattese difficoltà a leggere e scrivere. Quando il disturbo viene riconosciuto, è possibile aiutare il bambino fornendogli adeguati strumenti, che gli permettano di apprendere, aggirando gli ostacoli imposti dal disturbo. Tra i principali
strumenti utilizzati per raggiungere tale obiettivo, troviamo alcuni giochi didattici
in formato cartaceo.
Tuttavia, al giorno d’oggi, la tecnologia offre diverse possibilità che la carta non
può offrire; in più, stimola l’interesse di bambini e ragazzi, che sono più attratti da
uno schermo che da una pagina. Inoltre, con il continuo aumento della diffusione dei
dispositivi mobili, aumenta notevolmente la percentuale delle persone, sopratutto
dei bambini, che hanno accesso a dispositivi tecnologici. Infatti, spesso, nelle famiglie
moderne, smartphone e tablet sono adibiti a console di gioco, visto il particolare
interesse dei bambini nei confronti delle “app”.
Cosı̀ è nata l’idea di rispondere alla necessità di fornire un ausilio alla didattica dei bambini affetti da dislessia tramite questo “canale” da loro tanto amato.
In particolare, si è pensato di realizzare un’applicazione che, tramite sfide e giochi, aiutasse i bambini a compensare questi disturbi. Chiaramente, l’aspetto di tale
4
Introduzione
applicazione gioca un ruolo fondamentale, in quanto deve sia stuzzicare l’interesse
di bambini e ragazzi, che garantire un accesso adeguato ai suoi contenuti. In altre
parole, l’applicazione, deve presentare una grafica accattivante ed utilizzare grafica
adeguata e testi molto chiari, preferendo l’uso di periodi molto brevi e del carattere stampatello a frasi complicate e a caratteri difficilmente leggibili dai soggetti
dislessici.
Per rispondere bene a tali esigenze, la soluzione migliore sarebbe quella di far
scegliere, tra una serie di proposte, il design all’utilizzatore stesso. Questo è possibile
facendo uso dello User Experience Design (UXD), che ha proprio l’obiettivo di
favorire lo sviluppo di software che tengano in massima considerazione l’usabilità e,
più in generale, l’esperienza dell’utente durante il loro utilizzo.
Con tali premesse è nato il progetto Smile4Dys, il cui obiettivo è quello di fornire ai ragazzi dislessici uno strumento che permetta loro di apprendere ed imparare
giocando. Considerando i risultati positivi ottenuti somministrando una serie di
giochi didattici in formato cartaceo nelle scuole, nonchè la naturale predisposizione
dei bambini all’utilizzo della tecnologia, si è deciso di sviluppare una web application contenente gli stessi giochi menzionati in precedenza, ma in un formato più
congeniale alle nuove generazioni.
Il progetto, affidato ad un team di tre persone, ha previsto due fasi. La prima, curata da uno dei componenti del team, ha permesso di definire i contenuti e
la struttura generale della web application. Nello specifico, collaborando con una
specialista nel campo della dislessia e dell’applicazione dello UXD per le persone
dislessiche, e interagendo direttamente con i ragazzi nelle scuole, sono stati individuati i giochi più adatti ad essere inseriti all’interno del software. La seconda fase
riguarda la realizzazione del sistema. Tale compito è stato assegnato ai restanti
componenti del team che, pur interagendo e collaborando tra loro, si sono occupati
di aspetti differenti.
Sebbene sin dall’inizio fosse abbastanza chiara la volontà di sviluppare il software
sotto forma di web application, sono state vagliate altre alternative che, comunque,
si sono rivelate meno adeguate. Dopo aver chiarito definitivamente la tipologia del
sistema da realizzare, ne è stata definita l’architettura, basandosi sul modello clientserver.
Il secondo componente del team si è occupato di proseguire la fase di progettazione, ha effettuato uno studio sul business case e si è occupato dello sviluppo della
logica di business della web application.
Questo elaborato di tesi rappresenta la naturale prosecuzione del lavoro condotto
dai primi due componenti del team. In particolare, esso si pone come obiettivo quello
di presentare il secondo stadio di sviluppo del progetto, approfondendo gli aspetti relativi alla progettazione e all’implementazione della web application, tramite
l’utilizzo e la modifica dei plugin di WordPress, nonchè avviare una discussione
riguardo la scelta di implementare la web application tramite il paradigma della
progettazione basata sui componenti.
Il presente elaborato approfondisce tutti questi aspetti. Esso è strutturato come
di seguito specificato:
• Nel Capitolo 1, dopo aver presentato il progetto Smile4Dys, illustrandone motivazioni e obiettivi, verranno descritti gli elementi che definiscono l’architettura
Introduzione
•
•
•
•
•
•
5
del sistema, il motivo della scelta del tema dell’isola del tesoro e il ruolo dello
UXDnel progetto.
Nel Capitolo 2 viene trattato il Component Based Software Engineering e, più
in generale, la progettazione dei software basata sui componenti. In particolare,
verrà approfondita l’applicazione del Component Based Paradigm al progetto ed, infine, le differenze di tale paradigma con il più classico paradigma di
implementazione orientato agli oggetti.
Il Capitolo 3 descrive i CMS e le loro caratteristiche, motiva la scelta di utilizzare
WordPress per realizzare il progetto Smile4Dys, ed, infine, illustra i plugin che
in prima analisi sono stati individuati per la sua realizzazione.
Il Capitolo 4 tratta il lavoro svolto sui plugin, partendo dalla loro implementazione e dai test effettuati su di essi fino a trattare le modifiche effettuate sui
codici e sui relativi design.
Il Capitolo 5 fornisce una descrizione delle principali funzioni del sistema.
Il Capitolo 6 prsenta una discussione sulle esperienze acquisite tramite il lavoro svolto sul progetto nonchè un’analisi del software realizzato e dei principali
sistemi correlati.
Infine, il Capitolo 7 riporta le conclusioni in merito al lavoro svolto insieme
all’analisi di eventuali sviluppi futuri.
1
Il progetto SmileForDys
Questo capitolo tratta della progettazione di una web application, pensata per l’ausilio alla didattica di bambini e ragazzi con problematiche e disturbi dell’apprendimento, attraverso approcci basati sulla tecnica dello User Experience Design,
che, come suggerisce anche il nome, cerca di ottenere un’esperienza il più possibile
soddisfacente per l’utilizzatore.
1.1 Obiettivi del progetto
L’idea di progettare una web app per l’ausilio alla didattica nasce dalla crescente
attenzione riguardo i “Disturbi Specifici dell’Apprendimento” (DSA) e dalla carenza
di risorse a disposizione degli individui soggetti a tali disturbi per poterli correggere
o compensarli fruendo, cosı̀, di una didattica di egual livello rispetto ai coetanei non
affetti da DSA.
Al giorno d’oggi gli affetti da DSA affrontano l’apprendimento, e ciò che ne è
legato, con pessimismo e negatività. Basti pensare che disturbi come la dislessia
si possono protrarre fino in età adulta, in quanto i DSA non possono essere diagnosticati in età precoce e, a volte anche i soggetti stessi non se ne rendono conto
perché agli occhi degli altri, un DSA può essere scambiato come un difetto cognitivo
dell’individuo.
L’obiettivo a cui mira il progetto è quello di porsi come valido strumento di
ausilio alla didattica, potendo offrire esercizi didattici da eseguire ludicamente, stimolando, cosı̀, l’attenzione anche dei soggetti con deficit di attenzione. Ulteriore
obiettivo non è quello di portare i parametri di lettura di una persona dislessica ai
livelli di un normo-lettore, ma quello di acquisire strategie che gli permettano di
studiare e apprendere indipendentemente da questi parametri.
Difatti, in molti casi, le persone dislessiche sviluppano autonomamente delle
strategie compensative per affrontare le richieste scolastiche; si parla, in questi casi,
di autocompensazione. Un passo importante per una persona dislessica è quello
di imparare a conoscere se stessa e i propri canali di apprendimento privilegiati,
in modo da poterli sfruttare e valorizzare nello studio. Ogni persona è diversa da
un’altra; infatti, le strategie utilizzate saranno molteplici e variegate.
8
1 Il progetto SmileForDys
Pertanto, l’obiettivo è quello di realizzare un applicativo in grado di riuscire a
fornire, ad utilizzatori di diverse età, contenuti e informazioni pertinenti, prove e
giochi studiati per motivare l’interesse, dando a tutti gli utenti la giusta importanza
e attenzione. Si vuole, altresı̀, rendere il software fruibile a tutti, in maniera da non
scoraggiare l’uso dell’applicazione e, anzi, si vorrebbero invogliare tutti, anche i
soggetti non interessati da DSA, a migliorarsi attraverso le sfide proposte.
1.2 Struttura del progetto
Il progetto SmileForDys è stato ideato, fin dalle prime fasi iniziali della sua progettazione, come una web app per le peculiari caratteristiche di tale tipologia di
software ( Figura 1.1).
Figura 1.1. caratteristiche di una “web app”
1.2.1
Cos’è una Web-Application
“In informatica con l’espressione web application si indica un tipo di software
web-based, un’applicazione accessibile/fruibile via web per mezzo di un network, come, ad esempio una Intranet all’interno di un sistema informatico o
attraverso la Rete Internet, ovvero in un’architettura tipica di tipo client-server,
che offre determinati servizi all’utente client. Un generico client accede connettendosi a funzionalità applicative residenti su un application server utilizzando
come terminali utente normali web browser appoggiandosi, dunque, ai consueti
protocolli di rete.” 1
In breve, una web application è un software, disponibile su un web server, accessibile tramite una connessione Internet su diverse tipologie di “Smart Device”. Lo
1
Fonte: https://it.wikipedia.org/wiki/Applicazione web
1.2 Struttura del progetto
9
scopo delle web Aapplication è quello di trarre il massimo vantaggio dalla diffusione
dei browser di navigazione per implementare applicativi software.
Le principali caratteristiche di questa tipologia di software, che hanno fatto
ricadere la nostra scelta su di essa, sono:
•
•
•
•
•
•
architettura Multi-tier (strutturazione logica separata per diversi componenti e
ordinata su più livelli);
basso costo realizzativo rispetto alle app native;
compatibilità e accessibilità quasi universale;
nessuna API o pacchetto di installazione;
semplicità di utilizzo;
tempi di realizzazione ridotti;
In particolare si è scelto di utilizzare una grafica più semplice, limitata ai contenuti essenziali e necessari per garantire tempi di loading ed aggiornamento molto
ridotti.
La web app è composta da due “strati” o “layers”:
•
•
Back-end layer: si tratta di tutta la parte di contenuti e informazioni non visibili
dall’utente; è composto da elementi come:core applicativo, database e server.
Front-end layer: si tratta di tutti i contenuti, le informazioni etc, visibili e a
disposizione dell’utente (contenuto visibile di una pagina web).
Inoltre, il progetto è stato realizzato facendo uso di un ambiente LAMP (Linux,
Apache, MySQL, Php) (Figura 1.2) con installato Wordpress. Più specificatamente,
la componente di back-end era costituita dai seguenti sistemi:
•
•
•
•
•
Wordpress: il CMS (Content Managment System) attualmente più usato al
mondo, nella sua Versione 4.6.
MySQL un RDBMS (Relational DataBase Managment System) tra i più utilizzati, nella sua Versione 5.1.71 Gestito tramite l’applicazione operante in linguaggio
php: PhpMyAdmin Versione 4.1.7.
PHP (acronimo ricorsivo di PHP: Hypertext Preprocessor ,preprocessore di ipertesti; originariamente acronimo di Personal Home Page): è un linguaggio di
scripting interpretato, originariamente concepito per la programmazione di pagine web dinamiche. Si tratta di un linguaggio utilizzato principalmente “lato
server”.
Linux Server: distribuzione server del noto sistema operativo unix-based.
Apache un server web tra i più utilizzati.
Figura 1.2. Piattaforma LAMP
10
1 Il progetto SmileForDys
Per quanto riguarda il front-end layer del sito, sono state utilizzate principalmente le seguenti tecnologie:
• JavaScript: noto linguaggio di scripting per il web che consente di inserire
contenuti interattivi nelle pagine web.
• HTML 5: linguaggio di sviluppo delle pagine web.
• CSS 3: linguaggio dei fogli di stile utilizzati dalle pagine web.
Inoltre, la struttura pensata per il progetto è composta da una serie di pagine
web, di cui una home page da cui si ha accesso a diverse altre pagine, articolate
su 6 livelli (ordinati in base alla difficoltà dei contenuti proposti) ciascuno dei quali
composto da 6 istanze di gioco o quiz che, a loro volta, possono essere formati da
6 o più domande e o prove. A tutte queste pagine si aggiungono, anche, quelle di:
benvenuto, profilo personale, aiuto, registrazione e login.
1.2.2
La metafora dell’isola del tesoro
La web application consiste in un gioco ambientato idealmente su un’isola del tesoro;
il gioco è articolato, come già detto, su 6 livelli, con personaggi, animazioni, grafica
e tematiche ispirate al tema.
L’isola del tesoro non è altro che una metafora che cerca di avvicinarsi il più possibile alla situazione psicologica ed educativa dell’utilizzatore medio, che si sospetta
o sia realmente, affetto da DSA o altri disturbi o problemi legati all’apprendimento. L’isola, dalla sua accezione negativa di isolamento nel quale possono trovarsi
i ragazzi affetti da queste disabilità, può trasformarsi in un’avventura che punta
al raggiungimento di uno scopo che, metaforicamente, è il tesoro, ma che, nel caso reale, rappresenterebbe il bagaglio di conoscenze o tecniche volte a migliorarsi
nell’apprendimento, apprese poco a poco, livello per livello, nel corso del gioco da
parte dell’utente, come le esperienze che si collezionano vivendo un’avventura.
1.2.3
La componente Server
Il server fa parte dell’ambiente di back-end di un applicativo web; insieme al database ne è, infatti, uno dei principali componenti. In particolare, il server è la
componente che si occupa di fornire un qualunque tipo di risorsa o servizio ad altre
componenti principalmente definite come client. Esso, infatti fa parte dell’architettura logica di rete detta client-server. Tale architettura identifica come client un
computer o host che si rivolge a un altro terminale (server) per la fruizione di un
servizio o, più generalmente, di un applicativo o risorsa web. In particolare, il server
ha il compito di soddisfare le richieste del client, fornendo pagine web o altri tipi
di pacchetti. Inoltre, gestisce gli accessi, alloca e rilascia le risorse e garantisce la
sicurezza dei dati.
Il dominio e il servizio di web hosting
Il dominio è l’indirizzo del tipo www.nomedelsito.it che identifica e permette di
raggiungere un sito web.
1.2 Struttura del progetto
11
“A domain name is a unique name that identifies a website (Un nome di dominio
è un nome univoco che identifica un sito web).” 2
Un servizio di hosting è un servizio che permette di ospitare tutti i file che
compongono la componente server.
Per il progetto si è scelto di utilizzare un dominio e il Servizio di Hosting forniti
gratuitamente da Altervista (Figura 1.3) sul quale sono state predisposte alcune
risorse di back-end, come l’installazione del CMS e dell’RDBMS.
Figura 1.3. Logo di Altervista
L’IDE - Integrated Development EnvironmentLa gestione della componente server è stata effettuata tramite l’IDE PhpStorm di
JetBrains, e l’applicativo PhpMyAdmin che permette di connettere il database al
server e di effettuare le principali operazioni di DDL (Data Definition Language),
DCL (Data Control Language), DML (Data Manipulation Language) e DQL (Data
Query Language) di un DBMS attraverso comandi semplici e intuitivi. Tramite
l’IDE è stato possibile, tra le varie opzioni, gestire la connessione al server tramite
FTP (File Transfer Protocol), la modifica dei file: .php , .xml, .html, .js e
dei fogli di stile CSS.
1.2.4
La Componente Client
Il client layer consta di due parti, una hardware e una software. Il client hardware
è costituito dai vari dispositivi utilizzati dagli utenti per usufruire della web application, mentre il client software è rappresentato dal browser installato su ogni
dispositivo. La comunicazione tra server e client avviene tramite il protocollo HTTP,
che utilizza la porta TCP 80 (o 8080).
La componente client è l’insieme delle risorse fruibili dall’utente. In questo caso è
rappresentata dall’insieme delle pagine e dei servizi fruibili. Nel progetto per realizzare l’interfaccia utente sono state adoperate le librerie “JQuery” e “JQuery UI” di
JavaScript,un linguaggio di scripting per il web utilizzato per funzioni e animazioni
interattive delle pagine web “lato client”. Sempre nella realizzazione dell’interfaccia
sono state adoperati: la tecnica di sviluppo AJAJ (Asynchronous JavaScript and
Json), il linguaggio HTML 5 (HyperText Markup Language), i fogli di stile CSS 3
(Cascading Style Sheets), XML (eXtensible Markup Language), XHTML, e il già
menzionato PHP.
Il Presentation Layer del progetto è composto da:
2
Fonte: http://techterms.com/
12
1 Il progetto SmileForDys
Figura 1.4. Architettura della componente server di Smile4Dys
• la pagina di benvenuto e login (Figura 1.5), rivolta a nuovi e vecchi utenti, che
può reindirizzare a una pagina di registrazione, nel caso di un nuovo utente, o
alla pagina di login, nel caso di un utente già registrato;
• la pagina di registrazione, che, dopo aver inserito i dati, permette di accedere
alla home page;
• la home page dalla quale è possibile accedere alla pagina di menù dei livelli e
dei giochi, alla pagina di logout, alla pagina di aiuto, alla pagina del profilo;
• la pagina di gioco, che presenta il menù di livelli e giochi, dal quale è possibile
accedere alle istanze di gioco;
• la pagina di aiuto, ovvero una pagina dedita a facilitare l’usufruibilità della web
app attraverso guide e spiegazioni semplificate;
• la personal page, ovvero una pagina dedicata alla gestione del profilo e delle
informazioni inserite dall’utente;
• la pagina di log out, dalla quale è possibile interrompere la sessione.
Il template
Tutte le pagine sono state realizzate attraverso la personalizzazione del Template
responsive “Keith”, fornito gratuitamente dal CMS. Un template non è altro che
un modello; nel caso di una web app può essere definito come un modello grafico,
o meglio una struttura di base della grafica delle pagine web. Tramite l’uso dei
template è possibile ottenere una grafica ed una formattazione uniformi per tutte
le pagine web mantenendo i contenuti indipendenti, una maggiore facilità di sviluppo e un layout “user friendly”. Solitamente un template è realizzato con HTML,
1.2 Struttura del progetto
13
Figura 1.5. Pagina di benvenuto e login
immagini e CSS. Il template Keith permette di rendere la WebApp “responsive”;
ciò significa che le pagine web si possono adattare a tutte le principali tipologie di
client, in quanto smartphone, computer e tablet hanno display e hardware differenti,
e, quindi necessitano di poter visualizzare i contenuti web in modo differente per
garantire semplicità nella fruibilità dei contenuti del sito. La ”responsiveness” , in
italiano reattività, è la capacità di un applicativo Web di adattarsi alla larghezza
dello schermo del dispositivo su cui lo si sta visualizzando (Figura 1.6). Questo significa che il software deve essere in grado di non penalizzare chi utilizza dispositivi
dallo schermo piccolo, rendendosi leggibile anche su tali strumenti mantenendo lo
stile delle pagine e la formattazione dei contenuti.
14
1 Il progetto SmileForDys
Figura 1.6. Responsività del layout
1.3 Il ruolo dello UXD nel progetto
Lo UXD (User eXperience Design), in italiano Progettazione dell’Esperienza Utente,
è un processo di progettazione del design volto a migliorare l’usabilità, la facilità
di utilizzo del software, a migliorarne “l’appetibilità” e ad accrescere l’interesse da
parte dell’utilizzatore. Lo UXD si pone come obiettivo l’interazione con l’utente fin
dalle prime fasi del processo evolutivo del software, in modo tale da coinvolgerlo e
avere costantemente un feedback.
Nel progetto SmileForDyl lo UXD gioca un ruolo fondamentale, in quanto alcuni
DSA, come la dislessia, possono rendere molto difficile la lettura o la visione di alcuni
contenuti web.
La tecnica più efficiente, e di sicuro più utilizzata, è quella di intervistare i futuri utenti del sito meglio se one to one, cioè uno per volta, in modo che l’opinione
di ciascuno non venga influenzata dagli altri, ottenendo come risultato una documentazione alterata. L’intervista faccia a faccia permette, anche, di costruire un
rapporto diretto con le persone interessate nel progetto stesso. In particolare le interviste per il progetto sono state svolte in classi scolastiche di istituti statali. Sono
stati intervistati insegnanti e alcuni ragazzi e bambini di diverse classi che sono
potenzialmente interessati ai contenuti del nostro prodotto.
L’iter dell’intervista, di solito, è stato il seguente: si è proceduto ponendo a proprio agio l’intervistato, fornendogli, in genere, un gioco di lettere o un questionario
grammaticale composto da domande a risposta multipla. Tali domande non devono
risultare troppo lunghe o complesse, al fine di evitare che egli perda l’interesse e o
l’attenzione,il cheporterebbe a comprometterne l’esito.
Il suggerimento posto all’attenzione dalla maggior parte degli intervistati è di
alleggerire il carico testuale, lasciando le informazioni realmente utili, e di costruire
una home page pensata principalmente per i bambini.
Anche gli insegnanti hanno suggerito di rendere il sito meno testuale, nonché di
rendere la navigazione più semplice, strutturando meglio i contenuti.
I ragazzi, il cui utilizzo all’inizio è orientato a scopo ludico, hanno avuto
un’opinione alquanto positiva.
2
Component Based Paradigm
Questo capitolo definisce cos’è il Component Based Paradigm, come è formato,
i suoi scopi, i vantaggi e gòi svantaggi; verrà, inoltre, discusso il perché del suo
utilizzo nel progetto.
2.1 Component Based Software Engineering
Il Component Based Software Engineering (CBSE) è un ramo dell’ingegneria del
software che si occupa dello sviluppo, dell’ideazione e della creazione di software, basandosi principalmente sull’idea del riutilizzo del software attraverso la Separation
of Concerns (letteralmente “divisione degli interessi”), ovvero separazione delle aree
di interesse del software relativamente alle “ wide-ranging functionality ”, funzionalità del software ad ampio raggio (software che può offrire diverse funzionalità in
diversi ambiti). Tali funzionalità possono: interessare aree semantiche differenti e/o
essere completamente indipendenti l’una dall’altra. Caratteristiche che si ritrovano,
spesso, ad oggi, nei grandi e piccoli software moderni.
Questa separazione viene effettuata tramite la creazione delle “componenti software”. L’idea che sta alla base della CBSE è quella del riutilizzo del software; ciò
comporta la possibilità di ridurre notevolmente tempi e costi di sviluppo. In questo
il ruolo fondamentale è giocato dagli appena menzionati componenti, poichè questi, per principio del paradigma, devono poter essere riutilizzabili e devono poter
interagire fra loro in modo tale da ridurre la complessità del software.
Storicamente si inizia a parlare di riusabilità del software dai primi anni ‘60; e
già allora naque l’idea di utilizzare parti di software già realizzate nello sviluppo di
nuovo software, realizzando funzioni non specifiche, necessarie al sistema, ma che
non debbono essere create per svolgere unicamente quella specifica funzione in quel
determinato contesto o con una determinata “call” (chiamata), bensı̀ debbono essere create per poter essere utilizzate e richiamate anche da altri sistemi, anche nel
futuro. Tuttavia la realizzazione di sistemi basati su questo paradigma si è potuta
osservare soltanto in tempi relativamente recenti, a partire dalla seconda metà degli
anni ‘90, a causa dell’ancora non sufficiente sviluppo delle tecnologie informatiche
dell’epoca e alla non poca semplicità di realizzazione di software riutilizzabili. Degli
16
2 Component Based Paradigm
esempi moderni dell’applicazione di queste idee possono essere visti nelle architetture multi-tier, già menzionate nel capitolo precedente, nelle quali ci sono delle “aree”
del software separate che svolgono funzioni differenti ma comunicano in modo semplice e ben definito tra loro; un esempio pratico può essere un moderno sistema
operativo (per esempio, le ultime release di sistemi unix-based), che nel suo utilizzo, richiama componenti che effettuano determinate funzioni, come mostrato in
Figura 2.1.
Figura 2.1. Esempio di un’applicazione che utilizza file Excel
2.1.1
Architettura dei software Component Based
L’architettura dei software Component Based si focalizza sulla decomposizione del
design in funzioni individuali, o componenti logiche, che presentano interfacce di
comunicazione ben definite e contenenti metodi e proprietà. Essa, inoltre, punta a
fornire un livello di astrazione più alto e a dividere i problemi in sottoproblemi,
associandoli alla corretta partizione dei componenti. Assicurare la riutilizabilità
delle componenti rimane comunque l’obiettivo principale. Infatti:
“The basic idea behind component based architecture is to prefer composition
over inheritance”1 .
In breve con questo tipo di approccio si sceglie di creare delle componenti riutilizzabili, in diversi modi, piuttosto che utilizzare l’ereditarietà (Figura 2.2).
La struttura di un software è un qualcosa che viene definito, durante la fase di
design e viene usata per semplificare lo sviluppo dividendo parti complesse in parti
relativamente indipendenti. Con il Component Based Paradigm e il riconoscimento
delle parti del sistema anche in run-time, la struttura, anche chiamata Architecture
Design, diventa una delle parti più importanti del processo di sviluppo. Tipicamente un sistema Component-Based è definito come una struttura n-tier o multi-tier
(Figura 2.3), dove un “tier” andrà a svolgere una o più, funzioni specifiche e sarà
interdipendente dagli altri.
L’architettura di un software component-based differisce da quella di un software
“tradizionale” per vari aspetti fra tutti la differenza più importante è che quella del
software component-based risulta più frammentaria, mentre quella tradizionale più
monolitica. Tuttavia a differenza di quanto sembra, il Component Based Design
1
Fonte: https://www.raywenderlich.com/24878/introduction-to-component-based-architecture-in-games
2.1 Component Based Software Engineering
17
Figura 2.2. Esempio di gestione di una possibile ereditarietà nel CBP
(CBD), nella sua separazione dei contenuti, enfatizza la semantica e l’ordine degli stessi, cosa che, invece, è di difficile realizzazione nell’architettura del software
tradizionale.
Figura 2.3. Esempio di un’architettura three-tier
18
2 Component Based Paradigm
2.1.2
ware
Definizione e caratterizzazione dei Componenti soft-
Un componente software può essere una risorsa web, un servizio web, un package
software oppure un modulo che incapsula un set di funzioni o di dati correlati.
A causa delle varie funzionalità svolte, delle varie caratteristiche possedute e della
semantica dovuta al contesto di appartenenza, che può essere vario, non risulta facile
dare una definizione precisa di Componente software. La definizione di componente
più precisa che si possa fornire è quella più relativamente prossima al contesto nel
quale o per il quale il software andrà a svolgere le proprie funzioni. La definizione di
componente che più si avvicina al contesto del progetto SmileForDys è la seguente:
“A component is a non-trivial, nearly independent,and replaceable part of a
system that fullfills a clear function in the context of a well-defined architecture.
A component conforms to and provides the physical realization of a set of
interfaces” 2 .
Un componente è una parte sostituibile, non banale, quasi indipendente di un
sistema che svolge una chiara funzione nel contesto di un architettura ben definita.
Un componente si adatta a (e fornisce realizzazioni fisiche di) un set di interfacce.
Difatti, quando un componente deve utilizzarne un altro per svolgere la propria
funzione adotta una “used interface” che specifica i servizi di cui ha bisogno.
Tutti i processi di sistema normalmente sono posti in componenti separati cosi
che tutti i dati e le funzioni all’interno di un singolo componente siano semanticamente collegate. Sulla base di questo principio le componenti possono essere definiti
come modulari e coesi.
Un’interfaccia è la connessione che permette ad un utilizzatore (che può anche essere un componente) di interagire con un componente (Figura 2.4). Al contrario, nel
mondo Object Oriented, un’interfaccia è l’insieme dei metodi pubblici definiti per
un oggetto; solitamente l’oggetto può essere manipolato solo attraverso la propria
interfaccia. In linguaggi come C++ l’utilizzatore deve ricompilare il codice quando
l’interfaccia cambia. Pertanto l’utilizzatore della classe dovrebbe usare lo stesso linguaggio per tutto il processo di sviluppo. Un modo per evitare tale inconveniente
è quello di separare le interfacce dall’implementazione; è possibile farlo attraverso
interfacce binarie, ovvero interfacce che vengono realizzate secondo standard come
CORBA (Common Object Request Broker Architecture) o COM (Component Object Model) della Microsoft. In questo modo si rende possibile l’utilizzo di uno stesso
Componente attraverso interfacce differenti, come in Figura 2.5.
Component Model e progettazione dei Componenti
Un aspetto chiave nella progettazione component-based è la progettazione dei componenti stessi. Quando non è possibile reperire un Componente che si adegui e si
adatti ai requisiti, tecnici e non, di progettazione del software, può essere necessario
2
Fonte: “Component-Based Software Engineering, New Paradigm of Software Development” Ivica Crnkovic, Magnus Larsson Department of Computer Engineering
Malardalen University
2.1 Component Based Software Engineering
19
Figura 2.4. Esempio in UML di un componente e sue interfacce
Figura 2.5. Esempio di un componente accessibile da due diverse interfacce
progettare un Componente ex novo. Chiaramente il futuro Componente deve essere progettato per adattarsi alla “filosofia” della progettazione component-based.
Questo vuol dire che esso deve essere progettato rispettando i principi di base del
paradigma; per esempio, come primo obiettivo il componente dovrebbe poter essere
riutilizzato, secondo il principio della riusabilità del software, appunto uno dei principali principi su cui si basa il paradigma. A questo scopo sono nati i Component
Model.
“ The Component Models define the standards forms and standard interfaces
between the components. They make it possible to components to being deployed and to communicate. The communication can be established between
components on the same node (computer) or between different nodes”3 .
I Component Model (d’ora innanzi CM) definiscono gli standard riguardanti la
forma e le interfacce tra Componenti. Essi permettono ai Componenti di comunicare e di poter realizzare il loro deployment. I CM sopperiscono alla difficoltà
di sviluppare Componenti indipendentemente gli uni dagli altri o di far coopera3
Fonte: “Component-Based Software Engineering, New Paradigm of Software Development” Ivica Crnkovic, Magnus Larsson Department of Computer Engineering
Malardalen University.
20
2 Component Based Paradigm
re componenti sviluppati da autori differenti. Oppure, ancora, possono prevenire i
cosiddetti problemi di integrazione:
“Integration problems arise when a component depends on certain assumptions
concerning its interactions with its environment, but is to be placed into a
system that is based on different assumptions. The result is interaction protocol
mismatches”4 .
I problemi di integrazione sorgono nel momento in cui un Componente dipende
da determinate assunzioni, riguardanti le sue interazioni con il suo environment (ambiente), deve essere posto in un sistema basato su assunzioni differenti. Il risultato
di ciò sono dei disallineamenti nel protocollo di interazione.
I più importanti e diffusi esempi di Component Model sono:
• Component Object Model(COM)
• Enterprise JavaBeans
• Common Object Request Broker Architecture (CORBA)
COM è un open standard di interfaccia binaria introdotto da Microsoft nel 1993
che fornisce un modello per realizzare componenti che hanno interfacce multiple
dinamicamente connesse ad altri componenti (Figura 2.6). E‘ utilizzato per abilitare
le comunicazioni interprocesso e per facilitare la creazione di Componenti dinamici
in un vasto range di linguaggi informatici. Inoltre, serve come base di sviluppo
a diverse tecnologie e framework della Microsoft come OLE, OLE Automation,
Browser Helper Object, ActiveX, COM+ , DCOM,Windows shell, DirectX, UMDF
e Windows Runtime. Una delle principali caratteristiche di COM è la possibilità di
implementare oggetti che posssono essere utilizzati in ambienti differenti da quello
in cui sono stati sviluppati, tramite un approccio “language-neutral”. Inoltre, COM
offre la possibilità di riutilizzare Componenti senza alcuna informazione riguardo la
loro implementazione interna.
JavaBeans è un modello di programmazione a componenti per il linguaggio Java.
L’obiettivo è quello di ottenere componenti software riusabili ed indipendenti dalla
piattaforma. Inoltre, tali componenti (bean) possono essere manipolati dai moderni
tool di sviluppo visuali e composti insieme per produrre applicazioni. Enterprise
JavaBean (EJB) è una piattaforma per la creazione di applicazioni business portabili, riusabili e scalabili mediante il linguaggio Java. Un’applicazione è costituita da
componenti che vivono all’interno di un EJB container che fornisce ad essi un certo
numero di servizi, quali la gestione della sicurezza, delle transazioni, il supporto per
i web service. I Componenti EJB possono essere suddivisi in tre tipi:
• session bean
• message-driven bean
• entity bean
I primi due sono utilizzati per implementare la logica di business mentre gli entity
bean vengono utilizzati per sviluppare la persistenza. In particolare, un session bean
viene invocato da un client allo scopo di effettuare una specifica elaborazione: il
termine “session” fa riferimento al fatto che l’istanza di un bean di questo tipo non
4
Fonte: Component Based Software Engineering - International Journal of Computer
Applications (0975 - 8887) Volume 2 - N◦ 1, May 2010
2.1 Component Based Software Engineering
21
Figura 2.6. Esempio di una connessione tra client e server stabilita da COM
sopravvive a crash o shutdown del server. I message-driven bean si differenziano
dai session bean per il fatto che non vengono mai invocati direttamente dai client.
Piuttosto gli MDB sono attivati da messaggi inviati a un messaging server. Infine,
gli entity bean sono oggetti Java che costituiscono la rappresentazione dei dati
dell’applicazione e che vengono memorizzati in maniera persistente in un database.
CORBA è uno standard sviluppato dall’ Object Managment Group (OMG) negli
anni ‘90. L’ OMG fornisce linee guida del settore e specifiche di object management
per fornire un framework comune per integrare lo sviluppo delle applicazioni. Requisiti fondamentali per queste specifiche sono: riusabilità, portabilità e interoperabilità
dei componenti in un ambiente software distribuito. CORBA facilita lo sviluppo di
sistemi distribuiti fornendo:
•
•
•
una infrastruttura per far comunicare oggetti in un sistema distribuito;
un set di servizi utili;
un supporto che permette ad applicazioni implementate usando vari linguaggi
di interoperare.
Oltre ad essere uno standard, CORBA può essere considerato:
•
•
•
Un Framework per costruire sistemi ad oggetti distribuiti, indipendenti dal
linguaggio di programmazione e dalla piattaforma (SO).
Un ORB: (Object Request Broker), poichè può gestire l’accesso remoto ad
oggetti.
Una Common ORB Architecture, nella quale gli oggetti remoti sono accessibili da un programma come se fossero locali godendo di proprietà di Location
Transparency; ciò presuppone che il programma non conosce la posizione degli
oggetti. Inoltre l’architettura si basa sul paradigma client-server
22
2 Component Based Paradigm
2.2 Ciclo e processo di sviluppo
Lo sviluppo di un software component-based differisce dallo sviluppo di un software
tradizionale; infatti, esiste un processo di sviluppo per la CBSE differente dal classico modello a cascata. In linea di massima i sistemi software basati su Componenti
generalmente vengono sviluppati selezionando vari Componenti e assemblandoli insieme, piuttosto che programmare un sistema globale da zero; cosı̀ il ciclo di vita
del software basato su componenti è diverso da quello dei software tradizionali.
Pertanto, il ciclo di vita dei sistemi component-based consiste nei seguinti passi, o
step:
1.
2.
3.
4.
5.
6.
Analisi dei requisiti;
Selezione dell’architettura software, costruzione, analisi e valutazione;
Individuazione, scelta e personalizzazione dei componenti;
integrazione del sistema;
test di sistema;
manutenzione del software.
Analisi dei requisiti, implementazione, test e manutenzione, in sostanza rimangono molto simili al ciclo di vita tradizionale. In realtà, questo ciclo modo differisce
dal ciclo di vita del software tradizionale in particolare per il terzo punto, ovvero
la parte relativa alla progettazione dei componenti. Infatti, al terzo punto possiamo associare un ulteriore modello di sviluppo relativo ai componenti stessi che può
essere generalizzato come segue:
1. Individuazione dei Componenti; si individuano i componenti che potrebbero
essere utilizzati nel processo e vengono organizzati in una lista in attesa di
ulteriori indagini.
2. Scelta dei Componenti; tra i componenti individuati vengono scelti quelle che
meglio si adeguano ai requisiti di sistema.
3. Creazione dei Componenti; qualora non sono stati individuati e selezionati componenti adatti ai requisiti del sistema, si rende necessario progettare il singolo
componente ex novo.
4. Adattamento; i componenti scelti subiscono una fase di adeguamento e rimodellamento in funzione dei requisiti e dell’architettura di sistema.
5. Composizione o distribuzione; questa operazione viene effettuata tramite framework o infrastrutture per componenti.
6. Mantenimento o sostituzione; possono verificarsi bug o errori, dovuti al malfunzionamento di un componente rendendo necessario il fixing degli stessi, oppure
si devono aggiornare componenti o devono essere aggiunte nuove funzionalità.
Chiaramente tutti i diversi step di questo processo hanno ciascuno una propria
realizzazione. Difatti anche se, per esempio, i primi due punti risultano molto simili
tra loro, vengono realizzati in modo differente. Infatti, il primo consiste soltanto
nella ricerca dei Componenti apparentemente utilizzabili mentre il secondo è una
vera e propria fase di ricerca delle caratteristiche dei componenti individuati e di
verifica dell’idoneità degli stessi per il loro uso nel software.
2.3 L’applicazione del paradigma al progetto SmileForDys
23
Il terzo punto, invece, si rende necessario solo in caso di esito negativo dei precedenti due, nel qual caso si ricorre alle nozioni trattate nella sezione precedente per
creare dei nuovi componenti.
Il quarto punto è una vera e propria modifica dei componenti, volta a renderli
utilizzabili nell’architettura software, rendendoli adeguati ai requisiti del sistema.
La composizione non è altro che la fase volta all’effettivo inserimento del
componente nel software, oppure alla distribuzione di un componente realizzato.
La fase di mantenimento è, in realtà, molto simile all’ultima fase del ciclo di
vita del software tradizionale ma allo stesso tempo, è anche abbastanza differente,
principalmente a causa della particolare architettura e all’interazione tra componenti, dal momento che ricopre molta importanza il fixing dei bug o dei problemi
di comunicazione e interazione.
2.3 L’applicazione del paradigma al progetto SmileForDys
Il progetto SmileForDys presenta delle caratteristiche di scomponibilità e modularità che si sposano molto bene con il Component Based Paradigm. Difatti la
struttura della web app è articolata su livelli e giochi, dove ogni gioco può già essere
pensato come un componente.
Per realizzare il progetto si è scelto di utilizzare il CMS WordPress, tale CMS
offre la possibilità di realizzare un portale o un’applicazione web modularmente,
offrendo, gratuitamente e non, parti e servizi già implementati. Tramite la scelta
di un template, e ove si rendono necessari plugin e widget, Wordpress permette di
realizzare, come detto, dei “servizi” web ad utenti che possono non avere idea alcuna
riguardo l’implementazione e la creazione di questi, nè delle tecnologie mediante le
quali sono state realizzate. Anche questo si riflette nella CBSE, perché, appunto, uno
dei principi base di questa, come detto precedentemente, è quello di poter usufruire
di componenti a scatola chiusa, ovvero componenti già realizzati da autori diversi
ma che rispondono alle esigenze di implementazione e in modo tale che non si renda
neccessaria la conoscenza del “come é fatto” .
Particolare importanza rivestono, nell’ottica del progetto, i “plugin” di WordPress (Figura 2.7). I plugin sono dei pezzi di codice o veri e propri programmi che
interagiscono con WordPress per ampliarne le funzionalità. Un plugin può essere
definito come una parte di codice che fornisce determinate funzionalità; pertanto,
possiamo benissimo identificare un plugin come un componente software.
La web app è stata realizzata facendo uso di diversi plugin per implementare
diverse istanze di gioco. Quindi, è possibile integrare il processo di sviluppo della web
app con il processo di sviluppo dei software component-based. Difatti, l’applicazione
è stata progettata tramite UML e Component Based Paradigm.
Come per il ciclo di vita dei componenti, sono stati individuati dei possibili
plugin, tramite una ricerca per carattteristiche (Figura 2.8), che ben si integravano
con i requisti della web app.
I plugin sono stati installati e, in seguito (anche se è possibile farlo già da subito), analizzati, “studiati” e, infine testati. Infatti, ogni plugin possiede una propria
24
2 Component Based Paradigm
Figura 2.7. Wordpress Plugins
Figura 2.8. La ricerca di un plugin su Wordpress
pagina (figura 2.9) dalla quale è possibile reperire informazioni. Inoltre, ancora più
importante è la possibilità, che viene offerta da queste pagine, di poter aver accesso a recensioni e commenti di altri utenti, tramite le recensioni dei plugin (Figura
2.10). Tali recensioni possono rivelarsi molto utili, nella fase di selezione dei plugin.
Parlando dell’applicazione pratica nel progetto possiamo dire che, dopo essere
stati selezionati, i plugin sono stati modificati per adattarsi alle specifiche della web
app. Seguendo le successive fasi del ciclo di sviluppo dei componenti, i plugin sono
stati inseriti nelle pagine (Composizione); infine, quando la web app è stata testata,
si sono verificati alcuni errori. Alcuni plugin sono stati sostituiti, altri sono stati
semplicemente aggiornati, mentre per qualcunaltro si è resa necessaria l’aggiunta di
specifiche funzionalità o comandi eseguibili.
Per concludere tramite WordPress, si riesce a sopperire a due delle principali
“defiance” della CBSE, ovvero viene semplificata la gestione inter-componenti e i
loro problemi di compatibilità;inoltre tramite la possibilità di inserire delle recensioni, da parte degli utilizzatori dei plugin, si ha una sorta di auto-controllo della
qualità degli stessi plugin o componenti e, pertanto, in qualche modo, si ha una
certa verifica dei componenti che, nel CBSE, difficilmente si ottiene.
2.4 Differenze con il paradigma ad oggetti e sua breve descrizione
25
Figura 2.9. Pagina di un generico plugin dalla quale è possibile visualizzare una
descrizione, una guida all’installazione e altre informazioni
2.4 Differenze con il paradigma ad oggetti e sua
breve descrizione
Prima di annoverare le differenze tra il Component Based Paradigm e il Paradigma
ad oggetti occorre dare una breve descrizione di quest’ultimo.
La progettazione orientata agli oggetti (in inglese Object-Oriented Design, abbreviato in OOD) è un approccio alla progettazione di sistemi software fondata sul
paradigma a oggetti (con il termine “oggetti” ci si riferisce ai composite object). La
progettazione a oggetti può (ma non necessariamente deve) accompagnarsi all’analisi ad oggetti, alla programmazione ad oggetti (in inglese Oject-Oriented Programming OOP) e alla modellazione a oggetti. Il paradigma ad oggetti è un paradigma
di progettazione che permette di definire oggetti software in grado di interagire gli
uni con gli altri tramite messaggi. La programmazione ad oggetti si fonda princi-
26
2 Component Based Paradigm
Figura 2.10. come vengono visualizzati: recensioni, requisiti, download e autori di un
Generico plugin
palmente sull’utilizzo delle classi, modelli astratti che raggruppano strutture dati
e procedure, che contengono, invocandoli o creandoli, degli oggetti software e dei
metodi (procedure). Un linguaggio di programmazione è definito ad oggetti quando
permette di implementare i seguenti tre meccanismi usando la sintassi nativa del
linguaggio:
• incapsulamento
• ereditarietà
• polimorfismo
L’incapsulamento consiste nella separazione dell’interfaccia dalla sua implementazione. L’ereditarietà permette, essenzialmente, di definire delle classi, dette figlie,
a partire da altre classi già definite, dette genitori, permettendo di coesistere e di
poter ulteriormente implementare, per meglio definire, le classi figlie. Il polimorfismo permette di scrivere un client che può usufrire di oggetti, appartenenti a classi
differenti ma dotati di un’interfaccia comune. Durante il run time quel client atti-
2.4 Differenze con il paradigma ad oggetti e sua breve descrizione
27
verà “comportamenti” diversi senza conoscere a priori il tipo specifico dell’oggetto
che riceve in ingresso.
La prima differenza tra i due paradigmi riguarda i corrispettivi “elementi” base,
ovvero, gli oggetti per l’OP e i componenti per il CBP. Più specificatamente:
1. un componente può essere “business-oriented” o “application-oriented”, mentre
un oggetto è “technology-oriented”;
2. un componente può essere “Standard-Based” o “Architecture-Based”, mentre
un oggetto è “Language-Based”;
3. un componente offre funzionalità, mentre un ogetto offre metodi e funzioni;
4. un componente è una “entità” ad un livello astratto di complessità tale da poter
esser compreso da chiunque, mentre un oggetto può essere inteso soltanto da
persone con esperienze di programmazione informatica;
5. un componente si focalizza prima sull’astrazione, e dopo sull’incapsulamento,
mentre un oggetto si focalizza prima sull’incapsulamento e poi sull’astrazione.
L’OOP, e le relative discipline dell’analisi object oriented, e l’OOD sono volte
principalmente a creare interazioni col “mondo reale” e definire una sintassi che
sia il più possibile interpretabile idealmente dall’utilizzatore finale quanto lo è dal
programmatore del codice. Invece, la CBSE non fa alcuna asserzione che si avvicina
minimamente a questa. Anzi, come già, detto tra i principi base del Component
Based Paradigm, vi è quello di poter usufruire di un componente software “a scatola
chiusa” ovvero senza avere alcuna idea della sua implementazione, o eventualmente,
senza avere alcuna conoscenza del linguaggio di programmazione e delle tecnologie
usata. Tale approccio potrebbe anche offrire, ad uno sviluppatore poco esperto, la
possibilità di realizzare, comunque, un software relativamente complesso.
Una grossa differenza tra i due paradigmi riguarda la riusabilità. Nell’OOD la
riusabilità si ha usufruendo dell’ereditarietà delle classi; in questo caso, però, il
riuso del codice è relativamente limitato rispetto a come è inteso nel Component
Based Design dove, ad essere riutilizzate, sono intere parti di software, piuttosto
che porzioni di classi o codice; si opera, quindi, ad un livello superiore di astrazione.
2.4.1
Vantaggi e svantaggi del Component Based Paradigm
I principali vantaggi di sviluppare sistemi software tramite il Component Based
Paradigm sono i seguenti:
•
•
•
•
•
Accresce la connettività e l’interoperatività dei grandi software.
Generalmente i tempi e i costi di sviluppo del software sono inferiori rispetto
agli approcci di sviluppo relativi ai software tradizionali.
Nel caso migliore, ovvero nel caso in cui possono essere selezionati e installati
componenti, già distribuiti da terzi, adeguati ai requisiti del sistema, i tempi di
sviluppo risultano notevolmente ridotti rispetto ad un’architettura tradizionale.
Selezionare un componente che offre una o più funzionalità che vengono invocate
o richieste frequentemente riduce i tempi di sviluppo, ed eventualmente, anche,
di esecuzione e riduce il peso complessivo del software e la ridondanza del suo
codice.
I componenti sviluppati possono essere adoperati anche in contesti completamente differenti.
28
2 Component Based Paradigm
• La ridondanza viene considerevolmente ridotta.
• La stima dei costi viene ridotta.
• La qualità del sistema complessivo aumenta a causa del continuo mantenimento
e sviluppo dei componenti.
• Il software tramite l’aggiornamento, la modifica o l’aggiunta di funzionalità ad
un componente diventa riadattabile, ovvero può offrire funzionalità non previste
in fase di progettazione.
• L’efficenza e la qualità del software, in relazione al suo costo, sono più alte.
Sviluppare tramite CBP comporta anche alcuni svantaggi, i principali dei quali
sono:
• Un componente sviluppato da terzi può risultare complicato da personalizzare,
può introdurre vincoli non previsti, oppure può non rispondere perfettamente ai
requisiti del sistema.
• Rendere inter-operativi due componenti creati da sviluppatori differenti con scopi diversi risulta dispendioso in termini di tempo e quindi di costo, se non sono
stati realizzati seguendo i principi degli standard di sviluppo.
• Adattare un componente ad un ambiente diverso da quello per il quale è stato
ideato può risultare complesso.
• Il riutilizzo di un componente compromesso, o “infetto” da codice malevolo
(virus), compromette la sicurezza dell’intero software. Pertanto un software
sviluppato tramite il CBP è sicuro quanto il suo componente meno protetto.
• I costi di mantenimento possono essere superiori a quelli di un software tradizionale.
L’efficienza dell’utilizzo del CBP dipende considerevolmente dalla tipologia del
software da implementare; pertanto, in alcuni casi, alcuni vantaggi possono non
presentarsi, come possono anche essere insignificanti gli svantaggi in termini di
costi. Difatti, questo paradigma risulta particolarmente efficace nello sviluppo di
framework mentre può risultare dispendioso se utilizzato per sviluppare piccoli software, che non necessitano della proprietà di riusabilità, e, non trovando riscontro
nelle funzionalità offerte dai componenti esistenti, nè richiedono l’implementazione
di nuovi.
3
Il CMS di supporto e i plugin individuati
Questo capitolo volge l’attenzione principale sul CMS utilizzato e sui Plugin scelti
per la realizzazione del progetto; il capitolo inizierà con una discussione sui CMS in
generale.
3.1 Cosa sono i CMS
Un Content Managment System CMS (sistema di gestione dei contenuti) è un applicazione che supporta la creazione e la modifica di contenuti digitali (Figura 3.1),
anche, ma non necessariamente, multimediali. Questi sistemi usano una semplice
interfaccia per portare dettagli a un basso livello di astrazione, senza che venga
richiesto, di solito supportano utilizzatori multipli in un ambiente condiviso. Quello
che più spesso si intende come CMS è nella maggior parte dei casi identificabile
come un Web Content Managment System (WCMS) principalmente per il motivo
che i CMS più diffusi sono in realtà dei WCMS, sistemi volti principalmene alla
gestione delle pagine e del contenuto web, includendo testo, file multimediali, grafici, mappe e codice, che permette di interagire con l’utente o mostrare contenuti.
Un’altra definizione di questa tipologia di CMS può essere la seguente: un CMS è
un sistema altamente responsivo, volto a rendere il lavoro di sviluppo più facile e
veloce.
Congiuntamente ai WCMS, i CMS maggiormente diffusi, al giorno d’oggi, sono gli Enterprise Content Managment (ECM). Questa tipologia, di sistemi, come
dice l’acronimo, rappresenta un insieme di strumenti software che permettono la
gestione della documentazione prodotta, e ricevuta, all’interno di un’organizzazione, o di un ambiente d’impresa, indipendentemente dal contenuto. Un altro tipo
di CMS possono essere i Digital Asset Managment System (DAMS). Questi gestiscono elementi come: documenti, film, immagini, numeri telefonici e dati scientifici.
Esistono, anche, altri tipi di CMS, che si occupano di storing, controllo, revisione e
pubblicazione di documentazione, o, più in generale, informazione. Data la natura
del progetto, di seguito verrano trattati esclusivamente i WCMS e ci si riferirà ad
essi come CMS.
Attualmente, tra i più popolari CMS, utilizzati giornalmente da milioni di
utilizzatori, i più diffusi sono i seguenti:
30
3 Il CMS di supporto e i plugin individuati
Figura 3.1. I CMS
•
•
•
•
WordPress;
Joomla;
Drupal;
SharePoint;
3.1.1
Nascita dei primi CMS
Già negli anni in cui si diffondevano i primi linguaggi informatici, ci si era posto
come obbiettivo quello di semplificare il più possibile la programmazione; con l’avvento dei primi sistemi operativi “Home Edition” ci si è posti, forse per la prima
volta, il problema della personalizzabilità del proprio ambiente. Sul finire degli anni
ottanta si inizia a ragionare a delle reti di codice personalizzabile all’interno di reti
di computer, per realizzare delle librerie, degli archivi o altre tipologie di sitemi
relativi all’informazione. Nei primi anni ‘90 sono nati i primi primi WCMS; questi, però, erano usufruibili solo dalle grandi aziende e solitamente erano scritti in
C++. Nel 1995 nasce il primo CMS “open source”; questo CMS è stato creato per
il Portland Pattern Repository (una specie di libreria per l’uso dei Pattern nella
programmazione). Il programmatore ha chiamato il suo sistema “Wiki Wiki”, slang
Hawaiano di quick and easy (veloce e facile). Quello era il primo sito “wiki” della
storia. I CMS, insieme a questo nuovo tipo di linguaggio web, e alla comparsa nel
mondo del web di JavaScript, hanno segnato la nascita del cosiddetto “Web 2.0”.
Oggi i CMS Open source rendono possibile a chiunque affacciarsi al mondo del web,
tramite una propria pagina; basti pensare che un sito web su quattro è realizzato
con l’ausilio di WordPress.
3.1.2
Caratteristiche
L’idea della “customization” sta alla base dei moderni CMS. Da semplici gestori ed
elaboratori di contenuti, i CMS sono divenuti moderne macchine di sviluppo, tramite
i tantissimi tool e possibilità di operazione offerti (Figura 3.2); non a caso, spesso,
vengono confusi con i framework. Difatti, un CMS è un’applicazione che consente
3.1 Cosa sono i CMS
31
di variare i contenuti di un sito senza intervenire sulle pagine o sul database da cui
vengono lette le informazioni. I CMS hanno come scopo quello di rendere semplice ed
intuitiva la gestione dei contenuti, supportando il realizzatore del sito, fornendogli
soluzioni già pronte a problemi implementativi e grafici. Si è passati dalla possibilità,
che offrivano i primi CMS, di possedere una pagina web, limitatamente modificabile,
a quella di poter creare e gestire, per esempio, un sito di“e-commerce”. Non a caso,
la versalità dei CMS è uno tra i maggiori fattori del loro, successo. Tramite un CMS
è possibile inserire, richiamare, modificare ed elaborare del contenuto dinamico, su
semplici pagine web.
Tecnicamente, un CMS può essere visto come un’applicazione, spesso utilizzabile
mediante il browser, che consente, con un front-end di semplice uso, l’inserimento
e la gestione di articoli, schede, elenchi, link e banner. Tali informazioni sono poste
nel database dal quale, poi, il motore dinamico del sito le estrae per produrre le
pagine che saranno visualizzate al visitatore.
Figura 3.2. Possibilità dei CMS
Chi inserisce i contenuti, in sostanza, non deve avere conoscenze tecniche. Deve
saper scrivere, e quasi niente altro. Infatti normalmente, ogni WCMS offre all’utilizzatore un’interfaccia web, visibile solo da utenti abilitati come amministratori, che
permette una gestione dinamica e semplice delle pagine e dei contenuti. In particolare, grazie alla loro semplicità di utilizzo, e alla velocità con cui si può riuscire ad
apprendere ad utilizzarli in modo efficace (quick and easy), i CMS hanno reso possibile ad utenti, poco esperti in ambito informatico, non solo di accedere al mondo
del web, ma,anche farlo nel proprio modo, ed eventualmente in modo professionale.
Usare un CMS dà il vantaggio di poter costruire il sito modularmente. In questo
modo è possibile aggiornare continuamente contenuto e forma. Se, ad esempio, si
vuole cambiare la veste grafica dell’applicativo, il tempo necessario ad effettuare tale
32
3 Il CMS di supporto e i plugin individuati
modifica è molto minore rispetto al tempo che ci vorrebbe su un sito non basato su
CMS. Questo grazie ai template e ai plugin che la “community” fornisce.
3.2 WordPress, ovvero il CMS utilizzato nel progetto
Il CMS scelto per l’implementazione del portale è quello attualmente più diffuso
ed utilizzato, ovvero WordPress. Il perché di tale scelta si trova all’interno della
filosofia di WordPress stesso:
“Great software should work with little configuration and setup. WordPress
is designed to get you up and running and fully functional in no longer than
five minutes. You shouldn’t have to battle to use the standard functionality of
WordPress.”1
Basandosi su questa filosofia, l’installazione di WordPress è resa molto semplice,
e il suo utilizzo parecchio intuitivo. Infatti, la “mission” del CMS più diffuso al
mondo è proprio quella di semplificare le azioni dell’utente, trasformando un arduo
compito in un semplice click. Oltre ad essere davvero ben fatto e potente, WordPress
è gratuito. Questo perchè è un CMS open source, sviluppato da una vastissima
comunità di persone. Il fatto che dietro WordPress ci sia una community è molto
importante, soprattutto perchè si riesce a trovare tantissimo materiale gratuito in
rete per ogni singola funzione. Con WordPress (WP d’ora in avanti) si creano dei
siti, detti siti dinamici. Le informazioni, come gli articoli, i testi, etc., vengono
salvate dentro ad un database MySQL. Quando si accede ad una pagina web del
sito, in automatico, verranno lette dal database tutte le informazioni che servono
per costruire quella singola pagina web; il tutto risulterà invisibile all’utente. Questa
tecnica è molto potente in quanto basta modificare una sola pagina per modificarne
decine.
Sul front-end, WP utilizza i temi, ovvero sono un insieme di file (immagini, layout e fogli di stile) che permettono di mostrare tutta la parte grafica di un sito. Ce
ne sono moltissimi, sia gratuiti che a pagamento, adatti ad ogni esigenza e gusto.
Tramite un semplice click è possibile scaricare ed installare un nuovo tema, ottenendo cosı̀ una nuova veste grafica per il proprio sito. Per tutti i dettagli aggiuntivi
entrano in gioco plugin e widget; che verranno trattati successivamente.
3.2.1
Struttura dell’installazione WordPress
WordPress, come già detto, è un CMS gratuito ed open source, basato su tecnologia
PHP e MySQL. Generalmente, WordPress viene installato su dei web server, dove,
nella maggior parte dei casi, viene eseguito su piattaforme software LAMP (Linux,
Apache, MySQL, PHP).
Per iniziare a utilizzare WorPress, basta scaricare il file di installazione dal sito
www.wordpress.org e installarlo su una piattaforma software predisposta in locale,
1
Fonte: https://wordpress.org/about/philosophy/
3.2 WordPress, ovvero il CMS utilizzato nel progetto
33
oppure su un web server. Tutte le installazioni di WordPress presentano la medesima
struttura. Tale struttura risulta abbastanza semplice ai livelli più alti, poichè è
composta dalla cartella Wordpress e dai seguenti tre file (Figura 3.3):
Figura 3.3. Livello più alto (root) dell’installazione di WordPress
•
•
•
.htaccess; questo file è connesso ad Apache; tramite esso è possibile impostare
le direttive di Apache, o svolgere alcune funzioni, come il blocco all’accesso a
determinati file presenti nell’installazione, oppure a impedire l’accesso al sito da
determinati IP, etc.
.ftpquota; tramite questo file è possibile gestire la connessione FTP (File
Transfer Protocol) al sito.
index.php; solitamente questo file viene utilizzato poco; esso, generalmente,
permette l’accesso alla directory principale del sito.
Dentro la cartella WordPress è presente la maggior parte del contenuto del sito
(Figura 3.4). Particolare importanza ricoprono i seguenti elementi, all’interno di
questa cartella:
•
•
•
•
il file wp-config.php;
la cartella wp-admin;
la cartella wp-content;
la cartella wp-includes.
All’interno dell’installazione di WordPress, il file wp-config svolge un ruolo determinante. Esso gestisce le configurazioni di base di questo CMS. Tale file include,
le impostazioni di MySQL (Figura 3.5), le chiavi di sicurezza per l’accesso al sito e
la gestione dei cookie (figura 3.6), nonchè altri tipi di configurazioni, meno rilevanti
ma altrettanto importanti. Ovviamente, accedere a questo file è possibile solo tramite connessione FTP, poichè è presente solo lato server, chiaramente rimanendo
invisibile ad eventuali utilizzatori male intenzionati.
La cartella wp-admin, come suggerisce il nome, presenta le informazioni, i contenuti e le impostazioni relative al, o agli, admin (aministratore) del sito. Per esempio,
il file admin.php (che è il cuore della cartella), abilita le connessioni al database,
mostra la “dashboard” di WordPress ed esegue varie funzioni chiave, come, per
esempio, la funzione di checking admin, ovvero la verifica se un utente è abilitato
come admin o meno. Se, effettivamente, l’utente è un admin, lo script invoca il
file wp-load.php che, a sua volta, carica il file wp-config.php. In questo modo si
permette all’admin di aprire la pagina wp-admin, dalla quale è possibile accedere
ai tool WordPress e modificare l’intero sito. In questa cartella, sono contenuti altri
34
3 Il CMS di supporto e i plugin individuati
Figura 3.4. Contenuto principale dell’installazione di WordPress
Figura 3.5. Impostazioni MySQL contenute nel file wp-config.php (nome database,
username dell’utilizzatore, password di accesso al database ed indirizzo host del database)
file, come i file CSS, JavaScript, le immagini, etc., usati per realizzare il pannello e
la pagina di amministrazione (Figura 3.7).
La cartella wp-content, sicuramente, fra le 3 menzionate, è la quella che l’utente, amministratore di WordPress, utilizza più spesso. Tale cartella permette di
personalizzare ed elaborare il back-end. In essa sono contenuti i plugin ed i temi utilizzati per sviluppare il sito; ciascuno di essi ha, a disposizione, una propria cartella.
Importante, inoltre, è la cartella uploads dove, come dice il nome, sono contenuti
i file caricati sul sito.
Mentre wp-admin contiene tutti i file necessari a consentire le funzionalità degli
3.2 WordPress, ovvero il CMS utilizzato nel progetto
35
Figura 3.6. Security key protette da cifratura “double hash”
amministratori, e la cartella wp-content raccoglie tutti i temi, i file multimediali
ed i plugin, la cartella wp-includes, ultima rimasta tra le tre cartelle più alte in
livello, è quella che permette al sito di funzionare e ne svolge le rimanenti funzionalità. Infatti, questa cartella, è cosı̀ importante che è quella dove è contenuta la
maggior parte dei file che costituiscono il nucleo di WordPress. Difatti, non appena si installa, WordPress contiene già più di 140 file differenti, nella sua directory
principale, oltre a circa 14 differenti cartelle riguardanti certificati, font di testo, file
JavaScript, widget, ed altro ancora. Ma, comunque, i file più importanti rimangono
nella directory principale, come, per esempio, functions.php. Questi file sono quelli che, realmente, costituiscono il nucleo operativo di WordPress, poichè realizzano
tantissime piccole funzioni che permettono al CMS di fornire i propri servigi.
Altri file chiave, possono essere:
•
•
•
cache.php, che gestisce i processi che aggiungono o rimuovono dati dalla cache,
oppure la possono chiudere o resettare;
links.php, che ha al suo interno codice che abilita le caratteristiche di link di
WordPress;
version.php, che stabilisce la versione di WordPress, cosa molto rilevante
quando si opera con plugin che non vengono aggiornati di frequente.
Apparentemente, capire come opera la struttura della directory di WordPress
può risultare complicato, a causa della frammentazione di tale CMS. Tuttavia, questa organizzazione è quella che permette di intervenire maggiormente sulla personalizzazione di un sito. Pertanto, tramite una discreta concezione di essa, è possibile utilizzare WordPress come un mezzo di sviluppo professionale, per siti e web
application.
La sicurezza
Negli anni, anche a causa del suo vasto impiego, in WordPress sono state riscontrate
delle falle di sicurezza. Essendo, come già detto, la struttura della directory praticamente uguale per ogni installazione, e vista l’elevata percentuale di siti realizzati
con WP, ciò ha comportato maggior attenzione da parte dei “cracker”.
La prima vulnerabilità riscontrabile, solitamente, è dovuta a username e password facilmente individuabili, tramite attacchi “brute forcing”. Infatti, spesso,
installazioni WP su servizi di hosting gratuito forniscono di default account admin, con username proprio admin; a volte sono gli utenti stessi a impostare tale
username. Questa è la prima, e più significativa, vulnerabilità, evitabile cambiando
lo username e scegliendo password più complicate. Oppure, un’altra possibilità è
quella di aggiungere uno dei numerosi plugin che limitano il numero di tentativi di
36
3 Il CMS di supporto e i plugin individuati
Figura 3.7. Pannello WordPress nella pagina wp-admin
login, oppure, se si è in grado di farlo, creare uno script ad hoc; a questo punto
può essere una buona srategia impostare un account senza permessi con username
admin, in modo tale da focalizzare le attenzioni degli attacchi e guadagnare tempo
per proteggere il proprio sito.
Per quanto riguarda gli, ormai famosi, attacchi DDos, è possibile limitarne gli
effetti, e i flussi, utilizzando o impostando filtri anti-spam. Un altra soluzione, che
può anche debellarli sul nascere, è quella di utilizzare il servizio gratuito Cloudflare,
che, tramite i propri filtri personalizzabili, può impedire flussi non controllati contro
il proprio dominio.
Di default, la versione di WP risulta visibile; è consigliabile nasconderla assieme
3.2 WordPress, ovvero il CMS utilizzato nel progetto
37
a tutti i file “read-me” e “.txt” presenti nella root del sito. Infatti, conoscendo la
versione, è possibile conoscere eventuali vulnerabilità specifiche della stessa.
Acquistando un certificato SSL (Secure Socket Layer), è possibile evitare che le
comunicazioni del sito vengano intercettate, poiché, tramite questo certificato, viene
effettuata la criptazione e la decriptazione dei messaggi.
Altri tipi di vulnerabilità possono riguardare il back-end del sito. Per esempio,
può risultare efficace rinominare le principali directory di WordPress, o nascondere
il file wp-config.php aggiungendo dello script al file .htaccess. Altre alternative
possono essere quella di impostare un prefisso più complicato per le tabelle, che,
comunque, ricordiamo essere protette da cifratura double salted hash.
Qualora tutte questi accorgimenti non risultassero efficaci, è sufficiente impostare
le chiavi di sicurezza (spesso vengono preimpostate) tramite le quali è possibile
“resettare” le sessioni attive.
Considerazioni riguardo la sicurezza di SmileForDys e contromisure
adottate
Di per sè, e rispetto agli altri CMS in circolazione, WP risulta un sistema alquanto
più sicuro dei tradizionali siti web. Chiaramente, è buon senso proteggere il più possibile il proprio software; tuttavia, in alcuni casi non è necessario avere un software
blindato, o quanto meno non è richiesto un altissimo livello di sicurezza.
Data la sua tipologia, SmileForDys non è reputato un software che richiede un
elevato livello di sicurezza. Ciò è dovuto al fatto che il sistema è rivolto, principalmente, a ragazzi e bambini molto giovani, e le informazioni contenute e richieste per
iscriversi non contengono dati sensibili. Infatti durante la fase di registrazione alla
web app sono semplicemente richiesti nome, username, email e passowrd.
In ogni caso, si è pensato, in quanto i destinatari del software sono dei minorenni,
di tutelare il più possibile le informazioni inserite dagli utenti e chiaramente le pagine
di installazione.
La prima misura di sicurezza adottata, è stata quella di inserire le già menzionate
chiavi di sicurezza nel file wp-config. Subito dopo, si è provveduto a rimuovere i
permessi all’account admin “settato” di default. Onde evitare di essere colpiti da
attacchi DDos, è stato attivato il servizio Cloudflare, e sono stati impostati dei
filtri anti-spam. Per protezione contro gli attacchi “brute forcing”, è stato installato
un plugin che limita i tentativi di login. Infine, come ultime misure di sicurezza,
sono stati modificati i prefissi delle tabelle MySQL, dopo di che, si è provveduto a
nascondere la versione di WP e il file wp-config.
3.2.2
Perché WordPress
Anche se è nato nel 2003 per creare e gestire i blog, WordPress permette oggi,
ovviamente, di realizzare blog, ma soprattutto qualsiasi tipo di sito web, anche
aziendale e di e-Commerce. Ma c’è di più: WordPress permette, anche, di creare
dei siti membership, Social Network e Forum che si integrano perfettamente con la
grafica del sito. Ciò rende la versatilità di WordPress quasi assoluta.
WordPress è molto semplice da utilizzare e gestire: basti pensare che un utente
abilitato può creare una nuova pagina web con, realmente, pochi click. Inoltre,
38
3 Il CMS di supporto e i plugin individuati
tramite l’apposita galleria, la gestione dei file multimediali caricati, o da caricare,
sul proprio sito risulta semplice ed efficace. Tramite gli ShortCode, brevissimi codici
racchiusi da parentesi quadre, è possibile richiamare le funzioni, i file, i widget e i
plugin, in modo semplice e veloce, risparmiando cosı̀ tempo e codice.
L’interazione con i maggiori social network risulta molto semplice ed efficace,
inoltre, permette la gestione dei commenti degli utenti, che possono essere usati
come un modo per ricevere un loro feedback all’interno del sito stesso. Come già
detto, WP è molto flessibile; la versione “self hosted”, installabile sul proprio spazio
web, permette di avere pieno controllo su tutto il sito, poichè la directory di WP è
quasi interamente modificabile. Ciò non è possibile con altre piattaforme.
Inoltre, WordPress è un software gratuito ed open source; ciò significa, come già
detto, che il codice è liberamente modificabile. Questo ha comportato lo sviluppo di
una vasta community che ha reso WordPress il CMS, attualmente, più supportato.
Infatti, il forum della community presenta una vastità di argomenti, con risposte
pronte a quasi tutte le domande.
3.3 I plugin
Il nucleo di WordPress è stato progettato per essere snello e leggero, per massimizzare la flessibilità e ridurre al minimo il codice inutile. I plugin possono offrire
funzioni personalizzate e caratteristiche che fanno si che ogni utente possa adattare
il proprio sito alle proprie esigenze specifiche.
Un plugin è un pezzo di software che contiene un insieme di funzioni che può essere aggiunto a un sito WordPress. Essi possono estendere funzionalità o aggiungere
nuove funzioni al sito. I plugin, sono scritti nel linguaggio di programmazione PHP e
si integrano perfettamente con WordPress. Nella comunità WordPress, c’è un detto:
“there’s a plugin for that”, ovvero, “c’è un plugin per quello”. I plugin rendono facile,
per gli utenti, aggiungere funzionalità per il proprio sito web, senza conoscere una sola riga di codice. Nella directory di ricerca, dedicata, su https://wordpress.org/,
è possibile trovare, e quindi installare, migliaia di plugin gratuiti.
3.3.1
I requisiti del sistema
La realtà da realizzare, come ampliamente descritto nel primo capitolo, è ideata
per stimolare l’interesse di bambini, dalla prima elementare alla terza media, nei
confronti della didattica, attraverso un approccio ludico.
Pertanto, il sistema necessita di software che permetta di realizzare giochi o
sfide didattiche, tramite contenuti appropriati. Bisogna, quindi, avere del software
che realizzi, o permetta di realizzare del contenuto interattivo per il web, sempre, e
comunque, rispettando il tema della didattica.
Dato il pubblico a cui è rivolto il contenuto della web app, è necessario fare
una considerazione riguardo al tipo di hardware da questi utilizzato. Al giorno
d’oggi, molti bambini risultano già in possesso di uno smartphone o un tablet, e
anche nei casi in cui tali strumenti non sono in loro possesso, spesso è possibile,
per i bambini, accedere a quelli dei genitori, o di altri parenti. Risulta, inoltre, più
efficace motivare il loro interesse verso un software eseguibile su dispositivi mobili;
3.3 I plugin
39
quindi, grazie, appunto, a tale tipologia di dispositivi, è possibile eseguire il software
lontano da casa e, quindi, in mobilità. Rimane, però, da considerare anche i ragazzi
che non hanno accesso a tale tipologia di dispositivi. Quindi il software deve essere
“multi piattaforma” cioè eseguibile su tutti i principali tipi di dispositivo, anche sui
personal computer. È necessario, quindi, che il software sia realizzato con tecnlogia
compatibile col maggior numero possibile di dispositivi.
3.3.2
I plugin individuati
La prima necessità, riscontrata in fase di sviluppo, è stata quella di avere un tool, o
un servizio per sviluppare un menù che si comportasse da “spina dorsale” della web
app, in modo da essere pienamente personalizzabile e il più possibile interattivo.
A tal proposito, è stata avviata una ricerca sulla pagina ufficiale di WP, dedicata
ai plugin. Da tale ricerca sono risultate diverse pagine di risultati, ordinate per
pertinenza con le “keyword” inserite. Pertanto, è stato possibile, già dalle prime
pagine, individuare due plugin che rispondessero ai requisiti:
•
•
My Bootstrap Menu; dalla sua pagina è stato possibile verificare che esso possiede
oltre 1.000 installazioni attive, ed una media di recensioni di 4.1 su 5, su un totale
di 9 recensioni.
WordPress Button Plugin MaxButtons; questo possiede oltre 70.000 installazioni
attive, ed una media di recensioni di 4.8, su un totale di 456 recensioni.
In seguito al provvedimento di legge dell’ 8 maggio 2014, è stato reso necessario,
per obbligo di legge, inserire un banner, che dichiara l’utilizzo dei cookie e richiede il
consenso del loro utilizzo, all’utente o visitatore del sito. Quindi, si è reso necessario
installare un software, o creare un banner, che esplicitasse le due precedenti funzioni.
Dalla ricerca, effettuata tra i plugin, è emerso da subito un plugin adatto allo scopo, e
che inoltre presentava una funzione di personalizzazione tale da renderlo pienamente
adattabile alla web app. Il plugin in questione si chiama EU Cookie Law, ed è il
primo classificato in termini di apprezzamento e installazioni.
Di seguito sono elencati i plugin, selezionati per implementare i giochi, che sono
stati individuati sulla pagina https://wordpress.org/plugins/, la plugin directory di WP; per ciascun plugin vengono riportati il nome, il numero di installazioni,
la media recensioni, che va da 0 a 5, e le loro funzionalità:
•
•
•
Sudoku:
– oltre 100 installazioni attive;
– ancora nessuna recensione;
– realizza un widget di dimensioni personalizzabili, che permette di risolvere
un sudoku.
WP sudoku plus:
– oltre 200 installazioni attive;
– ancora nessuna recensione inserita;
– realizza un plugin personalizzabile, con diverse opzioni, come suggerimenti,
aiuti, reset etc.
Sudoku Shortcode:
– 70 installazioni attive;
40
•
•
•
•
•
•
•
•
•
3 Il CMS di supporto e i plugin individuati
– 1 recensione inserita con una media di voti pari a 5;
– tramite uno shortcode permette di inserire un sudoku personalizzabile,
ovunque sul proprio sito.
MyPuzzle Sudoku:
– oltre 200 installazioni attive;
– 1 recensione inserita, con una media di voti pari a 4;
– permette di inserire un sudoku personalizzabile per livelli di difficoltà,
suggerimenti, linguaggio e colori.
MyPuzzle Find the pair:
– oltre 600 installazioni attive;
– 1 recensione inserita,con una media di voti pari a 5;
– permette la creazione del classico gioco memory, ha una propria directory
dalla quale vengono scelte le coppie di immagini. Oltre alle immagini, è possibile personalizzare il plugin, modificando il tempo di soluzione ed il numero
di coppie.
MyPuzzle Jigsaw:
– oltre 600 installazioni attive;
– 3 recensioni inserite, con una media di voti pari a 4.7;
– permette la creazione di un classico puzzle; può essere personalizzato cambiando l’immagine di sfondo.
MyPuzzle Sliding:
– oltre 200 installazioni attive;
– 1 recensione inseria, con una media di voti pari a 4;
– permette di inserire un puzzle da 16 pezzi, risolvibile facendo scorrere i pezzi
stessi. Si può personalizzare cambiando l’immagine.
Photo Puzzle:
– 30 installazioni attive;
– nessuna recensione attualmente inserita;
– permette di creare un puzzle tramite l’inserimento dell’URL di una foto in
un apposito shortcode.
Crossword Compiler Puzzle:
– oltre 100 installazioni attive
– 3 recensioni inserite, con una media di voti pari a 2.8;
– permette di inserire delle parole crociate.
Word Search Maker:
– 20 installazioni attive;
– ancora nessuna recensione inserita;
– questo plugin permette, tramite l’inserimento di una lista di parole, di realizzare un puzzle, con una griglia di lettere apparentemente random, dal quale
devono essere individuate le parole inserite nella lista.
Wp-Pro-Quiz:
– oltre 20.000 installazioni attive;
– 153 recensioni inserite,con una media di voti pari a 4.4;
– permette di creare quiz interattivi, creando domande, e personalizzando il
tipo e la modalità di risposta.
Quiz Cat:
– oltre 1.000 installazioni attive;
3.3 I plugin
•
•
41
– 12 recensioni inserite, con una media di voti pari a 4.8;
– permette di creare quiz interattivi, creando domande e personalizzando il
tipo e la modalità di risposta.
HD Quiz:
– oltre 1.000 installazioni attive;
– 11 recensioni inserite, con una media di voti pari a 5;
– permette di creare quiz interattivi, creando domande, e personalizzando il
tipo e la modalità di risposta.
Crosswordsearch:
– oltre 100 installazioni attive;
– 5 recensioni inserite, con una media di voti pari a 3.2;
– permette di creare una lista di parole che verrano nascoste in una matrice
di lettere, che viene successivamente generata dallo stesso plugin. Tali parole, ogni qual volta che vengono individuate, vengono eliminate dalla lista,
visualizzata a fianco.
È stato aggiunto un plugin da una directory differente da quella ufficiale. Il nome
di questo plugin è Tetris e, come suggerisce il nome, permette di inserire il gioco
del Tetris sulle proprie pagine.
È stato individuato, il plugin PHP Code For Posts, tale plugin permette di
integrare codice PHP nelle pagine della web app.
Per realizzare il pannello di log-in e il modulo di registrazione è stato utilizzato
il plugin Profile Builder.
Era già presente nell’installazione, il plugin Akismet. Tale plugin agisce da filtro
anti spam.
Infine, è stato individuato un ulteriore plugin, Yoast SEO. Questo serve a
migliorare l’indicizzazione della web app nei confronti dei principali motori di
ricerca.
4
La personalizzazione dei plug in per la
realizzazione della web app
Questo capitolo tratta, principalmente, del lavoro svolto su, e riguardo, i plugin individuati. In particolare, l’attenzione si concentrerà sulle modifiche ad essi apportate,
sui giochi e sulle funzioni realizzate tramite tali modifiche.
4.1 Analisi e prove svolte sui plugin individuati
In questa sezione verrà trattato il lavoro svolto sui plugin individuati, di cui si parla
nell’ultima sottosezione del capitolo precedente.
Dopo la loro individuazione, la prima attività svolta sui plugin è stata l’installazione. Difatti, alcuni plugin sono stati sviluppati qualche anno prima del rilascio
della versione di WordPress utilizzata per il progetto. Ciò vuol dire che non sempre
la compatibilità col software è garantita. In alcuni casi, i plugin considerati sono stati
aggiornati di frequente e, quindi, la compatibilità poteva essere già garantita dalla
pagina di installazione. Chiaramente non tutti i plugin sono risultati funzionanti
con l’attuale versione di WordPress.
Tramite l’IDE PhpStorm si è svolta un’attenta analisi sul codice dei file dei plugin non funzionanti. In particolare, nel caso del plugin WP-Sudoku Plus, l’installazione è avvenuta con successo, ma è risultato impossibile completare l’attivazione.
Dopo un controllo dei file del plugin è stato possibile renderlo attivabile, tramite
la modifica, all’interno del file principale scritto in PHP, del prefisso delle tabelle,
come viene mostrato nella Figura 4.1, in particolare nella riga 15.
In seguito, sui plugin attivati, è stata avviata un’attenta fase di analisi, orientata
a verificare le possibilità, la versatilità e l’utilità dei singoli plugin. Infatti, tramite
la pagina di installazione e descrizione di ciascun plugin, è stato possibile:
•
•
•
•
Studiare le esperienze pregresse di altri utenti, tramite i commenti e le recensioni.
Valutare, eventuali, modifiche apportabili tramite l’interfaccia del plugin. Ciò,
è possibile solo nel caso in cui queste opzioni sono già state esplicitate nella
descrizione.
Effettuare una valutazione riguardante l’eventuale insorgenza di problemi di
compatibilità in futuro, osservando la frequenza degli aggiornamenti del plugin.
Stimare il possibile risultato finale, tramite l’esame degli screenshot visibili sulla
pagina del plugin.
44
4 La personalizzazione dei plug in per la realizzazione della web app
Figura 4.1. Porzione di codice che realizza l’inserimento della tabella del plugin WPSudoku Plus all’interno del database e ne permette l’attivazione
4.1.1
La tecnologia usata dai plugin
Come già detto nelle sezioni dei capitoli precedenti, un plugin WordPress è realizzato, per la maggior parte, facendo uso di codice PHP; esso viene memorizzato nella
directory wp-content e fa uso di elementi di CSS. Tali caratteristiche sono comuni a
tutti i plugin. Chiaramente, plugin diversi, per realizzare funzioni differenti, spesso
sono realizzati in modo differente. Infatti, lato client non c’è alcun tipo di vincolo,
i plugin, infatti, possono fare uso di codice JavaScript o di contenuti Flash. In particolare, la presenza di tale tipo di contenuti può influenzare l’utilizzo del software
poiché i contenuti Flash non sono eseguibili sulla maggior parte dei dispositivi mobile, e anche quando lo sono, non godono della proprietà di “responsiveness”. Ciò
vuol dire che non rispettano i requisiti di progettazione della web app, che, come è
già stato detto nei capitoli precedenti, mira ad essere eseguibile sul maggior numero
possibile di dispositivi.
4.1.2
I plugin scartati
Tra i plugin individuati alcuni non sono risultati compatibili con la versione di
WordPress installata, e quindi non sono utilizzabili; altri si sono rivelati non adatti
al progetto, solo dopo essere stati installati e testati.
Di seguito verranno elencati i plugin che non sono stati scelti per il progetto, e
quindi sono stati scartati.
• Il plugin Easy PHP Sudoku Game è stato installato ed attivato correttamente.
Esso è stato realizzato tramite l’utilizzo di tecnologia JavaScript, presenta diverse opzioni di personalizzabilità sulla sua interfaccia e rispetta le esigenze di
grafica. Di contro, nonostante si possa specificare il livello di difficoltà, è istanziabile una volta soltanto e presenta conflittualità con l’installazione di WordPress.
Si è osservato, infatti, che, successivamente al suo utilizzo in una pagina della
web app, la libreria multimediale e tutti i file in essa contenuti sono divenuti
inaccessibili da tutte le pagine. Nonostante il debugging effettuato, non si è ancora riusciti a risolvere l’inconveniente; quindi, si è scelto di non utilizzare tale
plugin nel progetto, senza previa risoluzione del problema.
4.1 Analisi e prove svolte sui plugin individuati
•
•
•
•
•
•
•
•
•
45
Il plugin Tetris, scaricato da una directory non ufficiale, è stato installato ed
attivato correttamente. Tramite una breve analisi dei suoi file è stato possibile
appurare che tale plugin, per la sua parte grafica, fa uso esclusivo di Javascript
e CSS. Esso era stato testato sulla propria directory, ma, nonostante l’analisi
dei suoi file, non è stato possibiile trovare uno shortcode che ne permettesse il
semplice inserimento in una determinata pagina. Pertanto, si è provato a realizzare uno shortcode ad hoc, ma, questo tentativo non è risultato efficace; per
tale ragione, si è deciso di scartare il plugin.
Il plugin Crosswordsearch è stato installato ed attivato correttamente. Anch’esso
è stato realizzato mediante l’uso di tecnologia JavaScript, rispetta i requisiti
grafici della web app e corrisponde alla tipologia di software richiesta. Tale plugin
è stato testato prima su un client desktop, in seguito su client mobile. Sul primo
risulta funzionare perfettamente. Siccome, però, fa uso della funzione di click
e trascinamento del mouse del PC, quando è stato testato su un dispositivo
mobile, nonostante rispettasse, anche su questo client, i requisiti di grafica, non
è stato possibile utilizzarlo e, pertanto, è stato scartato.
Il plugin MyPuzzle Jigsaw è stato installato ed attivato correttamente. In seguito
è stato possibile verificare che esso fa uso di tecnologia Flash; pertanto, è stato
scartato poichè tale tecnologia risulta incompatibile con alcuni dispositivi mobili.
Il plugin Word Search Maker è stato installato ed attivato correttamente. In
seguito è stato possibile verificare che fa uso di tecnologia Flash; pertanto è stato
scartato, poichè risulta anch’esso incompatibile con alcuni dispositivi mobili.
Il plugin Quiz Cat è stato installato ed attivato correttamente; tale plugin è
stato realizzato tramite tecnologia JavaScript. Dopo una fase di testing, è stato
possibile verificare che, nonostante risulti perfettamente eseguibile sui diversi
tipi di client, esso non rispetta i requisiti grafici; inoltre presenta un basso grado
di personalizzabilità; pertanto è stato scartato.
Il plugin MyPuzzle Sliding è stato installato ed attivato correttamente. Tale plugin è stato realizzato mediante l’uso di tecnologia JavaScript, rispetta i requisiti
grafici della web app e corrisponde alla tipologia di software richiesta. Esso è
stato testato prima su un client desktop e in seguito su un client mobile. Sul
primo funziona perfettamente, mentre sul secondo i risultati non sono stati soddifacenti in quanto esso non gode della proprietà di responsiveness. Quindi, è
stato scartato in quanto la sua esecuzione su dispositivi mobili non risultava
soddisfacente in termini di qualità.
Il plugin Crossword Compiler Puzzle è stato installato ed attivato correttamente.
Tale plugin è stato realizzato tramite tecnologia JavaScript. Dopo una fase di
testing è stato possibile verificare che, nonostante risulti perfettamente eseguibile
sui diversi tipi di client, esso non rispetta i requisiti grafici e presenta un basso
grado di personalizzabilità; pertanto è stato scartato.
Il plugin MyPuzzle Sudoku è stato installato ed attivato correttamente. È stato
possibile appurare che tale plugin è stato realizzato tramite tecnologia JavaScript; tuttavia, nonostante un’attenta fase di debugging, il plugin risulta non
compatibile con la versione di WordPress installata. Pertanto, è stato scartato.
Il plugin Sudoku è stato installato ed attivato correttamente. È stato realizzato
facendo uso esclusivo di codice HTML e fogli di stile. Non presenta, quindi, alcun
tipo di interattività, pertanto è stato scartato.
46
4 La personalizzazione dei plug in per la realizzazione della web app
• Il plugin WP Sudoku Plus è stato installato ed attivato correttamente. Tale
plugin è stato realizzato mediante l’uso di tecnologia JavaScript e corrisponde
alla tipologia di software richiesta. Esso è stato testato prima su un client desktop
e, in seguito, su un client mobile. Sul primo funzionava perfettamente, mentre
sul secondo i risultati non sono stati soddisfacenti, in quanto, tale plugin, non
gode della proprietà di responsiveness. Quindi, è stato scartato in quanto la sua
esecuzione su dispositivi mobili risulta non adeguata ai requisiti grafici richiesti.
4.1.3
I plugin scelti per il progetto
Dopo aver testato, ove possibile, tutti i plugin individuati, ed aver scartato quelli
che non erano funzionanti o che non rispondevano ai requisiti del progetto, è iniziata
la fase di implementazione dei giochi. Di seguito sono elencati i plugin scelti, con
una loro breve descrizione e il contenuto per cui sono stati realizzati:
• WP Pro Quiz; questo plugin permette di realizzare dei quiz interattivi con un
vasto range di personalizzazioni effettuabili. Infatti, è possibile realizzare vari
tipi di quiz e domande, con contenuto audio e immagini, che possono avere
risposte di tipo multimediale, o risposta multipla, oppure risposta aperta. Il
quiz è personalizzabile in termini di punteggio, numero di domande, modo di
visualizzazione delle domande e tempo. Chiaramente, data la sua tipologia, si è
pensato di utilizzarlo per realizzare dei quiz.
• HD Quiz; questo plugin, come il precedente riguarda la realizzazione di quiz;
analogamente, infatti, presenta un vasto numero di personalizzazioni effettuabili.
Tuttavia rispetto al plugin precedente, il layout di tale plugin, risulta differente.
Infatti, esso presenta piccole e brevi animazioni tali da potersi ben integrare ai
requisiti grafici. Anche questo plugin è stato pensato per realizzare dei quiz.
• Photo Puzzle; questo plugin permette di realizzare dei classici puzzle interattivi,
inserendo nel suo shortcode URL di immagini di dimensioni prefissate. Il suo
scopo è quello di creare diversi giochi tramite l’utilizzo dei puzzle.
• MyPuzzle Find the pair; questo plugin permette di realizzare, tramite coppie
di immagini, inserite in un’apposita directory, un gioco di memoria, dove bisogna ricordare le posizioni delle coppie di immagini. Tramite questo plugin si è
pensato di realizzare due differenti tipologie di giochi, una di livello semplice,
che permettesse di inserire il classico gioco di memoria, e una leggermente più
complicata, che permettesse di associare del testo alle immagini.
• Max Buttons; questo plugin permette di realizzare pulsanti (o button) di dimensioni e colori personalizzabili. L’utilizzo pensato per tale plugin è quello di
realizzare un menù di gioco interattivo.
• Profile Builder; questo plugin permette di realizzare e personalizare login, registrazione e dati di profilo. Si è pensato di utilizzarlo per semplificare i form di
registrazione ed il loro layout.
• PHP Code For Posts; questo plugin permette l’inserimento di codice PHP all’interno dei post tramite l’utilizzo di shortcode. Si è pensato di utilizzarlo per
applicare semplici modifiche senza la neccessità di rimodificare il template.
4.2 Personalizzazione dei contenuti
47
4.2 Personalizzazione dei contenuti
Una volta scelti ed installati i plugin, si è passati alla fase di lavoro successiva, ovvero
la fase di adattamento e personalizzazione degli stessi, nei confronti dell’intera web
app. Data la natura del progetto, la parte grafica ricopre un’importanza pari a
quella dei contenuti.
Poichè, come è già stato detto, bisogna prestare particolare attenzione al layout e
all’aspetto grafico, della web app, per renderla fruibile a tutti gli utilizzatori affetti
da DSA, si rende necessario prestare particolare attenzione all’aspetto visivo del
testo. Infatti, per i font utilizzati sono stati scelti colori con un contrasto netto fra
loro, visibili anche da persone affette da daltonismo.
Spesso, inoltre, si è scelto di usare font di dimensioni superiori a quelli utilizzati
su web, e l’utilizzo dello stampatello è ricorrente nelle aree della web app che potrebbero risultare più complesse, poichè qualsiasi individuo affetto da DSA riesce a
decifrare meglio i caratteri maiuscoli. Per quanto riguarda immagini ed animazioni,
si è effettutata una fase di controllo e verifica delle stesse, in quanto animazioni improvvise o cambi di immagine troppo veloci e frequenti potrebbero risultare nocivi
nei confronti di alcune categorie di soggetti.
Il primo processo di personalizzazione ed adattamento, chiaramente, è stato svolto sul template scelto, ovvero Keith. Infatti, si è scelto di utilizzare un layout ed una
grafica minimali, ponendo come sfondo l’immagine di un’isola del tesoro, impostando una paginazione monoblocco, evitando l’utilizzo di sidebar, etc., e preferendo,
ove possibile, l’implementazione di un menù che facesse uso di immagini, piuttosto
che di testo (Figura 4.2).
Figura 4.2. Menu principale, visibile in tutte le pagine. Il primo pulsante partendo dalla
sinistra reindirizza alla home page, il secondo alla pagina personale, il terzo alla pagina
d’aiuto.
Per quanto riguarda l’header ed il footer delle pagine, si è scelto di realizzare un
banner per il primo, e lasciare temporaneamente vuoto il secondo.
4.2.1
La realizzazione dei giochi
Il primo gioco ad essere realizzato è stato “Trova la coppia” , facendo uso del plugin
MyPuzzle Find The pair. Infatti, sono state inserite, nella directory del plugin, 8
coppie di immagini identiche. Essendo il primo gioco, si è pensato di svilupparlo con
un livello di difficoltà molto basso, in modo tale di essere accesibile a tutti gli utenti;
48
4 La personalizzazione dei plug in per la realizzazione della web app
infatti, il lasso di tempo per risolvere tale gioco è stato impostato relativamente
lungo.
Tramite il Plugin WP Pro Quiz sono stati implementati i seguenti giochi:
• “Le doppie”; questo gioco è stato realizzato come un quiz a punteggi; lo scopo
è quello di selezionare il modo giusto di scrivere la parola designata. Infatti,
per ogni domanda, viene visualizzata un’immagine e si deve scegliere il modo
corretto di scrivere il soggetto dell’immagine tra due o più alternative proposte
(Figura 4.3)
Figura 4.3. Esempio di una domanda del gioco “Le doppie”: dove l’utente visualizza
l’immagine di una forchetta e deve scegliere il modo corretto di scriverne il nome.
• “T o D” e “B o P”; questi due giochi, pressoché identici, sono stati realizzati come
il precedente; il loro scopo è quello di aggiungere la lettera mancante alle parole
proposte, riscrivendola per intero nel form sottostante; anche queste domande
presentano delle immagini raffiguranti la parola in questione. Diversamente dal
precedente, le domande vengono visualizzate una per volta (Figura 4.4).
• “Sillabe”; lo scopo di questo gioco è quello di individuare il numero di sillabe
componenti una parola. Viene visualizzata una parola, con la sua relativa immagine, e, nel form sottostante, bisogna inserire il numero delle sillabe; è presente
una breve spiegazione del gioco all’avvio del quiz.
• “Omofone”; lo scopo di questo gioco è quello di individuare il modo corretto di
scrivere delle parole con identico suono ma semantica differente, utilizzando o
meno l’apostrofo; anche questo gioco presenta una breve spiegazione.
• “Riordina” ; lo scopo di questo gioco è quello di individuare l’ordine corretto di
tre o più elementi, trascinando i blocchi presenti secondo il tipo di ordinamento
proposto. Infatti, prima di ogni domanda, viene specificato di ordinare secondo
un particolare ordine (cronologico, alfabetico, etc.); vengono proposti più esempi
esplificativi.
• “Ascolta e Scrivi”; lo scopo di questo gioco è quello di scrivere in modo corretto le
parole che vengono ascoltate. Per realizzarlo, è stato fatto uso di un sintetizzatore
4.2 Personalizzazione dei contenuti
49
Figura 4.4. Esempio di una domanda del gioco “B o P”: l’utente visualizza l’immagine
di un’ape e deve riscrivere la parola in modo corretto.
•
vocale; dopo aver convertito il testo in audio, i file sono stati caricati nella libreria
multimediale e richiamati dal plugin. Gli audio sono ascoltabili su tutti i tipi di
dispositivi dotati di cuffie, casse o altoparlanti.
“Trova il tesoro”; lo scopo di questo gioco è quello di scegliere il percorso corretto
per arrivare al tesoro, fra quattro proposte alternative. Questo gioco è stato
realizzato facendo uso del software Photoshop, con il quale è stata realizzata
un’immagine che mostra quattro percorsi che si intrecciano tra loro, ciascuno dei
quali individuato da lettere e colori differenti. Una volta individuato il percorso
giusto, è sufficiente inserire la lettera corrispondente nel form sottostante.
Tramite il Plugin HD Quiz è stato realizzato il gioco “Trova l’immagine giusta”.
In questo gioco, viene proposta una parola e l’utente deve individuare l’immagine
che lo raffigura tra quattro alternative differenti tra loro.
Tramite il Plugin Photo Puzzle è stato realizzato il gioco “Puzzle”. Lo scopo
di questo gioco è quello di ricomporre l’immagine proposta unendo i vari pezzi
dell’immagine posti in ordine sparso.
4.2.2 Personalizzazioni effettuate tramite le interfacce dei
plugin
Per quanto riguarda il plugin WP Pro Quiz, la maggior parte di modifiche apportate
sono state effettuate attraverso la sua interfaccia; l’unica eccezione riguarda le modifiche relative al suo aspetto che sono state effettuate tramite i CSS. Le principali
operazioni di personalizzazione sono state:
•
•
impostazione di un tempo di soluzione;
variazione della tipologia di domande e di risposte;
50
•
•
•
•
•
4 La personalizzazione dei plug in per la realizzazione della web app
variazione di punteggio per ogni domanda;
impostazione di un punteggio minimo per superare il test;
aggiunta di più metodi di inserimento della risposta;
aggiunta di una classifica per alcuni giochi;
impostazione di un ordine random di visualizzazione delle domande.
Tramite l’interfaccia del plugin MyPuzzle Find The Pair, è stato possibile
modificare l’aspetto delle “card” ed il loro numero.
Per quanto riguarda il plugin HD Quiz, è stato possibile apportare le seguenti
modifiche, tramite la sua interfaccia:
•
•
•
•
•
variazione dei tempi di soluzione;
variazione dei colori delle schede delle domande;
creazione di messaggi di risposta per ciascuna domanda;
impostazione di un ordine random di visualizzazione delle domande;
impostazione della tipologia di animazione che si visualizza dopo ogni risposta.
4.3 Modifiche apportate all’aspetto
Come già detto, il template e i plugin menzionati in precedenza sono stati modificati
e personalizzati per meglio adattarli alle esigenze della web app. In questa sezione
ci concentreremo sulle modifiche grafiche, rimandando alla sezione successiva la
discussione relativa alla modifica e/o all’aggiunta di funzionalità.
Le modifiche grafiche sono state effettuate sfruttando una funzionalità del template che permette di personalizzare la grafica di ciascun componente del sistema,
senza dover agire sui singoli fogli di stile (CSS), ma, semplicemente, compilando un
singolo file, che sovrascrive i vari CSS. Il file cosı̀ ottenuto si comporta esattamente
come un tema child; esso, infatti, viene salvato separatamente dal tema e dai plugin, che, in questo modo, possono essere aggiornati senza provocare la perdita delle
modifiche.
4.3.1 Modifiche relative al design ed al layout delle pagine
del progetto
Procediamo, adesso, ad analizzare le modifiche in dettaglio, con l’ausilio di alcuni
listati.
Il codice riportato nel Listato 4.1 consente di modificare lo sfondo delle pagine,
inserendo un’immagine personalizzata.
1
2
3
4
5
6
7
body.custom-background {
background-image: url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/mappa-isola.jpg’);
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: cover;
}
Listato 4.1. Codice relativo alla modifica dello sfondo
4.3 Modifiche apportate all’aspetto
51
Il Listato 4.2 contiene il codice utilizzato per modificare l’header delle pagine.
Per creare continuità con le sezioni sottostanti sono stati eliminati il margine ed il
bordo inferiori (righe 2-3). Inoltre, è stato aggiunto un riempimento di 20 pixel per
distanziare l’header dal resto della pagina (riga 4).
Il template utilizzato prevedeva la presenza di un titolo testuale all’interno dell’header; questa sezione è stata riadattata nascondendo il testo (riga 15) e inserendo
al suo posto il logo della web application (righe 6-13).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#site-header {
border-bottom: 0px solid rgba(0, 0, 0, 0.1); */
margin-bottom: 0px;
padding-bottom: 20px;
} #site-title {
margin:auto;
width:330px;
background-image: url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/
cartellotitolo.png’);
background-size: contain;
background-repeat: no-repeat;
height:70px;
} #site-title span {
visibility: hidden;
}
Listato 4.2. Codice relativo alla modifica dell’header
Il Listato 4.3 contiene le modifiche riguardanti la versione desktop del menù. Per
fare in modo che fossero visualizzate soltanto le icone, la dimensione del carattere è
stata posta a 0 pixel (riga 2) e sono stati eliminati i list-marker (riga 3) e le ombre
(riga 5); infine, il menù è stato spostato a destra (riga 7).
1
2
3
4
5
6
7
8
#access ul {
font-size: 0px;
list-style: none;
margin: 0;
padding: 0;
box-shadow: none;
float: right;
}
Listato 4.3. Codice relativo alla modifica della versione desktop del menù
Il Listato 4.4 riporta le modifiche relative al menù per dispositivi mobili. Trattandosi di un menù a tendina, le modifiche hanno interessato sia l’intestazione (righe
1-15) che gli elementi visualizzati in cascata (righe 16-30). Per l’intestazione, dopo
aver regolato la dimensione, la posizione ed i margini (righe 2-6), è stata inserita
un’immagine di sfondo (righe 9-14). Anche gli elementi contenuti nel menù sono
stati dimensionati adeguatamente (righe 18-20); inoltre, sono stati definiti il colore del carattere (riga 27), la dimensione di quest’ultimo (riga 21) e il colore dello
sfondo (riga 28). Infine, è stato rimosso il bordo inferiore (riga 29).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu-toggle {
margin: auto;
position: initial;
width: 50%;
padding-top: 10px;
height: 60px;
} .icon-menu {
color: transparent !important;
background-image: url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/cartellomenu.png’);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
max-width: 200px;
} #header-layout1 #access.main-navigation.toggled .nav-menu li
a, #header-layout2 #access.main-navigation.toggled .nav-menu li
a {
52
4 La personalizzazione dei plug in per la realizzazione della web app
17
18
19
20
21
22
23
24
25
26
27
28
29
30
height: 70px;
line-height: 30px;
padding: 5px 10px;
display: block;
font-size: 16px;
} #header-layout1 #access.main-navigation.toggled .nav-menu a,
#header-layout1 #access.main-navigation.toggled .nav-menu ul a,
#header-layout2 #access.main-navigation.toggled .nav-menu a,
#header-layout2 #access.main-navigation.toggled .nav-menu ul a
{
color: #fff !important;
background: #007bb6 !important;
border-bottom: none;
}
Listato 4.4. Codice relativo alla modifica del menù per dispositivi mobili
Il Listato 4.5 riporta le modifiche effettuate sui titoli delle pagine. A differenza
del template utilizzato, la web application non prevede la presenza di titoli testuali
per le singole pagine; per questo motivo, i contenuti di questa sezione sono stati
nascosti (riga 3).
1
2
3
4
.entry-header {
position: relative;
visibility: hidden;
}
Listato 4.5. Codice relativo alla modifica del titolo delle pagine
Il Listato 4.6 contiene le modifiche relative al corpo della pagina, suddiviso per
default in due o più aree. Il template prevedeva, infatti, la presenza di una barra laterale accanto al contenuto delle pagine. Avendo necessità di un corpo unico,
la barra menzionata in precedenza è stata eliminata (riga 2), provvedendo, contemporaneamente, ad eliminare i bordi ed a regolare il riempimento (righe 3-25).
Successivamente, è stato inserito uno sfondo semi-trasparente (righe 26-32) all’intero
corpo della pagina ed, infine, è stata regolata la dimensione dell’area del contenuto
(righe 33-36).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.two-column #sidebar-primary, .three-column #sidebar-primary {
visibility: hidden;
padding-left: 20px;
}
.content-sidebar #main {
border-right: 0px solid rgba(0, 0, 0, 0.1);
padding-right: 0px;
}
.sidebar-content .hentry, .sidebar-content .no-results,
.sidebar-content .widget, .sidebar-content #respond,
.content-sidebar .hentry, .content-sidebar .no-results,
.content-sidebar .widget, .content-sidebar #respond,
.content-sidebar-sidebar .hentry, .content-sidebar-sidebar
.no-results, .content-sidebar-sidebar #respond,
.sidebar-content-sidebar .hentry, .sidebar-content-sidebar
.no-results, .sidebar-content-sidebar #respond {
border: 0;
padding-top:0px;
padding-bottom: 60px;
}
.hentry, .no-results, #sidebar-primary .widget,
#sidebar-secondary .widget, #sidebar-footer .widget,
.banner_altervista_300X250, #respond, #nav-single {
border: none;
padding: 7%;
}
#content, #sidebar-primary, #sidebar-secondary {
padding-top: 0px;
padding-bottom: 0px;
}
.two-column #main {
4.3 Modifiche apportate all’aspetto
37
38
39
40
41
42
43
44
45
46
47
48
53
width: 100%;
}
.two-column #content {
width: 100%;
background-color:rgba(255, 255, 255, 0.39);
}
.entry-content {
margin: auto;
width: 85%;
}
Listato 4.6. Codice relativo alla modifica del corpo della pagina
Il Listato 4.7 mostra il codice relativo alla creazione del tasto di logout. Come è
possibile vedere, è stata inserita un’immagine personalizzata (righe 2-3) ed è stato
regolato il riempimento (righe 4-8).
1
2
3
4
5
6
7
8
.tasto-esci, .tasto-esci:hover, .tasto-esci:active {
background-image:url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/Tasto-Esci.png’);
background-repeat: no-repeat;
padding-top: 0px;
padding-bottom: 55px;
padding-left: 50%;
padding-right: 50%;
}
Listato 4.7. Codice relativo alla creazione del tasto per il logout
Come vedremo in seguito, la pagina di selezione dei livelli contiene una lista
non ordinata e diversi elementi di lista che, a loro volta, contengono un link ad una
pagina. Il Listato 4.8 contiene il codice utilizzato per personalizzare gli elementi di
tale lista. Le righe 1-7 si riferiscono all’impostazione di alcune proprietà generali,
come margini, riempimento e larghezza. Le righe 8-20, invece, riportano il codice
utilizzato per personalizzare gli elementi della lista e i collegamenti. Infine, le righe
21-34 contengono le regole relative all’aspetto della lista al passaggio del mouse.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#menuhome2 ul {
margin: auto;
padding: 0px;
list-style: none;
width: 173px;
padding-bottom:10%;
} #menuhome2 ul li {
position: relative;
} #menuhome2 li ul {
display: none;
} #menuhome2 ul li a {
display: block;
text-decoration: none;
color: #777;
padding: 5px;
font-size: 150%;
} #menuhome2 li:hover ul {
display: block;
margin-top:5%;
margin-bottom:5%;
} #menuhome2 li:hover a {
color:#FFFFFF;
text-align: center;
} #menuhome2 li:hover ul a:hover {
background-color: rgba(0, 0, 0, 0.4);
background-image:none;
color:#FFFFFF;
}
Listato 4.8. Codice relativo alla grafica della pagina di selezione dei livelli
Nel Listato 4.9 viene riportato il codice utilizzato per realizzare la grafica della
pagina di aiuto. Esaminando il codice, si nota che le modifiche hanno riguardato
54
4 La personalizzazione dei plug in per la realizzazione della web app
l’allineamento del testo, la larghezza del contenuto, i margini, il riempimento e lo
sfondo.
1
2
3
4
5
6
7
8
9
.menuhelp {
display:none; margin-left:0px;
} .menuhelp_container {
text-align:center;
max-width:90%;
margin:auto;
background-color:rgba(30,115,190,0.85);
padding:10px;
}
Listato 4.9. Codice relativo alla personalizzazione della grafica della pagina di aiuto
4.3.2
Modifiche grafiche apportate ai plugin
Per realizzare il pannello di login e il modulo di registrazione è stato utilizzato
il plugin “Profile Builder”. Le modifiche relative alla grafica di tale plug-in sono
riportate nel Listato 4.10. In particolare, le righe 1-8 contengono il codice adoperato
per modificare i margini, il riempimento, le dimensioni del testo e la larghezza dei
form (1-8). Le righe 9-16, 17-24 e 25-30 si riferiscono alle modifiche riguardanti gli
spazi, contenenti, rispettivamente, le intestazioni, i dati inseriti e le descrizioni dei
vari campi. Le righe successive descrivono le modifiche effettuate sui tasti utilizzati
per effettuare il login (righe 31-54) e la registrazione (righe 54-70).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.wppb-user-forms ul li, #wppb-login-wrap p,
#select_user_to_edit_form p {
overflow: hidden;
margin: auto;
padding-bottom: 14px;
font-size: x-large;
color: yellow;
width:60%;
} .wppb-form-field label, #wppb-login-wrap .login-username
label, #wppb-login-wrap .login-password label {
width: 100%;
float: left;
min-height: 1px;
text-align: center;
text-transform: uppercase;
background-color: rgba(30,115,190,0.85);
} .wppb-form-field input, .wppb-form-field input[type="text"],
.wppb-form-field input[type="email"], .wppb-form-field
input[type="url"], .wppb-form-field input[type="password"],
.wppb-form-field input[type="search"], .wppb-form-field select,
.wppb-form-field textarea, .wppb-checkboxes, .wppb-radios,
#wppb-login-wrap .login-username input, #wppb-login-wrap
.login-password input {
width: 100%;
float: none;
margin: auto;
} .wppb-description-delimiter{
text-align: center;
margin-left: 0px !important;
background-color: rgba(30,115,190,0.85);
text-transform: uppercase;
} .login-remember {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
float: none;
text-align: center;
text-transform: uppercase;
background-color: rgba(30,115,190,0.85);
} .login-submit {
width:195px !important;
} #wppb-submit.button-primary{
border:none;
background-color:transparent;
width: 200px;
background-image:url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/Tasto-Entra.png’);
background-size: contain;
background-repeat: no-repeat;
font-size: 0px;
padding-left: 50%;
4.4 Modifiche apportate al codice
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
padding-right: 50%;
padding-bottom: 72px;
} .form-submit{
width: 193px;
margin: auto;
margin-bottom: 20px;
} #register.submit.button{
border: none;
background-color: transparent;
width: 100%;
background-image: url(’http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/Tasto-Entra.png’);
background-size: contain;
background-repeat: no-repeat;
font-size: 0px;
padding-left: 50%;
padding-right: 50%;
padding-bottom: 72px;
}
55
Listato 4.10. Codice relativo alla personalizzazione della grafica del plug-in “Profile
Builder”
Anche la grafica dei plugin utilizzati per l’implementazione dei vari giochi è
stata personalizzata, sia per integrarla al meglio all’interno della web application,
sia per garantire uniformità tra i diversi plug-in. Nel Listato 4.11 vengono riportati
due esempi di tali modifiche; il codice delle righe 1-7 si riferisce alla modifica di un
singolo plug-in, mentre quello delle righe 9-16 riguarda la personalizzazione dei testi
di tutti i giochi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#mem-grid {
background-color: transparent !important;
float: none !important;
width: 100% !important;
margin: auto !important;
max-width: 350px !important;
} .testogiochi {
color: yellow;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
background-color: rgba(30,115,190,0.85);
padding: 10px;
}
Listato 4.11. Codice relativo alla personalizzazione di un gioco
4.4 Modifiche apportate al codice
Come è già stato detto nella Sezione 4.3, la personalizzazione non ha riguardato
soltanto la grafica. Infatti, per aggiungere alcune funzionalità ai giochi, è stato necessario intervenire direttamente sul codice PHP dei singoli plugin. Nello specifico,
integrando il codice riportato nel Listato 4.12 all’interno del codice dei giochi, sono stati inseriti i due tasti per ricominciare o, per abbandonare l’istanza di gioco
corrente.
1
2
3
4
5
6
7
8
9
10
11
12
$output .= "<div style=’background-color:#; width:100%’>";
$output .= "<div id=’mem-grid’></div>";
$output .= "<div style=’padding-top:10px; float:left; font-size:30px; text-align:center; width:100%;’>";
$output .= "<a
href=’http://smilefordsl.altervista.org/wordpress/home-2/’
style=’background:rgb(30,115,190);
padding-left:5px; padding-right:5px; -webkit-appearance:button; margin-top:30px;’>ABBANDONA</a>";
$output .= "<a id=’aRestart’ href=’’
style=’background:rgb(30,115,190); padding-left:5px;
padding-right:5px;
-webkit-appearance:button; margin-top:30px;’>RICOMINCIA</a>";
$output .= "</div>"; $output .= "</div>";
56
4 La personalizzazione dei plug in per la realizzazione della web app
Listato 4.12. Codice relativo all’aggiunta di alcune funzionalità ai plug-in
Realizzazione di alcune pagine principali
Per realizzare gran parte delle pagine della web application, oltre alle modifiche grafiche e all’inserimento dei plug-in trattati in precedenza, è stato necessario aggiungere ulteriore codice; in questa fase, come vedremo, sono stati utilizzati molteplici
linguaggi e tecnologie. Nelle sottosezioni seguenti illustreremo il codice utilizzato
per l’implementazione di alcune pagine del sistema.
Home page
Già nel capitolo 1 stato detto che la home page sarebbe dovuta essere una pagina
dinamica, il cui contenuto sarebbe dovuto variare in base allo stato di autenticazione
dell’utente. Per realizzare tutto ciò, è stato utilizzato il plug-in “PHP Code For
Posts”, che ha permesso di inserire all’interno della pagina il codice PHP riportato
nel Listato 4.13. Come si può vedere, è presente un semplice costrutto condizionale;
la scelta della porzione di codice da eseguire dipende dal valore restituito dalla
funzione is user logged in(), che valuta lo stato di autenticazione dell’utente.
Se quest’ultimo è autenticato, viene eseguito il codice contenuto nell’istruzione if,
altrimenti il codice ad essere eseguito è quello contenuto nell’istruzione else.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php if ( is_user_logged_in() ) {
echo "<div style=\"margin: auto;max-width: 85%;\"><img src=\"http://smilefordsl.altervista.org/wordpress/
wp-content/uploads/2016/05/pappagallo1.png\"></div><br>";
echo "<div style=\"margin: auto;max-width: 195px;\"><a href=\"http://smilefordsl.altervista.org/wordpress/
home-2\"><imgsrc=\"http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/
Tasto-vai-ai-giochi.png\"></a>";
echo do_shortcode(’[logout_to_home text="" class="tasto-esci"]’);
echo "</div>";
}
else{
echo "<div style=\"margin: auto;max-width: 85%;\"><img src=\"http://smilefordsl.altervista.org/
wordpress/wp-content/uploads/2016/05/pappagallo_spada.png\"></div><br>";
echo do_shortcode(’[wppb-login]’);
echo "<div style=\"text-align:center; font-size:x-large; font-weight:bold;
color:yellow; background-color:rgba(30,115,190,0.85); text-transform:uppercase;\"><a
href=\"http://smilefordsl.altervista.org/ wordpress/registrazione/\">E’ la prima volta che
giochiamo insieme? Clicca qui!</a></div>";
}
?>
Listato 4.13. Codice relativo all’implementazione della home page
Pagina di selezione del livello
L’obiettivo di questa pagina è quello di permettere ad un utente autenticato di selezionare un livello e, successivamente, di scegliere una tipologia di gioco tra quelle
visualizzate. Per controllare l’autenticazione è stato utilizzato uno script PHP (Listato 4.14), che, nel caso in cui l’utente non sia autenticato, lo reindirizza alla home
page.
1
2
3
<?php
if ( !is_user_logged_in() ) {
4.4 Modifiche apportate al codice
4
5
6
7
8
9
10
57
echo header( "Location:
http://smilefordsl.altervista.org/wordpress/" );
}
?>
Listato 4.14. Codice relativo al controllo dell’autenticazione
Per la funzionalità relativa alla selezione dei livelli e delle tipologie di gioco,
invece, sono state sufficienti le funzionalità offerte dal linguaggio HTML. Infatti,
attraverso il codice riportato nel Listato 4.15, è stato realizzato un menù a tendina
verticale, che ben si adatta alle necessità emerse in fase di progettazione. Il menù è
costituito da una lista i cui oggetti, cioè i livelli, sono, in realtà, altre liste contenenti
le varie tipologie di gioco.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div id="menuhome2"> <ul>
<li><a href="#">[maxbutton id="1"]</a>
<ul style="background-color: #c9420c;">
<li><a href="http://smilefordsl.altervista.org/wordpress/trova-la-coppia/">Trova la coppia</a></span></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/le-doppie-1/">Le doppie</a></span></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/ce-o-ce/">C’è o ce</a></span></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/b-o-p/">B o P</a></span></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/t-o-d/">T o D</a></span></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/come-si-chiama/">Come si chiama</a></span></li>
</ul> </li>
<li><a href="#">[maxbutton id="2"]</a>
<ul style="background-color: #d50a34;">
<li><a href="http://smilefordsl.altervista.org/wordpress/sudoku-6x6/">Sudoku 6x6</a></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/crucipuzzle/">CruciPuzzle</a></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/sillabe/">Sillabe</a></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/quiz-uno/">Trova l’immagine giusta</a></li>
<li><a href="#">Gioco 5</a></li>
<li><a href="#">Gioco 6</a></li>
</ul> </li>
<li><a href="#">[maxbutton id="3"]</a>
<ul style="background-color: #f5b700;">
<li><a href="http://smilefordsl.altervista.org/wordpress/sliding/">Sliding</a></li>
<li><a href="http://smilefordsl.altervista.org/wordpress/omofone/">Omofone</a></li>
<li><a href="#">Gioco 3</a></li>
<li><a href="#">Gioco 4</a></li>
<li><a href="#">Gioco 5</a></li>
<li><a href="#">Gioco 6</a></li>
</ul> </li>
<li><a href="#">[maxbutton id="4"]</a>
<ul style="background-color: #0d9f3d;">
<li><a href="#">Gioco 1</a></li>
<li><a href="#">Gioco 2</a></li>
<li><a href="#">Gioco 3</a></li>
<li><a href="#">Gioco 4</a></li>
<li><a href="#">Gioco 5</a></li>
<li><a href="#">Gioco 6</a></li>
</ul> </li>
<li><a href="#">[maxbutton id="5"]</a>
<ul style="background-color: #005ac7;">
<li><a href="#">Gioco 1</a></li>
<li><a href="#">Gioco 2</a></li>
<li><a href="#">Gioco 3</a></li>
<li><a href="#">Gioco 4</a></li>
<li><a href="#">Gioco 5</a></li>
<li><a href="#">Gioco 6</a></li>
</ul> </li>
<li><a href="#">[maxbutton id="6"]</a>
<ul style="background-color: #6c0b76;">
<li><a href="#">Gioco 1</a></li>
<li><a href="#">Gioco 2</a></li>
<li><a href="#">Gioco 3</a></li>
<li><a href="#">Gioco 4</a></li>
<li><a href="#">Gioco 5</a></li>
<li><a href="#">Gioco 6</a></li>
</ul> </li> </ul> </div>
Listato 4.15. Codice relativo al menù di selezione dei livelli
58
4 La personalizzazione dei plug in per la realizzazione della web app
Pagina di aiuto
La pagina di aiuto contiene un elenco di suggerimenti per permettere all’utente di interagire al meglio con il sistema. Essa è stata realizzata integrando codice JavaScript
e HTML (Listato 4.16). Inizialmente, sono state definite le funzioni MostraMenu
(righe 1-18) e visualizza (righe 20-29), che gestiscono, rispettivamente, la visualizzazione di un gruppo di elementi e quella di un singolo elemento. Nella seconda
fase, oltre a definire l’aspetto degli elementi da visualizzare, sono stati richiamati
gli script visti in precedenza; inserendo il comando onclick=‘‘nomeScript’’ all’interno di un elemento, infatti, lo script desiderato viene eseguito nel momento in
cui l’utente seleziona l’elemento.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script language="JavaScript" type="text/JavaScript"> <!-function mostraMenu(menuCorrente) {
if (document.getElementById) {
questoMenu = document.getElementById(menuCorrente).style
if (questoMenu.display == "block") {
questoMenu.display = "none"
}
else {
questoMenu.display = "block"
}
return false
}
else {
return true
}
}
// -->
</script>
<script type="text/javascript" language="javascript"> function
visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == ’none’){
document.getElementById(id).style.display = ’block’;
}else{
document.getElementById(id).style.display = ’none’;
}
}
} </script>
<div class="menuhelp_container">
<h1><a href="#"
onclick="visualizza(’descrizioneReg’)">REGISTRAZIONE</a></h1>
<div id="descrizioneReg" style="display:none;
padding-bottom:10px; font-weight:bolder; font-size:large;"> PER
REGISTRARTI DEVI ACCEDERE ALLA PAGINA DI REGISTRAZIONE E
INSERIRE I DATI RICHIESTI</div>
<h1><a href="#" onclick="visualizza(’descrizioneAcc’)">ACCESSO
AL SITO</a></h1>
<div id="descrizioneAcc" style="display:none;
padding-bottom:10px; font-weight:bolder; font-size:large;"> PER
ACCEDERE AI GIOCHI DEVI INSERIRE IL TUO NOME UTENTE E LA TUA
PASSWORD</div>
<h1><a href="#" onclick="return
mostraMenu(’menu3’)">GIOCHI</a></h1>
<div class="menuhelp" id="menu3">
<div><h2><a href="#" onclick="visualizza(’descrizione1’)">TROVA
LE COPPIE</a></h2></div><br>
<div id="descrizione1"
style="display:none;padding-bottom:10px;font-weight:bolder;font-size:large;">
GUARDA ATTENTAMENTE E RICORDA LA POSIZIONE DELLE IMMAGINI! POI
SELEZIONA LA COPPIA DI IMMAGINI UGUALI </div>
<div><h2><a href="#"
onclick="visualizza(’descrizione2’)">SUDOKU
6x6</a></h2></div><br>
<div id="descrizione2"
style="display:none;padding-bottom:10px;font-weight:bolder;font-size:large;">
DESCRIZIONE GIOCO 2</div>
<div><h2><a href="#"
4.4 Modifiche apportate al codice
72
73
74
75
76
77
78
79
80
81
82
83
59
onclick="visualizza(’descrizione3’)">PUZZLE</a></h2></div><br>
<div id="descrizione3"
style="display:none;padding-bottom:10px;font-weight:bolder;font-size:large;">
DESCRIZIONE GIOCO 3</div>
<div><h2><a href="#"
onclick="visualizza(’descrizione4’)">QUIZ</a></h2></div><br>
<div id="descrizione4"
style="display:none;padding-bottom:10px;font-weight:bolder;font-size:large;">
DESCRIZIONE GIOCO 4</div> </div> </div>>REGISTRAZIONE</a> </h1>
Listato 4.16. Codice relativo alla creazione della pagina di aiuto
4.4.1 Modifiche apportate per gestire l’accesso ai livelli di
gioco da parte degli utenti
Prima di passare direttamente alle modifiche effettuate occorre fare una breve
premessa e qualche precisazione.
La web app, per come è stata pensata, deve garantire un accesso sequenziale ai
livelli. In altre parole,, non deve permettere ad un utente autenticato di accedere
ad un determinato livello, se non dopo aver completato e superato le istanze di
gioco corrispondenti al livello precedente. Inoltre, ad ogni tipologia di gioco è stata
assegnata ad una propria pagina web.
Per realizzare tale funzioni sono state valutate varie possibilità, ma la migliore
in termini di costi computazionali e tempi di realizzazione, è sembrata quella che
sarà spiegata nel seguito di questa sezione.
Sul database della web app, tramite il software PhpMyAdmin, è stata creata
la tabella livelliSuperati, che presenta soltanto due colonne. La prima contiene
l’ID dell’utente, ovvero il codice che identifica l’utilizzatore del sistema. La seconda
colonna contiene l’ID del livello superato; per esempio l’ID 101 corrisponde alla
tipologia di gioco numero 1 del livello numero 1.
Come già detto, i plugin utilizzati sono realizzati tramite file PHP per il loro lato
server, e tramite file JavaScript e CSS, per il lato client. Si è pensato di inserire un
codice PHP al termine dell’esecuzione di ogni gioco/plugin. Tale codice, tramite una
query SQL, seleziona tutti gli ID dei giochi superati dall’utente corrente; tali giochi
vengono inseriti in un array. Dopo la query, si scorre l’array tramite il ciclo for e si
verifica la presenza dell’ID del gioco superato. Se tale ID è presente si interrompe
lo script, altrimenti, lo si inserisce tramite un altra query.
Infine, per permettere l’accesso ai livelli successivi al primo, tramite il plugin “PHP Code For Posts”, è stato inserito all’interno del plugin stesso, il codice
mostrato nel listato 4.17.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php global $wpdb; $user_id = get_current_user_id(); echo
$user_id; $user_count = $wpdb->get_var("SELECT COUNT(*) FROM
avwp_livelliSuperati WHERE Id_utente=’$user_id’"); echo "<div
id=\"subheader\"> <img
src=\"http://smilefordsl.altervista.org/wordpress/wp-content/uploads/2016/05/pappagallopiratafumetto.png\">
</div> <div id=\"menuhome2\"> <ul>
<li><a href=\"#\">";echo do_shortcode(’[maxbutton id="1"]’);echo"</a>
<ul style=\"background-color: #c9420c;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/trova-la-coppia/\">Trova la coppia</a></span></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/le-doppie-1/\">Le doppie</a></span></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/ce-o-ce/\">C’è o ce</a></span></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/b-o-p/\">B o P</a></span></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/t-o-d/\">T o D</a></span></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/come-si-chiama/\">Come si chiama</a></span></li>
</ul> </li>
60
4 La personalizzazione dei plug in per la realizzazione della web app
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
if($user_count>6){echo "<li><a href=\"#\">";echo do_shortcode(’[maxbutton id="2"]’);echo"</a>
<ul style=\"background-color: #d50a34;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/puzzle/\">Puzzle</a></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/riordina/\">Riordina</a></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/sillabe/\">Sillabe</a></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/quiz-1/\">Trova l’immagine giusta</a></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/omofone/\">Le omofone</a></li>
<li><a href=\"http://smilefordsl.altervista.org/wordpress/ascolta-e-scrivi/\">Ascolta e Scrivi</a></li>
</ul> </li>"
;}
if($user_count>12){echo "<li><a href=\"#\">";echo
do_shortcode(’[maxbutton id="3"]’);echo"</a> <ul
style=\"background-color: #f5b700;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/trova-il-tesoro/\">Trova il tesoro</a></li>
<li><a href=\"#\">Gioco 2</a></li>
<li><a href=\"#\">Gioco 3</a></li>
<li><a href=\"#\">Gioco 4</a></li>
<li><a href=\"#\">Gioco 5</a></li>
<li><a href=\"#\">Gioco 6</a></li>
</ul>
</li>";} if($user_count>18){echo "<li><a href=\"#\">";echo
do_shortcode(’[maxbutton id="4"]’);echo"</a> <ul
style=\"background-color: #f5b700;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/trova-il-tesoro/\">Trova il tesoro</a></li>
<li><a href=\"#\">Gioco 2</a></li>
<li><a href=\"#\">Gioco 3</a></li>
<li><a href=\"#\">Gioco 4</a></li>
<li><a href=\"#\">Gioco 5</a></li>
<li><a href=\"#\">Gioco 6</a></li>
</ul>
</li>";} if($user_count>24){echo "<li><a href=\"#\">";echo
do_shortcode(’[maxbutton id="5"]’);echo"</a> <ul
style=\"background-color: #f5b700;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/trova-il-tesoro/\">Trova il tesoro</a></li>
<li><a href=\"#\">Gioco 2</a></li>
<li><a href=\"#\">Gioco 3</a></li>
<li><a href=\"#\">Gioco 4</a></li>
<li><a href=\"#\">Gioco 5</a></li>
<li><a href=\"#\">Gioco 6</a></li>
</ul>
</li>";} if($user_count>30){echo "<li><a href=\"#\">";echo
do_shortcode(’[maxbutton id="6"]’);echo"</a> <ul
style=\"background-color: #f5b700;\">
<li><a href=\"http://smilefordsl.altervista.org/wordpress/trova-il-tesoro/\">Trova il tesoro</a></li>
<li><a href=\"#\">Gioco 2</a></li>
<li><a href=\"#\">Gioco 3</a></li>
<li><a href=\"#\">Gioco 4</a></li>
<li><a href=\"#\">Gioco 5</a></li>
<li><a href=\"#\">Gioco 6</a></li>
</ul>
</li>";}
?>
Listato 4.17. Codice relativo al controllo dell’accesso ai livelli
In breve, viene invocata la classe $wpdb, che gestisce le connessioni al database,
si preleva l’ID dell’utente tramite la funzione get current user id(), e, tramite
una query, viene selezionato il numero di livelli superati dall’utente (righe1-3). Se
tale numero è superiore a 6 viene consentito l’accesso al livello 2 (righe 26-27); se è
superiore a 12 viene consentito l’accesso al livello 3 (righe 37-38); e cosi via fino al
livello 6.
5
Manuale del sistema realizzato
Questo capitolo esplicita le linee guida per l’utilizzo della web application realizzata.
Verranno descritte le funzionalità del sistema, prima quelle relative all’amministratore ed, in seguito, quelle relative all’utente generico.
5.1 Il manuale dell’amministratore
Generalmente, è tramite il pannello di controllo di WordPress che vengono gestiti
i contenuti del sistema; parallelamente, per alcune operazioni, è possibile utilizzare
apposite sezioni direttamente dalla web application. Tutte le funzionalità inerenti
all’amministrazione della web application sono descritte nelle sottosezioni seguenti.
5.1.1
Login
L’amministratore può accedere al pannello di controllo di WordPress utilizzando il modulo di login, mostrato in Figura 5.1, raggiungibile digitando l’indirizzo
http://smilefordsl.altervista.org/wordpress/wp-admin. In alternativa, l’accesso può essere effettuato direttamente dalla home page dell’applicazione (Figura
5.7). In questo caso, è possibile accedere al pannello di controllo di WordPress utilizzando la barra nella parte superiore della pagina (Figura 5.3), cliccando prima su
“Smile4Dys” e poi su “Bacheca”.
5.1.2
Il pannello di controllo di WordPress
In Figura 5.4 è possibile vedere il pannello di controllo di WordPress. Questo è solitamente composto da tre sezioni (Bacheca, Utenti, Strumenti), che, a loro volta,
contengono più pagine. La prima pagina della sezione “Bacheca”, ossia “Home”, non
consente di utilizzare funzioni particolari, ma fornisce, semplicemente, un riepilogo
di tutte le attività dell’applicazione (le attività da visualizzare possono essere scelte dall’amministratore). Le altre pagine, invece, permettono di utilizzare funzioni
particolari e, per questo, saranno descritte, separatamente, di seguito.
62
5 Manuale del sistema realizzato
Figura 5.1. Pagina di login di WordPress
5.1.3
Aggiornamenti
In WordPress attraverso la pagina “Aggiornamenti” (Figura 5.5) è possibile aggiornare il CMS stesso, i temi e i plugin. Questa operazione va effettuata selezionando
l’aggiornamento da installare e cliccando sul tasto “Aggiorna”.
5.1.4
Operazioni CUD sui profili utente
Attraverso la sezione “Utenti” è possibile gestire gli utenti del sistema. Selezionando
la voce “Tutti gli utenti” viene visualizzato un elenco di tutti gli utenti registrati (Figura 5.6). Passando il mouse sul nome di un utente dell’elenco, è possibile
visualizzare le opzioni “Modifica” ed “Elimina”. Selezionando “Modifica” viene visualizzata una pagina contenente i dati dell’utente in questione (Figura 5.2), che
possono essere modificati digitando i nuovi dati e cliccando su “Aggiorna utente”.
Scegliendo “Elimina”, l’utente viene eliminato.
L’amministratore può modificare i dati di un utente anche dalla pagina “Profilo” dell’applicazione (Figura 5.8). Cliccando sulla voce “Utente da modificare”
viene visualizzata una lista degli utenti registrati; dopo aver selezionato un utente,
l’amministratore ne visualizza i dati, e ha la possibilità di scegliere se effettuare
5.1 Il manuale dell’amministratore
63
Figura 5.2. Modifica di un utente
Figura 5.3. Barra di amministrazione
delle modifiche o se eliminare completamente il profilo. Nel primo caso bisogna inserire le informazioni richieste e selezionare “Modifica”; nel secondo caso, invece, è
sufficiente selezionare “Elimina”.
Tornando al pannello di amministrazione di WordPress, la voce “Aggiungi nuovo”, selezionabile sia dal menù a sinistra che dalla pagina contenente l’elenco degli
utenti, permette di accedere alla pagina dedicata alla creazione degli utenti (Figura 5.9). Dopo aver compilato i campi richiesti, è necessario scegliere, dall’apposito
menù a tendina, il ruolo da assegnare al nuovo utente (amministratore o sottoscrittore). Per concludere la creazione dell’utente è necessario selezionare la voce
“Aggiungi nuovo utente”.
64
5 Manuale del sistema realizzato
Figura 5.4. Pannello di controllo di WordPress
5.1.5
Statistiche
Il CMS, solitamente autonomamente, raccoglie e gestisce informazioni statistiche
inerenti il sito realizzato. Selezionando la voce “Statistiche” nella sezione “Bacheca”
è possibile visualizzare le statistiche della web application (Figura 5.10).
5.1.6
Backup
La sezione “Strumenti”, solitamente, è dedicata soltanto alla pagina “Backup” (Figura 5.11), attraverso cui è possibile riportare il sistema ad una versione precedente
e decidere la cadenza con cui vengono eseguiti i backup. Per effettuare un ripristino
occorre selezionare “Ritorna”; in questo modo, il sistema verrà riportato allo stato
in cui si trovava alla data dell’ultimo backup. La frequenza di esecuzione dei backup, invece, può essere gestita selezionando una tra le opzioni disponibili (mensile,
settimanale e giornaliera).
5.2 Il manuale dell’utente generico
In analogia a quanto è stato fatto per gli aspetti relativi all’amministrazione del
sistema, procediamo a descrivere le funzionalità destinate agli utenti.
5.2 Il manuale dell’utente generico
65
Figura 5.5. Gestione degli aggiornamenti
Figura 5.6. Visualizzazione degli utenti
5.2.1
Menù
Prima di procedere ad illustrare le varie pagine, presentiamo il menù della web
application. Come abbiamo visto in fase di progettazione, il menù è disponibile
in due versioni, desktop e mobile. In entrambi i casi, esso contiene i link alla home
page, alla pagina di gestione del profilo e alla pagina di aiuto. Nella versione desktop
(Figura 5.12), per accedere alla pagina desiderata basta cliccare sulla relativa icona;
66
5 Manuale del sistema realizzato
Figura 5.7. Home page dell’applicazione
diversamente, nella versione mobile (Figura 5.13), è necessario dapprima selezionare
il cartello “MENU” e, in seguito, scegliere la pagina desiderata dal menù a tendina
visualizzato.
5.2.2
Home page - Login - Logout
La home page è stata realizzata in modo tale che cambi in base allo stato di autenticazione dell’utente che vi accede. In Figura 5.7 è riportata la home page cosı̀
come viene visualizzata da un utente non autenticato.
Attraverso il modulo al centro della pagina, è possibile effettuare il login, inserendo il nome utente e la password scelti in fase di registrazione, e selezionando
“ENTRA”.
Nel caso in cui l’utente non disponga di un account, egli deve registrarsi. Per
accedere alla pagina di registrazione, egli deve selezionare il collegamento in fondo
alla pagina.
Se l’utente è autenticato, la home page assume l’aspetto mostrato in Figura
5.14. Da questa pagina, è possibile accedere al menù di selezione dei livelli cliccando
“GIOCA”; invece, selezionando ”ESCI”, l’utente può effettuare il logout.
5.2 Il manuale dell’utente generico
67
Figura 5.8. Modifica di un utente direttamente dall’applicazione
5.2.3
Registrazione
In Figura 5.15 è possibile vedere la pagina di registrazione. Per creare un account
occorre compilare il form e selezionare “ENTRA”.
I campi contrassegnati da * sono obbligatori. Alcuni dati devono essere inseriti
nel formato adeguato, altrimenti il sistema non li riconoscerà come validi. In particolare, la password deve essere formata da almeno sei caratteri, mentre l’e-mail
deve essere della forma nomeutente@dominio.
Dopo aver inserito i dati, è possibile selezionare l’opzione “Invia i dati via email”; in questo modo, nel caso in cui la registrazione vada a buon fine, le credenziali
inserite nel form di registrazione saranno inviate all’indirizzo di posta elettronica
indicato.
5.2.4
Selezione livello
La pagina di selezione dei livelli (Figura 5.16) permette di accedere alla tipologia di
gioco desiderata. A tal fine, è necessario selezionare un livello e, successivamente,
scegliere la tipologia di gioco tra quelle visualizzate.
68
5 Manuale del sistema realizzato
Figura 5.9. Creazione di un utente
5.2.5
Selezione gioco
La pagina riportata in Figura 5.17 descrive la struttura di un’istanza di gioco. Per
le informazioni relative al funzionamento dei singoli giochi rimandiamo alla Sezione
5.2.7, limitandoci, adesso, a descrivere le funzioni comuni a tutti i giochi.
Un utente può utilizzare tali funzioni attraverso i pulsanti “RICOMINCIA” ed
“ELIMINA”, presenti sotto la schermata di gioco. Selezionando, invece, il primo è
possibile ricominciare l’istanza di gioco corrente; selezionando il secondo è possibile
abbandonare l’istanza di gioco e tornare al menù di selezione dei livelli.
5.2.6
Gestione profilo
Dopo aver effettuato il login, un utente può gestire le proprie informazioni dalla
pagina “Profilo” (Figura 5.18). Selezionando “MODIFICA”, dopo aver compilato
il form con gli stessi criteri visti nella Sezione 5.2.3, è possibile modificare i propri
dati personali; selezionando “ELIMINA” il profilo dell’utente viene eliminato.
5.2.7
Help
La pagina di aiuto contiene suggerimenti utili a guidare l’utente nella navigazione
della web application. Selezionando le sezioni “LOGIN” e “REGISTRAZIONE”, il
sistema permette di visualizzare le informazioni relative a tali funzioni. Scegliendo
“GIOCHI”, viene visualizzata la lista di tutte le tipologie di gioco disponibili; a
questo punto, cliccando sul nome di un gioco, è possibile visualizzare la relativa
spiegazione.
5.2 Il manuale dell’utente generico
Figura 5.10. Visualizzazione delle statistiche
Figura 5.11. Gestione del backup
Figura 5.12. Menù della web application in versione desktop
69
70
5 Manuale del sistema realizzato
Figura 5.13. Menù della web application in versione mobile
Figura 5.14. Home page visualizzata dopo il login
5.2 Il manuale dell’utente generico
Figura 5.15. Pagina di registrazione
71
72
5 Manuale del sistema realizzato
Figura 5.16. Pagina di selezione dei livelli
Figura 5.17. Istanza di gioco
5.2 Il manuale dell’utente generico
Figura 5.18. Pagina di gestione del profilo
Figura 5.19. Pagina di aiuto
73
6
Discussione in merito al lavoro svolto
Questo capitolo è suddiviso in quattro sezioni principali. Nella prima si discute sull’esperienza avuta e sulle competenze tecniche acquisite; la seconda offre uno sguardo
generale sulle conoscenze tecniche che si potrebbero acquisire proseguendo il lavoro iniziato in questa tesi; nella terza viene effettuato un confronto con i principali
competitor; nell’ultima sezione si parla della SWOT analysis effettuata sul progetto.
6.1 Esperienze e competenze maturate durante la
realizzazione del progetto
Prendere parte al lavoro di realizzazione del progetto Smile4Dys, tra le alternative proposte, è stata una scelta mirata ad espandere il più possibile le conoscenze
possedute anche in ambiti non relativi alla programmazione.
Infatti, lavorare su questo progetto ha significato immergersi nello sviluppo di
un software a 360 gradi, poichè si è passati dalla progettazione su carta alla vera e
propria realizzazione. Ciò ha reso possibile effettuare un ulteriore approfondimento
alle tecniche apprese durante i corsi di studio, come la progettazione tramite UML,
l’analisi dei requisiti, etc. Ciò ha, altresı̀, permesso di apprendere nuove importanti
nozioni riguardo la CBSE ed il CBP.
Dal punto di vista tecnico, lavorare a questo progetto ha comportato nuove sfide.
Infatti, oltre allo studio della programmazione basata sui componenti, per realizzare
la web app è stato portato avanti uno studio su WordPress e sui CMS in generale.
Ciò ha voluto dire imparare a lavorare con un nuovo linguaggio di programmazione,
ovvero PHP, nonché approfondire la programmazione orientata al web “lato server”.
Tramite WordPress è stato possibile lavorare con nuovi software come phpMyAdmin e MySQL; usando tali software è stato possibile imparare ad utilizzare
un nuovo “dialetto” SQL (ovvero, quello usato da MySQL).
Lavorare con (e su) i plugin ha comportato la necessità di lavorare con codice
implementato da terzi e, quindi, di conseguenza, sviluppare competenze di “debugging”. Per effettuare tale operazione è stato necessario imparare a configurare ed
utilizzare un nuovo IDE, ovvero PhpStorm.
Per rispondere alle esigenze ed ai requisiti di grafica della web app è stato necessario approfondire lo studio del linguaggio di scripting JavaScript, dei fogli di stile
76
6 Discussione in merito al lavoro svolto
(CSS) e del codice HTML. Inoltre, per quanto riguarda l’elaborazione dei contenuti
multimediali, sono stati usati un sintetizzatore vocale ed il programma Photoshop.
Le competenze e le esperienze maturate non riguardano soltanto il contesto informatico. Infatti, scegliere questo progetto ha significato conoscere meglio il mondo
dei bambini, e di ragazzi, affetti dai DSA, capire le loro esigenze e provare a realizzare
un software in grado di rispondervi, venendo loro incontro.
Importanza focale, invece, ha avuto il lavoro di gruppo. Infatti, è stato possibile
apprendere nuove conoscenze e capacità, come lavorare in team, interagire e capire
come rispondere alle esigenze di soggetti senza competenze informatiche specifiche
e migliorare il proprio “know how”.
6.2 Possibili competenze da acquisire continuando
il lavoro sul progetto
Attualmente, la web app realizzata è composta da 3 livelli, ciascuno composto da
6 istanze di gioco. Data la struttura del progetto, sarebbe possibile inserire nuovi
livelli senza apportare grosse modifiche. Pertanto, sarebbe possibile continuare il
lavoro svolto sul progetto, realizzando nuove tipologie di gioco o, semplicemente,
generando nuove istanze a partire dai giochi già presenti.
Un’ottima soluzione potrebbe essere quella di sviluppare propri plugin, oppure
progettare e realizzare nuove tipologie di gioco. Una possibilità da considerare è
quella di aumentare l’interattività dei giochi attraverso l’utilizzo di nuove tecnologie
o framework.
Un’altra possibilità è quella di migliorare la conoscenza e l’utilizzo della tecnica
di sviluppo AJAX, che permette di realizzare contenuto interattivo su pagine HTML
senza la necessità di ricaricare l’intera pagina.
Tra le possibili opzioni di sviluppo dei giochi della web app, una delle prime
proposte era quella di realizzare delle mappe concettuali interattive. Tali mappe
potrebbero essere sviluppate avviando uno studio riguardo le librerie jQuery, già
utilizzate, seppur brevemente nel progetto. Utilizzando tali librerie sarebbe possibile, inoltre, creare nuove tipologie di gioco, come dei Sudoku ad immagini, oppure
dei Sudoku che utilizzino lettere alfabetiche anzichè numeri.
Inoltre, per realizzare altre tipologie di giochi con funzioni quali il disegno, la
scrittura o comunque manipolazioni di elementi grafici in generale, potrebbe essere usato l’elemento HTML Canvas, sviluppato dalla Apple. In sostanza, Canvas
permette di realizzare il rendering dinamico di immagini in formato bitmap (tale
procedura è, anche, nota come grafica raster), gestibili tramite linguaggi di scripting.
In pratica, Canvas consiste in una regione disegnabile, definita in codice HTML con
gli attributi height e width (Figura 6.1). Il codice JavaScript può accedere all’area
con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API
2D, permettendo, cosı̀, la generazione dinamica di disegni.
6.3 Confronti con sistemi software concorrenti
77
Figura 6.1. Un esempio di utilizzo dell’elemento Canvas, nel quale all’interno dell’area
grigia (che altro non è che l’elemento stesso) sottesa dal quadrato è possibile risolvere il
famoso cubo di Rubik.
6.3 Confronti con sistemi software concorrenti
Durante lo sviluppo di Smile4Dys sono state presi in esame i principali, e possibili,
competitor della nostra web app. In particolare, per ciascun sistema sono stati
valutati l’accessibilità, l’adeguatezza dei contenuti proposti, la fruibilità e il relativo
supporto.
6.3.1
Portali web
Di seguito vengono riportati i principali siti web che offrono servizi simili alla nostra
web appication.
•
•
sostegnobes.wordpress.com offre la possibilità di accedere a giochi didattici
in formato Flash. I giochi sono divisi per materia o area didattica. Tuttavia,
non si tratta di un sito specifico per ragazzi dislessici, e, inoltre, non è possibile
utilizzare i giochi dalla maggior parte dei dispositivi mobili, a causa del loro
formato.
pianetadislessia.com e bancadelleemozioni.blogspot.it contengono, analogamente al portale precedente, una serie di giochi in formato Flash. Sebbene,
78
6 Discussione in merito al lavoro svolto
questa volta, si tratti di giochi specifici per la dislessia, vale quanto è già stato
detto precedentemente per la compatibilità con i dispositivi mobili. Inoltre, visto
il layout dei siti, un ragazzo dislessico potrebbe trovare molte difficoltà durante
la navigazione.
• veronellazimella.it e maestrantonella.it; condividono, con i precedenti
siti, i difetti legati alla scarsa User Experience e all’incompatibilità con i dispositivi mobili. Inoltre, un’ulteriore problematica è legata alla necessità di scaricare
e installare sul proprio computer i software contenenti i giochi.
Oltre ai siti citati in precedenza, ne esiste qualche altro che, comunque, non è
stato menzionato, essendo molto simile ai portali precedenti, sia per forma che per
contenuto.
6.3.2
Applicazioni Native
Nel panorama delle applicazioni mobili la concorrenza è molto più limitata. Infatti, le principali alternative proposte sono quasi esclusivamente in lingua inglese;
pertanto, sono state prese in considerazione solo due applicazioni.
La prima è stata “DSA”, un applicazione disponibile sul Play Store dei dispositivi Android. Tale applicazione risulta ben fatta in termini di grafica e funzionalità; essa, infatti, risulta una delle poche a presentare caratteri di testo facilmente
interpretabili sulla propria pagina principale; inoltre, risulta ricca di contenuti riguardanti la dislessia che, però, sono accessibili solo da persone adulte. Di contro, la
web app offre solo due giochi, che sono fruibili solo con l’ausilio di persone adulte,
poichè non presentano alcun tipo di aiuto o spiegazione; in particolare, in uno dei
due, non risulta facilmente intuibile lo scopo del gioco neanche alle persone adulte.
Inoltre, il layout dell’applicazione e l’organizzazione della stessa possono sembrare
un pò caotici, e, quindi, rendere ostruttivo l’utilizzo da parte degli individui soggetti
a DSA, poichè tali disturbi sono spesso accompagnati, o generati, da disturbi visivi.
La seconda applicazione presa in esame è “Dyslexia Therapy Apps”. Il layout è
molto curato e la grafica è studiata appositamente per aiutare i ragazzi dislessici.
Il principale difetto è la limitatezza del contenuto; infatti, sono disponibili soltanto
due tipologie di giochi.
6.4 SWOT analysis
L’analisi SWOT rappresenta una fase fondamentale nello sviluppo di un software.
Essa consiste nell’individuare i punti di forza (Strengths), i punti di debolezza
(Weaknesses), le opportunità (Opportunities) e le minacce (Threats) di un progetto
(Figura 6.2).
Gli aspetti discussi in questa tesi possono avere valenza positiva (punti di forza
e opportunità) o negativa (punti di debolezza e minacce) per il raggiungimento degli obiettivi, e possono riguardare l’ambiente interno (punti di forza e debolezza) o
esterno (minacce ed opportunità) di un sistema. Basandosi su questa classificazione è possibile ottenere la cosiddetta matrice SWOT. I risultati ottenuti in seguito
6.4 SWOT analysis
79
Figura 6.2. I punti principali dell’analisi SWOT
ad un’analisi di questo tipo possono indirizzare le scelte future; infatti, pur rimanendo fedeli agli obiettivi prefissati nella fase iniziale del progetto, si cercherà di
massimizzare gli aspetti positivi e ridurre al minimo quelli negativi.
6.4.1
Punti di forza
I punti di forza sono le caratteristiche e gli elementi che possono portare il software
al successo, inducendo gli utenti a preferirlo ad un prodotto concorrente. I punti di
forza individuati per il nostro software sono i seguenti:
•
•
•
•
•
L’universalità, in quanto l’utente può utilizzare la web application sfruttando
un qualsiasi dispositivo che disponga di una connessione ad Internet e di un web
browser.
La specificità dei contenuti, poichè l’intero software è stato sviluppato appositamente per bambini e ragazzi dislessici, tramite l’utilizzo dell’UXD.
La leggerezza e la velocità del software; basti pensare che l’intera installazione
sul web server occupa soltanto 88MB; la web app per i contenuti interattivi
usa principalmente codice JavaScript relativamente breve; pertanto, ha costi
computazionali bassi e l’esecuzione risulta veloce ed efficace.
La concorrenza ridotta, rappresentata sostanzialmente da giochi in formato Flash
e da qualche applicazione per dispositivi mobili. In entrambi i casi, si tratta di
software specifico per alcune piattaforme e, inoltre, il numero di giochi contenuti
nel singolo software è molto limitato (uno o due al massimo).
I costi molto contenuti, paragonabili a quelli sostenuti per sviluppare un comune
sito web.
6.4.2
Punti di debolezza
Un punto di debolezza è l’opposto di un punto di forza, ossia è un elemento che
può rappresentare uno svantaggio nei confronti di un prodotto concorrente e che,
quindi, può interferire con il successo del software.
Dall’analisi effettuata sul software sono emerse le seguenti criticità:
80
6 Discussione in merito al lavoro svolto
• È sempre necessaria una connessione ad Internet.
• La realizzazione di alcuni tipi di contenuti, come, per esempio cruciverba e
crucipuzzle può risultare complicata e poco efficiente.
• L’utilizzo di nuovi plugin potrebbe appesantire il sistema.
6.4.3
Opportunità
In questa sottosezione sono riportati i vantaggi che possono venire dall’esterno,
come, ad esempio, normative favorevoli, cambiamenti socio-economici, sviluppo di
nuove tecnologie.
I fattori che potrebbero avere risvolti positivi sul progetto sono, essenzialmente,
i seguenti:
• L’evoluzione dello scenario tecnologico, che, grazie a framework avanzati quali AngularJS e alla potenza di HTML5 e CSS3, permetterà di aumentare la
complessità dei contenuti forniti.
• La crescente attenzione nei confronti della dislessia, fenomeno che, fino a qualche
tempo fa, veniva trascurato o, addirittura, ignorato.
• L’evoluzione dei metodi d’insegnamento; al giorno d’oggi l’insegnamento volge
sempre più lo sguardo verso le nuove tecnologie; un esempio può essere l’utilizzo
delle lavagne interattive nelle classi scolastiche.
• La crescente importanza delle figure professionali di logopedisti e foniatri; queste figure professionali nate agli albori del ‘900, stanno riscuotendo nuova
importanza ed attenzione.
6.4.4
Minacce
Una minaccia è un fattore esterno che potrebbe risultare limitante per il prodotto.
Nel nostro caso le minacce sono legate al CMS utilizzato in fase di sviluppo. Infatti,
se, da un lato, WordPress ha semplificato la realizzazione del software, dall’altro
espone il sistema ai seguenti rischi:
• Problemi di sicurezza, derivanti da eventuali falle presenti nel codice di WordPress o di qualche plugin.
• Problemi di compatibilità, poichè, se gli sviluppatori dei vari plugin smettessero
di aggiornare i loro software, questi, a lungo andare, diverrebbero inutilizzabili
e renderebbero necessaria la reimplementazione di alcune parti del sistema.
7
Conclusioni e uno sguardo al futuro
In questo elaborato di tesi è stato discusso il progetto Smile4Dys, che consiste nella
progettazione e nella realizzazione di una web application ideata per l’ausilio ai
soggetti affetti da DSA (Disturbi Specifici dell’Apprendimento).
Inizialmente, è stata fatta una panoramica generale del progetto, con particolare enfasi sugli obiettivi da raggiungere. Successivamente, è stata posta in esame la
struttura della web application, il motivo della scelta dell’isola del tesoro e le componenti che la caratterizzano. Contemporaneamente, si è discusso dell’importanza
dell’utilizzo dello UXD nel progetto.
In seguito, è stato preso in esame il Component Based Development Paradigm,
dando particolare importanza alla Component Based Software Engineering e al
proprio ciclo e processo di sviluppo. Si è discusso, inoltre, dell’applicazione di tale paradigma al progetto ed è stato effettuato un confronto con il paradigma di
implementazione basato sugli oggetti.
Prima di entrare in merito al lavoro svolto, è stata portata avanti una discussione
generale sui CMS e, più specificamente, su WordPress. In seguito sono stati trattati
i plugin in generale e, successivamente, in dettaglio quelli prescelti per la web app.
Di questi ultimi plugin sono state illustrate le principali caratteristiche.
Dopo la parte introduttiva, è iniziata la parte relativa alla vera e propria implementazione. Infatti, sono state discusse le prove e i test effettuati sui plugin, la loro
selezione e le modifiche apportate ai loro codici ed al loro design.
Dopo di ciò, è stato presentato un manuale di utilizzo del sistema, rivolto, nella
prima parte, ad un amministratore e, nella seconda all’utente generico.
La fase finale ha riguardato la descrizione e l’analisi del sistema realizzato. Successivamente, utilizzando i criteri della SWOT analysis, sono stati evidenziati i punti
di forza, di debolezza, le opportunità e le minacce ad esso relativi.
Lo sviluppo del software è, temporaneamente, terminato; la web app, infatti,
è stata realizzata ed è attualmente funzionante. Tuttavia, il suo sviluppo non può
considerarsi concluso, poichè, attualmente, consta di 15 istanze di gioco e le sue
potenzialità non sono state, ancora, pienamente espletate.
Per quanto riguarda ulteriori sviluppi futuri del sistema, si può pensare di estenderlo in modo che esso tratti altre problematiche affini alla dislessia, ad esempio la
discalculia, e possa operare con più lingue. Riguardo a quest’ultimo aspetto, è opportuno evidenziare che il passaggio da una lingua all’altra non comporta soltanto
82
7 Conclusioni e uno sguardo al futuro
una mera attività di traduzione, ma essendo la dislessia fortemente collegata alla
lingua (ad esempio, alla sillabazione ad essa associata), sarà necessario riprogettare
e ridefinire gran parte dei giochi per renderli compatibili con la nuova lingua.
Oltre ad estendere le potenzialità del software, inserendo prove relative ad altri
disturbi, o a creare versioni multilingua dei giochi realizzati, è possibile passare a
nuovi giochi realizzati con tecniche in grado di aumentare il loro grado di interattività. Per esempio, alcune possibilità possono essere offerte da AJAX o dall’elemento
Canvas, come già espresso nel Capitolo 6.
Si ritiene interessante evidenziare che Smile4Dys è stato selezionato per la terza
edizione della BIAT (Borsa dell’Innovazione e dell’Alta Tecnologia), che quest’anno
si terrà a Catania dal 2 al 3 marzo (Figura 7.1). Si tratta di un’importante iniziativa
in cui alcuni progetti selezionati possono essere presentati ad investitori stranieri
che, se lo riterranno opportuno, potranno decidere di finanziare la costruzione del
sistema oppure realizzare una joint venture con gli ideatori dello stesso.
Figura 7.1. Logo della BIAT 2017
Ringraziamenti
Eccoci arrivati alla fine, non solo la fine di una tesi ma la fine di un percorso
iniziato anni fa. Vorrei avere più tempo, ma forse ne servirebbe fin troppo per
potermi esprimere degnamente e, forse, tutto il tempo del mondo non basterebbe
comunque, perché credo non troverei mai le parole adatte per dire quello che vorrei
come vorrei. Insomma, perdonatemi, non è per niente facil e, purtroppo, non posso
citarvi tutti come meritereste.
Non posso che cominciare ringraziando i miei genitori, Giovanni e Maria, che
mi hanno supportato e spesso sopportato in questi anni. A loro, che mi hanno reso
quel che sono oggi, alla mia famiglia, ai miei fratelli ed a tutti i miei cari, sopratutto
quelli che non ci sono più, dedico questo lavoro.
Ringrazio gli Amici. Quelli veri, che non ti abbandonano neanche quando la
strada si fa buia e cupa. Quelli di sempre, i nuovi e le amicizie ritrovate.
Lavorare alla tesi con i ragazzi del laboratorio Barbiana 2.0 durante questi mesi è
stata un’esperienza che non avrei mai pensato di poter provare all’interno di questa
Università. Ringraziare Francesco è un obbligo, ma anche un piacere, poichè con lui
ho condiviso questa bellissima esperienza.
E infine, come lui stesso ama dire “the last but not the least”, ringrazio il
professore Ursino, sempre il primo ad arrivare e l’ultimo ad andare via, un esempio
ed un modello morale, ma, sopratutto, di dedizione al lavoro per me e per tutti i
colleghi.
Riferimenti bibliografici
1. Bring business logic to light.
http://www.javaworld.com/article/2073715/
enterprise-java/bring-business-logic-to-light.html, 2003.
2. The Mythical Business Layer. http://thedailywtf.com/articles/The-MythicalBusiness-Layer, 2007.
3. Applicazioni Web. http://www.ce.uniroma2.it/courses/sd0809/lucidi/WebApp.
pdf, 2008.
4. Business Logic management in a Web Application.
https://people.kth.se/
johanmon/theses/ochem.pdf,
2008.
~
5. Progetto di Applicazioni Software. http://www.dis.uniroma1.it/poggi/didattica/
progettoas09/lezioni/2-ArchitettureSoftware.pdf, 2008.
6. La User Experience (UX) per chi scrive e lavora ai contenuti.
https:
//cristinalavazza.wordpress.com/2014/11/15/la-user-experience-ux-perchiscrive-e-lavora-ai-contenuti/, 2014.
7. Come si riconosce la dislessia. http://www.aiditalia.org/it/la-dislessia/comesi-riconosce-la-dislessia, 2016.
8. Cos’è la dislessia. http://www.aiditalia.org/it/la-dislessia, 2016.
9. Guida JavaScript di base. http://www.html.it/guide/guida-javascript-di-base/,
2016.
10. PHP 5 Tutorial. http://www.w3schools.com/php/, 2016.
11. SWOT Analysis. http://www.marketingudine.it/dizionario-marketing/swotanalysis/, 2016.
12. SWOT Analysis: What It Is and When to Use It. http://www.businessnewsdaily.
com/4245-swot-analysis.html, 2016.
13. M. Avvenuti and M. Cimino. Laboratori di programmazione web. HTML, CSS,
Javascript e PHP. FAG, 2011.
14. M. Avvenuti and M. Cimino. Lezioni di Programmazione Web: con riferimento ai
linguaggi HTML, CSS, Javascript e PHP. Società Editrice Esculapio, 2013.
15. B. Di Bello. Wordpress. La guida completa. Creare blog e siti professionali. Hoepli,
2014.
16. Bonaventura Di Bello. WordPress Plugin: come sceglierli e gestirli al meglio per
potenziare il tuo sito. Hoepli, 2012.
17. Bonaventura Di Bello. Blindare WordPress. Hoepli, 2014.
18. E. Benso. La dislessia: Una guida per genitori e insegnanti: teoria, trattamenti e giochi.
Il Leone Verde, 2012.
19. Brian Bondari. WordPress 3 Plugin Development Essentials. Packt Publishing Ltd,
2011.
86
Riferimenti bibliografici
20. F. Gatto. Progettazione basata sullo “User Experience Design” di un’app a supporto
di bambini e ragazzi dislessici. Tesi di Laurea. 2016.
21. A. Ghu. Programmare con PHP. FAG, 2006.
22. Christine Hofmeister Grace A. Lewis, Iman Poernomo. Component-based Software
Engineering: 12th International Symposium, Cbse 2009 East Stroudsburg, Pa, USA,
June 24-26, 2009 Proceedings. Springer, 2009.
23. Hans-Gerhard Gross. Component-based Software Testing With Uml. Springer, 2011.
24. H. Kuno, M. Lemon, A. Karp, and D. Beringer. Conversations + Interfaces = Business
Logic. Springer Berlin, 2001.
25. M.C. Lavazza. Organizzare i contenuti di un sito. I quaderni del MdS, 2006.
26. M.C. Lavazza. Comunicare la User Experience - Dall’idea al progetto. Apogeo, 2010.
27. M.C. Lavazza. Dall’idea al prototipo: i documenti nelle diverse fasi del progetto Web.
2010.
28. M.C. Lavazza. Progettare in grande per schermi piccoli. Bento Book, 2014.
29. L. Manelli. Programmazione per il web. Teoria e laboratorio per l’analisi e lo sviluppo
di una web application Java con le moderne tecnologie. Aracne, 2015.
30. C. McKinnon. Linux, Apache, MySQL, PHP Performance End to End. Colin
McKinnon, 2015.
31. D. Norman, J. Miller, and A. Henderson. What You See, Some of What’s in the
Future, and How We Go About Doing It: HI at Apple Computer. ACM, 2006.
32. L.F. Pau and P.H.M. Vervest. Network-Based Business Process Management: Embedding Business Logic in Communications Networks. ERIM Report Series Reference No.
ERS-2003-086-LIS, 2003.
33. Harvard Business School Press. Developing a Business Case. Harvard Business Review
Press, 2010.
34. R. N. Ratnayake. WordPress Web Application Development - Second Edition. Packt
Publishing, 2015.
35. H.E. Williams and D. Lane. Applicazioni Web database con PHP e MySQL. Apogeo,
2005.
36. T. Zappaterra and L. Trisciuzzi. La dislessia. Guerini Scientifica, 2015.