View
447
Download
0
Category
Preview:
Citation preview
!
!
UNIVERSITA’ DEGLI STUDI DEL SANNIO
!
Dipartimento di Ingegneria
Corso di Laurea Magistrale in Ingegneria Informatica!
TESI DI LAUREA
SpokenHouse: Applicazione mobile cross-platform di
supporto ai non vedenti per il controllo domotico.
Interazione con l’utente e usabilità.
RELATORE: CANDIDATA:
Prof.ssa Aversano Lerina Daniela Guardabascio
Prof.ssa Tortorella Maria Mat. 399000060
CORRELATORE:
Dott. Parrella Manuel
ANNO ACCADEMICO 2013/2014
!
!
"Non fatevi scoraggiare
da chi vi dice
che la vita non è inseguire un sogno,
da chi vi vuole sereni
nella ristrettezza di un destino piccolo
e di un futuro convenzionale.
Sudate e lavorate duramente
perché il vostro sogno si avveri
o perché almeno possiate dire
di averlo visto da vicino.
La ricchezza
più grande di ognuno di noi
è il futuro che sogna."»
Indice!
!
!I!
Sommario!
INTRODUZIONE*................................................................................................................*1!
ORGANIZZAZIONE)DEL)LAVORO)..........................................................................................)2!
1! INFORMATICI*SENZA*FRONTIERE*...............................................................................*4!
1.1! IL)DIGITAL)DIVIDE)E)LA)DISABILITA’).........................................................................)5!
1.2! I)PROGETTI)DI)ISF).....................................................................................................)6!
2! TECNOLOGIE*A*SUPPORTO*DEI*NON*VEDENTI*...........................................................*8!
2.1! LA)TECNOLOGIA)ED)I)NON)VEDENTI)........................................................................)8!
2.2.1!!STRUMENTI!A!SUPPORTO!DEI!NON!VEDENTI!........................................................!9!
2.2.2!!IL!COMPUTER!(4)!.................................................................................................!10!
2.2! IL)WEB)ED)I)NON)VEDENTI).....................................................................................)15!
2.3.1!!LA!LEGGE!STANCA!(5)!..........................................................................................!15!
2.3.2!!IL!WEB!E!GLI!IPOVEDENTI!....................................................................................!18!
2.3! STRILLONE).............................................................................................................)19!
2.4.1!!L’INTERFACCIA!A!QUATTRO!ANGOLI!...................................................................!20!
2.4! OBIETTIVI)...............................................................................................................)22!
3! TECNOLOGIE*A*SUPPORTO*DELLA*CROSS*PLATFORM*..............................................*23!
3.1! COS’E’)LA)CROSS>PLATFORM).................................................................................)23!
3.2! CLASSIFICAZINE)DELLE)APPLICAZIONI)....................................................................)24!
3.2.1! APPLICAZIONI!NATIVE!...................................................................................!25!
3.2.2! WEB!APPLICATION!.........................................................................................!26!
3.2.3! APP!IBRIDE!.....................................................................................................!28!
3.2.4! APP!NATIVE!VS!WEB!APP!VS!APP!IBRIDE!.......................................................!29!
3.3! FRAMEWORK)MULTIPIATTAFORMA)......................................................................)31!
3.3.1! SENCHA!TOUCH!.............................................................................................!32!
3.3.2! TITANIUM!MOBILE!........................................................................................!33!
3.3.3! APACHE)CORDOVA)&)STEROID!......................................................................!34!
3.3.4! XAMARIN!.......................................................................................................!37!
3.3.5! FRAMEWORK)A)CONFRONTO!........................................................................!39!
3.3.6! APP!REALIZZATE!CON!FRAMEWORK!CROSSLPLATFORM!...............................!41!
3.4! APPS)MOBILE)CROSS>PLATFORM)SVILUPPATE)PER)NON)VEDENTI)........................)44!
Indice!
!
!II!
3.4.1! BE!MY!EYES!....................................................................................................!45!
3.4.2! BLIO!eBOOKS!.................................................................................................!45!
3.5! CONCLUSIONI)........................................................................................................)46!
4! SISTEMA*MOBILE*A*SUPPORTO*DEI*NON*VEDENTI*..................................................*47!
4.1! SCOPO)DELL’APPLICAZIONE)...................................................................................)47!
4.1.1! ACCESSIBILITA’!...............................................................................................!48!
4.1.2! L’INTERFACCIA!...............................................................................................!48!
4.2! ANALISI)DEI)REQUISITI)...........................................................................................)50!
4.2.1! ATTORI!DEL!SISTEMA!.....................................................................................!52!
4.2.2! CASI!D’USO!....................................................................................................!53!
4.3! ARCHITETTURA)A)LIVELLI).......................................................................................)62!
4.3.1! DESIGN!PATTERN!MVC:!MODEL!VIEW!CONTROLLER!....................................!65!
4.4! ARCHITETTURA DEL SISTEMA SPOKENHOUSE)..........................................)67!4.5! ARCHITETTURA)DELL’APPLICAZIONE)DI)SPOKENHOUSE)........................................)69!
4.5.1! DIAGRAMMA!DELLE!CLASSI!GENERICO!.........................................................!73!
4.5.2! VINCOLI!..........................................................................................................!73!
4.6! TECNOLOGIE)UTILIZZATE).......................................................................................)74!
4.6.1! LA!DOMOTICA!...............................................................................................!74!
4.6.2! HTML5!...........................................................................................................!77!
4.6.3! CSS3!...............................................................................................................!78!
4.6.4! JAVASCRIPT!....................................................................................................!78!
4.6.5! WEBSQL!.........................................................................................................!79!
4.6.6! XML!................................................................................................................!80!
4.6.7! REST!...............................................................................................................!81!
4.6.8! TCP/IP!............................................................................................................!83!
4.6.9! HTTP!..............................................................................................................!83!
4.6.10! PLUGINLCORDOVA!.........................................................................................!84!
4.7! AMBIENTI)DI)SVILUPPO).........................................................................................)85!
4.7.1! CONFIGURAZIONE!APACHE!CORDOVA!..........................................................!85!
4.7.2! CONFIGURAZIONE!FREEDOMOTIC!................................................................!87!
4.7.3! PROBLEMI!PROGETTUALI!..............................................................................!88!
5! VERIFICA*E*VALIDAZIONE*........................................................................................*90!
5.1! SPOKENHOUSE:)MENU)DI)NAVIGAZIONE)..............................................................)90!
Indice!
!
!III!
5.2! TEST)DI)USABILITA’)................................................................................................)93!
5.3! TEST)FUNZIONALE).................................................................................................)95!
5.3.1! SCENARIO!DI!TESTING!...................................................................................!95!
5.3.2! PIATTAFORMA!E!CONFIGURAZIONE!AMBIENTE!............................................!97!
5.4! CONFIGURAZIONE)APPLICAZIONE).........................................................................)97!
5.4.1! TEST!FUNZIONALE:!CONFIGURAZIONE!APPLICAZIONE!................................!100!
5.4.2! TEST!DI!USABILITA’:!CONFIGURAZIONE!APPLICAZIONE!..............................!106!
5.5! ATTIVAZIONE)VIBRAZIONE)..................................................................................)106!
5.5.1! TEST!FUNZIONALE:!ATTIVAZIONE!VIBRAZIONE!...........................................!108!
5.5.2! TEST!DI!USABILITA’:!ATTIVAZIONE!VIBRAZIONE!..........................................!109!
5.6! MODIFICA)GRANDEZZA)DEI)CARATTERI)..............................................................)109!
5.6.1! TEST!FUNZIONALE:!MODIFICA!GRANDEZZA!CARATTERI!.............................!111!
5.6.2! TEST!DI!USABILITA’:!MODIFICA!GRANDEZZA!CARATTERI!............................!112!
5.7! MODIFICA)TEMA)INTERFACCIA)............................................................................)112!
5.7.1! TEST!FUNZIONALE:!MODIFICA!TEMA!..........................................................!115!
5.7.2! TEST!DI!USABILITA’:!ATTIVAZIONE!VIBRAZIONE!..........................................!116!
5.8! PROBLEMI)RISCONTATI)........................................................................................)117!
CONCLUSIONI*E*SVILUPPI*FUTURI*..................................................................................*119!
SVILUPPI)FUTURI).............................................................................................................)119!
A.*GLOSSASIO*DEI*TERMINI*...........................................................................................*121!
B.*TEST*FUNZIONALE:*SCRIPT*PYTHON*...........................................................................*123!
BIBLIOGRAFIA*...............................................................................................................*129!
!
Indice!delle!Tabelle!
!
!iv!
*
INDICE*DELLE*TABELLE*
!
Tabella!3L1:!Tabella!comparativa!App!...................................................................................!31!
Tabella!3L2!:!Tabella!comparativa!Framework!......................................................................!39!
Tabella!3L3!:!Tabella!comparativa!framework!L!pro!e!contro!................................................!40!
Tabella!4L1!:!Colori!videoingrandotore!..................................................................................!50!
Tabella!4L2!:!Attori!del!sistema!.............................................................................................!53!
Tabella!4L3!:!Caso!d'uso!“Configurazione!Applicazione”!.......................................................!55!
Tabella!4L4!:!Caso!d'uso!“Attivazione!vibrazione”!.................................................................!56!
Tabella!4L5!:!Caso!d'uso!“Modifica!credenziali!di!accesso!all'applicazione”!.........................!58!
Tabella!4L6!:!Caso!d'uso!“Modifica!tema!interfaccia”!...........................................................!59!
Tabella!4L7!:!Caso!d'uso!“!Modifica!grandezza!caratteri”!......................................................!60!
Tabella!4L8!:!Caso!d'uso!6:!Attivazione!tutorial!di!navigazione!.............................................!62!
Tabella!5L1!:!Vincoli!caso!d'uso!"Configurazione!Applicazione"!..........................................!103!
Tabella!5L2!:!Test!Frame!"Configurazione!applicazione"!.....................................................!105!
Tabella!5L3!:!Esito!test!"Configurazione!applicazione"!........................................................!105!
Tabella!5L4!:!Test!Frame!"Attivazione!Vibrazione"!..............................................................!108!
Tabella!5L5!:!Esito!test!"Attivazione!vibrazione"!.................................................................!109!
Tabella!5L6!:!Test!Frame!"Modifica!grandezza!caratteri"!....................................................!111!
Tabella!5L7!:!Esito!test!"Modifica!grandezza!caratteri"!.......................................................!112!
Tabella!5L8!:!Test!Frame!“modifica!tema"!...........................................................................!116!
Tabella!5L9!:!Esito!test!"Modifica!Tema"!.............................................................................!116!
Indice!delle!Figure!
!
!v!
INDICE*DELLE*FIGURE*
Figura!2L1!:!Luce!Braille!.........................................................................................................!13!
Figura!2L2!:!Funzionamento!interfaccia!Strillone!(2)!.............................................................!21!
Figura!3L1!:!App!a!confronto!.................................................................................................!30!
Figura!3L2!:!Apache!Cordova!.................................................................................................!36!
Figura!3L3!:!:!Xamarin!per!Android!........................................................................................!37!
Figura!3L4!:!Xamarin!per!iPhone!............................................................................................!38!
Figura!3L5!:!Kiva!Touch!..........................................................................................................!41!
Figura!3L6:!GameStop!............................................................................................................!42!
Figura!3L7!:!HealtTap!.............................................................................................................!43!
Figura!3L8!:!ACSI!Campsites!Europe!......................................................................................!44!
Figura!4L1!:!Tema!interfaccia!SpokenHouse:!Base!blu!,!carattere!giallo!...............................!50!
Figura!4L2!:!Use!case!diagramm!............................................................................................!52!
Figura!4L3!:!Sequence!Diagram!"Configurazione!Applicazione"!............................................!55!
Figura!4L4!:!Sequence!Diagram!"Attivazione!Vibrazione"!.....................................................!56!
Figura!4L5!:!Sequence!Diagram!"Modifica!credenziali!d'accesso"!.........................................!58!
Figura!4L6!:!Sequence!Diagram!"Modifica!tema!interfaccia"!................................................!59!
Figura!4L7!:!Sequence!Diagram!"Modifica!grandezza!caratteri"!...........................................!61!
Figura!4L8!:!Sequence!Diagram!"Attivazione!Tutorial!di!navigazione"!..................................!62!
Figura!4L9!:!Architettura!Software!a!"livelli"!.........................................................................!63!
Figura!4L10!:!Architettura!Two!Tier!.......................................................................................!64!
Figura!4L11!:!Architettura!Three!Tier!.....................................................................................!65!
Figura!4L12!:!Model,!View!e!Controller!.................................................................................!66!
Figura!4L13!:!Architettira!sistema!"alto!livello"!.....................................................................!67!
Figura!4L14!:!Architettura!de!sistema!SpokenHouse!.............................................................!68!
Indice!delle!Figure!
!
!vi!
Figura!4L15!:!Funzionamento!Apache!Cordova!.....................................................................!69!
Figura!4L16!:!Architettura!dell’applicazione!di!SpokenHouse!...............................................!70!
Figura!4L17!:!Funzionamento!Apache!Cordova!.....................................................................!71!
Figura!4L18!:!Diagramma!delle!classi!generico!......................................................................!73!
Figura!4L19!:!Esempio!impianto!domotico!............................................................................!74!
Figura!4L20!:!Freedomotic!.....................................................................................................!76!
Figura!4L21!:!Potenzialità!HTML5!..........................................................................................!77!
Figura!4L22!:!API!Freedomotic!...............................................................................................!81!
Figura!5L1!:!Albero!di!navigazione!SpokenHouse!..................................................................!92!
Figura!5L2!:!Utenti!durante!i!test!...........................................................................................!94!
Figura!5L3!Screenshots!relativi!a!“configurazione!applicazione”!..........................................!99!
Figura!5L4!Porzione!di!codice!relativo!alla!gestione!del!DB!del!device!...............................!100!
Figura!5L5!:!Screenshot!"attivazione!vibrazione"!................................................................!107!
Figura!5L6!Porzione!di!codice!relativo!alla!codifica!Morse!..................................................!108!
Figura!5L7!:!Screenshot!"Modifica!grandezza!caratteri"!......................................................!110!
Figura! 5L8! Porzione! di! codice! relativo! al! cambiamento! della! grandezza! dei! caratteri!
(setupManager.js)!...............................................................................................................!111!
Figura! 5L9! :! Porzione! di! codice! relativo! al! cambiamento! della! grandezza! dei! caratteri!
(index.html)!.........................................................................................................................!111!
Figura!5L10!:!Screenshot!"modifica!tema"!..........................................................................!114!
Figura!5L11!Porzione!di!codice!relativo!alla!modifica!del!Tema!..........................................!115!
Figura!5L12!:!Rotazioni!consentite!su!Android!....................................................................!118!
Figura!5L13!:!Rotazione!erronea!su!Android!.......................................................................!118!
Introduzione!
!
!1!
INTRODUZIONE0
!
Questo!lavoro!di!tesi,!nasce!dalla!volontà!dei!volontari!di!Informatici!Senza!Frontiere!ONLUS!
di!fornire!uno!strumento!utile!per!aiutare!le!persone!emarginate!o!in!difficoltà!a!superare!il!
cosiddetto!digital!divide!(divario!digitale).!!
Grazie! alle! moderne! tecnologie! e! agli! strumenti! informatici,! il! gruppo! ISF! vuole! rendere!
accessibile! l’Internet! Of! Things,! ed! in! particolare! la! gestione! di! un! sistema! domotico!
all’interno!di!un’abitazione,!a!persone!non!vedenti,!ipovedenti!(o!con!gravi!problemi!di!vista)!
e!non!udenti,!in!modo!tale!da!abbattere!il!digital!divide!nelle!situazioni!di!emarginazione.!
L'obiettivo!principale!di!questo!lavoro!di!tesi!è!quello!di!ideare!e!progettare!un’applicazione!
mobile!in!grado!di!interfacciarsi!con!un!sistema!domotico,!al!fine!di!agevolare!tali!persone!
nel!controllo!degli!elettrodomestici!presenti!nell’ambiente!domestico;!!al!fine!di!abbattere!il!
digital! divide! è! stata! progettata! un’interfaccia! grafica! che! vada! incontro! alle! esigenze! di!
persone!non!vedenti!o!ipovedenti,!usufruendo!di!tecnologie!che!permettano!lo!sviluppo!di!
un’applicazione!installabile!su!diversi!sistemi!operativi!mobile.!
I!progetti!di!ISF,!riguardo!la!realizzazione!di!applicazioni!Mobile!e!Desktop,!sono!tutti!Open!
source,!e!quindi!distribuiti!gratuitamente;!al!fine!di!proseguire!questo!filone!è!stato!scelto!di!
utilizzare!tutte!quante!tecnologie!“Open!Source!”!la!per!la!realizzazione!di!questo!progetto.!
Gli! obiettivi! sono! stati! due;! il! primo! riguarda! la! progettazione! e! la! realizzazione! di! un!
interfaccia!grafica!che!sia! fruibile!a!persone!con!particolari!difficoltà!visive! (non!vedenti!e!
ipovedenti)! e/o! uditive;! a! tal! proposito! la! fase! di! progettazione! è! stata! preceduta! da!
un’attenta! ricerca! di! tutto! quanto! potesse! essere! di! supporto! ai! potenziali! utenti!
dell’applicazione! di! SpokenHouse! (videoingranditori,! codifica!morse,! interfaccia! a! quattro!
angoli,!ecc.).!!
Il!secondo!obiettivo!è!stato!quello!di!sviluppare!tale!applicazione!in!maniera!cross>platform,!
utilizzando!un!framework!apposito,!in!modo!da!rendere!accessibile!l’applicazione!al!target!
utente!a!prescindere!dalla!tipologia!di!sistema!operativo!installato!sullo!smartphone.!
L’altro!lavoro!di!tesi!,!svolto!in!parallelo!a!questo,!è!stato!quello!di!Marco!Di!Brino,!il!quale!!
ha! focalizzato! la! sua!attenzione! sulla!domotica:!partendo!da!una! fase!di! ricerca!al! fine!di!
Introduzione!
!
!2!
individuare!il!framework!domotico!che!più!si!adatta!alle!esigenze!del!progetto,!si!è!occupato!
dell’implementazione! delle! funzionalità! del! sistema! che! riguardano! la! vera! e! propria!
interazione!con!il!framework.!!
!
ORGANIZZAZIONE0DEL0LAVORO0
!
Nel!primo!capitolo!verrà!effettuata!una!panoramica!sul!gruppo!ISF,!sui!progetti!realizzati!nel!
corso!degli!anni,!verrà!inoltre!argomentata!la!loro!Mission!e!il!loro!impegno!atto!ad!introdurre!
gli!strumenti!tecnologici!come!supporto!al!tenore!di!vita!dei!soggetti!disagiati.!!
Nel! secondo! capitolo! verrà! presentata! l’user! experience! dell’applicazione! ! Strillone! e! le!
motivazioni!che!hanno!portato!alla!realizzazione!dell’interfaccia!a!“4!angoli”;!sui!“4!angoli”,!
infatti,!si!basa!anche! l’interfaccia!realizzata!per!“SpokenHouse”.! In!seguito!viene!fatta!una!
panoramica!sulle!tecnologie!a!supporto!dei!non!vedenti!e!ipovedenti,!!e!sulla!legge!“Stanca”!
che!li!tutela!per!l’accessibilità!ad!Internet.!!
Nel!terzo!capitolo!verrà!fatta!un’analisi!dello!stato!dell’arte,!una!panoramica!sui!principali!
framework!per!lo!sviluppo!“cross!platform”!,!alcune!applicazioni!sviluppate!utilizzando!questi!
ultimi)e!le!motivazioni!che!hanno!spinto!all’utilizzo!di!“Apache)Crodova”.!!
Nel! capitolo! quarto! verranno! descritte! le! ragioni! che! hanno! portato! allo! sviluppo! di! un!
applicazione! multipiattaforma! per! il! controllo! di! un! sistema! domotico,! verrà! descritta!
dettagliatamente! la! tipologia! di! utenza! alla! quale! l'applicazione! è! orientata,! i! requisiti!
funzionali! che! l’applicazione! deve! soddisfare,! i! principali! scenari! e! casi! d’uso!
dell’applicazione,! l’architettura! dell’intero! sistema! con! le! principali! tecnologie! utilizzate!
durante!lo!sviluppo.!!
Nel!quinto!capitolo!sarà!descritta!la!fase!di!verifica!e!validazione!dell’applicazione,!dove!sono!
stati!rivisitati!più!nel!dettaglio!i!casi!d’uso!visti!nel!capitolo!4.!Proprio!in!base!a!questi!ultimi!
sono!stati!effettuati!i!test!di!accettazione!sia!funzionali!che!di!usabilità;!riguardo!questi!ultimi,!
per! ognuno! verrà! descritta! la! sperimentazione! effettuata! con! degli! utenti! non! vedenti!
dell’associazione! ONLUS! “Unione) ciechi”,! i! quali! si! sono! resi! disponibili! per! testare!
l'applicazione.!
Introduzione!
!
!3!
Nell’ultima! parte! del! lavoro! vengono! riportate! le! conclusioni! a! cui! si! è! giunti! e! i! possibili!
ampliamenti!del!lavoro!svolto.!!
! !
1 – Informatici Senza Frontiere
!
!4!
CAPITOLO010!
1! INFORMATICI0SENZA0FRONTIERE0!
Alla!fine!del!2005!un!gruppo!di!manager!veneti!che!lavorano!nel!settore!informatico!ha!deciso!
di!mettere!le!proprie!conoscenze!in!un!aiuto!concreto!contro!il!digital!divide.!È!nata!così!una!
Onlus!che!ha!come!primo!obiettivo!quello!di!utilizzare!conoscenze!e!strumenti! informatici!
per!portare!un!aiuto!concreto!a!chi!vive!situazioni!di!emarginazione!e!difficoltà.!La!Mission!di!
ISF! è! infatti! quella! di! aiutare,! tramite! l’applicazione! pratica! e! consapevole! dell’ICT!
(Information!and!Communication!Technology)!(1),!i!“soggetti!deboli”!ad!essere!più!liberi.!!
Per! i! fondatori! e! i! volontari! di! Informatici! Senza! Frontiere,! l'accesso! alle! tecnologie!
dell'informazione!e!della!comunicazione!rappresenta!un!prerequisito!essenziale!allo!sviluppo!
economico! e! sociale:! l'Information! Technology! dovrebbe! essere! considerata! un! bene! di!
primaria! necessità,! per! questo! si! impegnano! concretamente,! in! Italia! e! nel! mondo,! per!
facilitare!a!soggetti!che!vivono!realtà!disagiate!l'accesso!agli!strumenti!tecnologici.!!
ISF! realizza! progetti! in! Italia! e! nei! paesi! in! via! di! sviluppo,! offrendo! l’opportunità! di! far!
conoscere!l’informatica!e!i!vantaggi!che!anche!una!piccola!tecnologia!può!portare!a!realtà!
come!ospedali,!carceri,!case!di!accoglienza!e!scuole.! ISF!crede!nell’uso!abilitante!delle! ICT!
come!modo!per!migliorare!la!qualità!della!vita.!!
Oggi! Informatici! Senza! Frontiere! conta! dieci! sezioni! regionali! e! più! di! 300! soci! e! socie,!
informatici!e!non,!che!contribuiscono!alla!vita!dell’associazione.!Secondo!la!nostra!vision,!ISF!
crescerà,! mantenendo! intatti! i! valori! di! fondo,! come! associazione! caratterizzata! dalla!
piacevolezza!dello!stare!assieme!e!dall’affidabilità!del!suo!operato.!
! !
1 – Informatici Senza Frontiere
!
!5!
1.1! IL0DIGITAL0DIVIDE0E0LA0DISABILITA’0
!
Il!Digital!Divide!(divario!digitale)!è!un!fenomeno!che!riguarda!il!divario!esistente!tra!chi!ha!la!
possibilità! di! accedere,! grazie! ad! un! computer! (o! un! dispositivo! mobile)! e! tramite! una!
connessione! alla! rete,! ai! servizi! della! tecnologia! dell'informazione,! e! chi! invece! ne! resta!
escluso.!!
I! motivi! che! portano! all'esclusione! dai! servizi! in! questione! riguardano! principalmente!
differenze!socioLdemografiche!come!condizione!economica,!livello!d'istruzione,!differenza!di!
età!o!di!sesso,!qualità!delle!infrastrutture!e!appartenenza!a!diversi!gruppi!etnici!ma!anche!la!
disparità!nelle!capacità!e!nelle!conoscenze!necessarie!per!l'accesso!e!la!partecipazione!alla!
società! dell'informazione.! In! questo! ultimo! caso! si! può! anche! parlare! di! analfabetismo!
digitale.!!
Il! Mobile! dà! certamente! un! contributo! al! superamento! del! digital! devide! e! della! social!
exclusion! (esclusione! sociale).! Esso! consente,! infatti,! alla! persona! con! disabilità! sia! una!
maggiore!facilità!di!accesso!a!contenuti!e!servizi!di!vario!genere,!sia!il!miglioramento!della!
sua!"partecipazione"!alla!vita!sociale!con!amici,!familiari!e!colleghi.!Questo!è!possibile,!da!un!
lato,!grazie!alla!possibilità!di!accedere!tramite!i!dispositivi!Mobile!e!le!reti!wireless!al!grande!
mondo!delle!applicazioni!Internet!ed!in!particolare,!ai!contenuti!del!Web,!grazie!all'offerta!di!
contenuti!e!servizi!specifici.!!
Il! forte! valore! aggiuntivo! del! Mobile! rispetto! al! PC! è! l'accesso! ai! contenuti! in! mobilità!
everywhere!e!everytime:!chiunque,!anche!chi!non!possiede!un!computer,!ha!la!possibilità!di!
avere!uno!strumento!di!navigazione!ed!informazione.!!
Lo!scenario!delle!opportunità!che!il!Mobile!può!offrire!a!un!utente!disabile!è!ricco!e!variegato,!
ovviamente!a!patto!che!terminali,!applicazioni!e!servizi!offerti!siano!progettati!e!realizzati!
seguendo!le!linee!guida!dell’accessibilità!e!dell’usabilità.!Il!Mobile!può!consentire!ad!un!non!
vedente!o!ad!un!ipovedente,!per!esempio,!di!accedere!ad!informazioni!in!tutti!quei!contesti!
in! cui! vi! è! una! comunicazione! esclusivamente! visiva,! come! informazioni! sul! binario! di!
partenza!dei!treni!delle!stazioni,!gli!orari!e!le!indicazioni!sui!tragitti!e!ritardi!degli!autobus!alle!
fermate,!le!informazioni!di!servizio!in!un!hotel,!ecc.!!
1 – Informatici Senza Frontiere
!
!6!
Tuttavia! lo! smartphone! può! anche! sostituire! un! PC:! le! maggiori! opportunità! sono! state!
riscontrate!nel! caso!delle!persone!non! vedenti.! Esso!ha! infatti,! caratteristiche!di! usabilità!
preferibili!rispetto!ad!un!computer,!grazie!alle!ridotte!dimensioni!e!alla!garanzia!di!maggiore!
praticità!di!utilizzo!(il!cellulare!è!'senza!fili',!non!presenta!problematiche!di!connessione!alla!
rete! e! nella!maggior! parte! dei! casi! è! già! acceso! nel! momento! dell'uso).! In! aggiunta! una!
persona!non!vedente!con!un!basso!livello!di!informatizzazione!presenta!mediamente!molte!
difficoltà! nell'utilizzo! della! tastiera! del! PC,! mentre! non! ha! problemi! con! l'uso! dello!
smartphone.!!
L’elenco!delle!applicazioni!potrebbe!continuare!a!lungo.!L’eliminazione!del!digital!divide,!non!
è!un!meta!da!raggiungere,!ma!più!un!obiettivo!mobile,!visto!che!le!tecnologie!cambiano!di!
continuo!e!che!occorre!garantire!anche!una!formazione!continua!alle!persone.!Una!maggiore!
sensibilizzazione!di! imprese,! provider,! società! civile! e! Pubblica!Amministrazione!potrebbe!
evitare!e!ridurre!i!rischi!del!digital!divide.!!
!
1.2! I0PROGETTI0DI0ISF0
!
L’attività! di! ISF! è! iniziata! con! la! realizzazione! di! "Open!Hospital"! (OH),! un! software! open!
source,! che! permette! a! piccole! realtà! ospedaliere! di! gestire! il! flusso! dei! pazienti! e! dei!
medicinali! con! una! certa! sistematicità:! OH! è! stato! installato! la! prima! volta! ad! Angal,! in!
Uganda,! e! poi! in!moltissimi! altri! ospedali! africani! e! non! solo.! L’installazione!è! seguita! dai!
volontari!di! ISF,! che! si!occupano!di! creare!piccoli! sistemi! informativi!nell’ospedale!e!della!
formazione!del!personale.!!
Un!altro!importante!progetto!è!quello!realizzato!all’Ospedale!di!Brescia,!dove,!al!reparto!di!
oncologia! pediatrica,! è! stato! installato! un! sistema! informativo! che! permette! ai! piccoli!
pazienti,!ricoverati!per!lunghi!periodi,!di!comunicare!con!le!loro!famiglie,!giocare,!e!seguire!
un! percorso! scolastico.!Questo! progetto! è! stato! poi! replicato! in! altre! città,! dando! vita! al!
progetto!"Bambini!al!PC".!!
Fra!gli!altri!progetti! lanciati! ! ci! sono!"Shashamane",!per! informatizzare!alcune!aule!di!una!
scuola!rurale!dell'Etiopia,!“Progetto!scuole!senza!Frontiere”!per!aiutare!un!ragazzo!con!una!
grave!malattia!di!Forlì!a!seguire!le!lezioni!scolastiche,!“Progetto!Il!giardino!dai!mille!colori”!a!
1 – Informatici Senza Frontiere
!
!7!
Scampia,! uno! dei! quartieri! più! “difficili”! di! Napoli,! dove! è! stato! realizzato! un! laboratorio!
informatico!e!un!corso!di!introduzione!all’informatica!per!i!bambini!del!quartiere.!I!volontari!
di!ISF!inoltre!sono!intervenuti!nelle!zone!colpite!dal!terremoto!in!Emilia,!nel!carcere!di!Treviso!
per!il!recupero!sociale!dei!detenuti,!in!casi!speciali!come!per!i!malati!di!SLA!(Sclerosi!Laterale!
Amiotrofica)!con!il!progetto!ISA!“I!speak!again”.!!
Una!applicazione!progettata!e!realizzata!dai!volontari!di!ISF!è!Strillone;!questa!è!stata!pensata!
per!persone!con!disabilità!visive!affinché!possano!ascoltare!notizie!provenienti!dalle!testate!
giornalistiche.!Una!delle!caratteristiche!più!importanti!di!Strillone!è!la!sua!interfaccia:!essa!
infatti!è!divisa!orizzontalmente!e!verticalmente,! in!modo!da!creare!4!parti!perfettamente!
uguali,! cosi! che! l’utente! possa! sfruttare! gli! angoli! fisici! del! device! per! poter! navigare!
facilmente! all’interno! del! menù! dell’applicazione.! Attualmente! Strillone! è! disponibile!
gratuitamente!nelle!versioni!per!le!principali!piattaforme:!Android,!iOS!per!i!dispositivi!Apple,!
Windows! Phone! e! in! versione! Web! Application! utilizzabile! su! tutti! i! dispositivi! con!
connessione!ad!Internet.!
ISF!si!occupa!anche!di!offrire!corsi!e!strumenti!di!alfabetizzazione!informatica!nelle!carceri,!
negli!ospedali!e!tra!persone!che!vivono!situazioni!di!emarginazione!e!disagio.!!
!
!
!
!! !
!
2!–!Tecnologie!a!dei!non!vedenti!
!
!8!
CAPITOLO020
2! TECNOLOGIE0A0SUPPORTO0DEI0NON0VEDENTI0!
Questo! lavoro!di! tesi! si! rivolge!ad!una!specifica! tipologia!di!utenti!quali! "disabili!visivi!e/o!
uditivi".!I!"disabili!visivi"!comprendono!sia!i!non!vedenti!o!i!ciechi!assoluti,!che!gli!ipovedenti.!!
I!primi!non!sono!in!grado!di!cogliere!attraverso!la!vista!nessuna!informazione!significativa!in!
ordine! all'ambiente! esterno;! i! secondi,! invece,! possono! avvalersi! del! loro! residuo! visivo,!
anche! se! con! molte! limitazioni! e! trovandosi! in! situazioni! percettive! estremamente!
differenziate,!sia!sotto!il!profilo!dell'acuità!che!sotto!quello!dell'ampiezza!del!campo!visivo.!!
La!persona!ipovedente!non!è!semplicemente!un!individuo!che!ha!una!riduzione!delle!capacità!
visive.! A! volte! egli! manifesta! difficoltà! notevoli! nella! fissazione,! nei! movimenti! oculari,!
nell’esplorazione!visiva,!nell’ampiezza!del!campo!di!fissazione,!nella!sensibilità!al!contrasto,!
nella!percezione!del!colore.! !
I!“disabili!uditivi”!comprendono!sia!i!non!udenti!che!gli!ipoacusici.!I!primi!hanno!una!completa!
disfunzione! dell’intero! apparato! uditivo,! mentre! i! secondi! hanno! un! indebolimento!
dell'apparato! uditivo!dovuto! a! un! danno! o! alla! degenerazione! di! uno! o! più! dei! suoi!
componenti.!!
Nel! capitolo! che! segue! saranno! analizzate! le! tecnologie! a! supporto! di! questa! tipologia! di!
utenza,!prestando!attenzione!alle!tecnologie!esistenti!a!supporto!di!questi!e!alla!legge!Stanca!
che!li!per!quanto!riguarda!il!loro!interfacciamento!con!il!Web.!
!
2.1! LA0TECNOLOGIA0ED0I0NON0VEDENTI0
!
Negli!ultimi!decenni!sono!stati! inventati!diversi!strumenti!che!consentono!ai!ciechi!ed!agli!
ipovedenti! di! compiere! attività! che! prima! non! erano! alla! loro! portata! o,! se! lo! erano,!
2!–!Tecnologie!a!dei!non!vedenti!
!
!9!
richiedevano!uno!sforzo!e!delle!capacità!particolari.!!I!prossimi!paragrafi!discutono!alcune!di!
queste!applicazioni.!
!
2.2.100STRUMENTI0A0SUPPORTO0DEI0NON0VEDENTI0
Di!seguito!verranno!passati! in! rassegna!gli! strumenti!più! importanti!che!supportano! i!non!
vedenti!e!gli!ipovedenti!nella!vita!quotidiana!(3).!
Orologi,*termometri*e*oggetti*per*la*casa*
Esistono! in! commercio! orologi! da! polso! e! da! taschino! che! presentano! all'interno! del!
quadrante!una!serie!di!simboli!tattili.!Normalmente!il!quadrante!è!protetto!da!un!coperchio!
che!il!cieco!deve!aprire!per!toccare!le!lancette!ed!i!segni!indicatori!delle!ore!e!dei!minuti.!
Esistono!anche!orologi!sia!analogici!che!digitali!che,!oltre!a!mostrare!l'ora!in!un!display,! la!
vocalizzano!se!si!preme!un!apposito!tasto.!Solitamente!questi!orologi!parlanti!hanno!anche!
una!funzione!di!sveglia!e!di!segnale!orario.!
Un!esempio!è!un!modello!di!orologio!da!polso!realizzato!dalla!ditta!Tissot,!chiamato!SilenLT,!
che! consente! di! conoscere! l'ora! semplicemente! facendo! scorrere! il! dito! lungo! la! corona.!
Poiché!in!corrispondenza!delle!lancette!vengono!emesse!delle!vibrazioni.!
Esistono!termometri!tattili!e!parlanti!sia!per!la!misurazione!della!temperatura!corporea!che!
per!quella!ambientale.!!
Esistono,!infine,!sia!bilance!pesapersone!che!pesa!alimenti!con!indicazioni!tattili!e!sonore.!
Per!l'autonomia!in!casa!possono!rivelarsi!molto!utili!strumenti!di!comune!reperibilità,!quali!
segnalatori! di! fonti! luminose,! acqua! e! gas,! strumenti! per! separare! il! tuorlo,! apriscatole! e!
grattugie!elettriche.!!
Strumenti*per*scrivere*
Per!la!scrittura!con!il!sistema!Braille!ci!si!può!avvalere!di!un!set!costituito!da!una!tavoletta!di!
metallo!o!di!plastica,!un!regolo!e!un!punteruolo.!Esistono!anche!modelli!da!taschino.!
Per!una!scrittura!più!rapida!e!semplice!si!può!ricorrere!alla!dattilobraille:!ne!esistono!vari!
modelli!di!diversi!prezzi,!in!plastica!e!in!metallo,!a!testina!fissa!o!mobile.!!
Gli!ipovedenti!possono!scrivere!utilizzando!un!pennarello.!Esistono!dei!quaderni!con!righe!e!
quadretti!più!larghi!e!con!contorni!più!marcati!rispetto!ai!comuni!quaderni.!
2!–!Tecnologie!a!dei!non!vedenti!
!
!10!
Strumenti*per*leggere*
Gli!ipovedenti!possono!leggere!la!normale!scrittura!stampata!ed!i!manoscritti!servendosi!del!
videoingranditore!o!di!una!telecamera!ingrandente.! Il!primo!è!un!sistema!costituito!da!un!
monitor,!una!telecamera!fissa!ed!un!carrello!scorrevole!sul!quale!vengono!appoggiati!i!testi!
da!leggere.!
Ne!esistono!modelli!da!tavolo!e!portatili.!La!telecamera!ingrandente,!invece,!è!costituita!da!
un! unico! oggetto! che! incorpora! una! telecamera! ed! un! piccolo! schermo.! Esistono! anche!
sistemi!ibridi,!costituiti!da!una!telecamera!che!si!collega!al!computer!fisso!o!portatile.!
I! ciechi! assoluti! e! gli! ipovedenti! che! non! riescono! a! leggere! con! un! sistema! ingrandente!
possono!fare!ricorso!alla!scrittura!braille.!In!Italia!esistono!vari!centri!che!prestano!libri!già!
trascritti!o!trascrivono!libri!su!richiesta.!
Ciechi! ed! ipovedenti! possono!utilizzare! il! computer! anche! come! strumento!di! lettura,! sia!
abbinandolo! ad! uno! scanner! e! ad! un! programma! di! riconoscimento! caratteri,! sia!
procurandosi!libri!in!forma!digitalizzata.!!
*
2.2.200IL0COMPUTER!(4)0La!possibilità!di!utilizzare!sistemi!di!lettura!e!scrittura!elettronica!rappresenta!per!i!disabili!
visivi! una! vera! rivoluzione! nel! campo! delle! loro! possibilità! di! accedere! alla! cultura! ed!
all'informazione,!come!anche!nelle!modalità!dello!studio!e!nelle!nuove!possibilità!lavorative!
e!di!impiego!del!tempo!libero.!In!altre!parole!l'utilizzo!di!questi!ausili!consente!di!migliorare!
la! qualità! della! vita.! Quanto! ciò! sia! vero,! lo! si! può! capire! facilmente! ascoltando! l'elenco!
schematico!delle!cose!che!un!non!vedente!può!fare!usando!un!computer!e!una!connessione!
ad!internet:!
•! Scrivere!lettere,!appunti,!testi!di!ogni!genere!e!poter!rileggere!e!correggere!quanto!
scritto.!
•! Leggere! lettere!o!altri! scritti! ricevuti!su!dischetto,!per!posta!elettronica!o!presi!da!
internet.!
•! Leggere!i!normali!libri!o!le!riviste!in!nero!mediante!lo!scanner.!
•! Leggere!migliaia!di!libri!disponibili!in!forma!elettronica.!
2!–!Tecnologie!a!dei!non!vedenti!
!
!11!
•! Leggere! il! televideo! con! tutte! le! informazioni! che! contiene,! fra! cui! i! programmi!
televisivi.!
•! Consultare!l'elenco!telefonico!di!tutta!l'Italia.!
•! Consultare!l'orario!ferroviario!e!le!previsioni!del!tempo.!
•! Ricevere!a!casa!via!cavo!o!via!etere!e!leggere!quotidiani!e!settimanali.!
•! Scambiare!corrispondenza!di!ogni!tipo!a!mezzo!posta!elettronica.!
•! Avere! la! possibilità! per! gli! studenti! di! scrivere! i! loro! compiti! e! presentarli!
correttamente!stampati!ai!loro!insegnanti.!
•! Consultare!vocabolari!ed!enciclopedie!elettroniche.!
•! Leggere!raccolte!di!leggi!e!di!giurisprudenza.!
•! Tenere!una!contabilità!aziendale!o!familiare.!
•! Svolgere!operazioni!bancarie!dalla!propria!abitazione.!
•! Riascoltare!programmi!televisivi!o!radiofonici!anche!a!distanza!di!tempo.!
•! Svolgere! su! internet! ogni! tipo! di! ricerca,! avendo! a! disposizione! un! archivio! con!
miliardi!di!informazioni.!
•! E!molto!altro!ancora.!
L'elemento! centrale! di! tutti! i! sistemi! di! lettura! e! scrittura! elettronica! è! il! computer,! ma!
bisogna!assolutamente!evitare!di!credere!che!per!usare!tali!sistemi!sia!necessario!imparare!
l'informatica:!è!sufficiente!imparare!quali!tasti!si!debbono!premere!per!ottenere!determinati!
risultati.!Al!computer!sono!collegati!altri!apparecchi,!alcuni!dei!quali!sono!specifici!per!disabili!
visivi,!mentre!altri!sono!utilizzati!da!tutti.!
Sintesi*vocale*
La!sintesi)vocale!è!una!voce!artificiale!come!quella!che!legge!i!titoli!dei!vari!capitoli!e!paragrafi!
di!questo! servizio! fonomatico.!Essa!costituisce!uno!dei!modi! con!cui!un!non!vedente!può!
leggere!e!scrivere!con!un!computer.!Le!prime!sintesi!vocali,!che!risalgono!ai!primi!anni!'80,!
erano! comprensibili! solo! dopo! un! lungo! allenamento.! Quella! da! me! utilizzata! è! una!
abbastanza! recente,! ma! ve! ne! sono! anche! altre! con! intonazioni! più! naturali. Tuttavia,! ancora! più! importante! della! gradevolezza! della! voce,! è! la! completezza! e! facilità!
d'uso!del!programma!che!permette!di!chiedere!alla!stessa!voce!di!leggere!tutto!quello!che!ci!
interessa!e!soltanto!quello.!
!
2!–!Tecnologie!a!dei!non!vedenti!
!
!12!
Barra*Braille*
Il!secondo!ausilio!che!permette!ai!non!vedenti!di!usare!il!computer!è!la!barra!braille.!Si!tratta!
di!una!riga!costituita!da!un!certo!numero!di!celle,!in!ciascuna!delle!quali!si!vengono!a!formare!
elettronicamente!dei!punti!a!rilievo!corrispondenti!ad!una!delle!lettere!presenti!su!una!riga!
dello!schermo.!Quando!il!non!vedente!ha!terminato!di!leggere!quella!riga!facendo!scorrere!
le!dita!su!di!essa,!sulla!barra!appare!la!riga!successiva.!La!sua!importanza!consiste!nel!fatto!
che!con!questa!modalità!di!lettura!il!cieco!resta!in!contatto!con!la!corretta!grafia!delle!parole,!
cosa!che!non!succede!ascoltando!una!lettura!vocale.!E'!un!ottimo!sistema!per!coloro!che!sono!
veloci!nella!lettura!braille!ed!è!indicato!soprattutto!per!la!lettura!di!libri!e!la!consultazione!di!
vocabolari!ed!enciclopedie.!Sono!in!commercio!barre!da!20,!40!od!80!caratteri;!queste!ultime!
sarebbero!da!preferire,! in!quanto!presentano!il!contenuto!di!un'intera!riga!dello!schermo,!
ma!sono!estremamente!costose!
Luce*Braille*
Come!detto!precedentemente,!per!aiutare! le!persone!non!vedenti!a! leggere!e! scrivere! in!
linguaggio!Braille,!sono!state!create!delle!tastiere!(dette!anche!display)!molto!utili!e!facili!da!
maneggiare.!Una!di!queste!è!il!dispositivo!chiamato!Luce!Braille!della!TifloSystem.!!
È!un!display!Braille!leggero!e!portatile,!che!permette!di!portare!con!sé!tutti!i!documenti,!ma!
che!si!può!usare!anche!per!gestire!dispositivi!esterni,!tutto!da!un!unico!apparecchio.!!
Questo!display!Braille!(come!si!può!vedere!nella!Figura!2L1)!è!formata!da!16!caratteri!(o!celle)!
a! 8! punti.! Esistono! anche! altri!modelli! con! più! celle! a! disposizione!ma! il! resto! dei! tasti! è!
pressoché!lo!stesso.!
La!struttura!della!barra!è!molto!semplice:!ai!lati!del!display,!ci!sono!2!tasti!per!lo!scorrimento!
del!testo!che!compare!sul!display.!!
Sopra!il!display,!ci!sono!i!tasti!per!la!scrittura!a!8!punti.!!
L’ordine!dei! tasti! (in!base!a!quella!che!è! la!disposizione!dei!punti!nella!cella!a!8punti)!è! il!
seguente:!7–3–2–1–4–5–6–8!(partendo!da!sinistra!e!andando!verso!destra).!!
Sotto! la! riga/display! ci! sono! altri! 2! tasti:! quello! a! sinistra! è! detto! tasto! 9! che! serve,! in!
combinazione!con!altri!tasti,!per!attivare!particolari!funzionalità;!quello!a!destra!è!la!barra!
spaziatrice.!!
2!–!Tecnologie!a!dei!non!vedenti!
!
!13!
Agli!estremi!di!questi!2!ultimi!tasti!ci!sono!2!joystick!che!si!muovono!nelle!5!direzioni!(ovvero!
sopra,! sotto,! destra,! sinistra,! centro);! possono! essere! utilizzati! per! spostarsi! nei! menù! o!
carattere!per!carattere,!ad!esempio.!!
La!barra!può!essere!utilizzata!senza!supporto!di!PC!o!smartphone.!Infatti,!sul!display!escono!
le!voci!del!menù,!tipo!blocco!note,!gestione!file!etc.!!
Per! il!blocco!note,!si!può!creare!un!nuovo!file!col!comando!SPAZIO!+!N.!Man!mano!che!si!
scrive!con!la!tastiera,!sul!display!verrà!visualizzato!il!testo!che!si!sta!scrivendo.!!
Per!quanto!riguarda!l’interfacciamento!con!l’iPhonesi!utilizza!la!connessione!Bluetooth!(la!si!
deve!settare!nel!menu!del!display).!L’iPhone,!avendo!il!VoiceOver!attivo,!può!essere!utilizzato!
con! il! movimento! del! dito! verso! destra! per! scorrere! i! menu! e! doppio! click! su! un! punto!
qualsiasi!dello!schermo!per!accedere!alla!voce!selezionata.!!
!
Figura*2R1*:*Luce*Braille*
!
Si!va!quindi!nella!sezione!VoiceOver!dell’IPhone!per!abbinare!il!display!Braille!al!telefono!in!
modo!tale!da!usarlo!prettamente!come!display.!Ci!sarà!ovviamente!una!voce!elettronica!che!
indicherà!la!posizione!attuale.!!
Il!comando!SPAZIO!+!K!fornisce!l’elenco!di!tutti!i!comandi!eseguibili!tramite!questo!display.!!
2!–!Tecnologie!a!dei!non!vedenti!
!
!14!
Col!rotore!si!fa!in!modo!di!scorrere!le!parole!che!sono!state!scritte!per!riga,!parola!oppure!
per! carattere,! ad! esempio.! In! questo! modo! è! possibile! correggere! il! file! creato! molto!
agevolmente.!!
Gli*Screen*Reader*
Lo!screen!reader!è!un’altra!funzionalità!per!l'accessibilità!molto!importante.!Si!tratta!di!un!
software! che! permette! di! ascoltare! (invece! di! leggere)! un! contenuto! presente! a! video.!
Scorrendo!il!dito!sullo!schermo,!lo!screen!reader!legge!ad!alta!voce!i!contenuti!selezionati!o!
una! loro! descrizione.! Inoltre! le! notifiche! come! sveglie,! eventi! del! calendario! e! avvisi!
sull'esaurimento! della! batteria! sono! lette! ad! alta! voce.! Questo! strumento! quindi! si! rivela!
essenziale!per!tutti!gli!utenti!non!vedenti,!che!non!ne!potrebbero!farne!a!meno!per!usare!un!
certo!dispositivo.!!
A!seconda!del!sistema!operativo!dello!smartphone!viene!messo!a!disposizione!uno!Screen!
Reader!differente:!
•! Per! i! dispositivi! Android:! TalkBack! che! aggiunge! feedback! vocali,! sonori! con!
vibrazione!al!dispositivo.!!
•! Per!i!dispositivi!Apple:!Voice!Over!con!cui!è!possibile!controllare!il!dispositivo!iOS!con!
alcune!gesture!oltre!al!normale!funzionamento!di!lettura!dello!schermo.!!
•! Per!dispositivi!Windows!Phone!è!disponibile!solo!per!i!dispositivi!più!aggiornati!ed!è!
limitato!alla!sola!lingua!inglese!(Stati!Uniti).!!
Interfaccia*facilitata*Winguido*
Lo!Screen!Reader!più!utilizzato!dai!non!vedenti!si!chiama!Jaws!e!legge!con!la!sua!sintesi!vocale!
tutto!ciò!che!appare!scritto!sullo!schermo,!ma!è!molto!costoso!e!anche!non!molto!semplice!
da!apprendere.!!
Circa!2.000!non! vedenti! utilizzano! invece! "Winguido",! una! interfaccia! che!presenta! tutti! i!
menu! ad! albero! ed! è! quindi! estremamente! facile! ed! intuitiva! nel! suo! utilizzo.! Inoltre! è!
scaricabile!gratuitamente!da!Internet!e,!oltre!a!tutte!le!normali!funzioni!di!scrittura,!lettura,!
navigazione,! posta! elettronica,! skype,! ne! ha! altre! ancora! più! semplificate,! come! l'orario!
ferroviario,!l'elenco!telefonico,!il!televideo.!Inoltre!ha!degli!applicativi!specificamente!creati!
per!i!non!vedenti,!come!diversi!giochi!enigmistici,!una!agenda!con!scadenze,!appuntamenti!e!
ricorrenze,! un! riconoscitore! di! caratteri! per! lo! scanner,! un! programma! di! registrazione!
digitale,!un!catalogo!per!dischi,!un!programma!di!contabilità,!ecc.!!
2!–!Tecnologie!a!dei!non!vedenti!
!
!15!
Il!vantaggio!più!rilevante!nel!uso!di!winguido!risiede!!nel!rapporto!tra!la!semplicità!del!suo!
utilizzo!e!i!risultati!che!possono!essere!ottenuti,!i!quali!riescono!a!soddisfare!certamente!la!
gamma!di!esigenze!di!un!utente!domestico!del! computer.!un!disabile!della!vista,! grazie!a!
questo! semplice! strumento! può! leggere! un! giornale,! ricevere! una! ricetta! di! cucina! o! le!
istruzioni!di! un! farmaco,! consultare! le!pagine!gialle!! o! l'elenco! telefonico,! accedendo! così!
semplicemente!ad!informazioni!spesso!di!vitale!importanza!altrimenti!inaccessibili.!
!
2.2! IL0WEB0ED0I0NON0VEDENTI0
!
L'accessibilità!ad!internet!per!un!non!vedente!è!diventata!una!priorità!assoluta,!cosa!di!cui!si!
sono! finalmente! accorti! anche! i! politici,! tanto! che! è! stata! già! varata! una! legge!
sull'accessibilità,!approvata!quasi!all'unanimità!nel!2004.!
Avere!Internet!accessibile,!per!un!non!vedente,!significa!riappropriarsi!di!molte!cose!per!le!
quali!prima!dell'avvento!delle!nuove!tecnologie,!venivano!puntualmente!demandate!ad!altri!
o,!nella!migliore!delle!ipotesi,!eseguite!con!l'aiuto!di!altri.!
Con! l'uso! del! computer! abbinato! alla! rete! internet! si! può! fare! acquisti! onLline,! tenere! i!
rapporti!con!la!propria!banca,!accedere!alle!informazioni!dei!maggiori!media,!accedere!alla!
cultura,!accedere!direttamente!alle!università!e!alle!loro!banche!dati,!eseguire!ricerche,!e,!
non! trascurabile,! tenere! i! rapporti! interpersonali! e! per! la! socializzazione! senza! avere! il!
bisogno! di! spostarsi! da! casa! con! tutti! i! problemi! che! gli! spostamenti! comportano! per! un!
disabile!visivo.!
Già!oggi,!se!Internet!fosse!completamente!accessibile,!tutto!quanto!suddetto!sarebbe!realtà!
e!non!un!grosso!punto!interrogativo!ad!ogni!accesso!tentato.!
!
2.3.100LA0LEGGE0STANCA0(5)0
Il! 17! Dicembre! 2003! il! Parlamento! Italiano! ha! approvato! all'unanimità! la! Legge!
sull'Accessibilità!meglio!nota!come!Legge!Stanca!dal!nome!del!Ministro!per!l'Innovazione!e!le!
Tecnologie!Lucio!Stanca!che!l'ha!presentata!sotto!forma!di!Disegno!di!Legge.!
2!–!Tecnologie!a!dei!non!vedenti!
!
!16!
La!Legge!"!Disposizioni!per!favorire!l'accesso!dei!soggetti!disabili!agli!strumenti!informatici"!
è!stata!pubblicata! in!Gazzetta!Ufficiale!come!legge!9!gennaio!2004,!n.!4.La!Legge!prevede!
l'obbligo!per!la!Pubblica!Amministrazione!di!rendere!accessibili!tutti!i!propri!siti!web,!prevede!
infatti!che!i!nuovi!contratti!stipulati!dalla!pubblica!amministrazione!per!la!realizzazione!di!siti!
Internet! siano! nulli! qualora! non! rispettino! i! requisiti! di! accessibilità.! L'inosservanza! delle!
disposizioni!della!legge!da!parte!del!pubblico!amministratore!inoltre!comporta!responsabilità!
dirigenziale!e!responsabilità!disciplinare.!
Quindi!con! la!Legge!stanca!sono!state!stabilite!alcune!regole!da!rispettare!al! fine!di!poter!
rendere!accessibile!il!web!a!persone!con!disabilità!visive.!
Per!fare!in!modo!che!lo!screenLreader!funzioni!correttamente!fornendo!esattamente!tutto!
quello! che! è! presente! sul! monitor,! il! sito! deve! essere! costruito! in! modo! tale! che!
l'interpretazione!di!tutte!le!informazioni!avvenga!in!maniera!fedele,!senza!perdere!nulla!di!
quello!che!il!sito!contiene.!
Nel! caso! contrario,! il! navigatore! non! vedente! nella! migliore! delle! ipotesi! perderà!
l’orientamento,!ma!il!più!delle!volte!non!potrà!accedere!al!sito.!
Quando! il! web! master! costruisce! il! sito! deve! tenere! conto! di! queste! variabili,! ponendo!
l’attenzione!su!alcune!cose!di!estrema!importanza.!Vediamo!quali!sono:!
1.! Etichettare! le! immagini! in! maniera! comprensibile! e! corrispondente! a! quanto!
riportato!sullo!schermo,!avendo!cura!di!inserire,!per!cose!da!descrivere,!il!tag!long!
Desk!che!consente!descrizioni!più!lunghe!ed!adeguate.!
2.! Se!si!utilizzano!elementi!grafici!nei!link!o!nei!bottoni!significativi,!immettere!del!testo!
alternativo!nell'apposito!attributo!del!tag!IMG!(ALT="testo!descrittivo").!
3.! Non!utilizzare!tecnologie!flash,!in!quanto!gli!screen!reader!meno!recenti!e!i!browser!
testuali! non! riescono! ad! interpretare! questo! tipo! di! tecnologia,!mentre! gli! ultimi!
realizzati! la! interpretano! male.! Sul! sito! di! Macromedia! si! continua! a! parlare! di!
tecnologia! flash! accessibile,!ma! intanto! la! programmazione! in! flash! dei! siti,! forse!
perché!nessuno!si!mette!a!perdere!la!testa!per!creare!dei!flash!accessibili,!continua!
a!creare!problemi!alle!tecnologie!assistive.!
4.! Non!utilizzare!tabelle!nidificate!nel!caso!si!voglia!visualizzare!elenchi!o!dati.!In!alcuni!
casi! di! visualizzazione! personalizzata! o! per! i! browser! testuali,! si! potrebbero!
sovrapporre!gli!elementi!della!pagina!nascondendo!addirittura!gli!stessi!link.!
2!–!Tecnologie!a!dei!non!vedenti!
!
!17!
5.! Nei! form! di! compilazione! i! campi! devono! essere! etichettati! in! maniera! corretta,!
soprattutto!se!si!usano!i!tag!Label.!
6.! La!struttura!del!sito!non!deve!essere!costruita!a!frame!in!quanto!gli!screen!reader!
testuali!non!la!interpretano!correttamente.!
7.! Le! pagine! del! sito! devono! sempre! riportare! il! link! al! contenuto! della! pagina,!
soprattutto!se!il!menù!di!navigazione!è!molto!grande.!
8.! Tutti!i!comandi!del!sito!sia!essi!di!navigazione!o!di!attivazione!di!procedure!devono!
poter!essere!gestiti!da!tastiera.!
9.! I!pulsanti!radio!devono!avere!l’indicazione!del!comando!che!producono,!leggibile!in!
modo!coretto!durante!la!selezione,!soprattutto!se!si!usano!taglabel.!
10.!Se!si!usano!testi!nei!campi!editazione!per!descrivere! il!dato!da! immettere,! fare! in!
modo!che!il!testo!presente!si!cancelli!appena!si!accede!al!campo!editazione,!evitando!
di!usare!script!per!la!cancellazione.!
11.!Non! utilizzare! Javascript! o! altri! tipi! di! script,! poiché,! con! i! browser! testuali! o! se!
l'utente!decide!di!disattivare!gli!script!per!sicurezza,!si!impedisce!di!usufruire!di!tutto!
quello!che!tali!script!veicolano.!
12.! Inserire!i!tag!per!l'interpretazione!della!lingua!in!quanto!gli!ultimi!screenLreader!già!
riescono!a!leggere!nella!lingua!impostata.!
13.! Inserire!i!significati!espliciti!di!abbreviazioni!ed!acronimi!perché,!anche!questi! ,!già!
vengono!correttamente!interpretati!dagli!ultimi!screenLreader.!
14.!Evitare!di!inserire!testo!alternativo!anche!per!i!grafici!di!separazione!del!contenuto!
della!pagina!come!ad!esempio!"linea!tratteggiata",!"freccia",!"!puntini!neri",!eccetera!
ecc.!
15.!Quando!si!usano!le!accessLkey,!evitare!di!usare!questo!comodo!comando!per!tutti!i!
link,! inserendolo! essenzialmente! ai! link! principali! occorrenti! per! una! più! rapida!
navigazione,! come! ad! esempio! la! home! page,! la! mappa,! il! motore! di! ricerca,! e!
qualche!altro!di!importanza!per!il!sito.!Se!tali!comandi!vengono!inseriti!su!tutti!i!link,!
possono!solo!generare!confusione.!Speriamo!che!le!prossime!direttive!internazionali!
diano!una!direttiva!su!queste!cose!che!stanno!proliferando!in!modo!caotico!un!poco!
ovunque.!
16.!Nei! form!di! compilazione,! i! commenti! inseriti! tra! un! campo!e! l'altro! per! spiegare!
meglio!i!dati!da!immettere,!devono!essere!gestiti!tramite!CSS!e!inseriti!come!SPAN!
2!–!Tecnologie!a!dei!non!vedenti!
!
!18!
nelle! LABEL,! in!modo! che! vengono! regolarmente! letti! anche! quando! è! attivata! la!
modalità!scrittura.!
Quelli!suddetti!sono! i!principali!accorgimenti!che!permettono!ad!un!non!vedente!di!poter!
usufruire!dei!contenuti!di!un!sito!con!un!grado!abbastanza!sufficiente!di!accessibilità.!
!
2.3.200IL0WEB0E0GLI0IPOVEDENTI0
Rendere! fruibile! il! web! anche! ai! soggetti! ipovedenti! significa! dover! tenere! presente!
moltissime!variabili,!quali:!
•! L’acuità!visiva.!
•! Il!campo!visivo.!
•! La!percezione!dei!colori.!
•! Altre!patologie!collaterali!che!influiscono!negativamente!sulla!sensibilità!visiva.!
Inoltre,!bisogna!tenere!conto!di!come!gli!ipovedenti!configurano!i!propri!pc.!Infatti,!non!tutti!
utilizzano! gli! strumenti! assistivi,! i! magnifier! (ingranditori! software).! Molti! tendono! a!
personalizzare!in!maniera!estrema!il!proprio!desktop,! ingrandendo!le! icone,! le! lettere!ed!i!
menù,!altri!ancora!tendono!ad!utilizzare!risoluzioni!di!schermo!molto!basse,!per!esempio!800!
per!600.!
Infine,!ci! sono!coloro! i!quali!utilizzano! l’opzione!di! ingrandimento!caratteri!dei!browser,!e!
magari! usano! browser! diversi! che! interpretano! la! pagina! web! in! maniera! differente,!
privilegiando!il!dimensionamento!dei!caratteri.!
Qui! di! seguito! sono! elencati! 12! punti! dai! quali! iniziare! ad! affrontare! l'argomento!
dell'ipovisione!ed!il!web.!Fondamentale!è!la!progettazione!di!un!layout!semplice!ed!intuitivo,!
dove!sia!facile!raggiungere!le!varie!aree!del!sito.!
Ecco!i!dodici!punti!(6):!
1.! I! link! significativi! dovrebbero! essere! posti! in! posizioni! strategiche,! ad! esempio! a!
sinistra,!dove!lo!sguardo!tende!a!dirigersi.!
2.! Lo! spazio! di! editazione! nei! form! non! deve! essere! esiguo,! ma! sufficientemente!
spazioso,!in!modo!da!poter!essere!scritto!e!letto!con!facilità.!
3.! I!link!non!dovrebbero!essere!troppo!ravvicinati!tra!loro!e!agli!oggetti!circostanti.!
2!–!Tecnologie!a!dei!non!vedenti!
!
!19!
4.! Gli! sfondi! ed! i! caratteri! devono! essere! sufficientemente! contrastati,! in! modo! da!
essere!decifrati!da!tutti!gli!ipovedenti.!
5.! Bisognerebbe! evitare! l’uso! di! colori! fluorescenti! in! quanto! danno! l’illusione! di! un!
buon!contrasto,!ma!rendono!i!contenuti!inaccessibili.!
6.! Bisognerebbe! evitare! l’utilizzo! di! caratteri! stilizzati! quali:! Impact,! Juice,! Matisse,!
Rockwell,!Matura,!Snap,!Lucida!Handwriting!e!simili.!
7.! Si!dovrebbe!evitare!accuratamente!l’utilizzo!dei!caratteri!testuali!in!dimensioni!fisse.!
Questa!soluzione!preclude!in!maniera!inesorabile!la!possibilità!di!adattare!il!sito!alle!
proprie!esigenze,!tramite!l’utilizzo!dell’accesso!facilitato!del!sistema!operativo!e!del!
browser.!
8.! Non!si!devono!usare!caratteri!che!sono!di!derivazione!grafica,!in!quanto!non!possono!
essere!trattati!a!livello!di!interfaccia!utente.!
9.! Non!si!devono!usare!sfondi!sfumati,!o!immagini! in!movimento,!o!testi!scorrevoli,! i!
quali!compromettono!in!maniera!inesorabile!l’accessibilità.!
10.!Evitare!l’uso!di!sfondi!di!diversi!colori!nella!stessa!pagina.!
11.! Implementare! sempre! il! mouseover! e! il! visited! dei! link,! contestualizzandone! il!
contrasto!con!i!colori!del!sito,!in!quanto!questo!strumento!rappresenta!un!punto!di!
riferimento!per!l’orientamento!del!navigatore!ipovedente.!
12.!Una! possibile! alternativa! per! un! ipovedente! potrebbe! essere! rappresentata! dalla!
possibilità!di!personalizzare! la!visualizzazione!del!sito!secondo!le!proprie!esigenze,!
adattando! colori! di! sfondo! e! del! testo,! tipo! e! dimensione! dei! caratteri,! con!
l’implementazione!di!una!specifica!pagina!del!sito,!raggiungibile!con!uno!dei!primi!
link!della!home!page.!
!
2.3! STRILLONE0
!
Il!digital!divide,!come!già!ampiamente!discusso!nei!capitoli!precedenti,!non!riguarda!solo!la!
mancanza! di! connettività! Internet,! ma! tutti! quegli! ostacoli! che! limitano! l’accesso! alle!
tecnologie!digitali.!!
Ecco!il!caso!di!ISF,!un!gruppo!di!professionisti!che!ha!deciso!di!aiutare!le!persone!a!superare!
il!digital!divide!o!ad!affrontare!emergenze,!ovunque!ce!ne!sia!bisogno.!!
2!–!Tecnologie!a!dei!non!vedenti!
!
!20!
L’idea!di!Strillone!nasce!da!un’intuizione!di!Roberto!De!Nicolò!che!nell’ambito!di!ISF!si!occupa!
di!coordinare! i! lavori! riguardanti! i!progetti! legati!alla!disabilità.!Strillone!è!un’applicazione!
progettata!per!smartphone,!tablet!e!PC!desktop,!che!consente!alle!persone!non!vedenti!o!
con! gravi! problemi! di! vista! di! sfogliare! e! ascoltare! le! notizie! di! interesse! del! proprio!
quotidiano!preferito! tramite! la! sintesi! vocale! integrata! e! ad! una! facile! organizzazione!dei!
contenuti.!!
L'applicazione! Strillone! è! disponibile! gratuitamente! per! sistemi! operativi! iOS! e! Android,!
quindi!per!smartphone!e!tablet,!ed!è!anche!consultabile!da!un!qualsiasi!computer!desktop!e!
utilizzabile! con! la! tastiera! premendo! i! tasti! è,! +,! à,! ù! e! compatibile! con! gran! parte! delle!
versioni!degli!Screen!Reader!per!non!vedenti!(come!Jaws).!!
Esistono!molte!applicazioni!che!similmente!consentono!a!persone!non!vedenti!di!ascoltare!
cosa!“accade”!sullo!schermo.!Il!gruppo!ISF!che!ha!progettato!ed!implementato!l'applicazione!
Strillone,! ha! però! avuto! un'intuizione! meravigliosa:! il! tatto,! insieme! all'udito,! è! l'unica!
certezza!dei!non!vedenti,!per! cui! ISF! fa!pensato!di! associare!a! ciascun!angolo,!di! tablet!o!
smartphone,!una!funzione!predefinita.!Le!funzioni!svolte!dagli!angoli!del!touch!screen,!sono!
installate!in!quattro!tasti!ben!definiti.!!
Strillone!è!un'applicazione!che!si!rivela!molto!utile!non!solo!per!gli!ipovedenti!ma!anche!per!
tutte!quelle!persone!con!importanti!difficoltà!visive!come!anziani,!autistici,!dislessici,!etc.!!
!
2.4.100L’INTERFACCIA0A0QUATTRO0ANGOLI0
Ma!quali!reali!certezze!può!avere!un!non!vedente!che!utilizza!uno!schermo!touch?!Gli!angoli!!
L'aspetto! interessante,! che! consente! dunque! agli! ipovedenti! o! ai! ciechi! una! facile!
individuazione! dei! pezzi,! è! la! schermata! principale,! suddivisa! in! quattro! aree! uguali!
corrispondenti! quindi! agli! angoli! dei! dispositivi.! Questi! sono! ben! delineati! e! tattilmente!
riconoscibili! anche! da! chi! ha! problemi! di! vista.! A! ciascuna! di! queste! aree! viene! quindi!
associato!un!comando!predefinito.!!
Sfogliare!i!contenuti!è!facile!e!veloce.!Ogni!giornale!è!infatti!distribuito!secondo!lo!schema!
logico!dell'albero!rovesciato:!in!questo!modo,!ogni!giornale!è!la!“radice”!di!un!albero,!il!punto!
di!partenza!della!navigazione.!Scegliendone!uno,!i!“rami”!successivi!rappresentano!le!sezioni!
di!ciascuna!testata!(ad!esempio!sport,!politica,!finanza,!cronaca),!e!una!volta!scelta!una!di!
queste,!le!"foglie"!sono!gli!articoli!di!quella!specifica!sezione!e!rappresentano!i!punti!terminali!
2!–!Tecnologie!a!dei!non!vedenti!
!
!21!
della!pubblicazione.!Il!segreto,!sta!quindi!nell'uso!del!telefono!come!supporto!all'azione!nel!
programma.!!
!
!
Possiamo! fornire! una! descrizione! dettagliata! di! ciascuna! funzionalità! associata! ai! quattro!
pulsanti!(Figura!2L2):!!
•! Angolo! superiore! sinistro:! toccando! brevemente! questo! angolo! si! torna! al! livello!
superiore.!Se,!ad!esempio,!si!sta!navigando!gli!articoli,!premendo!questo!angolo!si!
può! interrompere! la! lettura! dell’articolo.! Premendolo! nuovamente! si! torna! alle!
sezioni!del!giornale,!e!così!via! fino!alla!navigazione! iniziale.!Se!si! intende!chiudere!
Strillone,!si!preme!a!lungo!questo!pulsante!e!l’applicazione!si!chiuderà.!!
•! Angolo! superiore! destro:! toccando! brevemente! questo! angolo! si! passa! da! una!
sezione!o!da!un!articolo!al!precedente.!!
•! Angolo!inferiore!destro:!toccando!brevemente!questo!angolo!si!passa!da!una!sezione!
o!da!un!articolo!al!successivo.!!
•! Angolo! inferiore! sinistro:! toccando! brevemente! questo! angolo! si! scende! al! livello!
successivo.!Se,!ad!esempio,!si!sta!navigando!le!sezioni!del!giornale,!premendo!questo!
angolo!si!entra!nella!lista!degli!articoli!della!sezione!scelta.!Premendolo!nuovamente,!
dopo!aver!scelto!un!articolo,!si!avvia!la!lettura!del!testo!dell’articolo!di!interesse.!Se!
invece! si! vuole! ascoltare! la! guida! vocale! è! necessario! premere! a! lungo! questo!
pulsante.!!
!
!
Figura*2R2*:*Funzionamento*interfaccia*Strillone*(2)*
2!–!Tecnologie!a!dei!non!vedenti!
!
!22!
2.4! OBIETTIVI0
!
Sulla!base!delle!ricerche!effettuate,!per!creare!un’applicazione!che!vada!incontro!al!target!
utente! in! questione! è! necessario! aggiungere! una! guida! vocale! che! aiuti! l’utilizzatore!
dell’applicazione!durante! il!suo!utilizzo;! in!aggiunta!è!necessario!utilizzare!combinazioni!di!
colori! che! rendano! accessibile! l’applicazione! anche! a! persone! con! disabilità! visive! di! tipo!
daltoniche.!
Il! progetto! SpokenHouse! punta! a! soddisfare! in! pieno! le! esigenze! dei! suoi! utilizzatori,!
integrando!la!sintesi!vocale!ad!una!facile!organizzazione!dei!contenuti.!!
In!aggiunta,! l'applicazione!dovrà!essere!supportata!da!tutti! i!sistemi!operativi!mobile!(iOS,!!
Android,!Windows!Phone!8,!ecc…).
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!23!
!
!
CAPITOLO030!
3! TECNOLOGIE0 A0 SUPPORTO0 DELLA0 CROSS0PLATFORM0
!
Questo!capitolo!contiene!nozioni!basilari!necessarie!per!comprendere!gli!sviluppi!successivi!
della!tesi.!Partendo!dalla!definizione!di!“cross>)platform”!viene!fatto!un!focus)sui!principali!
aspetti! inerenti! lo! sviluppo! di! applicazioni! mobili! multipiattaforma,) viene! fatta! una!
panoramica!su!alcune!app)mobile)sviluppate!utilizzando!alcuni!dei!Framework)menzionati.!Il!
capitolo!si! conclude!con!una!breve!descrizione!di!due!App!mobile!crossLplatform!per!non!
vedenti.!
!
3.1! COS’E’0LA0CROSSEPLATFORM0
!
È!noto!come!le!tecnologie!Web!abbiano!avuto!un!forte!impulso!negli!ultimi!anni!grazie!anche!
al!settore!mobile.!La!definizione!delle!specifiche!di!HTML5!e!di!CSS3!includono!molte!opzioni!
per!il!mondo!mobile!ed!il!loro!utilizzo!ha!delineato!nuovi!approcci!per!lo!sviluppo!di!App.!
Con!l’arrivo!di!Windows!Phone,!le!principali!piattaforme!Mobile!che!detengono!il!90%!della!
quota!di!mercato!–!iOS!e!Android!–!diventeranno!quasi!certamente!tre.!E!se!i!consumatori!
avranno!la!possibilità!di!scegliere!più!piattaforme,!l’abilità!di!creare!App!crossLplatform!è!già!
diventata!un!must!per!gli!sviluppatori.!
Gli!sviluppatori!conoscono!bene!le!differenze!tra!App!native,!sviluppate!con!il!proprio!SDK!e!
i!propri!linguaggi!(xCode/ObjectiveLC!per!iOS,!Eclipse/Java!per!Android,!Visual!Studio/C#!per!
Windows!Phone),!e!App!sviluppate!attraverso!dei!framework!crossLplatform!come!PhoneGap!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!24!
(HTML5),! Titanium! di! Appcelerator! (javascript),! RhoLMobile! (Ruby),! Sencha! (HTML5),!
MonoTouch!e!MonoforAndroid!(.NET)!e!Air!(27).!
Queste! tecnologie!permettono!di!avverare! il! sogno!di!ogni!sviluppatore:!scrivere!una!sola!
volta! il! codice! e! usarlo! per! tutte! le! piattaforme.! Di! contro,! il! sogno! del! “write! once,! run!
everywhere”!(wora),!porta!spesso!ad!applicazioni!mal!realizzate!o!mal!integrate!con!il!resto!
del!sistema,!complesse!e!pesanti,!con!un!minimo!comune!denominatore:!una!brutta!userL
interface!scritta!in!HTML5.!
Tuttavia,!non!sempre!le!App!sviluppate!con!tecnologia!crossLplatform!sono!da!considerare!
inferiori.!Un!caso!noto!è!quello!del!team!di!Sencha!(un!framework!per! la!realizzazzione!di!
interfacce!in!HTML5!per!applicazioni!mobili)!che!si!è!offeso!quando!Zuckerberg!ha!affermato!
che! avrebbe! rifatto! in! maniera! nativa! l’App! di! Facebook! perché! HTML5! non! era! ancora!
pronto:! hanno! sviluppato,! così,! un’App! del! tutto! simile! a! quella! di! Facebook! in! HTML5! e!
l’hanno!chiamata!“Fastbook”.!
In!effetti!la!loro!App!risulta!più!veloce!nel!refresh!e!nel!caricamento!delle!varie!viste,!e!la!UI!
è!del!tutto!identica!all’originale.!La!scelta!del!framework!da!usare!non!è!quindi!una!cosa!da!
sottovalutare!e!dovrebbe!essere!guidata!da!una!chiara!idea!del!servizio!che!si!vuole!offrire,!
seguita!da!un’analisi!dettagliata!che!miri!a!semplificare!il!più!possibile!l’interfaccia.!
Con!tutta!probabilità,!il!modello!vincente!è!quello!misto,!composto!da!una!UI!nativa!e!da!un!
core!crossLplatform.!
!
3.2! CLASSIFICAZINE0DELLE0APPLICAZIONI00
!
Allo! stato! attuale! possiamo! classificare! le! applicazioni! per! il! mondo! mobile! in! base! alle!
tecnologie!utilizzate!in!tre!categorie!(28):!
•! App*native:!sono!App!scritte!e!compilate!per!una!specifica!piattaforma!utilizzando!
uno!dei!linguaggi!di!programmazione!supportati!dal!particolare!sistema!operativo;!
•! Web* App:! sono! pagine! Web! ottimizzate! per! dispositivi! mobili! sfruttando! le!
tecnologie!Web,!in!particolare!HTML5,!JavaScript!e!CSS3;!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!25!
App*ibride:!sono!App!che!cercano!di!sfruttare!il!meglio!delle!due!categorie!precedenti:!sono!
scritte!con!tecnologie!Web,!ma!vengono!eseguite!localmente!all’interno!di!un’applicazione!
nativa!
!
3.2.1!APPLICAZIONI0NATIVE0
Un’applicazione!mobile!nativa!è!un’applicazione!per!un!determinato!dispositivo!smartphone!
e! tablet! installata!direttamente! sul!dispositivo.! Lo! sviluppo!delle!mobile!App!per!Tablet!e!
smartphone!prevede!la!progettazione!adLhoc!per!specifici!sistemi!operativi!(! IOS,!Android,!
Blackberry!e!Windows!Mobile)!e!per!specifici!device.!!Gli!utenti!in!genere!acquistano!queste!
applicazioni!tramite!uno!store!online!o!di!mercato,!come!ad!esempio!l’Apple!Store!o!Android!
Apps! su! Google! Play.! Di! solito! le! applicazioni! mobile! sfruttano! il! linguaggio! specifico! del!
dispositivo!e!dialogano!con! i! framework!del!device:!GPS,! fotocamera,!accelerometro,! lista!
contatti,!utilizzando!un!sistema!di!Notifiche!push!e!sono!utilizzabili!anche!in!modalità!offline!
con!una!maggiore!velocità!di!caricamento!dei!dati.!
Sviluppare!App!native!significa!utilizzare! i! linguaggi!nativi!di!ciascuna!piattaforma,!che!nel!
caso!di!Android!è!Java,!mentre!nel!caso!di!iOS!è!ObjectiveLC!oppure!il!nuovo!arrivato!Swift!
(8).!
I! principali! vantaggi! dello! sviluppo! nativo! sono! sicuramente! le! performance! e! l’accesso!
diretto!ai!sensori!hardware!dei!dispositivi!attraverso!le!API!native,!sfruttando!perciò!al!meglio!
le!funzionalità!dello!smatphone.!Essendo!il!codice!compilato!in!codice!macchina!o!comunque!
in!un!bytecode!esso!girerà!in!modo!efficiente!e!rapido!sui!dispositivi.!
Le!applicazioni!native!sono!più!veloci!(rispetto!alle!web!App)!e!possono!funzionare!anche!offL
line,!inoltre!un'applicazione!nativa!gode!della!grande!visibilità!data!dagli!store!digitali.!
D’altronde! bisogna! annoverare! anche! gli! svantaggi! nello! sviluppare! questa! tipologia! di!
applicazioni.!I!costi!e!tempi!di!realizzazione!delle!applicazioni!native!sono!mediamente!più!
elevati! (si! deve! sviluppare! un’applicazione! per! ogni! device! differente,! per! ogni! sistema!
operativo! differente).! Inoltre! per! accedere! agli! store! le! applicazioni! devono! soddisfare!
determinati!requisiti!decisi!dai!distributori.!!
Anche! la!gestione!degli!aggiornamenti!è!difficoltosa,!e!deve!sempre!passare!attraverso! le!
policy! di! approvazione! degli! store.! Sviluppare! nativamente! implica! avere! delle! buone!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!26!
competenze! da! programmatore! ed! alle! spalle! uno! studio! approfondito! dei! framework! di!
riferimento!di!ciascuna!piattaforma!che!si!vuole!targhettizzare,!occorre!dunque!investire!una!
notevole!quantità!di!tempo!per!padroneggiare!questo!genere!di!sviluppo.!
Un’applicazione!mobile!nativa!è!conveniente!nei!seguenti!casi:!
•! Advergaming)L!per!i!giochi!interattivi!una!mobile!App!nativa!è!quasi!sempre!la!scelta!
migliore.!
•! Personalizzazione!L!Se!gli!utenti!di!destinazione!utilizzeranno!l’applicazione!in!modo!
personalizzato.!
•! Maggiore)capacità)di)calcolo!e!reporting!–!una!mobile!App!nativa!è!la!scelta!giusta!
se!si!necessita!di!un’applicazione!per!gestire!ed!elaborare!i!dati!con!calcoli!complessi,!
grafici!o!relazioni!(applicazioni!per!il!banking!e!la!finanza).!
•! Funzionalità)native!L!la!mobile!App!nativa!è!molto!efficace!se!è!necessario!accedere!
a!fotocamera!o!alla!capacità!computazionale!del!dispositivo!mobile.!
•! Nessun) collegamento) richiesto! –! la! mobile! App! nativa! è! la! scelta! giusta! se! è!
necessario!fornire!accesso!offline!ai!contenuti!o!funzioni!senza!connessione.!
)
!
3.2.2!WEB0APPLICATION0
Le!Web!App!mobile!sono!delle!applicazioni!InternetLenabled!!che!possono!essere!fruite!da!
un!dispositivo!mobile!tablet!o!smartphone.!Sono!accessibili!tramite!browser!del!dispositivo!
mobile!e!non!hanno!bisogno!di!essere!scaricate!e! installate!sul!dispositivo.!L’utilizzo!della!
memoria! cache! del! telefono! permette! spesso! di! utilizzare! anche! alcune! funzionalità! in!
modalità!offline!permettendo! in! tal!modo!di! far! avvicinare!ulteriormente! le!web!app!alle!
applicazioni!mobile.! Le!web!app!utilizzano! linguaggi!di! programmazione!web! (HTML,!CSS,!
Javascript)!e!sono!accessibili!da!svariati!dispositivi:!computer!desktop,!laptop,!smartphone,!
tablet.!
I!vantaggi*possono!essere!schematizzati!come!segue:!
•! Immediatezza!L!le!web!App!sono!immediatamente!disponibili!agli!utenti!tramite!un!
browser! su! una! gamma! di! dispositivi! (iPhone,! Android,! BlackBerry,! ecc.).! Le!
applicazioni! mobile! native! invece! richiedono! che! l’utente! innanzitutto! scarichi! e!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!27!
installi! l’applicazione!da!un!mercato!prima!che! il! contenuto!o! l’applicazione!possa!
essere!utilizzata.!
•! Compatibilità!L!un!unico!sito!web!mobile!può!raggiungere!gli!utenti!attraverso!diversi!
tipi!di!dispositivi!mobili,!mentre!applicazioni!native!richiedono!una!versione!separata!
da!sviluppare!per!ogni!tipo!di!dispositivo.!Inoltre,!le!URL!delle!web!App!mobile!sono!
facilmente!integrabili!all’interno!di!altre!tecnologie!mobile!come!gli!SMS,!i!codici!QR!
e!NFC.!
•! Capacità)di)aggiornamento!–!una!web!App!è!molto!più!dinamica!di!un’applicazione!
mobile! in! termini! di! flessibilità! pura! per! aggiornare! il! contenuto.! Se! si! desidera!
modificare!la!struttura!o!il!contenuto!di!una!web!App!mobile!è!sufficiente!pubblicare!
la!modifica!una!volta!e!le!modifiche!sono!immediatamente!visibili;!l’aggiornamento!
di!un!App,!dall’altro!richiede!gli!aggiornamenti!siano!convogliati!agli!utenti,!che!poi!
devono! essere! scaricati! in! modo! da! aggiornare! l’applicazione! su! ogni! tipo! di!
dispositivo.!
•! Ricercabilità!–!le!web!App!sono!maggiormente!ricercabili!dagli!utenti!perché!le!loro!
pagine! possono! essere! visualizzate! nei! risultati! di! ricerca! ed! elencati! nel! settore!
directory!specifiche.!Gli!utenti!del!sito!web!possono!essere!inviati!automaticamente!
al! tuo! sito!mobile! quando! navigano! tramite! un! dispositivo!mobile! smartphone! o!
tablet.!Al!contrario,!la!visibilità!delle!applicazioni!mobile!è!in!gran!parte!limitata!alle!
App!store!del!produttore.!!Inoltre!le!web!App!sono!accessibili!da!tutte!le!piattaforme!
e!possono!essere!facilmente!condivise!da!più!utenti!
•! Condivisione!L!le!web!App!sono!facilmente!condivisibili!tramite!un!semplice!link!(ad!
esempio! all’interno! di! un! messaggio! di! posta! elettronica! o! di! testo,! Facebook! o!
Twitter! post)! mentre! invece! un’applicazione! nativa! non! può! essere! condivisa! in!
questo!modo.!
•! Tempo!e!costi!L!le!web!App!sono!meno!costose!!soprattutto!se!si!necessita!di!avere!
una! presenza! su! diverse! piattaforme! (che! richiede! lo! sviluppo! di! applicazioni!
multiple).!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!28!
•! Supporto!e!manutenzione!L!il!supporto!e!lo!sviluppo!evolutivo!!di!una!mobile!!App!
nativa!(aggiornamenti,!test,!problemi!di!compatibilità!e!lo!sviluppo!in!corso)!sono!più!
costosi!al!supporto!di!una!web!App.!
Principale! svantaggio! delle! web! App! è! che! per! poter! funzionare! hanno! necessità! di! una!
connessione!internet.!In!aggiunta!si!ha!che!una!webapp!non!può!interagire!più!di!tanto!con!
hardware!e!software!del!device!mobile.!Sono!più!lente!nelle!loro!performance!rispetto!alle!
App!native,!e,!visto!che!risiedono!sul!web!e!vengono!fruite!tramite!il!browser,!non!possono!
essere!distribuite!negli!store!e!sono!quindi!penalizzate!dal!punto!di!vista!di!quella!visibilità!
che!i!market!online!garantiscono.!
!
3.2.3!APP0IBRIDE0
Le!App! ibride! sono!applicazioni! che!hanno!un'architettura!che!unisce!caratteristiche!delle!
App!native!a!delle!web!App.!
Un’App!ibrida!è!tipicamente!un’App!nativa!che!ha!comunque!una!parte!web!e!che!si!adatta!
facilmente!alle!diverse!piattaforme!e!diversi!device!mobili! (diciamo!che! il! ”contenitore”!è!
un’applicazione!nativa,!che!quindi!sfrutta!le!caratteristiche!del!device!su!cui!è!installata,!e!il!
”contenuto”!è!un’applicazione!webLbased!e!quindi!si!aggiorna!tramite!Web).!
Il!vantaggio!principale!delle!applicazioni!ibride!risiede!nel!fatto!che!il!codice!del!contenuto!
viene!scritto!con!un!linguaggio!comune!a!tutti!i!device!ed!è!solo!il!contenitore!a!dover!essere!
cambiato!in!funzione!del!dispositivo!che!deve!ospitare!l'applicazione!–!questo!significa!che!
per!la!realizzazione!di!una!App!ibrida!ci!sono!tempi!e!costi!più!bassi!rispetto!a!quelli!necessari!
per!le!applicazioni!native.!
Un’App!ibrida!è!comunque!considerata!come!un’App!nativa,!quindi!può!essere!pubblicata!
sugli!store.!
Svantaggio!principale,!invece,è!che!le!App!ibride!non!sono!performanti!e!veloci!come!quelle!
native,!e!inoltre!hanno!le!stesse!difficoltà!che!hanno!le!App!native!per!accedere!agli!store!dei!
distributori!e!per!gli!aggiornamenti.!!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!29!
3.2.4!APP0NATIVE0VS0WEB0APP0VS0APP0IBRIDE0
Mentre! le! differenze! di! architettura! tra! un’applicazione! mobile! nativa! e! web! App!
probabilmente!rimarranno!rilevanti!per!un!pò!di!tempo,!a!livello!d’interfaccia!utente!e!di!user!
experience!la!differenza!tra!le!due!interfacce!tende!a!divenire!sempre!più!sfumata!perchè!
ormai!le!mobile!App!native!utilizzano!sempre!più!la!connettività!in!tempo!reale!e!le!web!App!
sono!utilizzabili!offline!sfruttando!la!cache,!arrivando!quindi!a!un!concetto!di!applicazione!
mobile!ibrida.!!
Ormai! le! web! App! stanno! tentando! di! eguagliare! le! App! mobile! native! in! materia! di!
esperienza!utente!grazie!all’evoluzione!dell’HTML5,!ma!non!raggiungono!la!stessa!efficienza!
in!materia! di! User! Interface.! Per! colmare! il! gap! con! le! App,! stanno! nascendo! framework!
specifici! che! forniscono! alle! web! Application! elementi! di! UI! standard! e! garantiscono!
compatibilità!multidevice!e!multipiattaforma!(27).!
I!fattori!da!prendere!in!considerazione!sono:!
•! Performance!dell’interfaccia.!
•! Rapidità!di!caricamento.!
•! Potenza!di!calcolo.!
•! Frequenza!d’uso.!
•! Utilizzo!di!funzionalità!native.!
•! Persistenza!dei!dati.!
•! Revenue.!
•! Integrazione!con!altre!applicazioni!native.!
•! Diffusione!capillare.!
•! Funzionamento!offline.!
•! Quantità!di!contenuti!non!residenti!online.!
•! Restrizioni!sul!contenuto.!
•! Tempo!di!rilascio!degli!aggiornamenti.!
Ad!esempio,!un’applicazione!nativa!ha!dalla!sua!parte!una!maggiore!velocità!di!esecuzione!e!
una!maggiore! integrazione! con! il! look!and! feel!della!piattaforma,!ma!non!è!direttamente!
portabile!su!altre!piattaforme.!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!30!
Una!Web!App! invece! risulta! indipendente!dalla!piattaforma!ma! richiede!una!connessione!
Internet!attiva!e!non!è! in!grado!di!accedere!al! file!system!o!ad!altre!risorse!hardware!del!
dispositivo.!
La! tipologia! di! App! ibrida! coniuga! i! vantaggi! delle! web! App! con! quelle! delle! App! native,!
consentendo!di!utilizzare!le!tecnologie!Web!per!sviluppare!l’applicazione!senza!necessità!di!
una!connessione!Internet!costante!e!avendo!accesso!alle!risorse!locali!del!dispositivo.!
Anche!in!questo!caso!ci!sono!degli!svantaggi!da!considerare:!
•! Una!minore!efficienza!nel!rendering!grafico;!
•! La!potenziale!lentezza!di!esecuzione!nell’accesso!alle!risorse!locali;!
•! Senza! particolari! accorgimenti! l’aspetto! dell’interfaccia! grafica! potrebbe! non!
risultare!abbastanza!omogeneo!con!quello!nativo!della!piattaforma.!
Diciamo!che!in!linea!di!massima!le!App!ibride!si!pongono!a!metà!strada!tra!le!App!native!e!le!
web!App!(Figura!3L1),!rappresentando!un!buon!compromesso!per!la!creazione!di!applicazioni!
mobile!multipiattaforma!con!un!supporto!nativo.!
!
!
!
!
!
!
!
!
!
!
Quanto!detto!può!essere!riportato!schematicamente!nella!tabella!comparativa!Tabella!3L1.!
!
!
Figura*3R1*:*App*a*confronto*
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!31!
Tipo*Integrazione*con*il*Device*
Tempo* e*costi* di*sviluppo*
Funzionamento*OffRLine*
Modalità* di*distribuzione*
Approvazione*dello*store*
Nativa* SI! ALTI! SI! STORE! SI!
Web*App*
LIMITATO! BASSI! NO! SOLO!WEB! SI!
Ibrida* SI! MEDIO! ALCUNE!PARTI! STORE! SI!
Tabella*3R1:*Tabella*comparativa*App*
!
3.3! 0FRAMEWORK0MULTIPIATTAFORMA0
!
Un!framework!è!un!ambiente!di!sviluppo!evoluto!su!cui!un!software!può!essere!organizzato!
e!progettato.!
Alla!base!di!un!framework!Mobile!c’è!una!serie!di!librerie!di!codice!utilizzabili!con!determinati!
linguaggi!di!programmazione!(SDK),!un!editor!di!codice!sorgente,!un!compilatore,!un!tool!di!
building! automatico! e! un! debugger! o! altri! strumenti! ideati! per! aumentare! la! velocità! di!
sviluppo!del!prodotto!finito.! !
Lo! scopo!di!questi! framework!multipiattaforma!è!duplice:! risparmiare!allo! sviluppatore! la!
riscrittura!di!un!codice!già!scritto!in!precedenza!per!compiti!simili!e!compilare!il!codice!per!i!
vari!tipi!di!smartphone.!
Le!funzionalità!di!smartphone!e!tablet!si!aggiornano!e!migliorano!a!ritmi!sostenuti.!
Un! codice! unico! dà! la! possibilità! di! intervenire! su! tutti! i! device!minimizzando! i! tempi! di!
sviluppo! di! un! applicativo! e! dando! la! possibilità! di! aggiornare,! modificare! e! ottimizzare!
un’applicazione!in!maniera!uniforme!e!univoca.!
Sono!quindi!nati!degli!strumenti!per!supportare!e!velocizzare!il!lavoro!del!programmatore.
! !
Questi!Mobile!framework!permettono!di!scrivere!il!codice!una!sola!volta!e!di!compilarlo!per!
le!varie!piattaforme,!creando!la!stessa!App!per!iOS,!Android,!Windows!Phone!ecc.!
In!conclusione,!dipende!sempre!dalla!tipologia!di!progetto!che!si!intende!realizzare,!in!base!
al! cliente! al! budget! ed! al! target! di! riferimento! dell’applicazione;! ad! esempio,! si! vuole!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!32!
distribuire!su!più!piattaforme!un’applicazione,!con! l’obiettivo!di! svilupparla!una!sola!volta!
senza!ricorrere!a!linguaggi!proprietari,!ma!a!standard!web,!contenendo!i!tempi!e!i!costi!di!
realizzazione.!! !
La!risposta!è!analizzare!meticolosamente,!in!fase!di!progettazione,!tutte!le!funzionalità!di!cui!
abbiamo!bisogno,!e! solo!con! le! idee!chiare! su!obiettivi!e! strumenti!a!nostra!disposizione,!
scegliere!il!framework*multipiattaforma!più!adatto!alle!nostre!esigenze.!
!
3.3.1!SENCHA0TOUCH0
Nella!seconda!metà!del!2010,!il!gruppo!Sencha!ha!rilasciato!Sencha!Touch,!un!progetto!open!
source! che! permette! agli! sviluppatori! di! creare!web!App! che! girano! su! tutte! le! principali!
piattaforme,!iOS,!Android,!BlackBerry!10!e!Windows!Phone,!e!che!somigliano!a!delle!vere!e!
proprie!App!native.! !
Sencha!Touch!utilizza!gli!standard!HTML5,!CSS3!e!JavaScript.!
Con!HTML5,!le!applicazioni!Sencha!Touch!possono!essere!utilizzate!anche!off!line!e,!grazie!
alla!geolocalizzazione,!è!possibile!integrare!dati!geografici!nei!propri!progetti.!
L’uso! di! CSS3! permette! di! non! avere! praticamente! nessuna! immagine! nelle! librerie! dei!
componenti:!gli!stili,!i!bordi,!i!gradienti,!le!ombre,!le!transizioni,!i!menu!e!i!pulsanti!sono!tutti!
componenti! creati! con! CSS! puro.! Tramite! JavaScript! viene! gestita! una! buona! parte! delle!
interazioni!con!l’utente!finale.!! Dalla!versione!2,!Sencha!supporta!la!creazione!di!App!native!per!iOS,!Android,!BlackBerry!10!
e!Windows!Phone* tramite! il! suo!SDK! (Sencha!Mobile!Packager! integrato!nel! tool!gratuito!
Sencha!Cmd),!che!racchiude!le!web!App!in!un!contenitore!nativo.!Il!risultato!è!che!possiamo!
distribuire!queste!App!sui!vari!store!o!anche!usare!la!fotocamera,!cosa!che!non!è!possibile!ad!
una!semplice!web!App.!
Uno!dei!problemi!nello!sviluppo!di!applicazioni!multipiattaforma!per!i!dispositivi!multimediali!
è!la!difficoltà!nell’adattarle!alle!risoluzioni!diverse!dei!vari!dispositivi.!
Sencha!Touch!utilizza!un!metodo! innovativo!per!eliminare!questo!problema,!consentendo!
agli!sviluppatori!di!modificare!la!scala!globale!delle!loro!interfacce!e!lasciando!al!framework!
l’incarico! di! adattare! i! vari! componenti! utilizzati! alle! caratteristiche! tecniche! dei! diversi!
display.!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!33!
In! questo!modo,! ad! esempio,! i! pulsanti! sono! sempre! abbastanza! grandi! da! poter! essere!
facilmente!toccati,!indipendentemente!dallo!schermo!nel!quale!sono!visualizzati.!
Sencha!Touch!offre!diverse!opportunità!nell’ambito!della!produzione!delle!applicazioni!web!
per!gli!smartphone!e!i!tablet.!
Siccome! il*framework! è! open! source,! lo! sviluppatore! ha! il! vantaggio! di! poterlo!utilizzare*
gratuitamente!e! ha! anche! l’opportunità! di!condividere! idee!e! di!partecipare! al!
miglioramento!del!prodotto.!
Dal!punto!di!vista!tecnico,!tutti!i!componenti!di!Sencha!Touch!rispondono!perfettamente!e!
rapidamente!agli!input:!Sencha!permette!animazioni!fluide!e!uno!scorrimento!continuo!che!
compete!in!tutto!e!per!tutto!con!le!tecnologie!native.!
Nel!caso!di!applicazioni!particolarmente!complesse,!l’hardware!del!dispositivo!fa!da!collo!di!
bottiglia!sulle!prestazioni!del!programma.!Questo!rende!Sencha!Touch!una!valida!soluzione!
per!la!realizzazione!di!diversi!progetti.!
!
3.3.2!TITANIUM0MOBILE0
La! piattaforma! Titanium! è! stata! introdotta! da! Appcelerator! nel! dicembre! 2008,! ma! il!
supporto!per!lo!sviluppo!di!applicazioni!Mobile!è!stato!aggiunto!nel!giugno!2009,!mentre!il!
supporto!all’iPad!soltanto!nell’aprile!2010.!
Appcelerator!Titanium!Mobile!è!un!framework!JavaScript.!Come!Sencha!Touch,!permette!agli!
sviluppatori!il!tanto!agognato!“Write!Once!Run!Anywhere”.!
Si! possono! creare!App!per! iPhone,!Android!o!BlackBerry,!ma!non!per!Windows!Phone.!Si!
compone!di!un!SdK!open!source!basato!su!JavaScript,!e!di!un!ambiente!di!sviluppo!integrato!
(IDE)!basato!su!Eclipse.!Supporta!l’autocompletamento!del!codice!e!ha!un!debugger!integrato!
basato!su!firebug.!Quando!viene!creato!un!nuovo!progetto,!viene!richiesto!quali!piattaforme!
supportare!come!target;!poi,!in!fase!di!compilazione,!si!scelgono!quali!compilare.!
Titanium! compila! il! nostro! codice! in! un’App! nativa! iOS,! Android,! MobileWeb! (HTML5),!
Blackberry!e!Tizen.!Questo!significa!che!non!racchiude!una!web!App!in!un!contenitore!nativo!
come!Sencha!Touch,!ma!compila!direttamente!una!App!nativa.*In!altre!parole,!non!è!un!web!
framework,! ma! un! compatibility! layer,! un! livello! che! sta! sopra! i! tool! che! permettono! di!
sviluppare!nativamente!le!app.! !
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!34!
Il!codice!che!scriviamo!non!ha!nulla!a!che!vedere!con!HTML,!CSS!o!sviluppo!web!in!generale,!
bensì!si!appoggia!a!un!object!model!proprietario!che!wrappa!(racchiude)!gli!oggetti!nativi!
delle!varie!piattaforme.! Il!risultato!è!che!Titanium!genera!codice!nativo,!con!un!layer!che!ne!consente!l’invocazione!
via!JavaScript.! !
Questo!framework!ci!permette,!quindi,!di!sviluppare!delle!App!che!assomigliano!in!tutto!e!
per!tutto!alle!App!native,!con!un’ottima!gestione!di!tutte!le!componenti!hardware!del!nostro!
smartphone,!dalla!fotocamera!al!GPS,!dall’accelerometro!alla!bussola.!Di!contro,!diventano!
difficilmente! implementabili! delle! nuove! funzionalità! a! progetto! finito.! Si! rischia! di! dover!
riscrivere! tutto! o,! peggio,! accorgersi! che! con! questo! framenwork! alcune! funzionalità! non!
possono! essere! create:! la! scarsa! flessibilità! è! sicuramente! uno! dei! limiti! più! difficilmente!
superabili! da! questo! tipo! di! architettura.) In! realtà,! è! possibile! realizzare! dei! wrapper! di!
funzionalità!native!ed!esportarle!tramite!JavaScript!in!Titanium.!Ovviamente,!però,!in!questo!
caso!si!ha!la!necessità!di!scrivere!codice!in!ObjectiveLC!e!o!Java!(a!seconda!della!piattaforma);!
sono!quindi! richieste!delle!conoscenze!superiori,!ma!comunque!questa!è!una! feature!che!
eleva!di!molto!il!livello!del!prodotto.!
!
3.3.3!APACHE(CORDOVA(&(STEROID(
Apache!Cordova!e!Steroids!scaturiscono!dal!knowLhow!nello!sviluppo!per!Internet.!Cordova!
è!la!versione!open!source!del!progetto!PhoneGap!e!serve!a!realizzare!le!cosiddette!App!ibride!
con! un’interfaccia! realizzata! in!modalità! web!ma! in! grado! di! interfacciarsi! con! il! sistema!
operativo!mobile!mediante!un!vasto!numero!di!API.!Steroids!nasce!per!superare!alcuni!limiti!
riscontrati! in! PhoneGap! ma! senza! “reinventare! la! ruota”,! si! basa! infatti! su! Cordova! ma!
approfondisce!il!legame!con!lo!strato!nativo.!
!
3.3.3.1!APACHE0CORDOVA0
Apache! Cordova! nasce! da! un! progetto! di! successo,! PhoneGap,* avviato! da! un’azienda!
canadese,!Nitobi!Software,!e!venduto!nel!2011!ad!Abobe.!Contestualmente!alla! trattativa!
con!Adobe,!Nitobi!ha!donato!alla!fondazione!Apache!il!progetto!che!in!un!primo!tempo!aveva!
assunto!il!nome!di!Apache)Callback!e!successivamente!il!nome!attuale!di!Apache)Cordova.!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!35!
Si!tratta!quindi!un!software!Open!Source!distribuito!con!licenza!Apache!2.0.!Allo!stato!attuale!
il!progetto!PhoneGap!portato!avanti!da!Adobe!non!è!altro!che!una!distribuzione!di!Apache)
Cordova!con!la!possibilità!di!usufruire!di!servizi!aggiuntivi.!!
L’architettura!di!Apache!Cordova!si!presenta!come!una!sorta!di!contenitore!di!applicazione!
Web!eseguita!localmente.!L’interfaccia!grafica!di!un’applicazione!Cordova!è!infatti!costituita!
da!una!Web!view!che!occupa!l’intero!schermo!del!dispositivo!e!all’interno!della!quale!viene!
visualizzato!l’HTML!ed!il!CSS!ed!eseguito!il!codice!JavaScript.!Tramite!JavaScript!è!possibile!
accedere!ad!un!ricco!insieme!di!API!che!interfacciano!l’applicazione!Web!con!le!funzionalità!
della!piattaforma!ospite.!!
Pertanto!Web!view!e!API!sono!le!componenti!dell’applicazione!che!dipendono!dalla!specifica!
piattaforma! mobile.! E! sono! appunto! queste! componenti! che! il! framework! mette! a!
disposizione! dello! sviluppatore,! consentedogli! di! concentrarsi! sul! codice! standard!
indipendente!dalla!piattaforma.!
Cordova! infatti! implementa! lo! stesso! insieme! di! API! sulle! diverse! piattaforme! mobile!
supportate! creando! un! livello! software! standard! a! cui! si! possono! interfacciare! le! nostre!
applicazioni.! Per! chiarire! meglio! il! concetto,! è! come! se!Apache) Cordova!mettesse! a!
disposizione! dello! sviluppatore! delle! app! vuote,! una! per! ciascuna! piattaforma!mobile,! da!
riempire!con!codice!HTML,!CSS!e!JavaScript.!Una!volta!riempite!avremo!un’applicazione!per!
ciascuna!piattaforma!che!condividono!la!stessa!base!di!codice!HTML,!CSS!e!JavaScript.!
Allo! stato!attuale!Apache!Cordova!supporta! le! seguenti! piattaforme!mobile:!Android,! iOS,!
Blackberry,!Bada,!Tizen!e!Windows!Phone.!Questo!dà!un’idea!della!platea!di!utilizzatori!di!cui!
potrebbe!usufruire!la!nostra!App!e!del!lavoro!che!sta!dietro!al!progetto.!
Apache!Cordova!è!un!framework!multipiattaforma!ma!i!requisiti!software!variano!in!base!alla!
piattaforma!mobile!di!riferimento.!
Ad! esempio,! per! sviluppare! un’applicazione! e! compilarla! per! Android! possiamo! usare!
indifferentemente!un!PC!Linux,!Windows!o!un!Mac,!mentre!possiamo!sviluppare!un’app!iOS!
solo!su!Mac.!Questo!perché!per!ciascuna!piattaforma!mobile!di!riferimento!dobbiamo!avere!
installato!il!relativo!SDK!di!sviluppo.!
Prima! di! iniziare! quindi! occorre! definire! la! piattaforma! o! le! piattaforme! mobile! su! cui!
vogliamo!che!venga!eseguita,!quindi!scaricare!ed!installare!i!relativi!SDK.!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!36!
In!pratica,!per!realizzare!un’App!per!Android,!iOS!e!BlackBerry!sul!nostro!PC!devono!essere!
installati!Android!SDK,!Xcode!o!iOS!SDK!e!BlackBerry!WebWorks!framework.!
!
3.3.3.2!STEROID0
Steroids!è!uno!strumento!che!consente!di!creare!applicazioni!mobile!crossLplatform!con!quel!
tocco!di!“nativo”!mancante.!Lo!fa!mettendo!a!disposizione!una!serie!di!oggetti!e!metodi!che!
permettono!di!gestire!alcuni!elementi!dell’interfaccia!utente!nativamente,!con!la!promessa!
di!performance!migliori!e!applicazioni!più!fluide.!
Questo!lato!più!di!basso!livello!riguarda!essenzialmente!il!sistema!di!Views,!lo!stack!e!tutto!
ciò!che!vi!è!collegato:!per!il!resto,!infatti,!Steroids!si!basa!comunque!su!PhoneGap.!
!
Figura*3R2*:*Apache*Cordova*
!
Lo! sviluppo! avviene! in! locale:! scriviamo! il! codice! HTML,! CSS! e! Javascript! (Figura! 3L2)!
richiamando,!dove!opportuno,!le!funzioni!fornite!da!PhoneGap!o!di!Steroids.!
Anche!se!ogni!soluzione!va!valutata!come!caso!specifico,!ecco!gli!scenari!di!utilizzo!in!cui!uno!
strumento!come!questo!sembra!particolarmente!indicato:!
•! demo!o!un!prototipi!da! realizzare! in! tempi!brevi,! senza! funzionalità!complesse!da!
implementare;!
•! realizzazione!di!applicazioni!semplici,!magari!di!supporto!ad!un!servizio!Web;!
•! creazione!di!applicazioni!quando!non!si!ha!il!tempo!giusto!per!imparare!a!lavorare!in!
ambiente!nativo!da!zero;!
•! scarsa!necessità!di!un’interfaccia!dal!look’n'feel!nativo.!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!37!
3.3.4!XAMARIN0
Xamarin!offre!vantaggi!simili,!consentendo!l'uso!del!linguaggio!C#!e!di!.NET*per!lo!sviluppo!di!
applicazioni!Android,!iOS!e!Windows!Phone,!con!in!più!la!possibilità!di!poter!utilizzare!tutte!
le! caratteristiche! native,! sia! per! quanto! riguarda! l'interfaccia! che! per! le! peculiarità,! delle!
diverse!piattaforme.!
!
3.3.4.1!XAMARIN0PER0ANDROID0
La! piattaforma! Android! è,! come! molti! sanno,! assai! aperta! alle! modifiche! e! molto! più!
permissiva!di!quella!Apple.!Quindi!su!Android!viene!installato!un!Mono!runtime!che!si!occupa!
di! eseguire!.NET!API!sulle!quali! applicazione!è!basata.! Lo! sviluppo!nativo,! che! consente!di!
utilizzare! C#! per! chiamare! tutte! le! API! di! Android,! si! ottiene! mediante! il!binding!delle!
suddette! API,! consentendo! uno! scambio! bidirezionale! tra! il! Mono! runtime! e! il!Dalvik!
runtime!di!Android.!La!Figura!3L3!illustra!meglio!questo!concetto.!
!
!
3.3.4.2!XAMARIN0PER0IPHONE0
Per!quanto!riguarda!la!piattaforma!iPhone,!le!restrizioni!imposte!da!iOS!non!consentono!l'uso!
di!un!sistema!basato!su!un!runtime!e,!intoltre,!richiedono!l'uso!del!compilatore!contenuto!
nel! sistema! di! sviluppo! di! Apple! stessa,! ovvero! di! XCode,! per! la! compilazione! preventiva!
("head! of! time")! dell'applicazione.! Per! tale! motivo,! l'applicazione! incorpora! al! suo!
interno!tutto! il! necessario! al! suo! funzionamento,! incluse! le! porzioni! del! .NET! Framework!
Figura*3R3*:*:*Xamarin*per*Android*
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!38!
necessarie,! compilate! in!nativo.!Anche! in!questo!caso!è!consentito! l'uso!via!C#!di! tutte! le!
librerie!di!sistema,!attraverso!il!meccanismo!di!binding,!come!meglio!illustrato!nella!Figura!
3L4.!
!
Figura*3R4*:*Xamarin*per*iPhone*
0
3.3.4.3!XAMARIN0PER0WINDOWS0PHONE0
Qui!la!strada!è!tutta!in!discesa,!visto!che!C#!e!.NET!sono!la!tecnologia!di!sviluppo!predefinita,!
ma!c'è!comunque!una!precisazione!da!fare.!Con!Windows!Phone!8.1,!possiamo!realizzare!sia!
le! nuove! applicazioni! basate! su!WinRT,! sia! utilizzare!Silverlight.! Al! momento! Xamarin!
supporta!esclusivamente!Silverlight,!anche!se,!in!più!occasioni,!l'azienda!ha!confermato!che!
un!porting!di!WinRT!è!in!corso!di!sviluppo!(e!quindi!avremo!la!possibilità!di!realizzare!anche!
le!Universal!app).!
!
3.3.4.4!SVILUPPO0NATIVO0
Come!si!è!già!detto,!la!caratteristica!che!rende!unico!Xamarin!è!la!possibilità!di!utilizzare!tutte!
le!API*delle!piattaforme!Android,!iOS!e!Windows!Phone.!Inoltre,!Xamarin!ha!anche!un'ottima!
storia! dal! punto! di! vista! dell'adeguamento! del! proprio! sistema! alle! nuove! versioni! delle!
piattaforme!di!riferimento,!come!ad!esempio!iOS!8!o!Android!5.0!Lollipop,!che!tipicamente!
avviene!nello! stesso! giorno! del! rilascio.! La! ciliegina! sulla! torta! è! poi! la! possibilità! di!
creare!custom!binding!a!librerie!di!terze!parti,!scritte!in!Java,!ObjectiveLC!e!C++.!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!39!
3.3.5!FRAMEWORK(A(CONFRONTO(
Sulla! base! di! quanto! detto! precedentemente! è! stato! possibile! tabellare! e! comparare! le!
caratteristiche!principali!dei!diversi!framework!crossLplatform!(Tabella!3L2!e!Tabella!3L3).!!
!
* Sencha*Touch*Titanium*Mobile*
Apache*Cordova*/PhoneGap*
Xamarin*
Piattaforme*supportate*
iOs,!Android,!Blackberry!10,!Window!Phone,!Kindle,!Tizen!
iOs,!Android,!Blackberry,!MobileWeb,!Tizen!
Android,!iOS,!Blackberry,!Bada,!Tizen!e!Windows!Phone!
Android,!iOs,!!Window!Phone!
IDE*di*sviluppo*
Sencha!Mobile!Package!(SDK)!,Sencha!Cmd!
Appcelerator!Titanium!Studio!
Plugin!Eclipse,!Visual!studio,!IntellJ!e!NetBeans!
Visual!Studio,!Xamarin!Studio!
Peculiarità*Hardware*
Apple:!iOs!6,7,8!Android:!da!2.3!Windows!Phone:!8.1!e!Microsoft!Surface!Pro!e!NT!Blackerry!10!Tizen:!Dark!e!Light!
Per!l’ultima!versione!di!Titanium:!Android:!dalla!versione!2.3!Blackerry:!dalla!versione!10!Apple:!dalla!versione!7.1!
iOS!:!min.!5.x!Android!:!2.3.x!(Gingerbread,!dall'API!di!livello!10)!e!4.x.!Le!versioni!precedenti!alla!10!,!e!la!3.x!(api!11L13)!falliscono!nel!5%!dei!casi!Amazon!Fire!OS!:!API!level!19!BlackBerry!10!!Windows!8.1!
Android!development:!VS2010+,!e!Android!4+!iOS!development:!VS2010+,!Mac,!iPhone!con!iOS!8!Windows!Phone!development:!VS2010+,!Win!8!x64,!inoltre!requisiti!specifici!per!i!PC!per!avere!l’emulatore!e!smartphone!con!WP!8+!!
Community*Attiva!(Più!di!20!topic!solo!a!gennaio)!
Attiva!(è!un!blog,!nel!quale!è!possibile!anche!vedersi!per!una!pizza!ad!esempio)!
Attiva!(quando!ci!sono!dei!problemi!è!possibile!aprire!un!ticket!sul!portale!sviluppatori!di!SteroidsJS).!
Attiva!(molto.!È!un!blog!sul!quale!qualsiasi!utente!registrato!può!scrivere).!
Tabella*3R2*:*Tabella*comparativa*Framework*
!
!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!40!
* Sencha*Touch*Titanium*Mobile*
Apache*Cordova*/PhoneGap*
Xamarin*
Pro*
App!utilizzabili!anche!offline.!Facile!adattamento!della!risoluzione.!
Ottima!gestione!componenti!hardware!dello!smartphone.!Sviluppo!app!che!assomigliano!in!tutto!per!tutto!alle!app!native.!
È!basato!su!PhoneGap,!quindi!supporta!una!grande!quantità!di!sensori!e!feature!di!molti!dispositivi!in!circolazione;!è!possibile!usufruire!di!un!servizio!di!Push!Notifications!(con!un!adeguato!setup)!per!le!piattaforme!Android!e!iOS;!
!
Contro*
l'API!utilizza!una!libreria!JavaScript!molto!grande!(120kb)!il!markLup!html!della!pagina!è!creato!dal!lato!client!del!framework!Sencha!quando!viene!caricata!la!pagina!
Difficoltà!ad!implementare!nuove!funzionalità!a!progetto!finito.!Scarsa!flessibilità!
Non!è!possibile!lavorare!su!processi!separati!da!quello!principale;!La!compilazione!su!cloud!può!rivelarsi!un’arma!a!doppio!taglio;!!
Limitata!condivisione!del!codice!UI!oltre!iOS!e!Android.!Limitata!condivisione!di!codice!esterno!di!Xamarin!!
Tabella*3R3*:*Tabella*comparativa*framework*R*pro*e*contro*
!
In!base!alla!descrizione!generale!dei!framework!open!source!per!lo!sviluppo!crossLplatform!
presi! in!esame!e,!successivamente,! la! loro!comparazione!a!livello!più!tecnico!si!è!scelto!di!
utilizzare! Apache! Cordova! per! realizzare! un’applicazione! di! domotica! multipiattaforma!
indirizzata!a!persone!non!vedenti!o!ipovedenti,!portato!avanti!in!questo!lavoro!di!tesi.!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!41!
3.3.6!APP0REALIZZATE0CON0FRAMEWORK0CROSSEPLATFORM0Di!seguito!sarà! fatta!una!veloce!panoramica!sulle!App!Mobile!sviluppate!con! i! framework!
precedentemente! menzionati.! Tale! panoramica! serve! per! avvalorare! lo! sviluppo! mobile!
crossLplatform;! infatti! è! possibile! progettare! applicazioni! abbastanza! complesse! che! non!
hanno!nulla!da!invidiare!alle!app!native.!
1)! SENCHA*TOUCH:*Kiva*Touch*
Kiva!touch!è!l’interfaccia!mobile,!sviluppata!da!Sencha,!per!kiva.org)(9)!il!cui!scopo!è!quello!
di! mettere! in! contatto! delle! persone,! dando! la! possibilità! di! inserire! delle! preferenze! di!
ricerca,!come!mostrato!nella!Figura!3L5.))
!
!
Come!si!legge!dal!sito!di!kiva:)“!We!are!a!nonLprofit!organization!with!a!mission!to!connect!
people! through! lending! to! alleviate! poverty.! Leveraging! the! internet! and! a! worldwide!
network!of!microfinance!institutions,!Kiva!lets!individuals!lend!as!little!as!$25!to!help!create!
opportunity!around!the!world.”.!
2)! Appcelerator:*GameStop*
Gamestop!(12)è!un!applicazione!per!smartphone!disponibile!sia!sullo!Store!di!Google!(13)che!
su!quello!Apple!(14).!
Figura*3R5*:*Kiva*Touch*
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!42!
!
!
L'applicazione! GameStop! permette! di! sfogliare! il! catalogo! GameStop.! Dà! la! possibilità!
controllare!rapidamente!l'inventario!del!negozio!locale!e!poter!effettuare!richiesta!di!tener!
da!parte!il!prodotto!per!un!ritiro!futuro.!Da!la!possibilità!di!completare!l'acquisto!onLline,!e!
consegna! mediante! spedizione.! E’! un! applicazione! di! compravendita,! infatti! GameStop!
compra!giochi,!prodotti!di!elettronica!e!altro!ancora!effettuando!pagamenti!sia!in!contanti!
che!su!carta!di!credito.!Tramite!l’applicazione!è!possibile!trovare!rapidamente!le!informazioni!
sui!punti!vendita!autorizzati,!incluso!le!sedi!più!vicine,!gli!orari!di!apertura,!numeri!di!telefono!
e!indicazioni!stradali!(Figura!3L6).!
!
3)! APACHE*CORDOVA:*HealthTap*
HealthTap!è!un!app!mobile!disponibile!per!Android!(15)!e!iPhone!(16)scaricabile!dai!rispettivi!
store.!
HealthTap!è!stata!selezionata!come!una!delle!migliori!10!applicazioni!di!salute!e!benessere!
da!CBS,!CNN,!e!ABC!e!citata!in!molte!riviste!come!il!New!York!Times,!Wall!Street!Journal,!NBC,!
TIME,!Financial!Times,!Washington!Post,!Forbes,!Bloomberg,!e!tanti!altri.!
Tra!le!sue!funzionalità!figurano:!
Figura*3R6:*GameStop*
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!43!
!! risposte!gratuite,!veloci!e!professionali!da!più!di!32000!medici!tra!i!migliori!degli!Stati!
Uniti! su! sintomi,! patologie,! farmaci! o! altri! argomenti! di! salute! e! benessere! in!
generale.!Tutto!questo!comodamente!su!smartphone!o!tablet.!
!! Ogni!giorno,!si!ricevono!gratuitamente!consigli!utili!su!salute!e!benessere!scritti!dai!
migliori!medici.!
!! Accesso!a!informazioni!mediche!attuali!e!verificate.!
!! Salvataggio! d’informazioni! mediche! e! condivisibili! in! modo! sicuro! con! il! proprio!
medico.!
Alcune!di!queste!sono!riportate!nella!figura!Figura!3L7.!
!
!
Figura*3R7*:*HealtTap*
!
4)! XAMARIN:*ACSI*Campsites*Europe*
L'ACSI!EuropeLapp!permette!di!trovare!rapidamente!e!facilmente!un!campeggio!(Figura!3L8).!
Ciò! è! possibile! anche! senza! accesso! a! internet.! L'applicazione! permette! di! consultare!
informazioni!su!oltre!8500!campeggi!certificati!in!32!paesi!europei.!Infatti,!tutti!i!campeggi!
sono!annualmente!controllati!da!specialisti!ACSI.!
Il! database! completo! è! stato! diviso! in! nove! sezioni! pratiche,! raggruppando! alcuni! paesi!
insieme.!Ogni!sezione!include!mappe!dettagliate!di!tutte!le!zone!del!camping.!L’utente!paga!
solo!la!sezione!che!desidera!utilizzare.!
Come!si!legge!dallo!Store!(sia!Google!(17)!che!Apple!(18))!vantaggi!di!ACSI!sono:!
!! Accessibile! senza! connessione! internet.! Tutte! le! mappe,! informazioni! e! foto! del!
campeggio!sono!sempre!disponibili!!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!44!
!! Filtri!di!ricerca!intelligenti.!È!possibile!effettuare!ricerche!filtrando!oltre!250!servizi,!
tariffe,!periodi!di!soggiorno,!campeggi!sosta!e!comparare!due!campeggi!differenti.!
!! L'applicazione!ricorda!i!filtri,!a!meno!che!non!si!scelga!di!eliminarli.!
!! È!possibile!cercare!per!paese,!regione,!località!o!il!nome!del!campeggio.!Il!database!
ha!più!di!500.000!nomi!di!luoghi!e!regioni.!
!! ….ecc.!
!
!
!
3.4! APPS0MOBILE0CROSSEPLATFORM0SVILUPPATE0PER0NON0VEDENTI0
!
Sempre!nel!contesto!crossLplatform,!sono!state!analizzate!le!principali!!applicazioni!mobile!
per!non!vedenti!al!fine!di!analizzare!lo!stato!dell’arte,!analizzare!le!interfacce!utenti!utilizzate!
e!le!tecnologie.!Tra!queste!figurano:!Be!My!Eyes!(19)!e!Blio!(20)eBooks.!
!
Figura*3R8*:*ACSI*Campsites*Europe*
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!45!
3.4.1!BE0MY0EYES0
Be!My!Eyes!è!un!applicazione!per!i!non!vedenti!che!consente!loro!di!farsi!aiutare!da!persone!
che!“offrono”!la!loro!vista.!
L’obiettivo!principale!dell’APP!è!quello!di!risolvere!problemi!“cruciali”!come!leggere!la!data!
di!scadenza!di!un!prodotto,!vedere!i!soggetti!di!una!fotografia,!vedere!indicazioni!stradali,!la!
data!di!scadenza!ed!il!contenuto!di!un!barattolo,!oppure!richiedere!la!descrizione!di!ciò!che!
sta!accadendo!davanti!inviando!un!piccolo!filmato!sempre!attraverso!lo!smartphone.!
La!cosa!interessante,!oltre!all’importanza!del!progetto,!è!che,!non!solo!l’dea,!ma!anche!la!sua!
realizzazione!arriva!da!una!persona!non!vedente,!!Hans!Jørgen!Wiberg.!
Il! sistema! sfrutta! il! VoiceOver,! integrandolo! nell’applicativo,! e! permette! ai! volontari! che!
offrono! aiuto! attraverso! un! video! in! diretta! di! prestare! la! loro! vista! connettendosi! con! il!
dispositivo!della!persona!non!vedente,!sostituendosi!agli!occhi!dell’utente!non!vedente.!Da!
qui!il!nome!“Be!My!Eyes”,!ovvero!“sii!i!miei!occhi”.!
!
3.4.2!BLIO0eBOOKS0Blio!è!un'applicazione!multipiattaforma!(può!essere!usata!sui!tablet!come!sugli!smarphone)!
ideata!principalmente!per!fornire,!al! lettore!digitale,!un'esperienza!di! lettura!multimediale!
con!un'interfaccia!il!più!possibile!vicina!ai!volumi!cartacei.!I!libri!letti!attraverso!Blio!hanno!gli!
stessi!colori,!le!stesse!copertine!e!la!stessa!impaginazione!dei!corrispettivi!“analogici”.!
In!più,!permettono!di!fare!annotazioni!(via!voce!o!testo),!collegare!immagini,!video,!siti!web!
e! fare!ricerche! Internet!nel! bel! mezzo! della! lettura.! A! questo! si! aggiunge! una!
funzionalità!text>to>speech!pensata! appositamente! per! persone! con! problemi! di! vista:! è!
possibile! scegliere! tra! due! tipi! diversi! di! voce! che!“leggeranno”! il! testo!dell'eLbook!
selezionato.!Non!bastasse,!a!differenza!dell'oceano!di!costose!applicazioni!che! intasano! la!
Rete,!Blio!si!può!scaricare!gratuitamente.!
!
!
!
3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!46!
3.5! CONCLUSIONI0!
In!questo!capitolo!sono!stati!analizzati! i!principali! framework!open!source!per! lo!sviluppo!
multipiattaforma! di! applicazioni! mobile.! Tale! panoramica! è! stata! necessaria! al! fine! di!
individuare!il!framework!più!consono!alle!esigenze!di!questo!lavoro!di!tesi.!!
Partendo!dalla!definizione!di!“cross>platform”!sono!stati!eseguiti!i!seguenti!passi:!
•! È!stato!fatto!un!focus)sui!principali!aspetti!inerenti!lo!sviluppo!di!applicazioni!mobili!
multipiattaforma.!
•! È! stata! fatta! una! distinzioni! delle! tre! principali! tipologie! di! applicazioni! mobili! (!
ibride,!native!,!web!app).!
•! È!stata!fatta!una!panoramica!su!alcune!app)mobile)sviluppate!utilizzando!alcuni!dei!
Framework!menzionati,! tale!excursus!viene! fatto!al! fine!di!validare! lo! sviluppo!di!
applicazioni!mobile!in!maniera!crossLplatform.!!
•! È! stata! fatta! una! breve! descrizione! di! due! App! mobile! crossLplatform! per! non!
vedenti.!
In!seguito!a!quanto!detto!di!è!deciso!che! lo!sviluppo! ibrido,! fosse!quello!più!consono!per!
l’applicazione!di!domotica!che!si!intende!realizzare.!!
Il!framework!che!meglio!rispecchia!le!esigenze!di!questo!lavoro!è!Apache!Cordova!sia!per!i!
linguaggi!di!programmazione!da!esso!supportati! (CSS3,!HTML5,! Javascript),! che!per! la!sua!
flessibilità!all’ambiente!di!sviluppo!(!es:!Eclipse,!Visual!Studio,!IntellJ,!Netbeans).!
!
! !
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!47!
CAPITOLO040!
4! SISTEMA0 MOBILE0 A0 SUPPORTO0 DEI0 NON0VEDENTI0
!
In!questo!capitolo!viene!presentata!una!descrizione!dettagliata!del!processo!di!analisi!che!ha!
portato! alla! realizzazione! dell’applicazione! SpokenHouse.! Viene! descritto! il! processo! di!
raccolta! dei! requisiti,! una! panoramica! alcuni! casi! d’uso! più! significativi,! l’architettura! del!
sistema!in!cui!si!colloca!l’applicazione.!Infine!viene!fatta!una!panoramica!sulle!tecnologie!che!
sono!state!utilizzate!durante!l’implementazione.!!
!
4.1! SCOPO0DELL’APPLICAZIONE0
!
Sulla!base!di!quanto!detto!nei!capitoli!precedenti!(!1,!2!e!3!)!e!sulla!base!del!lavoro!svolto!
nella!tesi!di!Marco!di!Brino,!si!è!giunti!alla!conclusione!che!il!digital!divide!nell’ambito!della!
domotica!è!ancora!molto!accentuato.!!
Il! sistema! denominato! SpokenHouse,! quindi,! nasce! con! l’idea! di! sviluppare! tutto! quanto!
concerne! l’interfacciamento! del! target! utente! con! il! sistema! domotico;! a! fonte! di! ciò! il!
sistema!prevede! l’implementazione!di!un’applicazione!multiLpiattaforma!mobile! (Android,!
Windows! Phone,! iOs,! ecc…)! in! grado! di! interfacciarsi! con! il! framework! domotico,! ovvero!
FreeDomotic!(sulla!base!delle!ricerche!effettuate!nel! lavoro!di!Marco!di!Brino),!che!si! farà!
carico!di!instradare!le!comunicazioni!tra!l’applicazione!ed!il!sistema!domotico.!!L’applicazione!
di! SpokenHouse! deve! essere! munita! di! un’interfaccia! funzionale! L! facilmente! fruibile! da!
persone!non!vedenti,! ipovedenti!e/o!non!udenti!L! !grazie!alla!quale!è!possibile!ottenere!le!
informazioni!d’interesse,!gestire!gli!apparecchi!elettronici!presenti!nell’abitazione!e!garantire!
sicurezza,!consistenza!e!persistenza!dei!dati!dell’utente.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!48!
4.1.1!ACCESSIBILITA’0
L’interazione! con! i! dispositivi! mobili! non! è! univoca,! ma! può! variare! secondo! il! profilo!
d’utente,! il! dispositivo! o! il! contesto! nel! quale! si! opera.! Particolare! importanza! assume!
quest'aspetto!per!le!persone!con!limitazioni!di!disabilità.!Essi!devono!interagire!con!il!proprio!
dispositivo!mobile! usando!modalità! alternative! che! si! adattino! alle! loro! esigenze.! Questi!
utenti!possono!avere!limitazioni!visive,!uditive,!fisiche!o!legate!all'età,!che!impediscono!loro!
l’accesso!quando!questo!è!fornito!solo!in!modalità!predefinite,!quali!quella!grafica.!!
Ogni!sistema!operativo!dispone!di!alcune!funzionalità!integrate,!per!garantire!l'accessibilità!
che! permettono! di! personalizzare! il! proprio! dispositivo! e! avere! funzioni! che! rendono! più!
semplice!vedere,!ascoltare!e!usare!al!meglio!il!dispositivo.!!
Le!funzionalità!rivolte!principalmente!ad!un!utenza!ipovedente!sono:!
•! Diverse!dimensioni!del!testo.!
•! Scelta!di!temi!ad!alto!contrasto:!modificano!lo!sfondo!e!le!scritte!facendole!diventare!
rispettivamente!nero!e!bianche.!
•! Ingrandimento!dello!schermo:!consente!di! ingrandire! la!porzione!dello!schermo!in!
cui!si!trova!il!cursore.!!
Altra!funzionalità!importante!per!l’accessibilità!sono!gli!Screen!Reader,!di!cui!si!è!discorso!nei!
paragrafi!precedenti.!
!
4.1.2!L’INTERFACCIA0
L’interfaccia!dell'applicazione!è!realizzata!in!modo!tale!da!ottenere!un!prodotto!semplice!e!
facilmente! utilizzabile.! A! causa! della! vasta! gamma! della! sensibilità! visiva! e/o! uditiva,!
un'interfaccia!ben!progettata!dovrebbe!supporre!che!l'utente!finale!potrebbe!avere!difficoltà!
visive!ed!uditive,!ed!allo!stesso!tempo!dovrebbe!garantire!l'utilizzo!dell'interfaccia!anche!ad!
una!persona!con!limitazione!di!disabilità!di!almeno!uno!dei!due!sensi!in!questione.!
sulla! base! degli! studi! fatti! da! Informatici! Senza! Frontiere! nel! progetto! Strillone! (10)! (11),!
L’idea! di! base! pensata! per! l’interfaccia! è! di! dividere! lo! schermo! in! quattro! aree! uguali,!
corrispondenti! agli! angoli! del! dispositivo,! che! è! stato! tagliato! virtualmente! in! due! (sia!
verticalmente!che!orizzontalmente).! !
Come! in! Strillone,! anche! in! SpokenHouse! gli! utenti! possono! esplorare! le! varie! aree!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!49!
dell'interfaccia! semplicemente! spostando! il! dito! sullo! schermo! e! cliccando! su! un'area!
specifica!per!confermare!l’opzione.!
In!aggiunta!a!quanto!detto!sull’interfaccia!a!quattro!angoli,!in!quella!di!SpokenHouse!sono!
state! fatte! delle! aggiunte! in!modo!da! rendere! accessibile! l’utilizzo!della! stessa! anche! agli!
ipovedenti!(muniti!anche!di!daltonismo).!
Sulla!base!delle!ricerche!fatte,!attinenti!agli!strumenti!di!supporto!ai!non!vedenti!e!ipovedenti!
(Screen! Reader,Videoingranditori,! ecc…),! ed! in! seguito! ad! un’intervista! tenutasi! presso! la!
sede!dell’Unione!Ciechi!di!Benevento!con!alcuni!membri!dell’associazione,!si!sono!aggiunte!
alcune!caratteristiche!sia!all’interfaccia!grafica!che!al!“Tutorial”!che!guida!l’utente!durante!
l’utilizzo!dell’applicazione.!
Per!quanto!riguarda!l’interfaccia!grafica!si!è!dato!la!possibilità!all’utente!di!poter!modificare!
sia!il!tema!dell’applicazione!che!la!grandezza!del!font!del!tema,!in!base!alle!capacità!visive!
soggettive!dell’ipovedente.!
Per!quanto! riguarda! i! font!da!utilizzare,!per!agevolare!un!utente! ipovedente!è!preferibile!
scegliere! caratteri! molto! ben! disegnati,! che! non! siano! troppo! sottili! (light)! né! troppo!
compressi!(condensed):!per!riferirsi!ai!font!più!diffusi,!sono!in!particolare!molto!bene!leggibili!
Arial,!Verdana,!Century!Gothic,!Tahoma,!BookmanOld!Style!(e!tutti!gli!altri!che!è!possibile!
definire!simili)per)aspetto).!Da!evitare!accuratamente!sono! i! font!compressi! (per!esempio,!
Impact,!Juice,!Matisse,!Rockwell!e!simili),!quelli!stilizzati!(per!esempio,!Matura,!Snap,!Matisse!
ITC,!Lucida!Handwriting!e!simili),!mentre! i! classici!Courier!New!e!Times!New!Roman!sono!
considerati!un!po'!troppo!sottili.!Per!tutti!i!font,!nel!limite!del!possibile!si!dovrebbero!evitare!
grafie!in!corsivo,!mentre!il!bold!o!grassetto!è!sempre!assai!indicato!e!gradito!da!un!utente!
ipovedente!(7).!
In! seguito! a! tali! considerazioni,! si! è! scelto! come! font! “Arial”! in! quanto! rispecchia! le!
caratteristiche!sopra!menzionate.!
Le!combinazioni!di!colori!utilizzate!sono!le!stesse!che!si!possono!impostare!durante!l’utilizzo!
di!un!videoingranditore.!Caratteristica!principale!di!tali!combinazioni!è!che!la!coppia!di!colori!
utilizzata!è!ad!elevato!contrasto;!queste!sono!riportate!nella!Tabella!4L1.!Un!esempio!di!tale!
combinazione!di!colori!è!riportato!nella!Figura!4L1.!
!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!50!
Carattere! Bianco! Giallo! Giallo! Giallo! Blu! Verde!
Base! Nero* Nero* Blu* Rosso* Rosso* Bianco*
Tabella*4R1*:*Colori*videoingrandotore*
!
Nella!sezione!impostazioni!dell’applicazione!l’utente!potrà!scegliere!e!rendere!persistente!la!
combinazione!che!più!lo!agevola!nella!lettura,!altresì!modificare!la!grandezza!dei!caratteri:!
essi!varieranno!dai!“13px”!ai!“29px”,!che!di!default!saranno!settati!a!“23px”.!
Per!quanto!riguarda!il!“tutorial”!che!guida!l’utente!durante!la!navigazione!del!menù,!al!fine!
di!compiere!l’azione!da!lui!desiderata,!le!informazioni!fornite!tramite!la!sintesi!vocale!sono!
state!ampliate,!sempre!su!consiglio!dei!membri!dell’Unione!Ciechi.!!
!
!
!
!
!
!
!
!
!
!
4.2! ANALISI0DEI0REQUISITI0
!
L’! applicazione! di! SpokenHouse! che! si! intende! sviluppare! deve! soddisfare! determinati!
requisiti,! funzionali! e! non;! essi! sono! esplicitati! attraverso! gli! scenari! d’utilizzo.! Essi! sono!
elencati!di!seguito,!con!le!relative!operazioni!rese!disponibili!dall’applicazione!all’utente:!
•! Configurazione!dell’applicazione.!
•! Accensione/spegnimento!della!luce!in!uno!degli!ambienti!domestici.!
Figura*4R1*:*Tema*interfaccia*SpokenHouse:*Base*blu*,*carattere*giallo*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!51!
•! Apertura/chiusura!della!porta!in!uno!dei!locali!domestici.!
•! Accensione/spegnimento!delle!luci!nella!zona!notte/giorno!della!casa.!
•! Attivazione!sul!device!della!vibrazione,!utilizzata!per!codificare!eventuali!notifiche!
audio!in!linguaggio!Morse.!
•! Accensione/spegnimento!e!regolazione!del!condizionatore.!
•! Impostazione!della!temperatura!predefinita!del!termostato.!
•! Attivazione/disattivazione!dei!dispositivi!di!riscaldamento!nell’ambiente!domestico.!
•! Apertura/chiusura!della!porta!del!garage.!
•! Apertura/chiusura!del!cancello!automatico.!
•! Controllo!elettrodomestici!(es:!lavastoviglie,!lavatrice,!forno,!etc.).!
•! Controllo!dell’allarme.!
•! Controllo!real!time!delle!videocamere!di!sorveglianza.!
•! Apertura/Chiusura!cancello.!
•! Controllo!delle!tapparelle.!
•! Scelta!tema!dell’interfaccia.!
•! Attivazione/disattivazione!del!Text!To!Speech!in!base!alla!attivazione/disattivazione!
della!modalità!Morse.!
•! Aggiunta!di!azioni!programmate!(es.!all’apertura!del!cancello!segue:!accensione!luci!
garage,! accensione! luci! ingresso,! apertura! porta! garage,! accensione! dispositivi!
riscaldamento...).!
•! Modifica!grandezza!dei!caratteri.!
•! Attivazione/disattivazione!tutorial!di!navigazione.!
•! Verifica!dispositivi!accesi!all’interno!dell’ambiente!domestico.!
!
La!Figura!4L2!mostra!i!suddetti!requisiti!!e!le!loro!dipendenze.!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!52!
!
Figura*4R2*:*Use*case*diagramm*
!
4.2.1!ATTORI0DEL0SISTEMA0
A!monte!della!definizione!dei!casi!d’uso,!di!seguito!saranno!individuati,!in!modo!opportuno,!
tutti!gli!attori!del!sistema.!!
!Gli!attori!sono!i!soggetti!esterni!al!sistema!che!interagiscono!con!esso,!tramite!scambio!di!
messaggi!(richieste,!comunicazioni,!risposte).!!In!altre!parole,!gli!attori!modellano!i!ruoli!che!
persone,!sistemi!software!e!device!possono!assumere!nel!momento!in!cui!prendono!parte!
ad! un! determinato! caso! d’uso.! Il! sistema,! invece,! è! l’entità! i! cui! utilizzi! vengono! descritti!
dall’insieme!dei!casi!d’uso.!Più!precisamente,!un!insieme!completo!di!casi!d’uso!descrive!in!
modo!completo!gli!utilizzi!del!sistema!dall’esterno,!ossia!dal!punto!di!vista!degli!attori!che!
interagiscono!con!esso,!senza!rivelare!la!struttura!interna!del!sistema.!!La!Tabella!4L2!descrive!
gli!attori!del!sistema.!!
!
!
!
!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!53!
!
!
Tabella*4R2*:*Attori*del*sistema*
!
4.2.2!CASI0D’USO0 0 0 0 0
Per!capire!al!meglio!come!sviluppare!e!comprendere! i! requisiti,!questi!ultimi!del!progetto!
sono!stati!analizzati!attraverso!la!descrizione!dei!casi!d’uso.!Il!caso!d'uso!in!informatica!è!una!
tecnica!usata!nei!processi!di! ingegneria!del!software!per!effettuare!in!maniera!esaustiva!e!
non!ambigua!la!raccolta!dei!requisiti!al!fine!di!produrre!software!di!qualità.!Vengono!utilizzati!
per!l’individuazione!e!la!registrazione!dei!requisiti!funzionali!descrivendo!come!un!sistema!
possa! essere! utilizzato! per! consentire! agli! utenti! di! raggiungere! i! loro! obiettivi.! In! questo!
paragrafo!vengono!descritti!alcuni!dei!casi!d’uso!più!rappresentativi! tra!quelli!elencati!nel!
paragrafo!precedente,!per!la!realizzazione!dell’applicazione;!di!seguito!ad!ogni!caso!d’uso,!è!
riportato!il!“Sequence!Diagramm”!ad!esso!associato,!il!quale!va!ad!esplicitare!le!iterazioni!e!
la!comunicazione!tra!i!vari!oggetti!del!sistema,!seguendo!un!ordine!temporale!ben!preciso.!
La! specifica! di! un! caso! d’uso! dovrebbe! includere! almeno! un! nome,! gli! attori! principali! e!
secondari,!un!obiettivo! (il!motivo!per! il!quale!gli!attori!principali!avviano! il! caso!d’uso),! la!
precondizione! nella! quale! è! eseguibile,! la! sequenza! delle! azioni! svolte! dagli! attori! e! dal!
sistema! (considerato! come! una! scatola! nera,! quindi! senza! entrare! nel! dettaglio! del! suo!
funzionamento!interno),!le!eventuali!eccezioni!e!come!esse!devono!essere!gestite.!
!
!
!
Nome*
Attore!Descrizione!
User!Non!udente,!non!vedente,!ipovedente.!Coloro!che!intendono!controllare!la!loro!abitazione.!
Installatore!Persona!esperto,!addetta!all’installazione!e!alla!configurazione!dell’ambiente!domotico,!del!framework!e!dell’applicazione!di!SpokenHouse.!
FreeDomotic!
È!un!framework!open!source!distribuito!per!l’automazione!di!edifici.!Esso!è!costituito!da!una!serie!di!moduli!crossLlanguage!a!basso!accoppiamento!che!comunicano!attraverso!un!middleware!message!oriented,!scambiandosi!messaggi.!!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!54!
1)!Configurazione*dell’applicazione*
Descrizione!L’installatore,!al!primo!avvio!dell’applicazione,!fornisce!una!serie!di!informazioni!necessarie!al!fine!di!garantire!la!corretta!comunicazione!con!FreeDomotic.!
Attori! Installatore,!utente!Input! Dati!dell’utente,!IP!Address,!Porta!
Precondizione!
L’utente!deve!avere!un!dispositivo!smartphone!con!qualsiasi!sistema!operativo!che!utilizzerà!nel!ruolo!di!dispositivo!controllante.!L’installatore!deve!aver!configurato!l’ambiente!domotico!al!fine!di!permettere!l’interfacciamento!con!il!device.!
Output!Notifica!di!connessione!avvenuta!con!successo!sul!dispositivo!controllante,!tramite!notifica!audio!(Text*To*Speech).!
Postcondizione! L’utente!può!controllare!l’ambiente!domotico.!
Scenario*
Principale!
1.!L’installatore,*una!volta!scaricato!il!servizio!dalla!rete,!avvia!installazione.!2.!Il!sistema,!all’avvio!dell’applicazione,!richiede!i!dati!ai!fini!della!comunicazione.!3.!Il!primo!parametro!richiesto,!tramite!messaggio!vocale!e!tramite!alert!sul!device,!è!l’indirizzo!IP!necessario!la!connessione!tra!device!e!FreeDomotic.!4.!L’installatore!inserisce!l’indirizzo!IP,!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!5.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!volcale!e!alert!sul!device,!il!secondo!parametro,!ovvero!la!porta!su!cui!è!in!esecuszone!il!framework!FreeDomotic,!parametro!necessario!la!connessione!tra!device!e!FreeDomotic.!6.!L’installatore!inserisce!la!Porta,!valore!numerico!al!più!di!4!cifre,!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!7.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!vocale!e!alert!sul!device,!il!terzo!parametro,!ovvero!l’username,!necessario!al!fine!di!autentificare!l’utente!e!permettere!la!comunicazione!con!il!framework!FreeDomotic.!8.!L’installatore!inserisce!l’username!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!9.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!vocale!e!alert!sul!device,!il!quarto!parametro,!ovvero!la!password,!necessaria!al!fine!di!autentificare!l’utente!e!permettere!la!comunicazione!con!il!framework!FreeDomotic.!8.!L’installatore!inserisce!la!password!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!9.!A!valle!del!corretto!inserimento!dei!dati!inseriti,!il!sistema!permette!la!comunicazione!tra!device!e!FreeDomotic,*!comunicando,!tramite!notifica!vocale,!la!corretta!configurazione!dell’applicazione;!
Scenario*
Alternativo!
1.!L’installatore,*una!volta!scaricato!il!servizio!dalla!rete,!avvia!installazione.!2.!Il!sistema,!all’avvio!dell’applicazione,!richiede!i!dati!ai!fini!della!comunicazione.!3.!Il!primo!parametro!richiesto,!tramite!messaggio!vocale!e!tramite!alert!sul!device,!è!l’indirizzo!IP!necessario!la!connessione!tra!device!e!FreeDomotic.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!55!
4.!L’installatore!inserisce!l’indirizzo!IP,!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!5.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!volcale!e!alert!sul!device,!il!secondo!parametro,!ovvero!la!porta!su!cui!è!in!esecuszone!il!framework!FreeDomotic,!parametro!necessario!la!connessione!tra!device!e!FreeDomotic.!6.!L’installatore!inserisce!la!Porta,!valore!numerico!al!più!di!4!cifre,!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!7.!il!sistema!emette!una!notifica!di!errore!nonché!una!richiesta!di!nuovo!inserimento!del!valore!della!“porta”,!in!quanto!l’utente!ha!inserito!un!valore!con!corretto;!8.!L’installatore!inserisce!nuovamente!il!valore!della!Porta!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!9.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!vocale!e!alert!sul!device,!il!terzo!parametro,!ovvero!l’username,!necessario!al!fine!di!autentificare!l’utente!e!permettere!la!comunicazione!con!il!framework!FreeDomotic.!10.!L’installatore!inserisce!l’username!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!11.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!richiede!all’installatore,!tramite!notifica!vocale!e!alert!sul!device,!il!quarto!parametro,!ovvero!la!password,!necessaria!al!fine!di!autentificare!l’utente!e!permettere!la!comunicazione!con!il!framework!FreeDomotic.!12.!L’installatore!inserisce!la!password!e!conferma!per!mezzo!della!pressione!sul!tasto!“ok”.!12.!A!valle!del!corretto!inserimento!dei!dati!inseriti,!il!sistema!permette!la!comunicazione!tra!device!e!FreeDomotic,*!comunicando,!tramite!notifica!vocale,!la!corretta!configurazione!dell’applicazione;!
Tabella*4R3*:*Caso*d'uso*“Configurazione*Applicazione”*
!
Figura*4R3*:*Sequence*Diagram*"Configurazione*Applicazione"*
*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!56!
2)*Attivazione*vibrazione*
Descrizione!Il!sistema!dà!la!possibilità!all’utente!di!impostare!notifiche!tramite!messaggi!Morse.!!
Attori! Utente!Input! Volontà!dell’utente!di!attivare!la!funzionalità!“vibrazione”!Precondizione! Dispositivi!accesi!e!vibrazione!non!attiva!sul!dispositivo!
Output!Il!dispositivo!controllante!informa!l’utente!di!avvenuta!impostazione!della!vibrazione!tramite!notifica!morse.!
Postcondizione! Vibrazione!attiva!
Scenario*
Principale!
1.!L’utente!avvia!applicazione.!2.!L’utente!preme!il!tasto!↓!per!accedere!all’area!impostazioni.!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!3.!L’utente!preme!il!tasto!↑!per!selezionare!l’area!“vibrazione”.!5.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!6.!L’utente!preme!il!tasto!↵!per!confermare!l’accesso!all’!area!“vibrazione”.!7.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!↑per!attivare!la!vibrazione,!oppure!↓per!disattivarla!9.!Il!sistema,!riconosciuto!il!comando,!attiva!la!funzionalità!sul!device.!!10.!Il!sistema,!tramite!codifica!morse,!informa!l’utente!dell’avvenuta!esecuzione!del!comando.!
Scenario*
Alternativo!!
Tabella*4R4*:*Caso*d'uso*“Attivazione*vibrazione”!
*
!
Figura*4R4*:*Sequence*Diagram*"Attivazione*Vibrazione"*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!57!
!
3)*Modifica*credenziali*di*accesso*all’applicazione**
Descrizione!Il!sistema!dà!la!possibilità!all’utente!di!modificare!le!credenziali!di!accesso!all’applicazione!per!connettersi!al!sistema!domotico.!!
Attori! Utente!
Input!Volontà!dell’utente!di!modificare!una!o!più!credenziali!d’accesso!al!sistema!domotico!
Precondizione!Dispositivi!accesi.!L’utente!deve!aver!già!configurato!correttamente!l’applicazione!
Output!Il!dispositivo!controllante!avvisa!l’utente!di!avvenuta!modifica!tramite!Text*To*Speech*o!Vibrazione.!!
Postcondizione! Credenziali!modificate!
Scenario*
Principale!
1.!L’utente!avvia!applicazione.!2.!Pressione!tasto!↓!per!accedere!all’area!impostazioni.!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!4.!L’utente!preme!il!tasto!↑!per!selezionare!l’impostazione!d’interesse.!5.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!6.!L’utente!preme!il!tasto!↵!per!confermare!l’!accesso!all’area!“modifica!credenziali”.!7.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!il!tasto!↑!per!selezionare!il!parametro!d’interesse.!9.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!!10.!L’utente!preme!il!tasto!↵!per!confermare!l’accesso!al!parametro!d’interesse.!11.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!12.!Il!sistema!richiede!all’utente,!mediante!notifica!audio!e!alert,!l’inserimento!del!nuovo!valore.!13.!L’utente!preme!il!inserisce!il!nuovo!valore!del!parametro!e!conferma!mediante!pressione!del!tasto!“ok”.!14.!Il!sistema,!riconosciuto!il!parametro!inserito!come!corretto,!notifica!l’avvenuta!sostituzione!del!parametro!inserito!mediante!messaggio!vocale.!!
Scenario*
Alternativo!
1.!L’utente!avvia!l’applicazione.!2.!Pressione!tasto!↓!per!accedere!all’area!impostazioni.!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!4.!L’utente!preme!il!preme!il!tasto!↑!per!selezionare!l’impostazione!d’interesse.!5.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!58!
6.!L’utente!preme!il!tasto!↵!per!confermare!l’!accesso!all’area!“modifica!credenziali”.!7.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!il!tasto!↑!per!selezionare!il!parametro!d’interesse.!9.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!!10.!L’utente!preme!il!tasto!↵!per!confermare!l’accesso!al!parametro!d’interesse.!11.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!12.!Il!sistema!richiede!all’utente,!mediante!notifica!audio!e!alert,!l’inserimento!del!nuovo!valore.!13.!L’utente!inserisce!il!nuovo!valore!del!parametro!e!conferma!mediante!pressione!del!tasto!“ok”.!14.!Il!sistema,!identifica!il!parametro!come!non!corretto!e!richiede!all’utente!di!reinserire!il!valore!corretto.!15.!L’utente!inserisce!il!nuovo!valore!del!parametro!e!conferma!mediante!pressione!del!tasto!“ok”.!16.!Il!sistema,!identifica!il!parametro!inserito!come!corretto,!notifica!l’avvenuta!sostituzione!del!parametro!inserito!mediante!messaggio!vocale.!
Tabella*4R5*:*Caso*d'uso*“Modifica*credenziali*di*accesso*all'applicazione”*
!
Figura*4R5*:*Sequence*Diagram*"Modifica*credenziali*d'accesso"*
!
!
*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!59!
4)*Modifica*tema*interfaccia*
Descrizione!Il!sistema!dà!la!possibilità!all’utente!di!modificare!il!tema!dell’interfaccia!grafica!del!device.!!
Attori! Utente!Input! Volontà!dell’utente!di!modificare!il!tema!dell’interfaccia!Precondizione! Dispositivo!acceso.!!
Output!Il!dispositivo!controllante!avvisa!l’utente!di!avvenuta!modifica!tramite!Text*To*Speech*o!Vibrazione!
Postcondizione! Tema!modificato!
Scenario*
Principale!
1.!L’utente!applicazione.!!2.!L’utente!preme!il!!tasto!↓!per!accedere!all’area!impostazioni.!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!4.!L’utente!preme!il!tasto!↑!per!selezionare!l’impostazione!d’interesse.!5.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!6.!L’utente!preme!il!tasto!↵!come!conferma!d’accesso!all’area!“modifica!Tema”.!7.Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!il!tasto!↑!per!selezionare!il!tema!d’interesse.!9.Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!10.!L’utente!preme!il!tasto!↵!per!impostare!il!tema!d’interesse.!11.!Il!sistema,!riconosciuto!il!comando,!modifica!il!tema!dell’applicazione.!!12.!Il!sistema,!informa!l’utente!dell’avvenuta!esecuzione!del!comando!mediante!messaggio!vocale.!
Scenario*
Alternativo!!
Tabella*4R6*:*Caso*d'uso*“Modifica*tema*interfaccia”*
!
Figura*4R6*:*Sequence*Diagram*"Modifica*tema*interfaccia"*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!60!
5)*Modifica*grandezza*dei*caratteri*
Descrizione!Il!sistema!dà!la!possibilità!all’utente!di!modificare!la!grandezza!dei!caratteri!dell’interfaccia!grafica!del!device.!!
Attori! Utente!Input! Volontà!dell’utente!di!modificare!la!grandezza!dei!caratteri.!Precondizione! Dispositivo!acceso.!!
Output!Il!dispositivo!controllante!avvisa!l’utente!di!avvenuta!modifica!tramite!Text*To*Speech*o!Vibrazione!
Postcondizione! Font!modificato.!
Scenario*
Principale!
1.!L’utente!avvia!l’applicazione.!2.!L’utente!preme!il!tasto!↓!per!accedere!all’area!“Impostazioni”.!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!4.!L’utente!preme!il!tasto!↑!per!selezionare!l’impostazione!d’interesse!5.Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!6.!L’utente!preme!il!tasto!↵!come!conferma!d’accesso!all’area!“modifica!grandezza!caratteri”.!7.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!↑per!aumentare!o!diminuzione!↓!grandezza!carattere.!9.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!10.!L’utente!preme!il!tasto!↵ per!confermare!la!grandezza!11.!Il!sistema,!riconosciuto!il!comando,!modifica!la!grandezza!dei!caratteri.!!12.!Il!sistema,!mediante!il!device,!informa!l’utente!dell’avvenuta!esecuzione!del!comando!mediante!messaggio!vocale.!!
Scenario*
Alternativo!!
Tabella*4R7*:*Caso*d'uso*“*Modifica*grandezza*caratteri”*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!61!
!
Figura*4R7*:*Sequence*Diagram*"Modifica*grandezza*caratteri"*
!
6)*Attivazione*tutorial*di*navigazione*
Descrizione!Il!sistema!dà!la!possibilità!all’utente!di!attivare!o!disattivare!il!tutorial!di!navigazione.!!
Attori! Utente!Input! Volontà!dell’utente!di!attivare!la!funzionalità!“tutorial!di!navigazione”!Precondizione! Dispositivo!acceso.!Tutorial!di!navigazione!disattivo!sul!dispositivo!
Output!Il!dispositivo!controllante!avvisa!l’utente!di!avvenuta!modifica!tramite!Text*To*Speech*o!Vibrazione.!
Postcondizione! Tutorial!di!navigazione!attivo!
Scenario*
Principale!
1.!L’utente!avvia!applicazione.!2.!L’utente!preme!il!tasto!↓!per!accedere!all’area!impostazioni.!!3.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!4.!L’utente!preme!il!tasto!↑!per!selezionare!l’area!“tutorial!navigazione”.!5.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!!6.!L’utente!preme!il!tasto!↵!come!conferma!d’accesso!all’area!“tutorial!navigazione”.!7.!Il!sistema!riconosce!il!comando!e!porta!l’utente!nella!sezione!del!menù!richiesta.!8.!L’utente!preme!il!tasto!↑!per!attivare!il!tutorial!di!navigazione,!o!↓!per!dosattivarlo.!9.!Il!sistema,!riconosciuto!il!comando,!attiva!la!funzionalità!sul!device.!!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!62!
4.!Il!sistema!informa!l’utente!dell’avvenuta!esecuzione!del!comando!mediante!messaggio!vocale.!!
Scenario*
Alternativo!!
Tabella*4R8*:*Caso*d'uso*6:*Attivazione*tutorial*di*navigazione*
!
Figura*4R8*:*Sequence*Diagram*"Attivazione*Tutorial*di*navigazione"*
!
4.3! ARCHITETTURA0A0LIVELLI0
!
Nello!sviluppo!delle!applicazioni! software,!è!possibile!descrivere! l’architettura!del! sistema!
utilizzando! uno! fra! i!molteplici! paradigmi! a! disposizione,!ma! in! linea! generale,! trova! una!
maggiore! applicazione! la! nota! architettura! “a! livelli”! (Layered! Application! Architecture).!
Quest’ultima! prevede! che! un! sistema! software! sia! decomposto! in! tre! livelli! nettamente!
distinti!(come!mostrato!in!Figura!4L9),!che!comunque!!abbiano!la!possibilità!di!comunicare!
fra! loro! secondo! un’opportuna! gerarchia.! Ciascuno! dei! tre! livelli! ha! un! proprio! ruolo! ed!
assolve!ad!uno!specifico!compito!all’interno!del!sistema!complessivo,!senza!interferire!con!
gli! altri! livelli! ma! scambiando! con! essi! le! informazioni! necessarie! all’esecuzione! di!
elaborazioni!anche!molto!complesse.!
I!tre!livelli!in!questione!sono!i!seguenti:!
•! Presentation)layer:!è!il!livello!di!presentazione,!il!cui!compito!è!quello!di!interagire!
direttamente! con! l’utente! del! sistema,! acquisire! i! dati! di! input! immessi! da!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!63!
quest’ultimo!e!visualizzare!i!risultati!dell’elaborazione!effettuata!dal!sistema!stesso.!
Esso,! in!pratica,!definisce! la!GUI! (Graphic!User! Interface)!ossia! l’interfaccia!grafica!
dell’applicazione.!
•! Application) processing) layer:! è! il! livello! in! corrispondenza! del! quale! si! trova! la!
“businessLlogic”!dell’applicazione!e!quindi!tutti!i!moduli!software!che!implementano!
le! funzionalità! che! il! sistema! mette! a! disposizione.! In! sostanza,! è! il! centro!
dell’elaborazione!dei!dati!in!cui!avvengono!tutte!le!computazioni.!
•! Data)management)layer:!è!il!livello!che!si!occupa!della!gestione!della!persistenza!e!
dell’accesso! ai! dati,! per! cui! tipicamente! è! caratterizzato! da! un! DBMS! (DataBase!
Management!System).!
!
!
Figura*4R9*:*Architettura*Software*a*"livelli"*
!
Sviluppando!un’applicazione!secondo!questa!architettura,!ogni! livello!è!indipendente!dagli!
altri,! per! cui! la!modifica! di! uno! di! essi! non! ha! effetto! sui! restanti.! Tuttavia! è! prevista! la!
comunicazione!fra!loro!e!lo!scambio!di!informazioni.!
Un!tipico!scenario!di!funzionamento!del!sistema!può!essere!il!seguente:!un!utente!utilizza!
l’applicazione,!interagendo!direttamente!con!la!GUI!e!fornisce!quindi!al!Presentation!Layer,!i!
dati! su! cui! andrà! eseguita! l’elaborazione.! Il! presentation! layer,! acquisiti! i! dati! di! input,! li!
trasferisce! all’Application! processing! layer! che! esegue! su! di! essi! una! determinata!
computazione.!
Durante!l’elaborazione,! la!businessLlogic!può!prevedere!la!memorizzazione!persistente!dei!
dati! oppure! la! necessità! di! acquisire! ulteriori! dati! già! memorizzati.! In! questo! caso,! c’è!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!64!
l’interazione!con!il!data!management!layer,!il!quale!memorizza!i!dati!che!gli!vengono!passati!
dal! livello! superiore,!oppure! recupera!da!un!data! source! (es.!database)! i!dati! richiesti!e! li!
trasmette! alla! businessLlogic.! Al! termine! dell’elaborazione! i! risultati! vengono! passati! al!
presentation!layer!che!li!visualizza!in!una!certa!forma!all’utente!finale.!
Facendo!riferimento!al!paradigma!clientLserver,!notevolemente!utilizzato!non!solo!nelle!web!
application! ma! anche! per! le! application! desktop,! i! tre! livelli! del! sistema! devono! essere!
correttamente!ripartiti!anche!da!un!punto!di!vista!hardware.!
Le!principali!architetture!per!la!ripartizione!sono:!
•! TwoLtier!nelle!due!soluzioni!thin!e!fat!client.!
•! ThreeLtier.!
L’architettura! twoLtier! prevede! un! unico! client! ed! un! unico! server! ed! i! tre! livelli!
dell’applicazione!software!sono!distribuiti! fra!di!essi!secondo!due!possibili!modalità,!come!
mostrato!nella!Figura!4L10!:!
•! Thin!Client:!sul!Client!risiede!il!Presentation!layer!mentre!sul!Server!gli!altri!due!livelli!
(Application!Processing!layer!e!Data!Management!layer).!Un!vantaggio!può!risiedere!
nel!fatto!che!una!modifica!alla!businessLlogic!va!eseguita!una!sola!volta!sul!server,!
mentre!lo!svantaggio!principale!può!essere!caraterizzato!dall’enorme!carico!di!lavoro!
che!deve!supportare! il! server!stesso!dato! il!numero!elevato!di!client!che!possono!
accedere!ad!esso.!
•! Fat! Client:! sul! client! risiedono! i! primi! due! livelli! (Presentation! layer! e! Application!
Processing!layer)!mentre!sul!server!soltanto!il!data!management!layer.!Il!vantaggio!è!
quello!di!ridurre!il!carico!di!lavoro!sul!server!che!si!occupa!solo!dell’accesso!ai!dati,!
delegando!l’elaborazione!degli!stessi!al!client.!!
Figura*4R10*:*Architettura*Two*Tier*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!65!
•! Lo!svantaggio!principale!è!la!complessità!maggiore!dei!client!e!quindi!la!necessità!di!
aggiornare!ciascuno!di!essi!nel!caso!in!cui!vengano!apportate!modifiche!alla!businessL
logic.!
L’architettura!threeLtier,!maggiormente!utilizzata,!prevede!la!presenza!di!un!unico!client!ed!
una!coppia!di!server!(Figura!4L11).!Sul!client!risiede!il!Presentation!layer!e!su!ciascuno!dei!due!
server!sono!distribuiti!i!due!restanti!livelli!(Application!Processing!layer!e!Data!Management!
layer).!Nell’ambito!di!una!web!application,!il!client!è!caratterizzato!da!un!nodo!della!rete!sul!
quale!è!in!esecuzione!il!browser,!mentre!i!due!server,!da!un!punto!di!vista!software,!sono!
tipicamente!inglobati!in!unico!nodo!della!rete!che!funge!da!server!fisico.!In!particolare,!sulla!
stessa!macchina!sono!in!esecuzione!il!web!server!associato!all’Application!Processing!layer!
ed!il!database!server!associato!al!Data!Management!layer.!
!
Figura*4R11*:*Architettura*Three*Tier*
!
In!conclusione,!è!proprio!su!questa!particolare!architettura!“a!livelli”!che!si!basa!il!pattern!
MVC!(Model!–!View!L!Controller)!con!cui!è!stata!sviluppata! l’applicazione!di!SpokenHouse!
(31).!
!
4.3.1!DESIGN0PATTERN0MVC:0MODEL0VIEW0CONTROLLER0
Il!design!pattern!MVC!ha!le!sue!origini!nell’ambiente!Smalltalk,!in!cui!veniva!utilizzato!per!la!
realizzazione!della!GUI! (Graphic!User! Interface)!di!applicazioni!desktop!e!non!orientate!al!
Web.! Tale! pattern! si! basa! sull’idea! di! separare! i! dati! dalla! rappresentazione,! poiché!
mantenere! un! forte! accoppiamento! tra! essi! comporta! che! la! modifica! dell’uno,! implica!
automaticamente! un! aggiornamento! dell’altro.! Esso,! quindi,! prevede! che! un! sistema!
software!sia!realizzato!secondo!l’architettura!“a!livelli”,!stabilendo!un!disaccoppiamento!fra!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!66!
dati!e!rappresentazione,!mediante!la!definizione!di!tre!elementi!noti!come!:!Model,!View)e!
Controller.!Questi!sono!riportati!nella!Figura!4L12!
!
!
Il! Model! (Modello)! è! responsabile! della! gestione! dei! dati! e! del! comportamento!
dell’applicazione! (data! &! behaviour).! Esso! coordina! la! “businessL! logic”! dell’applicazione,!
l’accesso!alle!basi!di!dati!e!tutte!le!parti!critiche!“nascoste”!del!sistema.!Incapsula!lo!stato!
dell’applicazione!ed!espone!le!funzionalità!di!quest’ultima.!E’!indipendente!dalle!specifiche!
rappresentazioni! dei! dati! sullo! schermo! e! dalle!modalità! di! input! dei! dati! stessi! da! parte!
dell’utente.!Ad!esso!fanno!riferimento!l’Application!processing!layer!ed!il!Data!managemente!
layer!nel!design!del!software!“a!livelli”.!!
La!View! (Vista)! ha! il! compito! di! visualizzare! i! dati! e! presentarli! all’utente! anche! in! forme!
diverse,!in!relazione!al!dispositivo!utilizzato!per!accedere!al!sistema!(es.!personal!computer,!
cellulare,! ..)! .! Ciò! vuol! dire! che,! pur! partendo! dagli! stessi! dati,! è! possibile! effettuare!
“rendering”!diversi!ed!ottenere!viste!multiple!dello!stesso!modello.!Ad!esso!fa!riferimento!il!
Presentation!layer.! !
Il! Controller! (Controllo)! definisce! il! meccanismo! mediante! il! quale! il! Model! e! la! View!
comunicano.! Realizza! la! connessione! logica! tra! l’interazione! dell’utente! con! l’interfaccia!
applicativa!e!i!servizi!della!businessLlogic!nel!backLend!del!sistema.!E’!responsabile!della!scelta!
di! una! tra! molteplici! viste! dello! stesso! modello,! in! base! al! tipo! di! dispositivo! utilizzato!
dall’utente! per! accedere! al! sistema! ma! anche! in! relazione! alla! localizzazione! geografica!
dell’utente! stesso.! Una! qualsiasi! richiesta! (request)! fatta! al! sistema! viene! acquisita! dal!
Controller! che! individua! all’interno! del!Model! il! gestore! della! richiesta! (request! handler).!
Ottenuto!il!risultato!dell’elaborazione!(response),!il!Controller!stesso!determina!a!quale!View!
passare!i!dati!per!la!presentazione!degli!stessi!all’utente. Il!vantaggio!principale!che!scaturisce!da!questa!architettura,!è!che!la!businessLlogic!definita!all’interno!del!Model!è!separata!dal!
Figura*4R12*:*Model,*View*e*Controller*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!67!
Presentation! layer! che! si! trova! all’interno! della! View.! Tutto! ciò! favorisce! il! riuso! dei!
componenti!e!la!possibilità!di!apportare!delle!modifiche!ad!un!livello!senza!avere!degli!effetti!
sull’altro.!
!
4.4! ARCHITETTURA DEL SISTEMA SPOKENHOUSE
!
Il!sistema!sarà!composto!da!tre!sottosistemi!principali,!come!mostrato!nella!Figura!4L13.!
!
Figura*4R13*:*Architettira*sistema*"alto*livello"*
!
Il! primo! è! l’applicazione! di! “SpokenHouse”! (evidenziato! in! Figura! 4L13! con! colore! rosso),!
ovvero! l’applicazione! cross>platform) ! che! è! stata! realizzata.! Come! detto,! quest’ultima! è!
supportata!da!molteplici!sistemi!operativi!mobile!(es:!Android,!iOS,!Windows!Phone,!ecc…)!
grazie! all’ausilio! di! un! framework! open! source,! quale! Apache! Cordova,! che! permette! lo!
sviluppo!di!applicazioni!mobile!ibride.!
Il!solo!utilizzo!dell’applicazione!di!SpokenHouse!non!è!sufficiente!per!adempiere!allo!scopo!
del!progetto,!ovvero!la!gestione!di!dispositivi!elettronici!all’interno!di!un!ambiente!domestico!
da!parte!di!persone!con!difficoltà!visive!e/o!uditive.!Per!questo!si!è!ricorso!all’utilizzo!di!un!
framework!open!source!domotico!(Freedomotic)!che!agisce!da!middleware.!
Tramite! opportuno! protocollo! di! comunicazione,! l’applicazione) mobile! può! inviare! dei!
messaggi!a!FreeDomotic,!attraverso!i!quali!l’utente!espliciterà!l’azione!che!vorrà!effettuare!
sul!sistema!domotico.!!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!68!
Freedomotic,! il! secondo! sottosistema! (evidenziato! in! Figura! 4L13! con! colore! verde),! ! può!
essere! installato! ed! eseguito! direttamente! su! una! board! programmabile! (es:! Arduino,!
Raspberry! Pi,! ecc…)! oppure! sul! personal! computer;! in! quest’ultimo! caso,! sarà! carico! del!
framework!inviare!messaggi!negli!opportuni!formati!alla!board!programmabile!installata!in!
casa.!!
Infine,! il! terzo! sottosistema! è! il! sistema! domotico! installato! nell’ambiente! domestico.!
Quest’ultimo,!tramite!opportuni!protocolli!di!comunicazione!interagisce!con!il!dispositivo!sul!
quale!è!installato!il!framework!di!FreeDomotic.!
!
!
Figura*4R14*:*Architettura*de*sistema*SpokenHouse*
!
In! questo! progetto,! svolto! in! concomitanza! con! quello! di! Di! Brino! Marco,! si! curata! la!
realizzazione! del! primo! sottosistema! e! della! sua! iterazione! con! FreeDomotic! (il! secondo!
sottosistema);!il!tutto!è!evidenziato!nel!diagramma!di!deployment!riportato!in!Figura!4L14.!!
!
!
APACHE!CORDO
VA*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!69!
4.5! ARCHITETTURA0DELL’APPLICAZIONE0DI0SPOKENHOUSE0
!
Per! lo! sviluppo! dell’applicazione! di! SpokenHouse! in! maniera! cross! platform,! si! è! ricorso!
all’uso!di!un! framework!open!source,!Apache!Cordova,! la!cui! logica!è! inserita!nella!Figura!
4L15.!
Questo!supporta!diversi!linguaggi!quali!Html5,!CSS3!e!Javascript.!
Figura*4R15*:*Funzionamento*Apache*Cordova*
!
L’utilizzo! incrociato! di! queste! tre! tecnologie! fa! si! che! Cordova! riesca! a! fare! il! build!
dell’applicazione!per!il!sistema!operativo!mobile!d’interesse,!senza!la!necessità!di!utilizzare!
codice!nativo.!!
L’applicazione!di!SpokenHouse,!la!cui!architettura!è!mostrata!in!!House!è!composta!da:!
•! Un! core,! nel! quale! è! contenuta! l’intera! logica! di! business,! che! si! fa! carico! della!
gestione! della! comunicazione! tra! l’applicazione! ! e! il! framework! domotico!
(FreeDomotic).!
•! Interfaccia!grafica:!sviluppata!secondo!la!logica!dei!quattro!angoli!mediante!la!quale!
l’utente!interagisce!con!il!core!e!quindi!con!il!sistema.!
Lo! stile! architetturale! utilizzato! per! la! realizzazione! dell’applicazione! è! quello!MVC,! come!
riportato!in!Figura!4L16:!
•! View:!modellazione!dell’interfaccia!utente.!
•! Controller:!gestione!della!logica!di!business!e!degli!eventi.!
•! Model:!resa!persistente!delle! informazioni!necessarie!alla!connessione!e!allo!stato!
dell’applicazione.!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!70!
!
Figura*4R16*:*Architettura*dell’applicazione*di*SpokenHouse!
*
VIEW*
L’utente! dell’applicazione! interagisce! con! il! sistema! direttamente! con! la! View,! ovvero!
l’interfaccia! grafica.! Essa,! come! diretta! conseguenza! del! CrossLPlatforming,! sarà!
implementata!mediante!l’utilizzo!di!HTML5.!A!supporto!di!quest’ultimo!e!al!fine!di!migliorare!
il!layout!dell’applicazione,!si!andrà!ad!utilizzare!anche!CSS3.!
Come!scelta!progettuale!della!View,!come!detto!dei!paragrafi!precedenti,!è!stata!scelta!come!
riferimento!l’interfaccia!a!quattro!angoli!di!Strillone.!
!A!differenza!di!quest’ultimo,!dovranno!essere!inseriti!dei!messaggi!di!testo,!all’interno!delle!
quattro!sezioni!in!cui!lo!schermo!sarà!virtualmente!diviso,!indicanti!sia!lo!stato!attuale!della!
navigazione!del!menù!sia!le!nuove!azioni!che!verranno!intraprese!una!volta!che!si!accederà!
a!quella!sezione!del!menù.!
Dato!che! lo! stato! in! cui! si! trova! l’applicazione!sarà! rappresentato!dalla! stampa!a!video!di!
queste!stringhe,!si!prevede!l’utilizzo!di!un!unico!file!HTML.!
!
CONTROLLER*
La! gestione! degli! eventi! touch! che! si! verificano! sull’interfaccia! grafica,! sono! a! carico! del!
Controller.! In! quest’ultimo! saranno! implementati! e! gestiti! i! casi! d’uso! menzionati!
precedentemente.!!
Le!funzioni!principali!saranno:!
APACHE!CORDO
VA*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!71!
•! Gestione!Plugin!Cordova:!alcune! funzionalità!dello!smartphone,!come!ad!esempio!
l’attivazione!del!TextToSpeech!e!il!controllo!della!vibrazione,!potranno!tornare!utile!
per! l’implementazione!di!alcuni! casi!d’uso.!Per!venire! incontro!a!queste!esigenze,!
Apache!Cordova!fornisce!già!dei!plugin!che!mettono!a!disposizione!il!codice!utile!alla!
gestione!di!queste!funzionalità!(Figura!4L17).!!
!
Figura*4R17*:*Funzionamento*Apache*Cordova*
!
•! Language!Manager:!l’applicazione,!in!base!alla!configurazione!dello!smartphone!su!
cui! è! in! esecuzione,! dovrà! conoscere! la! lingua! predefinita! nelle! impostazioni! di!
quest’ultimo.!Ciò!è!necessario!al! fine!di!visualizzare!ed!ascoltare! le!notifiche!nella!
stessa!lingua!settata!sullo!smartphone.!
•! Morse!Code!Manager:!nel!caso!in!cui!l’applicazione!sia!utilizzata!da!una!persona!non!
udente! ed! eventualmente! non! vedente,! questa! potrà! interagire! con! l’utente!
mediante! la! codifica! dei! messaggi! in! codice! morse! attraverso! l’utilizzo! della!
vibrazione.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!72!
•! FreeDomotic! Connector:! l’applicazione,! per! poter! comunicare! con! il! framework! e!
quindi!con!il!sistema!domotico!(figura!4L9),!dovrà!instaurare!una!connessione!!con!
FreeDomotic;!per!fare!ciò,!sono!necessari!alcuni!parametri,!quali!!indirizzo!IP!e!porta!
della!macchina!sulla!quale!è!in!esecuzione!FreeDomotic!e!le!credenziali!dell’utente!
(username!e!password).!Una!volta!inseriti!questi!parametri,!dovrà!essere!fatta!una!
chiamata! REST! all’API! di! FreedDomotic! al! fine! di! permettere! l’autenticazione! sul!
framework.!
•! FreeDomotic!Things!Manager:!una!volta!effettuata!l’autenticazione!sul!framework,!
l’utente!potrà!accedere!alle!funzionalità!!messe!a!disposizione!dal!FreeDomotic!per!
poter!gestire!l’intero!sistema!domotico.!
•! DBMS! Manager:! per! una! corretta! gestione! dell’interfaccia! grafica! e! di! parte! del!
controller,!dovrà!essere!prevista!la!creazione!di!alcuni!file!di!configurazione!e!di!un!
DBMS! locale! allo! smartphone! per! il! salvataggio! delle! informazione! associate!
all’utente.!A!fare!da!intermediario!tra!la!View!e!il!Model!sarà!necessario!una!logica!
di!supporto.*
Tutte!queste!funzionalità!verranno!gestite!e!coordinate!da!una!classe!che!rispecchia!il!pattern!
“Facade”;! infatti! questo! Pattern! fornisce! un! interfaccia! unica! relativa! funzionalità! del!
sottosistema!cui!fa!riferimento,!è!in!grado!di!individuare!le!classi!del!sottosistema!in!grado!di!
soddisfare! determinate! richieste! fatte! dall’utilizzatore! dell’applicazione! in! modo! tale! da!
smistarle!verso!gli!oggetti!opportuni!del!sottosistema.!
Per!quanto!riguarda!questo!lavoro!di!tesi,!quindi!tutto!quanto!concerne!l’interfacciamento!
dell’utente! con! l’applicazione,! le! funzioni! interessate! sono:! Gestione! Plugin! Cordova,!
Language!Manager,!Morse!Code!Manager!e!DBMS!Manager.!
!
MODELL*
Le!informazioni!inerenti!lo!stato!dell’applicazione,!i!dati!dell’utente!e!i!file!di!configurazione,!
dovranno!essere!salvate!sullo!smartphone;!per!renderle!persistenti,!consistenti!e!sicure,!si!
farà!uso!un!Data!Base!locale.!Ciò!è!necessario!al!fine!di!agevolare!l’utente!durante!l’utilizzo!
dell’applicazione:!infatti,!il!salvataggio!di!queste!informazioni!preclude!il!loro!reinserimento!
ad!ogni!avvio!dell’applicazione.!!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!73!
!
4.5.1!DIAGRAMMA0DELLE0CLASSI0GENERICO0
In!base!a!quanto!descritto!nel!paragrafo!precedente,!è!possibile!giungere!alla!definizione!!
del!diagramma!delle!classi!generico,!riportato!nella!Figura!4L18.!! !
!
!
Il!cuore!del!sistema!è!“SpokenHouseFacade”,! il!quale!deve!gestire!gli!eventi!scaturiti!dalle!
azioni!dell’utente!sull’interfaccia!grafica!e!fare!da!intermediario!tra!quest’ultima!e!tutti!i!vari!
componenti! del! Controller.! Il! Facade! si! occupa! anche! della! gestione! dei! cambiamenti!
sull’interfaccia!grafica,!quali!cambio!del!tema!e!variazione!della!grandezza!del!font.!!
!
4.5.2!VINCOLI0
I! requisiti! minimi! hardware! sono! ! quelli! imposti! da! Apache! Cordova! che! devono! essere!
rispettati! affinché! sui! device! possano! essere! installate! e! funzionare! correttamente,! le!
applicazioni!scritte!usando!suddetto!framework.!!
Di!seguito!sono!elencati!i!requisiti!minimi!per!ognuno!dei!SO!che!supporta!Cordova:!
Figura*4R18*:*Diagramma*delle*classi*generico*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!74!
•! iOS:!min.!5.x.!
•! Android :!2.3.x!(Gingerbread,!dall'API!di!livello!10)!e!4.x.!Le!versioni!precedenti!alla!10!,!e!la!3.x!(api!11L13)!falliscono!nel!5%!dei!casi.!
•! Amazon!Fire!OS!:!API!level!19.!
•! BlackBerry!10.!
•! Windows!8.1.!
!
4.6! TECNOLOGIE0UTILIZZATE0
!
In! questo! lavoro! di! tesi,! al! fine! di! realizzare! SpokenHouse,! si! è! fatto! ricorso! a! particolari!
tecnologie!in!modo!tale!da!soddisfare!le!esigenze!del!target!utente.!!
Il!Framework!utilizzato!per!realizzare!l’applicazione!è!stato!Apache!Cordova,!come!scritto!nel!
paragrafo! 3.3.5,! con! le! relative! motivazioni! inerenti! la! sua! scelta.! A! Cordova! sono! state!
affiancate! ulteriori! tecnologie! al! fine! di! realizzare! l’intero! sistema! (quali! protocolli! di!
comunicazione,!stili!architetturali,!particolari!formati!di!messaggi,!ecc…)!al!fine!di!consentire!
l’interoperabilità!tra!i!doversi!componenti!coinvolti.!
!
4.6.1!LA0DOMOTICA0
Come)si)legge)sull’enciclopedia)Treccani!(21)*la!domotica!è!<<lo!studio!e!l’applicazione!di!un!!
*Figura*4R19*:*Esempio*impianto*domotico*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!75!
!
complesso! di! tecnologie! basate! sull’ingegneria! informatica! ed! elettronica,! aventi! per!
obiettivo!la!realizzazione!di!una!serie!di!dispositivi!integrati!che!permettano!di!automatizzare!
e! facilitare! l’adempimento! delle! varie! operazioni! solitamente! svolte! in! un! edificio.>>! Tali!
tecnologie!utilizzano!informazioni!ottenute!da!una!rete!informatica!alla!quale!l’edificio!deve!
essere!collegato!(può!anche!essere!la!rete!Internet).!Alcuni!esempi!di!applicazioni!domotiche!
sono! il! controllo!del! sistema!di! riscaldamento,!di!alcuni!elettrodomestici,!della!cucina,!del!
sistema!di!sorveglianza!(Figura!4L19)!ecc.!! !
Le!principali!finalità!della!domotica!sono:!ottimizzare!la!parte!impiantistica!delle!costruzioni!
in! termini! di! funzionalità,! di! sicurezza! e! di! risparmio! energetico;! fornire! assistenza! alle!
persone!che!si!trovano!in!condizioni!di!isolamento!o!di!inabilità;!aumentare!le!possibilità!di!
intrattenimento!audioLvideo!per!rendere!un’abitazione!più!confortevole!(29).!*
La!domotica!svolge!un!ruolo!importante!nel!rendere!‘intelligenti’!apparecchiature,!impianti!
e!sistemi!previsti!in!un’architettura!(!architettura!intelligente).!L’!edificio!intelligente,!con!il!
supporto! delle! nuove! tecnologie,! permette! la! gestione! coordinata,! integrata! e!
computerizzata! degli! impianti! tecnologici! (climatizzazione,! distribuzione! di! acqua,! gas! ed!
energia,!impianti!di!sicurezza),!delle!reti!informatiche!e!delle!reti!di!comunicazione,!allo!scopo!
di!migliorare!la!flessibilità!di!gestione,!il!comfort,!la!sicurezza,!il!risparmio!energetico.!
Per! facilitare! lo! sviluppo!di!ambienti!domotici!e! favorirne! il! controllo! tramite! smartphone!
vengono!incontro!i!!Framework.!Quello!utilizzato!nel!progetto!di!cui!fa!parte!questo!lavoro!di!
tesi!è!stato!Freedomotic!(30).!
!
4.6.1.1! FREEDOMOTIC0
In!termini!tecnici!Freedomotic,!come!spiega!Mauro!Cicolella!(22),!Sviluppatore!e!Protocols!
Integrator,!è!un!framework!distribuito!open!source!per!l’automazione!di!edifici,!costituito!da!
una!serie!di!moduli!crossLlanguage!a!basso!accoppiamento!che!comunicano!attraverso!un!
middleware!message!oriented!(MOM),!ovvero!scambiandosi!dei!messaggi.!Questo!implica!la!
possibilità!di!sviluppare! il!proprio!modulo,!collegarlo!a!Freedomotic!e!di! fatto!usufruire!di!
tutte! le! funzionalità! messe! a! disposizione! dalle! altre! componenti! presenti! nel! sistema,!
indipendentemente! dallo! specifico! linguaggio! di! programmazione! utilizzato! per!
l’implementazione.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!76!
Ad!esempio!Freedomotic!può!girare!su!una!scheda!Raspberry!Pi!ed!interagire!con!un!modulo!
Arduino!a!sua!volta!gestito!tramite!controllo!vocale,!riducendo!praticamente!a!zero!lo!sforzo!
in!termini!di!programmazione!del!codice.!!
Freedomotic!è!nato!perché!occorreva!un!framework!in!grado!di!interconnettere!vari!progetti!
basati!su!reti!di!sensori,!sviluppati!in!linguaggi!differenti!e!in!tempi!diversi,!dando!vita!ad!una!
piattaforma!unificata!per!il!testing,!la!valutazione!e!produzione!di!demo!in!grado!di!mostrare!
l’integrazione!di!tali!sistemi.!Il!punto!di!forza!è!rappresentato!dal!fatto!che!il!framework!ha!
una!conoscenza!semantica!della!topologia!degli!ambienti!(zone,!collegamenti!tra!le!stesse)!e!
della! dislocazione!degli! oggetti! al! loro! interno! (luci! in! cucina,! TV! in! salone! ecc).!Gli! stessi!
oggetti! sono! protocolLindependent! ovvero!modellano! le! caratteristiche! degli! oggetti! reali!
indipendentemente!dalla!tecnologia!utilizzata!per!il!loro!funzionamento.!Ad!esempio,!questo!
permette!di!simulare! il!comportamento!delle! luci! (accensione,!spegnimento,! regolazione),!
gestire!le!automazioni!senza!dover!disporre!di!un!impianto!reale!(Figura!4L20).!Una!funzione!
utilissima! per! progettisti! e! installatori.! Quando! tutto! è! pronto! basta! “linkare”! gli! oggetti!
virtuali!con!quelli!reali!selezionando!una!voce!da!un!menu!a!tendina,!dopo!aver!scaricato!il!
plugin!specifico!per!la!tecnologia!da!utilizzare.!
!
Figura*4R20*:*Freedomotic*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!77!
4.6.2!HTML50
Di!linguaggi!utilizzati!per!lo!sviluppo!di!web!application,!che!funzionano!indipendentemente!
dalla!piattaforma!sulla!quale!vengono!eseguiti,!ne!esistono!tanti,!ma!quello!più!utilizzato!e!
supportato!da!Apache!Cordova!è!HTML!5.!
L’HyperText!Markup!Language!(traduzione!letterale:!linguaggio!a!marcatori!per!ipertesti)!è!il!
linguaggio!di!markup!per!eccellenza!usato!per!la!formattazione!e!impaginazione!di!documenti!
ipertestuali!disponibili!nel!web!sotto!forma!di!pagine!web.!
HTML!5!rappresenta!appunto!la!quinta!revisione!delle!specifiche!HTML,!la!quale!rispetto!al!
passato! presenta!molte! differenze.! In! essa! convivono! due! anime:! la! prima,! che! raccoglie!
l’eredità!semantica!dell’XHTML2!(pagina!HTML!scritta!in!conformità!con!lo!standard!XML),!e!
la!seconda!che!invece!deriva!dallo!sforzo!di!aiutare!lo!sviluppo!di!applicazioni!web.!Si!assiste!
quindi!a!una!evoluzione!del!modello!di!markup,!che!non!solo!si!amplia!per!accogliere!nuovi!
elementi,!ma!modifica!in!modo!sensibile!anche!le!basi!della!propria!sintassi!e!le!regole!per!la!
disposizione!dei!contenuti!sulla!pagina,!come!mostrato!in!Figura!4L21.!
!
!
Figura*4R21*:*Potenzialità*HTML5*
*
A!questo!segue!un!rinvigorimento!delle!API!JavaScript!che!vengono!estese!per!supportare!
tutte! le! funzionalità! di! cui! una! applicazione! moderna! potrebbe! aver! bisogno,! quali! ad!
esempio! accedere! all’applicazione! anche! senza! una! connessione! Internet,! pilotare! flussi!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!78!
multimediali! (immagini! e! video),! accedere! e!manipolare! informazioni! generate! in! tempo!
reale!dall’utente!attraverso!sensori!multimediali!quali!microfono!e!webcam.!
Questo! linguaggio! offre! vantaggi! come! interoperabilità,! economicità,! facilità! e! scarsa!
onerosità!degli!aggiornamenti!e!soprattutto!timeLtoLmarket.!Conta!molto!anche!la!facilità!di!
accesso! che! si! ha! scegliendo! questo! linguaggio! perché! con! HTML! 5! un’applicazione! può!
essere!utilizzata!su!qualsiasi!dispositivo!e!può!anche!essere!aperta!direttamente!da!internet.!
!
4.6.3!CSS30
Per! la! realizzazione! dell’interfaccia! grafica,! per! la! definizione! del! layout! e! dello! stile! dei!
caratteri!e!tutto!quanto!concerne!la!View,!Apache!Cordova!fa!uso!di!CSS3.!
Infatti,!un!linguaggio!che!sta!a!stretto!contatto!con!HTML!5!e!che!lo!aiuta!nella!sua!rapida!
diffusione!è!il!CSS!(Cascading!Style!Sheets,!in!italiano!fogli!di!stile).!CSS!è!il!linguaggio!utilizzato!
per! descrivere! la! presentazione! di! pagine!Web,! compresi! i! colori,! il! layout! e! i! font.! Esso!
permette! di! adattare! la! presentazione! a! diversi! tipi! di! dispositivi,! come! grandi! schermi,!
schermi!di!piccole!dimensioni!o!stampanti.!
CSS! 3,! ultima! variante! delle! specifiche! CSS,! offre! numerosi! vantaggi! per! lo! sviluppo! di!
applicazioni!web,!come!ad!esempio!per!quanto!riguarda!le!prestazioni!poiché!offre!potenti!
strumenti!per!la!grafica!e!le!animazioni,!la!semplicità!d’uso!e!il!meccanismo!della!cache!per!
far!funzionare!le!applicazioni!anche!laddove!interne!non!è!disponibile.!!
!
4.6.4!JAVASCRIPT0
Apache! Cordova,! per! la! realizzazione! di! tutto! quanto! concerne! la! business! logic!
dell’applicazione,!fa!uso!di!un!particolare!tipo!di!linguaggio,!quale!Javascript.!
Esso!è!un!linguaggio!di!scripting!orientato!agli!oggetti!e!agli!eventi!che!permette!la!semplice!
creazione!di!effetti!dinamici!interattivi!tramite!funzioni!di!script!invocate!da!eventi!innescati!
a!loro!volta!in!vari!modi!dall’utente!sulla!pagina!web!in!uso.!
Le!interfacce!che!consentono!a!JavaScript!di!rapportarsi!con!un!browser!sono!chiamate!DOM!
(Document!Object!Model,!in!italiano!modello!a!oggetti!del!documento),!i!quali!standard!non!
sempre!vengono!rispettati!dai!vari!browser.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!79!
La!diffusione!delle!web!application!e!delle!applicazioni!desktop!ha!visto!il!fiorire!di!numerose!
librerie!nate!con!lo!scopo!di!semplificare!alcune!delle!attività!più!comuni!e!di!bypassare!le!
differenze!che!ancora!c’erano!tra!i!vari!browser,!favorendo!una!programmazione!unificata!e!
più!rapida.!Tutto!questo!ha!permesso!a!JavaScript!di!diventare!un!linguaggio!maturo!(non!più!
un!semplice!collante!tra!codice!HTML!e!l’utente)!e!utilizzabile!anche!lato!server!e!in!diversi!
contesti!non!più!necessariamente!legati!al!web.!
!
JSON*
Per!quanto!riguarda!lo!scambio!di!messaggi!tra!framework!e!applicazione,!come!è!stato!detto!
nei!paragrafi!precedenti,!avviene!tramite!messaggi!JSON.!
JSON!è!un!acronimo!e!sta!per!Java!Script!Object!Notation.!È!basato!su!JavaScript,!anche!se!
ne!è!indipendente.!!
JSON!è!un!formato!di!testo!completamente!indipendente!dal!linguaggio!di!programmazione,!
ma!utilizza!convenzioni!conosciute!dai!programmatori!di!linguaggi!della!famiglia!del!C,!come!
C,! C++,! C#,! Java,! JavaScript! e! altri.! Questa! caratteristica! fa! di! JSON! un! linguaggio! ideale!
all’interscambio!di!dati!fra!applicazioni!clientLserver.!
JSON!è!basato!fondamentalmente!su!due!strutture:!
•! Un!insieme!di!coppie!nome/valore:!in!diversi!linguaggi,!questo!è!realizzato!come!un!
oggetto,!un!record,!uno!struct,!una!tabella!hash!o!altri!metodi.!
•! Un!elenco!ordinato!di!valori:!nella!maggior!parte!dei! linguaggi!di!programmazione!
questo!si!realizza!attraverso!un!array,!un!vettore,!un!elenco!o!una!sequenza.!
Queste! sono!strutture!di!dati!universali.!Virtualmente! tutti! i! linguaggi!di!programmazione!
moderni!li!supportano!in!entrambe!le!forme!e!questo!fa!sì!che!JSON!sia!un!formato!molto!
utilizzato!nella!programmazione!(23).!
!
4.6.5!WEBSQL0Per! la! realizzazione! del! Model! di! SpokenHouse,! al! fine! di! rendere! persistente! sia! le!
informazioni! necessarie! alla! connessione! che! allo! stato! dell’applicazione,! con! le! relative!
impostazioni,!si!è!ricorso!a!WEBSQL.!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!80!
WebSQL! Database! è! un! web! page! API! utilizzato! per! il! salvataggio! di! dati! all’interno! di!
database!che!possono!essere!interrogati!attraverso!una!variante!del!SQL,!ovvero!su!SQLite!
(3.1.19)!!(24).!Essa!non!fa!parte!direttamente!delle!specifiche!HTML5,!ma!è!parte!della!suite!
di!specifiche!che!permettono!agli!sviluppatori!di!creare!web!applications!a!pieno!titolo.!
Le!specifiche!di!questa!API!permette!l’utilizzo!di!questi!3!metodi!principali:!
•! openDatabase:!questo!metodo!crea!un!oggetto!di!tipo!Database,!utilizzandone!uno!
già!presente!oppure!creandone!uno!nuovo;!
•! transaction:!questo!metodo!dà!la!possibilità!di!controllare!una!transazione!e!la!sua!
esecuzione,!sia!essa!un!commit!o!un!rollback;!
•! executeSql:! questo!metodo! viene! utilizzato! per!mandare! in! esecuzione! la! vera! e!
propria!query!SQL.!
!
Il!supporto!di!questi!web!databases!è!molto!frammentato,!poiché!al!momento!solamente!i!
WebKit!(Chrome,!Safari,!browser!Android,!browser!BlackBerry)!e!Opera!supportano!a!pieno!
questa!tecnologia!(25).!
!
4.6.6!XML0
Per!i!file!di!configurazione!è!stato!utilizzato!il!formato!XML,!all’interno!dei!quali!è!possibile!
trovare!i!messaggi!forniti!in!output!dall’applicazione.!
XML!è!un!acronimo!e!sta!per!eXtensible!Markup!Language.!Esso!è!appunto!un!linguaggio!di!
markup,!ovvero!un!linguaggio!marcatore!basato!su!un!meccanismo!sintattico!che!consente!
di!definire!e!controllare!il!significato!degli!elementi!contenuti!in!un!documento!o!in!un!testo.!
Il!codice!XML!è!simile!all’HTML!perché!infatti!contengono!entrambi!simboli!di!markup!per!
descrivere!il!contenuto!di!una!pagina!o!di!un!file.!Il!codice!HTML!descrive!il!contenuto!di!una!
pagina!web!solo!in!termini!di!come!essa!è!visualizzata!e!nel!modo!in!cui!ci!si!può!interagire.!
La!struttura!base!di!un!documento!XML!è!un!elemento,!definito!da!un!tag!di!apertura!e!uno!
di! chiusura.! Tutti! gli! elementi! sono! contenuti! in! un! elemento! esterno! denominato! root!
(radice).!I!nomi!degli!elementi!descrivono!il!contenuto!dell’elemento,!e!la!struttura!descrive!
le!relazioni!tra!elementi.!XML!supporta!anche!gli!elementi!annidati,!o!elementi!all’interno!di!
altri!elementi,! in!modo!da!gestire!anche!delle!strutture!gerarchiche,! il!che! lo!rende!molto!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!81!
utilizzato!come!mezzo!per!l’esportazione!di!dati!tra!diversi!DBMS!e!come!mezzo!per!salvare!
i!file!di!configurazione!del!progetto!di!lavoro.!!
!
4.6.7!REST0
FeeDomotic!fornisce!delle!Application!Programming!Interface!(API)!(Figura!4L22),!necessarie!
per!l'interazione!tra!framework!e!sistema!domotico!e!per!l'esecuzione!di!specifiche!richieste.!
Tali!API!(26)!sono!state!implementate!seguendo!il!paradigma!REST.!
REST! è! l’acronimo! di! Representational! Transfer! State! e! permette! la! manipolazione! delle!
risorse!per!mezzo!dei!metodi!GET,!POST,!PUT!e!DELETE!del!protocollo!HTTP.!!
!
Figura*4R22*:*API*Freedomotic*
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!82!
Basando!le!proprie!fondamenta!sul!protocollo!HTTP,!il!paradigma!REST!restringe!il!proprio!
campo!d’interesse!alle!applicazioni!che!utilizzano!questo!protocollo!per!la!comunicazione!con!
altri!sistemi.!Il!paradigma!REST!può!essere!riassunto!nei!seguenti!principi:!
•! Identificazione)delle)risorse:!il!meccanismo!più!naturale!per!individuare!una!risorsa!
in! ambito!web! è! dato! dal! concetto! di! URI.! Il! principale! beneficio! nell’adottare! lo!
schema!URI!per!identificare!le!risorse!consiste!nel!fatto!che!esiste!già,!è!ben!definito!
e!collaudato!e!non!occorre!pertanto!inventarsene!uno!nuovo.!!
•! Utilizzo)esplicito)dei)metodi)http;)
•! Risorse)autodescrittive:!i!principi!REST!non!pongono!nessun!vincolo!sulle!modalità!di!
rappresentazione!di!una!risorsa.!Di!fatto,!però,!è!opportuno!utilizzare!formati!il!più!
possibile! standard! in!modo!da! semplificare! l’interazione! con! i! client.! Freedomotic!
supporta!i!formati!di!rappresentazione!JSON!e!XML.!!
•! Collegamenti)tra)risorse:!Un!altro!vincolo!dei!principi!REST!consiste!nella!necessità!
che!le!risorse!siano!tra!loro!messe!in!relazione!tramite!link!ipertestuali.!In!sostanza,!
tutto!quello!che!un!client!deve!sapere!su!una!risorsa!e!sulle!risorse!ad!essa!correlate!
deve!essere!contenuto!nella!sua!rappresentazione!o!deve!essere!accessibile!tramite!
collegamenti!ipertestuali.!
•! Comunicazione)senza)stato:!HTTP!è!un!protocollo!senza!stato,!in!quanto!una!richiesta!
non!ha!alcuna!relazione!con!quella!precedente!o!successiva.!Lo!stesso!principio!si!
applica! ad! un!Web! Service! RESTful,! cioè! le! interazioni! tra! client! e! server! devono!
essere! senza! stato.! È! importante! sottolineare! che! sebbene! REST! preveda! la!
comunicazione!stateless,!non!vuol!dire!che!un’applicazione!non!deve!avere!stato.!La!
responsabilità!della!gestione!dello!stato!dell’applicazione!non!deve!essere!conferita!
al! server,!ma! rientra! nei! compiti! del! client.! Dunque,! grazie! all'applicazione! di! tali!
principi!è!possibile!utilizzare! i!servizi!di!Freedomotic!come!Web!Service!altamente!
efficienti!e!scalabili.!E'!importante!evidenziare!questo!aspetto!in!quanto!le!API!REST!
di!FreeDomotic!assumono!un!ruolo!chiave!nella!gestione!del!sistema!domotico.!
!
!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!83!
4.6.8!TCP/IP0
L’applicazione!mobile,!per!poter!comunicare!con!il!sistema!domotico,!a!livello!di!trasporto,!si!
poggia!sul!protocollo!TCP/IP!(Transmission!Control!Protocol!e!Internet!Protocol):!questo!è!un!
insieme! standard! di! protocolli! sviluppato! nella! seconda!metà! degli! anni! '70! dalla! DARPA!
(Defence!Advanced!Research!Project!Agency),!allo!scopo!di!permettere!la!comunicazione!tra!
diversi!tipi!di!computer!e!di!reti!di!computer.!TCP/IP!è!il!motore!di!Internet,!ecco!perché!è!
l'insieme!di!protocolli!di!rete!più!diffuso!al!mondo.!
I! due! protocolli! che! compongono! il! TCP/IP! si! occupano! di! aspetti! diversi! delle! reti! di!
computer.!L'Internet)Protocol,!la!parte!IP!di!TCP/IP,!è!un!protocollo!senza!connessione!che!
tratta! solo! l'instradamento! dei! pacchetti! di! rete! usando! il!datagramma! IP!come! l'unità!
fondamentale! dell'informazione! di! rete.! Il! datagramma! IP! è! formato! da! un'intestazione!
seguita!da!un!messaggio.!Il!Transmission)Control)Protocol,!la!parte!TCP!di!TCP/IP,!consente!
agli!host!della!rete!di!stabilire!delle!connessioni!usate!per!scambiare!flussi!di!dati.!Inoltre!il!
TCP!garantisce!che!i!dati!tra!le!connessioni!siano!consegnati!e!che!arrivino!ad!host!della!rete!
nello!stesso!ordine!in!cui!sono!stati!trasmessi!da!un!altro!host!della!rete.!
!
4.6.9!HTTP0
Come!detto!nel! paragrafo!4.6.1,! Freedomotic! si! basa! sul! protocollo!HTTP.! Il! protocollo!di!
trasferimento!di!un!ipertesto!(in!inglese,!HyperText!Transfer!Protocol!ovvero!HTTP)!è!usato!
come! principale! sistema! per! la! trasmissione! di! informazioni! sul! web! ovvero! in! una!
architettura!tipica!clientLserver.!
In!particolare!il!protocollo!dello!strato!dell'applicazione!definisce:!!
•! i!tipi!di!messaggi!scambiati,!per!esempio,!messaggi!di!richiesta!e!messaggi!di!risposta;!!
•! la!sintassi!dei!vari!tipi!di!messaggio,!per!esempio!i!campi!del!messaggio!e!come!questi!
campi!vengono!caratterizzati;!!
•! la!semantica!dei!campi,!cioè!il!significato!dell'informazione!nei!campi;!!
•! le!regole!per!determinare!quando!e!come!un!processo!invia!o!risponde!a!messaggi.!
Un!protocollo!dell'applicazione!tipicamente!ha!due!"lati",!un!lato!client!e!uno!server!.!Il!lato!
client!all'interno!di!un!terminale!comunica!con!il!lato!server!di!un!altro!terminale.!Nel!caso!
specifico!di!questo!lavoro!di!tesi,!l’App!implementa!il!lato!client!e!il!microcontrollore!su!cui!è!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!84!
installato! Freedomotic! ne! implementa! il! lato! server.! Come! nel! caso! di! quasi! tutte! le!
applicazioni,!l'host!che!inizia!la!sessione!è!etichettato!come!client.!
Come! ogni! protocollo! dell'applicazione! che! usa! TCP! come! protocollo! di! trasporto,! HTTP!
richiede! una! connessione! TCP.! Poichè! un! client! HTTP! è! responsabile! dell'inizio! della!
comunicazione,!esso!è!anche!l'iniziatore!del!processo!che!crea!la!connessione!TCP.!Inoltre,!
poiché!la!caratteristica!principale!del!protocollo!HTTP!è!di!essere!stateless,!ovvero!privo!di!
stato,! significa! che! la! connessione! tra! client!e!server!viene! chiusa! ogni! volta! che! viene!
esaudita!una!richiesta.!
!
4.6.10! PLUGINECORDOVA0
Come!già!detto!nel!paragrafo!4.5,!Cordova!mette!a!disposizione!dei!plugin!per!interagire!con!
il! Sistema! Operativo! Mobile! Nativo! e! per! agevolare! l’utente! ad! accedere! ad! alcune!
funzionalità!hardware!e!software!dello!smartphone.!
I!plugin!necessari!allo!sviluppo!di!SpokenHouse!sono:!
•! Notification! e! Dialogs:! permettono! l’accesso! ad! alcuni! elementi! di! dialogo!
dell’interfaccia!utente,!quali!ad!esempio!gli!“alert”.!
•! Battery! status:! permette! la! gestione! degli! eventi! relativi! allo! stato! della! batteria;!
avverte!l’utente!sia!sulla!percentuale!di!carica!della!batteria!sia!quando!essa!sta!per!
esaurirsi.!
•! Text!To!Speech:!abilita!la!sintesi!vocale!sullo!smartphone.!
•! Insomnia:!previene!che!il!telefono!vada!in!standLby!e!mantiene!costante!la!luminosità!
dello!schermo.!
•! Vibration:!consente!la!gestione!degli!eventi!relativi!alla!vibrazione.!
•! Storage:!permette!la!creazione!e!gestione!di!un!Data!Base!di!tipo!SQL!Lite!locale!al!
device.!
•! Globalization:!permette!di!ottenere!informazioni!sulla!lingua!e!sull’orario!della!zona!
geografica!in!cui!si!trova!l’utente.!
•! Device:!permette!di!ottenere!informazioni!sul!telefono!e!sul!sistema!operativo.!
!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!85!
4.7! AMBIENTI0DI0SVILUPPO0
!
Per! poter! sviluppare! in! maniera! corss! platform! l’applicazione! SpokenHouse,! si! è! ricorso!
all’utilizzo!del!framework!open!source!Apache!Cordova;!altresì!per!potersi!interfacciare!con!
un!ambiente!domotico!si!è!ricorso!a!FreeDomotic.!!
!
4.7.1!CONFIGURAZIONE0APACHE0CORDOVA0
Le!fasi!di!installazione!per!poter!iniziare!a!programmare!con!Apache!Cordova!sono!in!prima!
istanza! le!medesime! che! servono! per! sviluppare! applicazioni! native,! ovvero! è! necessario!
avere! installato! sulla!macchina! il!kit!di! sviluppo! (SDK)!del! sistema!operativo!per! il!quale! si!
intende!realizzare!l'applicazione:!
•! Nel!caso!di!Android!è!necessario!solo!disporre!dell’!Android!SDK,!non!avendo!vincolo!
alcuno!sul!sistema!operativo!della!macchina!su!cui!si!sviluppa!l’applicazione.!
•! Per! creare! un'applicazione! che! giri! su! dispositivi! con! sistema! operativo! iOS! come!
iPhone!o!iPad!è!necessario!disporre!di!un!Mac,!quind!dell'iOS!SDK!e!dell'ambiente!di!
sviluppo!Xcode.!
•! Come! nel! caso! di! iOS,! per! Windows! Phone! ci! sono! delle! restrizioni! per! quanto!
riguarda!il!sistema!operativo!da!utilizzare!(!Windows!8.1!Professional!x64!)!che!per!
l’ambiente!di!sviluppo!(Microsoft!Visual!Studio!2013!Update!2).!! !
Oltre!a!quanto!elencato!precedentemente,!!altri!strumenti!necessari!allo!scopo!sono:!
•! Apache!ANT.!
•! Git!Client.! !
•! Java!JDK.! !
L'installazione!di!Cordova!richiede!l'utilizzo!dell'interfaccia!a!riga!di!comando!(CLI!–!Command!
Line!Interface).!!
Come! primo! passaggio! è! necessario! scaricare! la! versione! di! Apache! Cordova! desiderata!
dall'area!download!del!sito!ufficiale.!!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!86!
Per! versioni! successive! alla! 3.3.0! di! Apache! Cordova,! l'installazione! viene! delegata! al!
comando!“npm)di)Node.js”.!
Di!seguito!verrà!fatta!una!panoramica!sui!passi!principali!da!seguire:!
1.! Scaricare!ed! Installare!“node.js”!ed! impostare! la! relativa!variabile!d’ambiente,!per!
poter!invocare!comandi!come!“node”!e!“npm”.!
2.! Installare!il!modulo!di!Cordova!usando!l’utility!“npm”)di!node.js!
sudo npm install –g cordova (per!iOS!e!Linux)!
C:\>npm install –g cordova (per!Windows)!
Dove!il!Flag!“Lg”!permette!l’installazione!in!maniera!globale!di!Cordova.!
3.! Posizionarsi! nella! directory! di! interesse,! nella! quale! salvare! codice! sorgente!
dell’applicazione,!ed!eseguire,!sempre!da!linea!di!comando,!!
cordova create hello com.example.hello HelloWorld
a.! Il!primo!argomento! (hello)!specifica! la!directory!che!deve!essere!generata!
per! il! progetto! che! si! vuole! creare.! In! questa! directory,! che! non! deve!
preesistere,! Cordova! creerà! una! sottodirectory! (www)! nella! quale! sarà!
contenuta! l’home! page! dell’applicazione! (index.html),! insieme! ad! altre!
risorse!associate!ad!essa!()foglio!di!stile!css!,!immagini,!javascript))!
b.! !Il! secondo! argomento! () com.example.hello)! fornisce! al! progetto! un!
identificativo!del!dominio!dell’applicazione;!questo!è!opzionale!e!può!essere!
impostato! in! qualsiasi! momento! all’interno! del! file! di! configurazione! del!
progetto!(“config.xml”).!
c.! il! terzo!argomento!(HelloWorld)!fornisce! il!titolo!dell’applicazione!che!sarà!
visualizzato!sullo!smartphone;!come!il!parametro!precedente,!anche!questo!
è! opzionale! ed! impostabile! in! un! secondo! momento! nel! file! di!
configurazione.!!
4.! Indicare! il! set! di! piattaforme! di! destinazione! per! il! quale! si! intenderà! sviluppare!
l’applicazione,!in!base!alle!SDK!precedentemente!installate!sul!Computer!
cordova platform ls
per!controllare!il!set!di!piattaforme!disponibili!sulla!propria!macchina;!
! cordova platform add android
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!87!
! per!aggiungere!una!piattaforma!di!sviluppo!
5.! Aggiungere!dei!plugin!che!permettono!di!interfacciarsi!direttamente!con!il!sistema!
operativo!del!device!e!con!le!sue!componenti!native.!Una!lista!di!questi!plugin,!inclusi!
anche! quelli! di! terze! parti! forniti! dalla! community,! può! essere! trovata! nel! sito!
“plugins.cordova.io”.!Per!aggiungere!un!plugin,!il!comando!da!inserire!è:!
cordova plugin add cordova-plugin-gelocation)
6.! Compilare!l’applicazione!per!il!sistema!operativo!Mobile!di!interesse!
cordova build android
il!comando!“build”!è!una!scorciatoia!dei!comandi!“prepare”!e!“compile”;!in!tutti!i!casi!
è!comunque!possibile!non!specificare!la!piattaforma!di!riferimento!e!l’applicazione!
verrà!compilata!per!tutte!le!piattaforme!installate!sul!progetto.!
7.! Eseguire!l’applicazione!su!un!emulatore!mediante!il!comando!!
cordova emulate android
! oppure!installarlo!ed!eseguirlo!su!un!device!reale!attraverso!il!comando:!
! ! cordova run android!
!
4.7.2!CONFIGURAZIONE0FREEDOMOTIC0
Al! fine! di! poter! usufruire! correttamente! del! framework! FreeDomotic,! tramite! PC,! è!
necessario!disporre!dei!seguenti!preLrequisiti:!
•! Java!JDK!(versione!minima:!java!7).!
•! Apache!Maven!(versione!richiesta:!2!o!3).!
Per!poter!usufruire!della!versione!ufficiale!del!framework,!bisogna!recarsi!sul!sito!ufficiale!di!
FreeDomotic!e!scaricare!la!release!di!interesse.!!
Nel! caso! in! cui! si! è! interessati! ad! essere! in! possesso! della! dailyLbuild! più! recente! ed!
implementare! delle! modifiche! nel! framework! stesso,! come! l’implementazione! di! nuovi!
plugin,!è!possibile!scaricare!direttamente!il!codice!sorgente!del!framework!da!Git!all’indirizzo:!
https://github.com/freedomotic/freedomotic.git).)
I!passi!da!seguire!sono:!
1.! Creazione!di!un!account!su!GitHub,!nel!caso!in!cui!non!se!ne!è!già!in!possesso;!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!88!
2.! Effetturare!una!Fork!del!repository,!ovvero!creare!una!copia!in!locale!del!codice!del!
framework,! in! modo! tale! che! le! modifiche! che! si! andranno! ad! apportare! non! si!
rifletteranno! sul! progetto! originale! presente! su! GitHub.! Il! comando! da! eseguire,!
tramite!linea!di!comando,!è:!
git$clone$https://github.com/YOUR7GITHUB7USERNAME/freedomotic.git$
3.! Compilazione! tramite! Maven,! eventualmente! in! seguito! alla! modifica! del! codice!
sorgente:!
mvn$clean$install$
4.! Infine!lanciare,!tramite!linea!di!comando,!il!file!).jar)!ottenuto!dalla!fase!precedente.!
java$–jar$freedomotic.jar$
!
Una!volta!compilato!ed!eseguito!il!framework,!è!necessario!installare!i!due!plugin!necessari!
al!framework!al!fine!di!poter!comunicare!con!un!generico!client!(sia!esso!Browser!che!App!
Mobile):!!
•! RestAPILv3:!questo!plugin!permette!al!framework!di!comunicare!con!i!client!tramite!
l’utilizzo!di!protocollo!REST.!
•! ApplicationServer:! questo! plugin,! che! include! un!Web! Server! Jetty! embedded,! è!
utilizzato! per! supportare! il! client! nell’interfacciamento! con! FreeDomotic.! Tramite!
questa!Web!application!è!possibile! accedere!all’API!di! FreeDomotic! attraverso!un!
qualsiasi!browser,!per!controllare!il!framework!installato!sul!PC.!
!
4.7.3!PROBLEMI0PROGETTUALI0
Per!lo!sviluppo!di!un’applicazione!mobile!cross!platform,!è!possibile!ricorrere!a!diversi!IDE!(!
Integrated)Development) Environment)! presenti! sul!mercato:! i! più! famosi,! tra! questi! sono!
Visual!Studio!2013!(!per!ambienti!Windows)!,!xCode!(!per!Mac)!ed!Eclipse.!Durante!questo!
lavoro! di! tesi! sono! stati! riscontrati! diversi! problemi! con! l’utilizzo! di! ognuno! di! questi,! e!
precisamente:!
•! Creazione!di!una!struttura!del!progetto!non!conforme!!a!quella!creata!tramite!CLI!di!
Apache!Cordova!(Visual!Studio!e!Eclipse).!
4!–!Sistema!Mobile!a!supporto!dei!non!vedenti!
!
!89!
•! Errore! durante! il! build! eseguito! direttamente! all’interno! dell’IDE! (Visual! Studio! e!
Eclipse);!!
•! Problemi!nel!riconoscimento!delle!classi!a!supporto!dei!plugin!scaricati!(Visual!Studio!
e!Eclipse).!
•! Build!dell’applicazione!consentito!solo!per!una!specifica!piattaforma!mobile!(xCode.)!
In!base!ai!problemi!sopra!elencati!si!è!deciso!di!sviluppare! l’applicazione!senza! l’ausilio!di!
alcun!IDE.!
!
!
!
! !
5!–!Verifica!e!Validazione!
!
!90!
CAPITOLO050!
5! VERIFICA0E0VALIDAZIONE0 0Nel!seguente!capitolo!verrà!presentata!la!fase!di!verifica!e!validazione!!del!sistema!software!
sviluppato!nel!corso!di!questo!lavoro!di!tesi,!sulla!base!di!quanto!definito!nei!requisiti!ed!i!
casi!d’uso!nel!capitolo!4!(!Sistema!Mobile!a!supporto!dei!non!vedenti).
La! verifica,! infatti,! serve! a! stabilire! che! il! software! e! la! sua! implementazione! rispettino! i!
requisiti!e!le!specifiche.!
La!fase!di!validazione,!d’altro!canto,!serve!ad!accertare!che!i!requisiti!e! le!specifiche!siano!
rispettati!nella!maniera!giusta:!è!il!momento!conclusivo!della!verifica!nonché!un!passaggio!
molto! delicato,! in! quanto! si! può! ottenere! un! software! perfettamente! funzionante! ma!
completamente!inutile!se!non!rispecchia!quanto!chiesto!nella!fase!di!analisi.!
Durante!questa!fase,!sono!stati!creati!dei!casi!di!test!definiti!sulla!base!dei!casi!d’uso;!tali!casi!
di!test!sono!stati!utilizzati!sia!per!il!test!di!usabilità,!quindi!testati!direttamente!con!l’utente!
del!sistema,!che!!per!test!di!tipo!funzionale,!automatizzando!i!test!mediante!un!opportuno!
framework;!quest’ultima! tipologia!di! test! serve!per!determinare! se!un! caso!d’uso!è! stato!
implementato!correttamente!e!nella!sua!interezza.!
!
5.1! SPOKENHOUSE:0MENU0DI0NAVIGAZIONE0
!
Al!fine!di!facilitare!la!navigabilità!dell’applicazione!al!target!utente!di!SpokenHouse,!il!menù!
di!navigazione!è!stato!strutturato!ad!albero,!come!rappresentato!in!Figura!5L1.!
Partendo!dal!nodo!radice!(Menu)!e!scorrendo!l’albero,!tramite! i!diversi!nodi!si!giunge!alle!
foglie,! che! rappresentano! l’effettivo!comando!che! l’utente!vuole!attuare,! sia!dal!punto!di!
vista!delle!impostazioni!che!da!quello!del!controllo!domotico.!!
5!–!Verifica!e!Validazione!
!
!91!
Nella!sezione!Controllo)Domotico!è!possibile!effettuare!tutte!le!azioni,!messe!a!disposizione!
da! SpokenHouse,! sul! sistema! domotico! e! quindi! sul! controllo! degli! oggetti! all’interno!
dell’ambiente! domestico.! Inoltre,! c’è! una! sezione! dedicata! alle! “scorciatoie”! ,! ovvero! gli!
“shortcut”,! in! cui! è! possibile! controllare! un! set! di! oggetti! simultaneamente! (es.!
accesione/spegnimento! luci! nelle! zone! notte! e! giorno),! impostare! la! temperatura! del!
termostato!oppure!richiedere!un!report!sui!dispositivi!accesi.!
Nella!sezione!adibita!alle!impostazioni,!l’utente!può!personalizzare!l’applicazione!in!base!alle!
proprie!esigenze.!Le!impostazioni!presenti!sono:!
•! Modifica!tema!interfaccia.!
•! Modifica!grandezza!font.!
•! Modifica!credenziali!di!accesso.!
•! Modifica!tema.!
•! Attivazione/!disattivazione!tutorial!di!navigazione.!
Infine,!nella!sezione!“Guida”,!è!possibile!ascoltare!una!guida!introduttiva,!prima!di!utilizzare!
l’applicazione.!!
Sfruttando!l’organizzazione!ad!albero,!di!seguito!verranno!esplicitati!più!nel!dettaglio!alcuni!
dei!casi!d’uso!di!cui!si!è!discorso!nel!capitolo!4,!in!modo!tale!che!vengano!mostrati!più!a!basso!
livello! quelli! che! sono! i! cambiamenti! di! stato! dell’applicazione,! grazie! anche! all’utilizzo! di!
screenshots.!!
!
5!–!Verifica!e!Validazione!
!
!93!
5.2! TEST0DI0USABILITA’0
Durante!la!fase!di!raccolta!dei!requisiti,!è!stata!contattata!l’associazione!“Unione!Ciechi!di!
Benevento”,!come!già!detto!nel!capitolo!4,!al!fine!di!avere!un!confronto!diretto!con!quelli!
che!rispecchiano!il!target!utente!dell’applicazione.!!
In!base!ai!loro!suggerimenti,!sono!stati!aggiunti!i!seguenti!requisiti!funzionali:!
•! Modifica!del!tema!dell’interfaccia.!•! Modifica!grandezza!dei!caratteri!del!font.!•! Verifica!dei!dispositivi!accesi!nell’ambiente!domestico.!•! Guida!vocale!durante!la!navigazione!dell’applicazione.!
Finita! la! fase! di! sviluppo! dell’applicazione,! è! stata! ricontattata! l’associazione,! al! fine! di!
verificare! il! rispetto! delle! caratteristiche! e! dei! requisiti! richiesti,! seguendo! le! linee! guida!
dell’accessibilità!e!dell’usabilità.!
Gli!utenti!hanno!da!subito!manifestato!il!loro!interesse!all’iniziativa!e!dato!la!loro!disponibilità!
nel!test!dell’applicazione.!!
La! sperimentazione! è! stata! condotta! in!maniera! informale! per!mettere! a! proprio! agio! gli!
utenti!del!test.!
Due!degli!utenti!contattati!riportavano!disabilità!visive!parziali!con!conseguente!daltonismo,!
mentre! il! terzo! aveva! disabilità! visive! totali;! tutti! possiedono! un! iPhone! che! usano!
correntemente!con! il! supporto!“VoiceOver”!alla!disabilità!visiva,!quindi!abituati!all’utilizzo!
dello!smartphone.!!
Per!effettuare!questi!test!sono!stati!utilizzati!due!device!Android,!sui!quali!è!stata!installata!
una!versione!di!prova!di!SpokenHouse!(che!fa!uso!di!uno!stub!per!simulare!la!connessione!al!
FreeDomotic).!
Nella!Figura!5L2!sono!mostrate!delle!foto!che!ritraggono!gli!utenti!mentre!effettuano!i!test.!
!
5!–!Verifica!e!Validazione!
!
!94!
!
!
!
!
Per!le!persone!con!disabilità!visive,!usare!uno!smartphone!senza!nessun!tipo!di!supporto!è!
impossibile,! poiché! l’uso! è! fortemente! legato! a! ciò! che! appare! sullo! schermo,! quindi! è!
essenziale!la!presenza!di!uno!screen!reader!che!li!aiuti!a!identificare!ciò!che!c’è!sullo!schermo.!
Figura*5R2*:*Utenti*durante*i*test*
5!–!Verifica!e!Validazione!
!
!95!
Un! lettore! di! schermo! tradizionale! descrive! solamente! cosa! c’è! sul! display;! VoiceOver,!
abitualmente!utilizzato!dai!tre!tester,!differisce!dagli!altri!in!quanto!spiega!dove!è!situato!ogni!
singolo!elemento!e!fornisce!informazioni!sugli!oggetti!vicini.!!
Mediante!touchscreen,!perciò,!si!interagisce!direttamente!con!gli!oggetti!a!video,!capendo!
posizione!e!contesto! in!modo!naturale.!Toccando!l’angolo! in!alto!a!sinistra!dello!schermo,!
viene!spiegato!cosa!c’è!nell’angolo!in!alto!a!sinistra!di!una!pagina!web,!e!man!mano!che!si!
trascina!il!dito!sul!display!si!naviga!oralmente!nei!dintorni.!Questo!fattore!di!'trascinamento'!
ha!influenzato!la!modalità!di!navigazione!dell'applicazione!da!parte!dei!tre!tester:!infatti,!è!
stato!necessario! spiegargli! inizialmente!che,!nel! caso!dell'applicazione!di! SpokenHouse,! la!
navigazione!viene!effettuata!tramite!“tap”!del!dito!sull'interfaccia.!!
!
5.3! TEST0FUNZIONALE0
!
In!questo!paragrafo!si!va!ad!esplicitare!la!strategia!di!testing!funzionale!utilizzata,!al!fine!di!
validare! e! verificare! l’applicazione.! In! prima! analisi,! si! va! a! definiti! la! tipologia! di! testing!
utilizzata,! nonché! gli! strumenti! impiegati! al! fine! di! eseguire! l’attività! in! esame;!
successivamente,!saranno!illustrate!la!piattaforma!e!la!configurazione!dell’!ambiente.!
Per! ciascuna! funzionalità,! sono! stati! individuati! i! parametri,! le! categorie,! le! scelte! e! i!
constraints.!In!base!a!queste!definizioni,!sono!stati!specificati!i!casi!di!test.!Per!ciascun!caso!
di!test,!è!stato!realizzato!uno!script!Python!che,!eseguito!sull’applicazione,!ha!permesso!di!
analizzare!i!risultati;!questi!sono!stati!confrontati!con!i!cosiddetti!oracoli!(risultati!attesi)!al!
fine!di!determinare!il!successo!o!il!fallimento!dei!casi!di!test.!!
!
5.3.1!SCENARIO0DI0TESTING0
Si!è! scelto!di! effettuare! testing!di! tipo! funzionale,!nel! senso! che! si! va!a! testare! il! sistema!
rispetto!alle!sue!specifiche!(testare!i!requisiti!funzionali)!e!non!rispetto!alla!struttura.!Affinché!
sia!possibile!effettuare!un!buon!testing,!funzionale!è!opportuno!che!le!specifiche!siano!scritte!
in!modo!accurato!e!preciso,!al!fine!di!rendere!i!requisiti!testabili.!!
5!–!Verifica!e!Validazione!
!
!96!
La!determinazione!dei!casi!di!test!è!stata!effettuata!prendendo!in!considerazione!il!“Category!
Partition!Testing”.!Di!seguito,!sarà! illustrata! la!procedura!utilizzata!al! fine!di!determinare! i!
test!frame!da!cui!ricavare!i!casi!di!test!da!sottoporre!al!sistema.!!
•! Si!prendono!in!considerazione!le!diverse!funzionalità!del!sistema!che!possono!essere!
testate!indipendentemente.!
•! Per!ciascuna!funzionalità,!se!ne!individuano!i!parametri!e,!per!ciascun!parametro,!si!
identificano!le!diverse!categorie.!
•! Le!categorie!sono!suddivise!in!scelte!in!modo!tale!da!ricavare!le!classi!di!equivalenza.!
•! Si!individuano!i!vincoli!(constraints)!esistenti!tra!le!varie!scelte!identificate,!ovvero!si!
va! a! vedere! come! il! verificarsi! di! una! scelta! vada! ad! influenzare! ! l’esistenza,! il!
verificarsi,!di!altre!scelte.!
•! Si!vanno!a!specificare! i! test! frame,!andando!a!prendere! in!considerazione!tutte! le!
possibili!combinazioni!di!scelte!nelle!varie!categorie.!
•! Si!trasformano!i!test!frame!in!casi!di!test!effettivi.!
Questa!particolare!tipologia!di!testing!è!stata!effettuata!solo!su!sistema!operativo!Android.!
L’applicazione!di!SpokenHouse,!essendo!stata!sviluppata!in!maniera!cross!platform,!non!varia!
il!suo!comportamento!a!seconda!del!sistema!operativo!mobile!sul!quale!è!installata;!per!cui,!
come!sistema!operativo!da!sottoporre!a!testing!funzionale,!è!stato!scelto!Android,!sia!perché!
è!il!Sistema!Operativo!Mobile!più!diffuso!e!perché!si!ha!più!dimestichezza!con!esso.!!
La! procedura! di! testing! è! stata! automatizzata! utilizzando! il! tool! del! framework! Android!
MonkeyRunner.!Tale!tool!fornisce!un!API!che!permette!di!controllare!un!dispositivo!Android!
(caso!in!esame)!o!un!emulatore,!al!di!fuori!del!codice!Android.!
Con!MonkeyRunner!è!possibile!scrivere!programmi!in!Python!che!installano!un’applicazione!!
Android! sul! device! e,! allo! stesso! tempo,! la! gestiscono! inviando! la! sequenza! dei! tasti! che!
bisogna! premere,! nonché! acquisendo! gli! screenshot! dell’interfaccia! utente,! salvandoli!
eventualmente! su! un’opportuna! directory.! Il! tool! in! esame! è! nato! per! testare! a! livello!
funzionale!applicazioni!su!dispositivi!Android!lanciando!casi!di!test!scritti!in!Python!in!cui!si!
forniscono!sequenze!di!input,!quali!eventi!o!pressioni!di!tasti!e!si!visualizzano!i!risultati!sotto!
forma!di!screenshot!(Appendice!B).!
!
!
5!–!Verifica!e!Validazione!
!
!97!
5.3.2!PIATTAFORMA0E0CONFIGURAZIONE0AMBIENTE0
Per!condurre!l’attività!di!testing!è!stato!creato!uno!stub,!il!cui!scopo!è:!
•! simulare! la! connessione! con! il! framework! FreeDomotic,! il! quale,! in! seguito! alla!
chiamata! effettuata! dall’applicazione! SpokenHouse,! restituisce! dei! file! JSON!
contenenti!le!informazioni!relative!alla!struttura!dell’ambiente!domotico;!
•! invio!dei!comandi!al!framework!per!il!controllo!degli!oggetti,!o!dispositivi,!connessi!
al!sistema!domotico.!
Successivamente,! è! stata! installata! l’applicazione! su! un! dispositivo! Android! e! sono! stati!
lanciati!i!casi!di!Test.!
!
5.4! CONFIGURAZIONE0APPLICAZIONE0
!
L’utente!che!vuole!utilizzare!SpokenHouse!deve!scaricare!il!servizio!dalla!rete,!precisamente!
dal! market! del! sistema! operativo! installato! sul! suo! device.! Una! volta! effettuata! questa!
operazione,!SpokenHouse!potrà!essere!eseguita.!
Prima! di! poter! effettivamente! controllare! i! dispositivi! elettronici! presenti! nell’abitazione,!
l’applicazione! dovrà! essere! configurata! adeguatamente! per! poter! garantire! un! corretto!
funzionamento!della!stessa!e!una!corretta!comunicazione!con!il!framework!di!FreeDomotic!
precedentemente! installato! (su! un! PC! o! su! una! board! programmabile,! come! ad! esempio!
Raspberry!Pi).!
Di!seguito!sono!elencati!quelli!che!sono!i!passi!che!l’installatore!del!sistema,!dovrà!seguire!
per!una!corretta!configurazione!dell’applicazione,!quando!questa!viene!eseguita!per!la!prima!
volta!sul!device.!!
•! Passo*1:!Il!primo!parametro!richiesto!dall’applicazione!è!l’indirizzo!IP!della!macchina!
sulla!quale!è! in!esecuzione! il! framework!di!FreeDomotic.!Questo!parametro!dovrà!
rispettare! lo! standard! con! cui! vengono! scritti! gli! indirizzi! IP;! se! così! non! fosse,!
l’applicazione,! mediante! messaggio! vocale! e! testuale,! avviserà! l’installatore!
dell’errore.!
5!–!Verifica!e!Validazione!
!
!98!
•! Passo*2:!Il!secondo!parametro!richiesto!dall’applicazione!è!la!porta!della!macchina!
sulla!quale!è! in!esecuzione!il! framework!di!FreeDomotic.!Questo,! insieme!a!quello!
precedente,! si! rende! necessario! per! l’instaurazione! della! connessione! tra!
applicazione! e! FreeDomotic.! Anche! il! valore! della! porta! dovrà! rispettare! uno!
standard,! ovvero! dovrà! essere! un! numero! intero! di! massimo! 4! cifre;! se! ciò! non!
venisse! rispettato,! l’applicazione,!mediante!messaggio! vocale! e! testuale,! avviserà!
l’installatore!dell’errore.!
•! Passo* 3:! Il! terzo! parametro! richiesto,! invece,! è! l’username.! Questo! dovrà!
corrispondere! al! valore! inserito! all’interno! di! FreeDomotic,! per! permettere! la!
creazione! e! la! modifica! dell’ambiente! di! lavoro.! Il! framework! ha! bisogno! di!
identificare! l’utente! di! turno! che! richiede! o! vuole! modificare! determinate!
informazioni.!
•! Passo*4:!L’ultimo!parametro!richiesto!è!quello!della!password,!relativo!all’username!
inserito!precedentemente.!Anche!questo!parametro! serve!ad! identificare! l’utente!
che!effettua!l’accesso!al!framework;!senza!di!questi,!non!è!possibile!eseguire!nessuna!
azione!su!FreeDomotic.!
•! Passo*5:!Una!volta!completato!l’inserimento!delle!credenziali,!verrà!aperta!l’home!
page! di! SpokenHouse,! attraverso! la! quale! l’utente! potrà! navigare! il! contenuto!
dell’applicazione.!!
Ad! ognuna! delle! fasi! appena! descritte,! corrisponde! un! determinato! stato! all’interno!
dell’applicazione,!e!quindi!ad!un!determinato!cambiamento!nella!visualizzazione!del!menu!di!
navigazione.!Tutti!questi!cambiamenti!possono!essere!rappresentati! facilmente!attraverso!
una! serie! di! screenshots! effettuati! su! un! device! (Figura! 5L3)! sul! quale! è! in! esecuzione!
l’applicazione!di!SpokenHouse.!
!
5!–!Verifica!e!Validazione!
!
!99!
!!! !! !!!!!!!!!!!!!!!!!!!!!!!!!!
*
*
*
*
*
!
!
*
*
*
*
*
*
Figura*5R3*Screenshots*relativi*a*“configurazione*applicazione”*
!
!
I!4!parametri!richiesti!durante!l’installazione!sono!salvati!in!un!database!interno!al!device!e,!
a!ogni!nuovo!accesso!all’applicazione,!questo!database!verrà!invocato!per!poterli!leggere.!La!
tecnologia!utilizzata!per!fare!tutto!ciò!è!WebSQL,!il!cui!codice!sorgente!per!la!gestione!lo!si!
trova!all’interno!di!uno!dei!plugin!forniti!da!Apache!Cordova,!ovvero!Device.!
!
1* 2* 3*
4* 5*
5!–!Verifica!e!Validazione!
!
!100!
!
Figura*5R4*Porzione*di*codice*relativo*alla*gestione*del*DB*del*device*
!
Nella!sezione!di!codice!riportata!nella!Figura!5L4,!si!può!notare!come!vengono!sfruttate!le!
primitive!di!WebSQL!per!svolgere!le!operazioni!elementari!sul!database,!come!ad!esempio:!
•! “openDatabase”!per!poter!creare!o!aprire!un!determinato!database!(in!questo!caso,!
il!database!“Spoken!House!DB”);!
•! “transaction”!per!poter!creare!una!transazione!sul!database!creato!in!precedenza;!
•! “executeSql”!per!poter!effettuare!la!query!vera!e!propria!passata!come!argomento!a!
questa!stessa!funzione.!
!
!
5.4.1!TEST0FUNZIONALE:0CONFIGURAZIONE0APPLICAZIONE0
I!!parametri!della!funzionalità!in!esame!sono!6:!
1.! Pulsante!Annulla;!
2.! Pulsante!Ok;!
3.! Indirizzo!IP;!
4.! Porta;!
5.! Username;!
6.! Password.!
5!–!Verifica!e!Validazione!
!
!101!
Relativamente!ai!primi!due!parametri,!ne!abbiamo!uno!per!ogni!informazione!richiesta!ai!fini!
della!configurazione.!In!altre!parole,!essendo!la!configurazione!una!funzionalità!che!ad!ogni!
step!richiede!l’inserimento!di!uno!specifico!valore,!all’atto!di!ogni!inserimento!l’utente!può!
decidere!di!confermare,!mediante!il!pulsante!Ok,!o!di!annullare,!mediante!il!pulsante!Annulla.!
Per!ciascun!parametro!ne!individuiamo!le!categorie!e!per!ciascuna!categoria!ne!individuiamo!
le!scelte!ottenendo:!
Pulsante!Annulla:!
•! Pressione!
Pulsante!Ok:!
•! Pressione!
Indirizzo!IP:!!
•! Inserito!
1.! Formato!valido:!!!
!! Quattro!campi!di!sole!cifre,!da!una!a!tre,!intervallate!da!punto!“.”:!
{1.1.1.1,!192.168.0.123}!
2.! Formato!non!valido:!!
!! Presenza!di!una!lettera:!{195.168.a.134}!
!! Tre!campi!anziché!4:!{192.168.1}!
!! Assenza!di!una!cifra!tra!due!punti!“.”:!{192.168..9}!!
•! Non!inserito!
Porta:!!
•! Inserito!
1.! Formato!valido:!!!
!! Cifre,!da!un!minimo!di!una!ad!un!massimo!di!4!:!{9,!9111}!
2.! Formato!non!valido:!!
!! Presenza!di!una!lettera:!{3y99}!
•! Non!inserito!
Username:!
•! Inserito!
•! Non!inserito!
5!–!Verifica!e!Validazione!
!
!102!
Password:!
•! Inserita!
•! Non!inserita!
!
!
Sono!state!poi!individuate!le!proprietà!(i!vincoli)!tra!le!possibili!scelte;!queste!sono!elencate!
nella!Tabella!5L1,!la!quale!va!a!individuare!formalmente!le!specifiche!di!test.!
!
Indirizzo*IP* !
Inserito!Valido! (if!insertIP!||!firstConfiguration)!
Inserito!Non!Valido! !
Non!Inserito! !
Annulla* !
Selezionato! (property!insertIP)!
Non!Selezionato! !
Ok* !
Selezionato! (property!InsertPorta)!
Non!selezionato! (property!InsertIP)!
Porta* !
Inserito!Valido! (if!insertPorta)!
Inserito!Non!Valido! (if!insertPorta)!
Non!Inserito! (if!insertPorta)!
Annulla* !
Selezionato! (property!insertPorta)!
Non!Selezionato! !
5!–!Verifica!e!Validazione!
!
!103!
Ok* !
Selezionato! (property!insertUsername)!
Non!Selezionato! !
Username* !
Inserito! (if!insertUsername)!
Non!Inserito! (if!insertUsername)!
Annulla* !
Selezionato! (property!insertUsername)!
Non!Selezionato! !
Ok* !
Selezionato! (property!insertPassword)!
Non!Selezionato! !
Password* !
Inserito! (if!insertPassword)!
Non!Inserito! (if!insertPassword)!
Annulla* !
Selezionato! (property!insertPassword)!
Non!Selezionato! !
Ok* !
Selezionato! !
Non!Selezionato! !
Tabella*5R1*:*Vincoli*caso*d'uso*"Configurazione*Applicazione"*
!
Infine,!sono!stati!individuati!i!test!frames!considerando!le!possibili!combinazioni!lecite!tra!le!
scelte!individuate!da!cui!abbiamo!ricavato!i!seguenti!casi!di!test!(Tabella!5L2).!
5!–!Verifica!e!Validazione!
!
!104!
Caso*di*test* Valori*Parametri* Output*Atteso*
1* Inserisco!Ip!valido=”1.1.1.1”!e!premo!Ok;! Notifica! avvenuta!configurazione!
** Inserisco!porta!valida!=!"9"!e!premo!Ok;! !!
** Inserisco!username!e!premo!Ok;! !!
* Inserisco!password!e!premo!Ok.! !
2* Inserisco!Ip!valido=”1.1.1.1”!e!premo!Annulla;! Notifica! avvenuta!configurazione!
** Inserisco!Ip!valido=”192.168.0.123”!e!premo!Ok;! !!
** Inserisco!porta!valida!=!"9"!e!premo!Annulla;! !!
** Inserisco!porta!valida!=!"9111"!e!premo!Ok;! !!
** Inserisco!username!e!premo!Ok;! !!
* Inserisco!password!e!premo!Ok;! !
3* Inserisco!Ip!valido=”192.168.0.123”!e!premo!Ok;! Notifica!errore!
** Inserisco!porta!non!valida=”3y99”!e!premo!Ok;! !!
4* Inserisco!Ip!non!valido!=”195.168.a.134”!e!premo!Ok;! Notifica!errore!
5* Inserisco!Ip!valido!=”192.168.0.123”!e!premo!Ok;! Notifica!errore!
** Inserisco!porta!valida!=!"9111"!e!premo!Ok;! !!
** Inserisco!username!e!premo!Ok;! !!
** Inserisco!password!e!premo!Annulla;! !!
6* Inserisco!Ip!valido!=”192.168.0.123”!e!premo!Ok;! !
* Inserisco!porta!valida!=!"9111"!e!premo!Ok;! !
* Inserisco!username!e!premo!Annulla;! !
7* Non!inserisco!Ip!e!premo!Ok;! Notifica!errore!
8* Inserisco!Ip!valido=”192.168.0.123”!e!premo!Ok;! Notifica!errore!
** Non!inserisco!porta!e!premo!Ok;! !!
9* Inserisco!Ip!valido=”192.168.0.123”!e!premo!Ok;! Notifica!errore!
5!–!Verifica!e!Validazione!
!
!105!
** Inserisco!porta!valida!=!"9111"!e!premo!Ok;! !!
** Non!inserisco!username!e!premo!Ok;! !!
10* Inserisco!Ip!valido=”192.168.0.123”!e!premo!Ok;! Notifica!errore!
** Inserisco!porta!valida!=!"9111"!e!premo!Ok;! !!
** Inserisco!username!e!premo!Ok;! !!
** Non!inserisco!password!e!premo!Ok;! !!
Tabella*5R2*:*Test*Frame*"Configurazione*applicazione"*
!
5.4.1.1! ESITO(TEST(FUNZIONALE(
Nella! Tabella! 5L3! viene! mostrato,! data! la! funzionalità! in! esame,! l’esito! del! caso! di! test.!
Quest’ultimo! risulta! assumere! valore! “passato”! nel! caso! in! cui! i! risultati! ottenuti!
corrispondono!all’oracolo,!in!caso!contrario!sarà!contrassegnato!quale!“non!passato”.!!
!
Test! Esito*
*
*
*
*
Configurazione*dell’applicazione*
Caso!1! Superato!
Caso!2! Superato!
Caso!3! Superato!
Caso!4! Superato!
Caso!5! Superato!
Caso!6! Superato!
Caso!7! Superato!
Caso!8! Superato!
Caso!9! Superato!
Caso!10! Superato!
Tabella*5R3*:*Esito*test*"Configurazione*applicazione"*
!
5!–!Verifica!e!Validazione!
!
!106!
5.4.2!TEST0DI0USABILITA’:0CONFIGURAZIONE0APPLICAZIONE0
Il! test! di! usabilità,! per! questa! funzionalità,! non! è! stato! possibile! effettuarlo,! in! quanto! la!
configurazione! dell’applicazione! richiede! la! presenza! di! una! persona! o! aiutante! con! le!
conoscenze!adeguate;!questa!persona,!infatti,!deve!essere!in!grado!di!poter!reperire!i!valori!
delle!informazioni!necessari!per!il!corretto!funzionamento!di!SpokenHouse!dalla!macchina!
sulla!quale!è!il!esecuzione!FreeDomotic.!
!
5.5! ATTIVAZIONE0VIBRAZIONE0
!
L’utente,! una! volta! installata! l’applicazione,! nella! sezione! impostazioni! ha! la! possibilità! di!
personalizzarla.! Tra! le! impostazioni! presenti,! SpokenHouse! da! la! possibilità! all’utente! di!
ricevere!notifiche!tramite!codifica!morse,!mediante!la!vibrazione.!
Di! seguito! sono!elencati! i!passi! che! l’utente,!da! solo!o! col! supporto!di!un!aiutante,!dovrà!
seguire!per!una!corretta!abilitazione!di!questa!funzionalità.!!
•! Passo* 1:! L’utente! accede! all’applicazione! e! seleziona,! mediante! “tap”,! la! sezione!
impostazioni.!
•! Passo*2:!L’utente!accede!alla!sezione! impostazioni!e,!mediante!“tap”,!seleziona! la!
voce!“attiva!vibrazione”.!
•! Passo*3:!L’utente,!mediante!“tap”,!seleziona!la!voce!“attiva”;!in!questo!modo,!sarà!
abilitata! la!modalità!Morse! sul!device!e! l’utente! riceverà!una!notifica!di! avvenuta!
modifica!delle!impostazioni!mediante!codificata!in!Morse.!
Ad! ognuna! delle! fasi! appena! descritte,! corrisponde! un! determinato! stato! all’interno!
dell’applicazione,! e! quindi! ad! un! determinato! cambiamento! nella! visualizzazione! del!
menu!di!navigazione.!Tutti!questi!cambiamenti!possono!essere!rappresentati!facilmente!
attraverso! una! serie! di! screenshots! (Figura! 5L5)! effettuati! su! un!device! sul! quale! è! in!
esecuzione!l’applicazione!di!SpokenHouse.!!
5!–!Verifica!e!Validazione!
!
!107!
!
Figura*5R5*:*Screenshot*"attivazione*vibrazione"*
!
Una!volta!che! l’utente!ha!attivato! la!vibrazione,! la!codifica!dei!messaggi!non!è!più!di! tipo!
vocale,! mediante! TextToSpeech,! ma! attraverso! il! codice! Morse.! Il! codice! sorgente! che!
permette! la! gestione! degli! eventi! relativi! alla! vibrazione! è! presente! in! uno! dei! plugin! di!
Apache!Cordova,!ovvero!“Vibrate”.!La!codifica! in! linguaggio!Morse!avviene!attraverso!uno!
switch)che!permette!il!parser!di!ogni!singola!lettera!del!messaggio!da!codificare,!in!modo!da!
richiamare!l’insieme!dei!metodi!del!plugin!in!maniera!appropriata.!
Una!porzione!di!questo!switch!è!riportata!nella!Figura!5L6.!
Ogni!case)dello!)switch!corrisponde!a!una!determinata!lettera!dell’alfabeto!e,!ad!ognuna!di!
essa,!corrisponde!una!determinata!codifica!Morse,!attraverso!le!primitive!“.”!(punto)!e!“L”!
(linea).!
Ad!ognuna!delle!primitive!è!associata!una!chiamata!al!metodo!“vibrate()”;!come!argomento!
di!questa!funzione,!viene!passata!una!determinata!variabile,!la!quale!indica!la!durata!della!
singola!vibrazione!(la!durata!del!“.”!deve!essere!inferiore!a!quello!della!“L”).!
Inoltre,! una! volta! attivata! la! vibrazione,! questa! informazione! viene! resa! persistente!
all’interno!dell’applicazione.!Il!salvataggio!di!tale!informazione!avviene!allo!stesso!modo!del!
salvataggio!delle!credenziali.!!
!
1* 2* 3*
5!–!Verifica!e!Validazione!
!
!108!
!
Figura*5R6*Porzione*di*codice*relativo*alla*codifica*Morse*
!
5.5.1!TEST0FUNZIONALE:0ATTIVAZIONE0VIBRAZIONE0
Analogamente!ai!casi!d’uso!analizzati!in!precedenza,!i!parametri!sono!relativi!alla!pressione!
di!una!sequenza!di!tasti!in!uno!specifico!ordine:!
↓;↵;↑.*
Per!ciascun!parametro,!l’unica!categoria!possibile!è!relativa!alla!sua!pressione.!Se!la!sequenza!
viene! rispettata! l’applicazione! notifica! l’esecuzione! del! comando,! in! caso! contrario!
l’applicazione!si!porta!in!uno!stato!non!desiderato!(Tabella!5L4).!
Caso%di%test% Valori%Parametri% Output%Atteso%
1* ↓;↵;↑.* Notifica!attivazione!morse!
2* ↓;↑;↵.* Notifica!stato!indesiderato!
Tabella*5R4*:*Test*Frame*"Attivazione*Vibrazione"*
5.5.1.1! ESITO(TEST(FUNZIONALE(
Nella! Tabella! 5L5! viene! mostrato,! data! la! funzionalità! in! esame,! l’esito! del! caso! di! test.!
Quest’ultimo! risulta! assumere! valore! “passato”! nel! caso! in! cui! i! risultati! ottenuti!
corrispondono!all’oracolo,!in!caso!contrario!sarà!contrassegnato!quale!“non!passato”.!!
5!–!Verifica!e!Validazione!
!
!109!
!
!
!
5.5.2!TEST0DI0USABILITA’:0ATTIVAZIONE0VIBRAZIONE0
Al!fine!di!validare! l’usabilità!dell’applicazione!da!parte!del!target!utente!a!cui!è! indirizzata!
l’applicazione!SpokenHouse,!alcuni!rappresentati!dell’associazione!“Unione!Ciechi!Italiana”!
si!sono!prestati!a!tale!scopo.!Una!volta!avviata!l’applicazione,!I!tester,!grazie!al!tutorial!che!li!
guidava!durante!la!navigazione!dell’applicazione,!si!sono!facilmente!orientati!nel!raggiungere!
la!sezione!adibita!all’attivazione!di!tale!impostazione.!I!passi!che!hanno!seguito!sono!quelli!
indicati!nella!figura!Figura!5L5.!
!
5.6!MODIFICA0GRANDEZZA0DEI0CARATTERI0
!
L’utente,! una! volta! installata! l’applicazione,! nella! sezione! impostazioni! ha! la! possibilità! di!
personalizzarla.! Tra! le! impostazioni! presenti,! SpokenHouse! da! la! possibilità! all’utente! di!
modificare!la!grandezza!dei!caratteri!visualizzati!sull’interfaccia,!in!base!alle!esigenze!visive!
di!ognuno.!
Di! seguito!sono!elencati! i!passi! che! l’utente!dovrà!seguire!per!una!corretta!abilitazione!di!
questa!funzionalità.!!
•! Passo* 1:! L’utente! accede! all’applicazione! e! seleziona,! mediante! “tap”,! la! sezione!
impostazioni.!
•! Passo*2:!L’utente!accede!alla!sezione! impostazioni!e,!mediante!“tap”,!seleziona! la!
voce!“modifica!grandezza!font”.!
Test* Esito*
Attivazione*Vibrazione*
Caso!1! Superato!
Caso!2! Superato!
Tabella*5R5*:*Esito*test*"Attivazione*vibrazione"*
5!–!Verifica!e!Validazione!
!
!110!
•! Passo*3:!L’utente,!mediante!“tap”,!seleziona!la!voce!“aggiorna!a!23!pixel”.!In!seguito!
al!“tap”!la!grandezza!del!font!sarà!modificata,!e!tale!resterà!fino!a!quando!non!verrà!
reimpostata.!
Ad! ognuna! delle! fasi! appena! descritte,! corrisponde! un! determinato! stato! all’interno!
dell’applicazione,!e!quindi!ad!un!determinato!cambiamento!nella!visualizzazione!del!menu!di!
navigazione.!Tutti!questi!cambiamenti!possono!essere!rappresentati! facilmente!attraverso!
una!serie!di!screenshots!effettuati!su!un!device!sul!quale!è! in!esecuzione! l’applicazione!di!
SpokenHouse!(Figura!5L7).!!
!
!
Figura*5R7*:*Screenshot*"Modifica*grandezza*caratteri"*
!
Una! volta! che! l’utente! ha! selezionato! i! pixel! relativi! alla! grandezza! del! font,! il! relativo!
parametro! viene! passato! come! argomento! ad! una! funzione! presente! nel! file!
“setupManager.js”,!come!riportato!in!Figura!5L8.!
All’interno! di! questo! metodo,! viene! settato! il! nuovo! valore! andando! a! modificare!
direttamente!la!porzione!di!codice!riportata!in!Figura!5L9.!
1* 2* 3*
5!–!Verifica!e!Validazione!
!
!111!
!
Figura*5R8*Porzione*di*codice*relativo*al*cambiamento*della*grandezza*dei*caratteri*(setupManager.js)*
!
!
Questa!porzione!di!codice!è!presente!all’interno!del!file!“index.html”;!il!parametro!che!viene!
cambiato!dalla!funzione!precedente,!è!quello!denominato!“font>size”.!
Inoltre,! una! volta! modificata! la! grandezza! del! font,! questa! informazione! viene! resa!
persistente!all’interno!dell’applicazione.!Il!salvataggio!di!tale!informazione!avviene!allo!stesso!
modo!del!salvataggio!delle!credenziali.!!
!
5.6.1!TEST0FUNZIONALE:0MODIFICA0GRANDEZZA0CARATTERI0
Analogamente!al!caso!di!test!precedente,!i!parametri!di!interesse!sono!relativi!all’opportuna!
sequenza!di! pressione!dei! tasti! al! fine!di!modificare! la! grandezza!dei! caratteri! visualizzati!
sull’interfaccia.! In! particolare! la! sequenza! corretta! consiste,! a! valle! dell’avvio!
dell’applicazione,!nella!pressione!dei!seguenti!tasti!nel!medesimo!ordine:!
↓;↑;↵;↑;↵.*
Per!ciascun!parametro,!l’unica!categoria!possibile!è!relativa!alla!sua!pressione.!Se!la!sequenza!
viene! rispettata! l’applicazione! notifica! l’esecuzione! del! comando,! in! caso! contrario!
l’applicazione!si!porta!in!uno!stato!non!desiderato!(Tabella!5L6).!
Caso% di%test%
Valori%Parametri% Output%Atteso%
1* ↓;↑;↵;↑;↵.* Notifica! esecuzione! impostazione! temperatura! di!lavaggio!
*2* ↓;↓;↵;↑;↵;! Notifica!stato!indesiderato!
Tabella*5R6*:*Test*Frame*"Modifica*grandezza*caratteri"*
Figura*5R9*:*Porzione*di*codice*relativo*al*cambiamento*della*grandezza*dei*caratteri*(index.html)*
5!–!Verifica!e!Validazione!
!
!112!
5.6.1.1! ESITO(TEST(FUNZIONALE(
Nella! Tabella! 5L7! viene! mostrato,! data! la! funzionalità! in! esame,! l’esito! del! caso! di! test.!
Quest’ultimo! risulta! assumere! valore! “passato”! nel! caso! in! cui! i! risultati! ottenuti!
corrispondono!all’oracolo,!in!caso!contrario!sarà!contrassegnato!quale!“non!passato”.!!
Tabella*5R7*:*Esito*test*"Modifica*grandezza*caratteri"*
0
5.6.2!TEST0DI0USABILITA’:0MODIFICA0GRANDEZZA0CARATTERI0
Al!fine!di!validare! l’usabilità!dell’applicazione!da!parte!del!target!utente!a!cui!è! indirizzata!
l’applicazione!SpokenHouse,!alcuni!rappresentati!dell’associazione!“Unione!Ciechi!Italiana”!
si!sono!prestati!a!tale!scopo.!In!questo!caso!coloro!che!si!sono!prestati!al!test!erano!persone!
ipovedenti.!Una!volta!avviata!l’applicazione,!i!tester,!grazie!al!tutorial!che!li!guidava!durante!
la! navigazione! dell’applicazione,! si! sono! facilmente! orientati! nel! raggiungere! la! sezione!
adibita!all’attivazione!di!tale!impostazione.!I!passi!che!hanno!seguito!sono!quelli!indicati!nella!
Figura!5L9.!
!
5.7!MODIFICA0TEMA0INTERFACCIA0
!
L’utente,! una! volta! installata! l’applicazione,! nella! sezione! impostazioni! ha! la! possibilità! di!
personalizzarla.! Tra! le! impostazioni! presenti,! SpokenHouse! da! la! possibilità! all’utente! di!
modificare!il!tema!dell’applicazione,!quindi!la!combinazione!di!colori!baseLcarattere;!la!scelta!
del!tema!varia!a!seconda!delle!esigenze!della!persona!ipovedente!e!a!seconda!se!questa!sia!
affetta!da!daltonismo!o!meno.!
Di! seguito! sono!elencati! i!passi! che! l’utente,!da! solo!o! col! supporto!di!un!aiutante,!dovrà!
seguire!per!una!corretta!abilitazione!di!questa!funzionalità.!!
Test* Esito*
Attivazione*Vibrazione*Caso!1! Superato!
Caso!2! Superato!
5!–!Verifica!e!Validazione!
!
!113!
•! Passo* 1:! L’utente! accede! all’applicazione! e! seleziona,! mediante! “tap”,! la! sezione!
impostazioni.!
•! Passo*2:!L’utente!accede!alla!sezione! impostazioni!e,!mediante!“tap”,!seleziona! la!
voce!“entra!in!modifica!tema!”.!
•! Passo* 3:! L’utente,! mediante! “tap”,! seleziona! la! voce! “aggiorna! a! base:! rosso,!
carattere:!giallo”.!!
•! Passo*4:!In!seguito!al!“tap”,!il!tema!sarà!modificato!come!richiesto!dall’utente;!per!
rendere!persistente!tale!modifica,!a!meno!che!non!sia!reimpostata,!sarà!necessaria!
un’ulteriore! conferma! da! parte! dell’utente! sulla! voce! “aggiorna! a! base:! rosso,!
carattere:!giallo”.!
Ad! ognuna! delle! fasi! appena! descritte,! corrisponde! un! determinato! stato! all’interno!
dell’applicazione,!e!quindi!ad!un!determinato!cambiamento!nella!visualizzazione!del!menu!di!
navigazione.!Tutti!questi!cambiamenti!possono!essere!rappresentati! facilmente!attraverso!
una!serie!di!screenshots!effettuati!su!un!device!sul!quale!è! in!esecuzione! l’applicazione!di!
SpokenHouse!(Figura!5L10).!!
Ad! ogni! tema,! selezionabile! all’interno! delle! impostazioni,! corrisponde! una! determinata!
parola! chiave,! posizionata! nell’attributo! “class”! all’interno! del! file! “index.html”.! Quando!
l’utente!modifica! il! tema! corrente,! viene!automaticamente!modificata! anche! la!parola! ad!
esso!associato.Quest’ultima,!viene!utilizzata!per!selezionare!all’interno!del!file!“index.css”!i!
parametri!di!interesse.!Nella!porzione!del!file!“css”!riportato!in!Figura!5L11,!viene!riportato!
quanto!detto!in!precedenza.!!
!
5!–!Verifica!e!Validazione!
!
!115!
!
Figura*5R11*Porzione*di*codice*relativo*alla*modifica*del*Tema*
!
In!base!al!tema!scelto!vengono!richiamati!gli!attributi!relativi!alla!parola!chiave!selezionata.!
Come!si!può!notare!dalla!Figura!5L11,!a!seconda!della!parola!chiave,!cambia!il!colore!associato!
al!“background”!dell’applicazione;!discorso!analogo!vale!anche!per!il!colore!del!font!e!delle!
immagini!richiamate.!
Inoltre,!una!volta!modificato!il!tema,!questa!informazione!viene!resa!persistente!all’interno!
dell’applicazione.!Il!salvataggio!di!tale!informazione!avviene!allo!stesso!modo!del!salvataggio!
delle!credenziali.!!
!
5.7.1!TEST0FUNZIONALE:0MODIFICA0TEMA0
Anche!per!la!variazione!del!tema,!i!parametri!possibili!sono!relativi!all’opportuna!pressione!
dei!tasti!in!una!sequenza!specifica:!
↓;↑;↑;↑;↵;↑;↵.*
Per!ciascun!parametro,!l’unica!categoria!possibile!è!relativa!alla!sua!pressione.!Se!la!sequenza!
viene! rispettata! l’applicazione! notifica! l’esecuzione! del! comando! in! caso! contrario!
l’applicazione!si!porta!in!uno!stato!non!desiderato!(Tabella!5L8).!
5!–!Verifica!e!Validazione!
!
!116!
Caso%di%test% Valori%Parametri% Output%Atteso%
1* ↓;↑;↑;↑;↵;↑;↵.* Notifica!cambiamento!tema!
2* ↓;↑;↓;↑;↵;↑;↵.* Notifica!stato!indesiderato!
Tabella*5R8*:*Test*Frame*“modifica*tema"*
!
5.7.1.1! ESITO0TEST(FUNZIONALE(
Nella! Tabella! 5L9! viene! mostrato,! data! la! funzionalità! in! esame,! l’esito! del! caso! di! test.!
Quest’ultimo! risulta! assumere! valore! “passato”! nel! caso! in! cui! i! risultati! ottenuti!
corrispondono!all’oracolo,!in!caso!contrario!sarà!contrassegnato!quale!“non!passato”.!!
!
!
5.7.2!TEST0DI0USABILITA’:0ATTIVAZIONE0VIBRAZIONE0
Al!fine!di!validare! l’usabilità!dell’applicazione!da!parte!del!target!utente!a!cui!è! indirizzata!
l’applicazione!SpokenHouse,!alcuni!rappresentati!dell’associazione!“Unione!ciechi!Italiana”!si!
sono!prestati!a!tale!scopo.!In!questo!caso,!coloro!che!si!sono!prestati!al!test!erano!persone!
ipovedenti.!Una!volta!avviata!l’applicazione,!i!tester,!grazie!al!tutorial!che!li!guidava!durante!
la! navigazione! dell’applicazione,! si! sono! facilmente! orientati! nel! raggiungere! la! sezione!
adibita!all’attivazione!di!tale!impostazione.!I!passi!che!hanno!seguito!sono!quelli!indicati!nella!
Figura!5L10.!La!scelta!del!tema!è!variata!a!seconda!delle!esigenze!della!persona!ipovedente!e!
a! seconda! se! questa! sia! affetta! da! daltonismo! o! meno.! I! tester! hanno! espresso! pareri!
differenti! sulle! combinazioni! di! colori! proposte,! alcuni! prediligendo! la! combinazione!
“carattere:! giallo! ,! base:! rossa”,! altri! “carattere:! giallo,! base:!blu”.!Altresì! la! scelta!è! stata!
unanime!per!la!combinazione!usata!per!gli!screeshort!(“carattere:!bianco,!base:!nero”).!!
!
Test* Esito*
Modifica*Tema*Caso!1! Superato!
Caso!2! Superato!
Tabella*5R9*:*Esito*test*"Modifica*Tema"*
5!–!Verifica!e!Validazione!
!
!117!
5.8! PROBLEMI0RISCONTATI0
!
Uno! dei! problemi! riscontrati! riguarda! l'estrema! sensibilità! dei! tasti! presenti! sullo!
smartphone.! I! pulsanti! capacitivi! sono! un! brutto! espediente! e! rendono! l'esperienza!
dell'utente!medio!quasi!frustrante.!Per!ovviare!a!questo!problema,!è!stato!pensato!un!modo!
per!modificare!la!funzionalità!di!default!dei!tasti:!
•! In! caso! di! pressione! del! tasto! “menu”,! la! guida! vocale! avviserà! l’utente! della!
posizione!corrente!all’interno!del!menù!di!navigazione!di!SpokenHouse;!
•! In!caso!di!pressione!del!tasto!“back”:!
o! Un!Tap:!la!guida!vocale!avviserà!l’utente!dell’avvenuta!pressione;!
o! Doppio!Tap!consecutivo:!uscita!forzata!dall’applicazione.!!
•! In!caso!di!pressione!dei!tasti!“Search”,!“Start!Call”,!“End!Call”,!la!guida!vocale!avviserà!
l’utente!che!l’azione!ad!essi!associata!è!stata!disabilitata.!
Un! altro!punto! su! cui! si! è! discusso! è!quello! del! corretto!orientamento!dello! schermo!del!
device:!infatti,!nel!caso!in!cui!sia!attivata!la!modalità!“rotazione!automatica”,!lo!schermo!al!
più!ruota!di!90°!rispetto!alla!posizione!di!equilibrio!(Figura!5L12).!
Nel!caso!in!cui!il!device!è!posizionato!erroneamente!dal!non!vedente,!come!nella!posizione!
mostrata! in! Figura! 5L13,! i! suoi! tasti! non! avranno! una! corretta! corrispondenza! con! quelli!
indicati!dalla!guida!vocale!dell’applicazione.!!
A!tal!proposito,!uno!dei!tester!ha!proposto!di!coprire!il!dispositivo!tramite!una!pellicola!sulla!
quale! sono! contrassegnati! i! quattro! angoli! del! dispositivo,! tramite! codifica! adeguata! ed!
facilmente!interpretabile!tramite!l’uso!del!tatto.!!
Tale!soluzione,!per!quanto!utile!per!l’utilizzo!di!SpokenHouse,!è! invece!inutilizzabile!per!le!
restanti!funzionalità!ed!applicazioni!di!un!device.!
!
!
5!–!Verifica!e!Validazione!
!
!118!
!
!
!
!
!
!
!!
!
!
!
!
!
!
*Figura*5R13*:*Rotazione*erronea*su*Android*
* *Figura*5R12*:*Rotazioni*consentite*su*Android*
Conclusioni!e!Sviluppi!Futuri!
!
!119!
!
CONCLUSIONI0E0SVILUPPI0FUTURI0
L'obiettivo!del!presente! lavoro!è!stato!quello!di!contribuire!nell'opera!di! Informatici!senza!
Frontiere!ONLUS!nell'ambito!del!contesto!di!disagio!sociale!e!di!emarginazione!a!cui!sono!
soggette!persone!con!disabilità!visive.!!
L'innovazione!gioca!un!ruolo!fondamentale!in!progetti!come!quello!della!disabilità.!Qui!ISF!
opera!attraverso!l'ideazione!e!la!messa!in!opera!di!programmi!rigorosamente!open!source!e!
quindi! gratuiti! che! hanno! la! caratteristica! di! essere! innovativi,! efficaci! ed! adattabili! alle!
singole!realtà.!!
Lo!sviluppo!del!progetto!SpokenHouse!offrirà!sicuramente!opportunità!concrete!di!crescita!
e!di!miglioramento!nella!vita!di! tutti,! in!quanto,! il!più!piccolo!contributo!non!rappresenta!
altro!che!un!passo!in!avanti!verso!un!mondo!migliore.!!
Si!ritiene!che!l’applicazione,!a!valle!della!validazione!e!dell’usabilità!da!parte!degli!utenti!con!
difficoltà!visive!e/o!uditive,!ha!confermato!la!realizzazione!della!maggior!parte!dei!requisiti!
funzionali!che!sono!stati!raccolti!in!fase!di!analisi.!
Infine,!l’applicazione!di!SpokenHouse!è!perfettamente!funzionante!sulle!piattaforme!mobile!
Android,!iOS!e!Windows!Phone!8;!rispettando!quello!che!era!lo!sviluppo!di!un’applicazione!
mobile!compatibile!con!più!sistemi!operativi.!
!
SVILUPPI0FUTURI0
!
Tra!i!possibili!sviluppi!futuri!di!questo!progetto,!si!ritiene!che!il!sistema!possa!essere!ampliato!
sotto!diversi!punti!di!vista.!!
Innanzitutto!si!ritiene!necessario!aggiungere!tra!le!funzionalità!alcuni!dei!requisiti!elencati!in!
fase! di! analisi! e! non! effettivamente! resi! disponibili;! tra! questi! figurano! l’inserimento! sul!
framework!FreeDomotic!di!nuovi!oggetti,!ad!esempio!allarme!e!sistema!di!videosorveglianza,!
ed!il!relativo!controllo!mediante!l’applicazione!di!SpokenHouse.!!
Conclusioni!e!Sviluppi!Futuri!
!
!120!
Per! rendere! il! sistema!domotico! più! conforme! al! prototipo! di! “Smart!House”,! è! possibile!
aggiungere! le! così! dette! azioni! programmate,! già! integrate! all’interno! di! FreeDomotic,! in!
modo!tale!da!rendere!il!più!indipendente!possibile!l’utente.!
Per!migliorare!la!validazione!dell’intero!sistema!SpokenHouse,!si!rende!necessario!effettuare!
nuovi! test! su! dispositivi!mobile! che! non! siano!Android! o! iOs! e,! in! un! secondo!momento,!
installare!il!framework!di!FreeDomotic!su!di!una!board!programmabile!e!non!solo!su!un!PC,!
come!fatto!in!questi!lavori!di!tesi.!
A.!Glossario!dei!Termini!
!
!121!
APPENDICE0
A.0GLOSSASIO0DEI0TERMINI0
Di!seguito!sono!stati!riportati!i!termini!tecnici!maggiormente!utilizzati!in!questo!lavoro!di!tesi.!
Termine! Descrizione!
Device%! Dispositivo!mobile!utilizzato!dall’utente!sul!quale!verrà!installata!l’applicazione!di!SpokenHouse.!
Utente%! Utilizzatore! dell’applicazione.! Soggetto! che! decide! di! controllare! l’ambiente!domotico!presente!nella!sua!abitazione.!
Installatore! Persona!esperto,! addetta! all’installazione!e! alla! configurazione!dell’ambiente!domotico,!del!framework!e!dell’applicazione!di!SpokenHouse.!
Associazione! Collegamento!virtuale!che!permette!di!gestire!la!corretta!comunicazione!tra!il!device!controllante!e!il!sistema!domotico!controllato.!
Ambiente%domotico!
Ambiente!domestico!che!mette!a!disposizione!dell’utente!impianti!in!grado!di!svolgere! funzioni! parzialmente/completamente! autonome! o! programmate!dall’utente,!tramite!l’utilizzo!di!tecnologie!specifiche.!
Notifica! Atto!mediante!il!quale!si!porta!un!determinato!soggetto!a!conoscenza!di!una!determinata! informazione! (l’oggetto!della!notifica!stessa)!mediante!messaggi!audio!e/o!tramite!vibrazione.!
Dati% di%autenticazione!
Credenziali!che!permettono!all’utente!di!interagire!con!il!sistema!domotico!al!fine!di!garantire!la!connessione!a!quest’ultimo!in!maniera!sicura:!“Username,!Password,!IpAddress,!Porta”.!
IP%Address! Etichetta! numerica! che! identifica! univocamente! un! dispositivo!(microcontrollore! su! cui! è! installato! il! Framework)! collegato! a! una! rete!informatica!che!utilizza!l'Internet!Protocol!come!protocollo!di!comunicazione.!
Porta! Numero!associato!ad!un!tipo!di!applicazione,!che,!combinato!ad!un!indirizzo!IP,!permette!di!determinare!in!modo!univoco!un'applicazione!che!gira!un!terminale!dato.!
Framework! Architettura! logica! di! supporto! su! cui! un! software! può! essere! progettato! e!realizzato.!
A.!Glossario!dei!Termini!
!
!122!
Shortcut! Operazione! che! permette! di! raggrupparne! altre! al! fine! di! velocizzare! le!operazioni!richieste.!
Accessibilità%
%
L'accessibilità!è!la!caratteristica!di!un!dispositivo,!di!un!servizio!o!di!una!risorsa!di! essere! fruibile! con! facilità! da! qualsiasi! tipologia! di! utente.! Il! termine! è!comunemente! associato! alla! possibilità! anche! per! persone! con! ridotta! o!impedita!capacità!sensoriale,!motoria!o!psichica!di!fruire!dei!sistemi!informatici!e!delle!risorse!a!disposizione!tipicamente!attraverso!l'uso!di!tecnologie!assistive!o!tramite!il!rispetto!di!requisiti!di!accessibilità!dei!prodotti.!Il!termine!ha!trovato!largo!uso!anche!nel!Web!con!il!medesimo!significato.!
Usabilità% L'usabilità! è!definita!dall'ISO! (International!Organisation! for! Standardisation),!come! l'efficacia,! l'efficienza!e! la!soddisfazione!con! le!quali!determinati!utenti!raggiungono!determinati!obiettivi!in!determinati!contesti.!In!pratica!definisce!il!grado!di! facilità!e!soddisfazione!con!cui! si! compie! l'interazione!tra! l'uomo!ed!uno!strumento.!
Gesture% In! informatica,! le! mouse! gesture! o! semplicemente! gesture! sono! una!combinazione!di!movimenti!e! click!del!Dispositivo!di!puntamento! (di! solito! il!mouse)!che!vengono!riconosciuti!dal!software!come!comandi!specifici.!Questo!metodo! permette! di! semplificare! il! richiamo! delle! funzioni! più! comuni! e! di!facilitare!l'utilizzo!del!computer!a!persone!con!difficoltà!di!accesso!o!digitazione!sulla!tastiera.!!
Revenue% Ricavi!
Text*To*Speech% Tecnica!per!la!riproduzione!artificiale!della!voce!umana.!
Pattern% Un! pattern! è! un! modello! che! permette! di! definire! la! “soluzione”! di! un!“problema”! specifico! che! si! ripresenta,! di! volta! in! volta,! in! un! “contesto”!diverso. !
!
!
!B.!Test!Funzionale!–!Script!Pyton!
!
!123!
B.0TEST0FUNZIONALE:0SCRIPT0PYTHON0!
CONFIGURAZIONE*APPLICAZIONE*
# -*- coding: utf-8 -*- ''' Created on 10/05/2015 @author: danielaguardabascio ''' from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice import time import commands import sys import os # Connects to the current device, returning a MonkeyDevice object device = MonkeyRunner.waitForConnection() MonkeyRunner.sleep(15) # Installs the Android package. Notice that this method returns a boolean, so you can test # to see if the installation worked. device.installPackage('/Users/danielaguardabascio/Desktop/CordovaApp-debug.apk') # sets a variable with the package's internal name package = 'io.cordova.talktome' # sets a variable with the name of an Activity in the package activity = 'io.cordova.talktome.CordovaApp' # sets the name of the component to start runComponent = package + '/' + activity # Runs the component device.startActivity(component=runComponent) MonkeyRunner.sleep(100) # Presses the Menu button:OK device.touch(160,330, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(50) # Presses the Menu button: IP Address device.touch(80,280, MonkeyDevice.DOWN_AND_UP) device.touch(80,190, MonkeyDevice.DOWN_AND_UP) # Enters the value IP into the edit text box device.type('1.1.1.1') # Presses the Menu button:OK device.touch(80,250, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(30) # Presses the Menu button:Porta device.touch(80,280, MonkeyDevice.DOWN_AND_UP) device.touch(80,190, MonkeyDevice.DOWN_AND_UP)
!B.!Test!Funzionale!–!Script!Pyton!
!
!124!
# Enters the value porta into the edit text box device.type('9') # Presses the Menu button:OK device.touch(80,250, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(30) # Presses the Menu button:username device.touch(80,250, MonkeyDevice.DOWN_AND_UP) device.touch(50,170, MonkeyDevice.DOWN_AND_UP) # Enters the value username into the edit text box device.type('admin') # Presses the Menu button:OK device.touch(80,230, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(30) # Presses the Menu button:password device.touch(80,250, MonkeyDevice.DOWN_AND_UP) device.touch(50,170, MonkeyDevice.DOWN_AND_UP) # Enters the value password into the edit text box device.type('admin') # Presses the Menu button:OK device.touch(80,230, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(30) # Takes a screenshot # result = device.takeSnapshot() # Writes the screenshot to a file # result.writeToFile('/Users/danielaguardabascio/Desktop/ConfApp1.png','png') ! !
!B.!Test!Funzionale!–!Script!Pyton!
!
!125!
ATTIVAZIONE*VIBRAZIONE*
# -*- coding: utf-8 -*- ''' Created on 10/05/2015 @author: danielaguardabascio ''' from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice import time import commands import sys import os # Connects to the current device, returning a MonkeyDevice object device = MonkeyRunner.waitForConnection() MonkeyRunner.sleep(15) # Installs the Android package. Notice that this method returns a boolean, so you can test # to see if the installation worked. device.installPackage('/Users/danielaguardabascio/Desktop/CordovaApp-debug.apk') # sets a variable with the package's internal name package = 'io.cordova.talktome' # sets a variable with the name of an Activity in the package activity = 'io.cordova.talktome.CordovaApp' # sets the name of the component to start runComponent = package + '/' + activity # Runs the component device.startActivity(component=runComponent) MonkeyRunner.sleep(100) # Presses the Menu button:OK #device.touch(160,330, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(50) # Presses the Menu button: down device.touch(240,350, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: enter device.touch(70,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100)
!B.!Test!Funzionale!–!Script!Pyton!
!
!126!
MODIFICA*GRANDEZZA*CARATTERI*
# -*- coding: utf-8 -*- ''' Created on 10/05/2015 @author: danielaguardabascio ''' from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice import time import commands import sys import os # Connects to the current device, returning a MonkeyDevice object device = MonkeyRunner.waitForConnection() MonkeyRunner.sleep(15) # Installs the Android package. Notice that this method returns a boolean, so you can test # to see if the installation worked. device.installPackage('/Users/danielaguardabascio/Desktop/CordovaApp-debug.apk') # sets a variable with the package's internal name package = 'io.cordova.talktome' # sets a variable with the name of an Activity in the package activity = 'io.cordova.talktome.CordovaApp' # sets the name of the component to start runComponent = package + '/' + activity # Runs the component device.startActivity(component=runComponent) MonkeyRunner.sleep(100) # Presses the Menu button:OK #device.touch(160,330, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(50) # Presses the Menu button: down device.touch(240,350, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: enter device.touch(70,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: enter device.touch(70,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100)
!B.!Test!Funzionale!–!Script!Pyton!
!
!127!
MODIFICA*TEMA*INTERFACCIA*
# -*- coding: utf-8 -*- ''' Created on 10/05/2015 @author: danielaguardabascio ''' from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice import time import commands import sys import os # Connects to the current device, returning a MonkeyDevice object device = MonkeyRunner.waitForConnection() MonkeyRunner.sleep(15) # Installs the Android package. Notice that this method returns a boolean, so you can test # to see if the installation worked. device.installPackage('/Users/danielaguardabascio/Desktop/CordovaApp-debug.apk') # sets a variable with the package's internal name package = 'io.cordova.talktome' # sets a variable with the name of an Activity in the package activity = 'io.cordova.talktome.CordovaApp' # sets the name of the component to start runComponent = package + '/' + activity # Runs the component device.startActivity(component=runComponent) MonkeyRunner.sleep(100) # Presses the Menu button:OK #device.touch(160,330, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(50) # Presses the Menu button: down device.touch(240,350, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100)
!B.!Test!Funzionale!–!Script!Pyton!
!
!128!
# Presses the Menu button: enter device.touch(70,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: UP device.touch(240,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) # Presses the Menu button: enter device.touch(70,150, MonkeyDevice.DOWN_AND_UP) MonkeyRunner.sleep(100) ! !
Bibliografia!
!
!129!
BIBLIOGRAFIA0
1.! Informatici) Senza) Frontiere) ONLUS.! Tratto! il! giorno! 04! 10,! 2015! da!www.informaticisenzafrontiere.org!
2.! ! Informatici) Senza) Frontiere) ONLUS.! Tratto! il! giorno! 04! 14,! 2015! da! Linux! Day,!
Presentazione! Strillone,! Benevento! 26/10/2013:! http://www.lilis.it/wpL!
content/uploads/2013/11/ISF_Strillone_linux_day_Benevento_ottobre_2013.pdf!
3.!Non)Vedenti.!Tratto!il!giorno!04!11,!2015!da!http://www.nonvedenti.it/tecnologia.htm!
4.!Disabili)Visivi.!Tratto!il!giorno!04!12,!2015!da!http://www.disabilivisivi.it/!
5.! Gazzetta) Ufficiale.! Tratto! il! giorno! 04! 12,! 2015! da!
http://www.gazzettaufficiale.it/eli/id/2013/09/16/13A07492/sg!
6.! Unione) Ciechi.! Tratto! il! giorno! 04! 13,! 2015! da!
http://www.uiciechi.it/osi/04Ipovedenti.html!
7.! Accessibilità) del) Web.! Tratto! il! giorno! 04! 16,! 2015! da!
http://www.html.it/guide/esempi/accessibilita/html_nv03_ipoalternat.htm!
8.!!Swift.!Tratto!il!giorno!04!16,!2015!da!https://developer.apple.com/swift/!
9.!Kiva.)Tratto!il!giorno!04!12,!2015)www.kiva.org.!
10.!Colletta,!Francesca).Porting)su)windows)phone)di)Strillone:)una)app)per)la)lettura)di)testate)
giornalistiche)da)parte)di)soggetti)ipovedenti.!(2013).!
11.!Abbattista,!Francesco.!Estensione)multimediale)di)Strillone.!(2015).!
12.! AppCelerator.! Tratto! il! giorno! 04! 15,! 2015! da!
http://www.appcelerator.com/customers/app>showcase/!.!
13.! Google! Play! Store.! Tratto! il! giorno! 04! 17,! 2015! da!
https://play.google.com/store/apps/details?id=com.gamestop.powerup&hl=en.!
14.! iTunes.! Tratto! il! giorno! 04! 18,! 2015! da! https://itunes.apple.com/us/app/gamestop>
mobile/id406033647?mt=8.!
15.! Google! Play! store! .Tratto! il! giorno! 04! 17,! 2015! da.)
https://play.google.com/store/apps/details?id=com.healthtap.userhtexpress.!
Bibliografia!
!
!130!
16! iTunes.! Tratto! il! giorno! '4!18,!2015!da!https://itunes.apple.com/us/app/healthtap>find>
doctors>free/id466079030.!
17.! Google! Play! Store.! Tratto! il! giorno! 04! 18,! 2015! da!
https://play.google.com/store/apps/details?id=com.acsi.europa.!
18.! iTunes.! Tratto! il! giorno! 04! 18,! 2015! da! https://itunes.apple.com/app/acsi>campsites>
europe/id820395994.!
19.!xonne.it!Tratto!il!giorno!04!20,!2015!da)http://www.xonne.it/be>my>eyes>l>app>per>i>non>
vedenti/.!
20.!Blio.!Tratto!il!giorno!04!20,!2015!da!https://www.blio.com/.!
21.! (s.d.).! http://www.treccani.it/enciclopedia/domotica/.! Tratto! il! giorno! 04! 21,! 2015! da!
Enciclopedia!Treccani.!
22.!Domotica.it!Tratto!il!giorno!04!20,!2015!da)http://www.domotica.it/2014/06/intervista>
a>mauro>cicolella>sviluppatore>freedomotic/.!
23.!JSON!Tratto!il!giorno!04!22,!2015!da!http://json.org..!
24.!W3!Tratto!il!giorno!04!22,!2015!da)http://www.w3.org/TR/webdatabase.!
25.!Caniusse:!Tratto!il!giorno!04!22,!2015!da!http://caniuse.com/#feat=sqlLstorage).!
26.!FreeDomotic!Wiki2015!Tratto!il!giorno!04!23,!2015!
27.! (2015,!03!31).!Evaluation!of!crossLplatform!tools! for!mobile!development.!Bachelor!of!
Science!Thesis!in!Software!Engineering!and!Management.!(V.!E.!Pazirandeh!Alireza,!A!cura!di)!
Kandidatuppsatser.!
28.!(2015).!Experimental!Comparison!of!Hybrid!and!Native!Applications!for!Mobile!Systems.!
International)Journal)of)Multimedia)and)Ubiquitous)Engineering!,)10,!1L12.!
29.!Introduzione)alla)domotica.!(3!ed.).!(T.!nuove,!A!cura!di)!Domenico!Trisciuoglio.!
30.!(2015).!Mobile!Based!Home!Automation!and!Security!System.!Indian)Journal)of)Science)
and)Technology!,)8,!12L16.!
31.! (2015).! WORKING! OF! MVC! PATTERNS! FOR! DESIGNING! AND! IMPLEMENTING! USER!
FRIENDLY!AND!RESPONSIVE!WEB!BASED!APPLICATION.!Advances)in)Computational)Research)
7.1!,!206L208
!
!
!
: 1: ?BBLJH NRH PBOHSDOD BGD NRDP M FH I M FH H BRH L PL L BH H LJHD M OLID BGD BGD PD H BLJMOD PHAHIH PL P H H CHPMD P AHIH MDO MLO OD DOJH DNRDP L I SLOL CH DPH J ID MDOPL D BGD H CHOD JD D G L E L M O D CH NRDP LMDOBLOPL IR FL R I ROD
PH BDOL OH FO VH JD L S IID MOLEDPPLODPPD 5DOH SDOP L D OH LO LODIIBGD JH G L C L I LMMLO R H à CH OD IHVV OD NRDP L I SLOL CH DPH( PDJMOD CHPML HAHIHFRHCD MODVHLPD D EL H CH BL PHFIH BGD G L E L PH BGD HI I SLOL ELPPD PSLI L DIJHFIHLOD CDH JLCH ;L L P D HJMDBB AHIH BLJD MOLEDPPLODPPD) H NRDP H JDPH PL LP D ID LP OD J JJDZ( 1: ?1O VHD C ;0 BGD DIID MDOPL D CDI .L 9 OODII D I F , OOD BH G C L ILMMLO R H à CH C OD H HVHL C R MOLFD L BGD HR DOà HI MOLPPHJL1O VHD I D J CH 0ODD.LJL HB H M O HBLI OD DL VVL H D ROL -HBLIDIIMDO R L I HR L C LBH H NRDP H JDPH1O VHD II HL D -HDBGH CH ,D DSD L DIDJD L MODVHLPL MDO I OD IHVV VHL D CHNRDP DPH 1O VHD MDO HI DJML BGD -IDIH 9 LI D R H H O F VVH CDII PPLBH VHL D BHG L CDCHB L CRO D ID H DOSHP D DC H DP L PH MLPPL L CDPBOHSDOD ID DJLVHL HBGD JH G L O PJDPPL D FIH HJJD PH H PDF JD L BGD JH G L C L
FO VHD M O HBLI OD S H O F VVH CH 0R ROL .LT FO VHD ILOL GL BL LPBHR L ;0(FO VHD MDOBGé BL I ILOL SLFIH CH SHSDOD D I ILOL H FD RH à CHJLP O L DIINRL HCH H à CDIID MHBBLID BLPD BGD HI JL CL è ADIIL D B è PDJMOD R JL HSL MDO BRHDPPDOD EDIHBH L LP D ID MOLSD CHEEHBHIH BGD I SH BH ML D NRL HCH JD D1O VHD I JHL BLJM F L CH DPH OBL H PHDJD I NR ID GL OD IHVV L NRDP LMOLFD L( BLJM F H CH DPH J JHBL MODVHLPL BGD JH G PLMMLO LZ L PLIL HNRDP H JDPH J H NRDP H H CH P RCHL OBL J H OD CH BL L BGD BD I AAH JLE È EH H1O VHD IID JHD BLJM F D CH SH OD D D OHIH H PDM O AHIH C NRDI IL HPPHJLPD DJAOD BL ID NR IH GL BL CHSHPL D P L R LO BL CHSHCD CL FIH H MHùADIIH 5D JHD JHBGD DZ( BGD PD IL D PDJMOD SHBH D DC R H D1O VHD II JH H PDM O AHID BLJM F CH SD ROD AD DSD D IDPP CO JHBGDC NRDI PD DJAOD !! D C IILO H PDM O AHIH 9OL D PDJMOD C R RLS
!
!
!
SSD RO L M VVH ( L LP D HI M PP OD CDFIH H I LP O JHBHVH è OHJ PHJJR1O VHD H JHDH CRD FDIHZ ID H D 5R BGD PLMMLO L H JHDH EODNRD HJLJD H CH BL ERPHL DZ( BLJM F D CH BL ERPHL HZ M VVHD RPBH D BLJM F D CHSH D PLMO R L JHBGD -2 R HBGD BLJD I LP O EHPP MDO HI ,ROO BL DBDO L CLSDSL OH FO VH OD H CHOD JD D O ,ROO BL H SLFIHL AD D FDIHJHDH1O VHD CH BRLOD II JH “ OU” BGD L LP D I IL V è PDJMOD MODPD D(MR L CH OHEDOHJD L D PM II ELO D PR BRH ML DO PDJMOD BL OD JHB R HB DCH PLP H RHAHID1O VHD I D J ,D DSD L( IDL LO IDPPHL . OHL :LADO OH L HL L HL ; DE L :LADO L 0DCDOHB 1H H L1O VHD II 8M L D J( IADOL O H L ,D H L 9 OHVHL IDPP CO :LADO L ;DR H FIH H FDF DOH ELPPDOL BLJD SLH LH HI JL CL P ODAAD MHù BLI LZ VH “1 FIH OCL”D JH EDOJL NRH PD ò JH ODSLB L I I ROD1O VHD I D J HI DPD :LJ LZ( 0 RP L FDIL .L L L HL -DP L D0LOFHL D MDOBGé L LP D I IL V PL L D P O L PDJMOD JHBH R HBH1O VHD II JH -HBBHZ 0HLODII MDO DPPDOD P R JHB MODVHLP LI OD BGDBLJM F CH P RCH1O VHD I D J - P AROH 1HOIPZ MDOBGé BL H R C DPHP DOD D ODPHP DOD DFIH H(1è OHP OD D1O VHD IID JHD BLH NRHIH D P PH HBGDI 4DPPHB BGD JH G L “PLMMLO ”
H NRDP H JDPH CH “PBIDOL” DC G L BL CHSHPL BL JD I SH H NRDI CH “- P VVDL”1O VHD 0O BDPB BGD BL I PR SLFIH CH SHSDOD è B M BD CH HO OJH PR CH JLO IDPDJMOD JHBGD C R J BH CH H J BLJD PD ELPPDOL CDBD H 1O VHDNRDII J BBGHL CH 1HLS BGD D MD P R MHù CDI CH SLIL1O VHD II JH “EHFIHLBBH ” 0DCDOHB BGD M VHD DJD D PLMMLO R J COH BLJDJD1O VHD II JH “AHL C ” F PDJMOD MODPD D D PRMMLO L H R H NRDP H HFO VHD R I PR ADIIHPPHJ E JHFIH 0O BDPBL D HI PRL MHBBLIL FO CD LJD L1O VHD R H H JHDH JHBH BGD G L BL CHSHPL BL JD ID JHIID SSD ROD R HSDOPH OHDD CDII SH
!
!
!
;H CHBD BGD FIH JHBH SDOH PH BL H L PRIID CH CH R PLI J L( JH ODMR L R MDOPLELO R HPPHJ MDOBGé ID JHBHVHD SDOD BLI HS D H NRDP H H PRMDO L CH FO IR FHI RJDOL MODSHP L C IID CH CH CRD J H5L PL BGD P L O R H NRDP H ADH OH FO VH JD H J NRDIIL MHù PD H L S IIDMDOPL D BGD L G L J H BODCR L H JD BGD JH G L LP BLI BOH HB IIDPM IID) FO VHD IID MDOPL D H R HIHZ BGD GL H BL O L H R H NRDP H H BGD BOH HBCLML BOH HB JH G L C L I ELOV CH E OD PDJMOD JDFIHL D PRMDO OD H JHDH IHJH H DO FFHR FDOD NRDP L O FR OCL;H CHBD BGD ID MDOPL D MHù HJMLO H SD F L II EH D ADG I JH E JHFIH è I BLPMHù MODVHLP BGD GL1O VHD I JHL MHBBLIL FO CD JLOD I JH HML H 0O BDPB 1O VHD I JHLEO DIIH L 5LOD VL 1O VHD H JHDH 1D H LOH BGD JH G L PLP D R CRO D NRDP LIR FGHPPHJL D LO RLPL SH FFHLZ FO VHD MDOBGé L SD D J H PJDPPL CH BODCDOD HJD1O VHD L L L HL MDO DPPDOD P L R J DP OL CH SH DC R DPDJMHL CPDFRHOD 1O VHD R H H JHDH L H MDO R L NRDIIL BGD JH G L O PJDPPL1O VHD CH BRLOD H JHDH FDIH BGD C I PPù JH MOL DFFL L D FRHC LNRH CH… è EH H … :HBLOCDOò PDJMOD BL R PLOOHPL FIH H O PBLOPH H NRDP BH à(
FO VHD ,D DSD L P O H PDJMOD HI JHL OHBLOCL EDIHBDC HLO ;DJMDO
,D DSD L & J FFHL !
Daniela
Recommended