SpokenHouse: Applicazione mobile cross-platform di supporto ai non vedenti per il controllo...

!

!

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

!

!

A mio fratello Lorenzo

& mia nipote Francesca:

il più grande regalo che la vita

potesse farmi.

!

!

"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.!

! !


!

!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.!!


!

!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!


!

!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,!


!

!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.!


!

!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.!


!

!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.!

!


!

!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.!!


!

!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.!!


!

!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.!!


!

!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.!


!

!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.!


!

!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!


!

!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.!


!

!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.!!


!

!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!


!

!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)*


!

!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!


!

!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;!


!

!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!


!

!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!


!

!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).!


!

!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.!!

!


!

!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.!


!

!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*


!

!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!


!

!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.!


!

!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.! !


!

!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.!


!

!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.!


!

!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.!

!


!

!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*


!

!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++.!

!


!

!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*

!

!

!


!

!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.!

!


!

!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*


!

!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*


!

!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!!


!

!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*


!

!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.!

!

!

!


!

!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.!


!

!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!


!

!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.!

!

!


!

!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*


!

!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.!

!


!

!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.!!

!

!

!

!

!


!

!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.!!


!

!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.!


!

!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"*

*


!

!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"*


!

!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.!


!

!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"*

!

!

*


!

!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"*


!

!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”*


!

!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.!!


!

!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!


!

!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’è!


!

!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*


!

!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!


!

!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*


!

!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.!!


!

!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*


!

!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.!

!


!

!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*


!

!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.!


!

!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.!!

!


!

!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*


!

!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*


!

!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.!


!

!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*


!

!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!


!

!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.!


!

!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.!


!

!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!


!

!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*


!

!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.!

!

!

!


!

!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!è!


!

!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.!

!


!

!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.!!


!

!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


!

!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;!


!

!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).!


!

!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.!!


!

!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.!!

!


!

!92!

!

Figura*5R1*:*Albero*di*navigazione*SpokenHouse*

!


!

!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.!

!


!

!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*


!

!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.!!


!

!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).!

!

!


!

!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.!


!

!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.!

!


!

!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*


!

!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.!


!

!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!


!

!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! !


!

!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).!


!

!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!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!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!


** Non!inserisco!porta!e!premo!Ok;! !!



!

!105!


** Non!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"*

!


!

!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.!


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.!!


!

!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*


!

!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"*






!

!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

!



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à.!!


impostazioni.!


voce!“modifica!grandezza!font”.!

Test* Esito*

Attivazione*Vibrazione*

Caso!1! Superato!

Caso!2! Superato!

Tabella*5R5*:*Esito*test*"Attivazione*vibrazione"*


!

!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.!




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*


!

!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:!

↓;↑;↵;↑;↵.*


viene! rispettata! l’applicazione! notifica! l’esecuzione! del! comando,! in! caso! contrario!


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)*


!

!112!





Tabella*5R7*:*Esito*test*"Modifica*grandezza*caratteri"*

0

5.6.2!TEST0DI0USABILITA’:0MODIFICA0GRANDEZZA0CARATTERI0


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

!



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!


!

!113!


impostazioni.!


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”.!




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.!!

!


!

!114!

!

Figura*5R10*:*Screenshot*"modifica*tema"*

1* 2*

3* 4*


!

!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:!

↓;↑;↑;↑;↵;↑;↵.*


viene! rispettata! l’applicazione! notifica! l’esecuzione! del! comando! in! caso! contrario!



!

!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(




!

!

5.7.2!TEST0DI0USABILITA’:0ATTIVAZIONE0VIBRAZIONE0


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"*


!

!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.!

!

!


!

!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)


!

!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') ! !


!

!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)


!

!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)


!

!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)


!

!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

!

!

!131!

!

!

!

!

: 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

SpokenHouse: Applicazione mobile cross-platform di supporto ai non vedenti per il controllo...

Software

Transcript of SpokenHouse: Applicazione mobile cross-platform di supporto ai non vedenti per il controllo...