theses
Transcript
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.