Tesi realizzata presso l'Università del Sannio in collaborazione con Informatici senza Frontiere. Il progetto utilizza il framework Freedomotic.

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

2. !
!
A mio fratello Lorenzo
& mia nipote Francesca:
il più grande regalo che la vita
potesse farmi.

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

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

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

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

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

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

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

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

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

12. Introduzione!
!
!
3!
Nell’ultima!parte!del!lavoro!vengono!riportate!le!conclusioni!a!cui!si!è!giunti!e!i!possibili!
ampliamenti!del!lavoro!svolto.!!
! !

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

14. 1 – Informatici Senza Frontiere
!
!
5!
1.1! IL0DIGITAL0DIVIDE0E0LA0DISABILITA’0
!
Il!Digital!Divide!(divario!digitale)!è!un!fenomeno!che!riguarda!il!divario!esistente!tra!chi!ha!la!
possibilità! di! accedere,! grazie! ad! un! computer! (o! un! dispositivo! mobile)! e! tramite! una!
connessione! alla! rete,! ai! servizi! della! tecnologia! dell'informazione,! e! chi! invece! ne! resta!
escluso.!!
I! motivi! che! portano! all'esclusione! dai! servizi! in! questione! riguardano! principalmente!
differenze!socioLdemografiche!come!condizione!economica,!livello!d'istruzione,!differenza!di!
età!o!di!sesso,!qualità!delle!infrastrutture!e!appartenenza!a!diversi!gruppi!etnici!ma!anche!la!
disparità!nelle!capacità!e!nelle!conoscenze!necessarie!per!l'accesso!e!la!partecipazione!alla!
società! dell'informazione.! In! questo! ultimo! caso! si! può! anche! parlare! di! analfabetismo!
digitale.!!
Il! Mobile! dà! certamente! un! contributo! al! superamento! del! digital! devide! e! della! social!
exclusion! (esclusione! sociale).! Esso! consente,! infatti,! alla! persona! con! disabilità! sia! una!
maggiore!facilità!di!accesso!a!contenuti!e!servizi!di!vario!genere,!sia!il!miglioramento!della!
sua!"partecipazione"!alla!vita!sociale!con!amici,!familiari!e!colleghi.!Questo!è!possibile,!da!un!
lato,!grazie!alla!possibilità!di!accedere!tramite!i!dispositivi!Mobile!e!le!reti!wireless!al!grande!
mondo!delle!applicazioni!Internet!ed!in!particolare,!ai!contenuti!del!Web,!grazie!all'offerta!di!
contenuti!e!servizi!specifici.!!
Il! forte! valore! aggiuntivo! del! Mobile! rispetto! al! PC! è! l'accesso! ai! contenuti! in! mobilità!
everywhere!e!everytime:!chiunque,!anche!chi!non!possiede!un!computer,!ha!la!possibilità!di!
avere!uno!strumento!di!navigazione!ed!informazione.!!
Lo!scenario!delle!opportunità!che!il!Mobile!può!offrire!a!un!utente!disabile!è!ricco!e!variegato,!
ovviamente!a!patto!che!terminali,!applicazioni!e!servizi!offerti!siano!progettati!e!realizzati!
seguendo!le!linee!guida!dell’accessibilità!e!dell’usabilità.!Il!Mobile!può!consentire!ad!un!non!
vedente!o!ad!un!ipovedente,!per!esempio,!di!accedere!ad!informazioni!in!tutti!quei!contesti!
in! cui! vi! è! una! comunicazione! esclusivamente! visiva,! come! informazioni! sul! binario! di!
partenza!dei!treni!delle!stazioni,!gli!orari!e!le!indicazioni!sui!tragitti!e!ritardi!degli!autobus!alle!
fermate,!le!informazioni!di!servizio!in!un!hotel,!ecc.!!

15. 1 – Informatici Senza Frontiere
!
!
6!
Tuttavia! lo! smartphone! può! anche! sostituire! un! PC:! le! maggiori! opportunità! sono! state!
riscontrate!nel!caso!delle!persone!non!vedenti.!Esso!ha!infatti,!caratteristiche!di!usabilità!
preferibili!rispetto!ad!un!computer,!grazie!alle!ridotte!dimensioni!e!alla!garanzia!di!maggiore!
praticità!di!utilizzo!(il!cellulare!è!'senza!fili',!non!presenta!problematiche!di!connessione!alla!
rete! e! nella! maggior! parte! dei! casi! è! già! acceso! nel! momento! dell'uso).! In! aggiunta! una!
persona!non!vedente!con!un!basso!livello!di!informatizzazione!presenta!mediamente!molte!
difficoltà! nell'utilizzo! della! tastiera! del! PC,! mentre! non! ha! problemi! con! l'uso! dello!
smartphone.!!
L’elenco!delle!applicazioni!potrebbe!continuare!a!lungo.!L’eliminazione!del!digital!divide,!non!
è!un!meta!da!raggiungere,!ma!più!un!obiettivo!mobile,!visto!che!le!tecnologie!cambiano!di!
continuo!e!che!occorre!garantire!anche!una!formazione!continua!alle!persone.!Una!maggiore!
sensibilizzazione!di!imprese,!provider,!società!civile!e!Pubblica!Amministrazione!potrebbe!
evitare!e!ridurre!i!rischi!del!digital!divide.!!
!
1.2! I0PROGETTI0DI0ISF0
!
L’attività!di!ISF!è!iniziata!con!la!realizzazione!di!"Open!Hospital"!(OH),!un!software!open!
source,! che! permette! a! piccole! realtà! ospedaliere! di! gestire! il! flusso! dei! pazienti! e! dei!
medicinali! con! una! certa! sistematicità:! OH! è! stato! installato! la! prima! volta! ad! Angal,! in!
Uganda,!e!poi!in!moltissimi!altri!ospedali!africani!e!non!solo.!L’installazione!è!seguita!dai!
volontari!di!ISF,!che!si!occupano!di!creare!piccoli!sistemi!informativi!nell’ospedale!e!della!
formazione!del!personale.!!
Un!altro!importante!progetto!è!quello!realizzato!all’Ospedale!di!Brescia,!dove,!al!reparto!di!
oncologia! pediatrica,! è! stato! installato! un! sistema! informativo! che! permette! ai! piccoli!
pazienti,!ricoverati!per!lunghi!periodi,!di!comunicare!con!le!loro!famiglie,!giocare,!e!seguire!
un!percorso!scolastico.!Questo!progetto!è!stato!poi!replicato!in!altre!città,!dando!vita!al!
progetto!"Bambini!al!PC".!!
Fra!gli!altri!progetti!lanciati!!ci!sono!"Shashamane",!per!informatizzare!alcune!aule!di!una!
scuola!rurale!dell'Etiopia,!“Progetto!scuole!senza!Frontiere”!per!aiutare!un!ragazzo!con!una!
grave!malattia!di!Forlì!a!seguire!le!lezioni!scolastiche,!“Progetto!Il!giardino!dai!mille!colori”!a!

16. 1 – Informatici Senza Frontiere
!
!
7!
Scampia,! uno! dei! quartieri! più! “difficili”! di! Napoli,! dove! è! stato! realizzato! un! laboratorio!
informatico!e!un!corso!di!introduzione!all’informatica!per!i!bambini!del!quartiere.!I!volontari!
di!ISF!inoltre!sono!intervenuti!nelle!zone!colpite!dal!terremoto!in!Emilia,!nel!carcere!di!Treviso!
per!il!recupero!sociale!dei!detenuti,!in!casi!speciali!come!per!i!malati!di!SLA!(Sclerosi!Laterale!
Amiotrofica)!con!il!progetto!ISA!“I!speak!again”.!!
Una!applicazione!progettata!e!realizzata!dai!volontari!di!ISF!è!Strillone;!questa!è!stata!pensata!
per!persone!con!disabilità!visive!affinché!possano!ascoltare!notizie!provenienti!dalle!testate!
giornalistiche.!Una!delle!caratteristiche!più!importanti!di!Strillone!è!la!sua!interfaccia:!essa!
infatti!è!divisa!orizzontalmente!e!verticalmente,!in!modo!da!creare!4!parti!perfettamente!
uguali,! cosi! che! l’utente! possa! sfruttare! gli! angoli! fisici! del! device! per! poter! navigare!
facilmente! all’interno! del! menù! dell’applicazione.! Attualmente! Strillone! è! disponibile!
gratuitamente!nelle!versioni!per!le!principali!piattaforme:!Android,!iOS!per!i!dispositivi!Apple,!
Windows! Phone! e! in! versione! Web! Application! utilizzabile! su! tutti! i! dispositivi! con!
connessione!ad!Internet.!
ISF!si!occupa!anche!di!offrire!corsi!e!strumenti!di!alfabetizzazione!informatica!nelle!carceri,!
negli!ospedali!e!tra!persone!che!vivono!situazioni!di!emarginazione!e!disagio.!!
!
!
!
!
! !
!

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

18. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
9!
richiedevano!uno!sforzo!e!delle!capacità!particolari.!!I!prossimi!paragrafi!discutono!alcune!di!
queste!applicazioni.!
!
2.2.100STRUMENTI0A0SUPPORTO0DEI0NON0VEDENTI0
Di!seguito!verranno!passati!in!rassegna!gli!strumenti!più!importanti!che!supportano!i!non!
vedenti!e!gli!ipovedenti!nella!vita!quotidiana!(3).!
Orologi,*termometri*e*oggetti*per*la*casa*
Esistono! in! commercio! orologi! da! polso! e! da! taschino! che! presentano! all'interno! del!
quadrante!una!serie!di!simboli!tattili.!Normalmente!il!quadrante!è!protetto!da!un!coperchio!
che!il!cieco!deve!aprire!per!toccare!le!lancette!ed!i!segni!indicatori!delle!ore!e!dei!minuti.!
Esistono!anche!orologi!sia!analogici!che!digitali!che,!oltre!a!mostrare!l'ora!in!un!display,!la!
vocalizzano!se!si!preme!un!apposito!tasto.!Solitamente!questi!orologi!parlanti!hanno!anche!
una!funzione!di!sveglia!e!di!segnale!orario.!
Un!esempio!è!un!modello!di!orologio!da!polso!realizzato!dalla!ditta!Tissot,!chiamato!SilenLT,!
che!consente!di!conoscere!l'ora!semplicemente!facendo!scorrere!il!dito!lungo!la!corona.!
Poiché!in!corrispondenza!delle!lancette!vengono!emesse!delle!vibrazioni.!
Esistono!termometri!tattili!e!parlanti!sia!per!la!misurazione!della!temperatura!corporea!che!
per!quella!ambientale.!!
Esistono,!infine,!sia!bilance!pesapersone!che!pesa!alimenti!con!indicazioni!tattili!e!sonore.!
Per!l'autonomia!in!casa!possono!rivelarsi!molto!utili!strumenti!di!comune!reperibilità,!quali!
segnalatori!di!fonti!luminose,!acqua!e!gas,!strumenti!per!separare!il!tuorlo,!apriscatole!e!
grattugie!elettriche.!!
Strumenti*per*scrivere*
Per!la!scrittura!con!il!sistema!Braille!ci!si!può!avvalere!di!un!set!costituito!da!una!tavoletta!di!
metallo!o!di!plastica,!un!regolo!e!un!punteruolo.!Esistono!anche!modelli!da!taschino.!
Per!una!scrittura!più!rapida!e!semplice!si!può!ricorrere!alla!dattilobraille:!ne!esistono!vari!
modelli!di!diversi!prezzi,!in!plastica!e!in!metallo,!a!testina!fissa!o!mobile.!!
Gli!ipovedenti!possono!scrivere!utilizzando!un!pennarello.!Esistono!dei!quaderni!con!righe!e!
quadretti!più!larghi!e!con!contorni!più!marcati!rispetto!ai!comuni!quaderni.!

19. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
10!
Strumenti*per*leggere*
Gli!ipovedenti!possono!leggere!la!normale!scrittura!stampata!ed!i!manoscritti!servendosi!del!
videoingranditore!o!di!una!telecamera!ingrandente.!Il!primo!è!un!sistema!costituito!da!un!
monitor,!una!telecamera!fissa!ed!un!carrello!scorrevole!sul!quale!vengono!appoggiati!i!testi!
da!leggere.!
Ne!esistono!modelli!da!tavolo!e!portatili.!La!telecamera!ingrandente,!invece,!è!costituita!da!
un! unico! oggetto! che! incorpora! una! telecamera! ed! un! piccolo! schermo.! Esistono! anche!
sistemi!ibridi,!costituiti!da!una!telecamera!che!si!collega!al!computer!fisso!o!portatile.!
I! ciechi! assoluti! e! gli! ipovedenti! che! non! riescono! a! leggere! con! un! sistema! ingrandente!
possono!fare!ricorso!alla!scrittura!braille.!In!Italia!esistono!vari!centri!che!prestano!libri!già!
trascritti!o!trascrivono!libri!su!richiesta.!
Ciechi!ed!ipovedenti!possono!utilizzare!il!computer!anche!come!strumento!di!lettura,!sia!
abbinandolo! ad! uno! scanner! e! ad! un! programma! di! riconoscimento! caratteri,! sia!
procurandosi!libri!in!forma!digitalizzata.!!
*
2.2.200IL0COMPUTER!(4)0
La!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.!

20. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
11!
•! Leggere! il! televideo! con! tutte! le! informazioni! che! contiene,! fra! cui! i! programmi!
televisivi.!
•! Consultare!l'elenco!telefonico!di!tutta!l'Italia.!
•! Consultare!l'orario!ferroviario!e!le!previsioni!del!tempo.!
•! Ricevere!a!casa!via!cavo!o!via!etere!e!leggere!quotidiani!e!settimanali.!
•! Scambiare!corrispondenza!di!ogni!tipo!a!mezzo!posta!elettronica.!
•! Avere! la! possibilità! per! gli! studenti! di! scrivere! i! loro! compiti! e! presentarli!
correttamente!stampati!ai!loro!insegnanti.!
•! Consultare!vocabolari!ed!enciclopedie!elettroniche.!
•! Leggere!raccolte!di!leggi!e!di!giurisprudenza.!
•! Tenere!una!contabilità!aziendale!o!familiare.!
•! Svolgere!operazioni!bancarie!dalla!propria!abitazione.!
•! Riascoltare!programmi!televisivi!o!radiofonici!anche!a!distanza!di!tempo.!
•! Svolgere! su! internet! ogni! tipo! di! ricerca,! avendo! a! disposizione! un! archivio! con!
miliardi!di!informazioni.!
•! E!molto!altro!ancora.!
L'elemento! centrale! di! tutti! i! sistemi! di! lettura! e! scrittura! elettronica! è! il! computer,! ma!
bisogna!assolutamente!evitare!di!credere!che!per!usare!tali!sistemi!sia!necessario!imparare!
l'informatica:!è!sufficiente!imparare!quali!tasti!si!debbono!premere!per!ottenere!determinati!
risultati.!Al!computer!sono!collegati!altri!apparecchi,!alcuni!dei!quali!sono!specifici!per!disabili!
visivi,!mentre!altri!sono!utilizzati!da!tutti.!
Sintesi*vocale*
La!sintesi)vocale!è!una!voce!artificiale!come!quella!che!legge!i!titoli!dei!vari!capitoli!e!paragrafi!
di!questo!servizio!fonomatico.!Essa!costituisce!uno!dei!modi!con!cui!un!non!vedente!può!
leggere!e!scrivere!con!un!computer.!Le!prime!sintesi!vocali,!che!risalgono!ai!primi!anni!'80,!
erano! comprensibili! solo! dopo! un! lungo! allenamento.! Quella! da! me! utilizzata! è! una!
abbastanza! recente,! ma! ve! ne! sono! anche! altre! con! intonazioni! più! naturali.
Tuttavia,!ancora!più!importante!della!gradevolezza!della!voce,!è!la!completezza!e!facilità!
d'uso!del!programma!che!permette!di!chiedere!alla!stessa!voce!di!leggere!tutto!quello!che!ci!
interessa!e!soltanto!quello.!
!

21. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
12!
Barra*Braille*
Il!secondo!ausilio!che!permette!ai!non!vedenti!di!usare!il!computer!è!la!barra!braille.!Si!tratta!
di!una!riga!costituita!da!un!certo!numero!di!celle,!in!ciascuna!delle!quali!si!vengono!a!formare!
elettronicamente!dei!punti!a!rilievo!corrispondenti!ad!una!delle!lettere!presenti!su!una!riga!
dello!schermo.!Quando!il!non!vedente!ha!terminato!di!leggere!quella!riga!facendo!scorrere!
le!dita!su!di!essa,!sulla!barra!appare!la!riga!successiva.!La!sua!importanza!consiste!nel!fatto!
che!con!questa!modalità!di!lettura!il!cieco!resta!in!contatto!con!la!corretta!grafia!delle!parole,!
cosa!che!non!succede!ascoltando!una!lettura!vocale.!E'!un!ottimo!sistema!per!coloro!che!sono!
veloci!nella!lettura!braille!ed!è!indicato!soprattutto!per!la!lettura!di!libri!e!la!consultazione!di!
vocabolari!ed!enciclopedie.!Sono!in!commercio!barre!da!20,!40!od!80!caratteri;!queste!ultime!
sarebbero!da!preferire,!in!quanto!presentano!il!contenuto!di!un'intera!riga!dello!schermo,!
ma!sono!estremamente!costose!
Luce*Braille*
Come!detto!precedentemente,!per!aiutare!le!persone!non!vedenti!a!leggere!e!scrivere!in!
linguaggio!Braille,!sono!state!create!delle!tastiere!(dette!anche!display)!molto!utili!e!facili!da!
maneggiare.!Una!di!queste!è!il!dispositivo!chiamato!Luce!Braille!della!TifloSystem.!!
È!un!display!Braille!leggero!e!portatile,!che!permette!di!portare!con!sé!tutti!i!documenti,!ma!
che!si!può!usare!anche!per!gestire!dispositivi!esterni,!tutto!da!un!unico!apparecchio.!!
Questo!display!Braille!(come!si!può!vedere!nella!Figura!2L1)!è!formata!da!16!caratteri!(o!celle)!
a!8!punti.!Esistono!anche!altri!modelli!con!più!celle!a!disposizione!ma!il!resto!dei!tasti!è!
pressoché!lo!stesso.!
La!struttura!della!barra!è!molto!semplice:!ai!lati!del!display,!ci!sono!2!tasti!per!lo!scorrimento!
del!testo!che!compare!sul!display.!!
Sopra!il!display,!ci!sono!i!tasti!per!la!scrittura!a!8!punti.!!
L’ordine!dei!tasti!(in!base!a!quella!che!è!la!disposizione!dei!punti!nella!cella!a!8punti)!è!il!
seguente:!7–3–2–1–4–5–6–8!(partendo!da!sinistra!e!andando!verso!destra).!!
Sotto! la! riga/display! ci! sono! altri! 2! tasti:! quello! a! sinistra! è! detto! tasto! 9! che! serve,! in!
combinazione!con!altri!tasti,!per!attivare!particolari!funzionalità;!quello!a!destra!è!la!barra!
spaziatrice.!!

22. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
13!
Agli!estremi!di!questi!2!ultimi!tasti!ci!sono!2!joystick!che!si!muovono!nelle!5!direzioni!(ovvero!
sopra,! sotto,! destra,! sinistra,! centro);! possono! essere! utilizzati! per! spostarsi! nei! menù! o!
carattere!per!carattere,!ad!esempio.!!
La!barra!può!essere!utilizzata!senza!supporto!di!PC!o!smartphone.!Infatti,!sul!display!escono!
le!voci!del!menù,!tipo!blocco!note,!gestione!file!etc.!!
Per!il!blocco!note,!si!può!creare!un!nuovo!file!col!comando!SPAZIO!+!N.!Man!mano!che!si!
scrive!con!la!tastiera,!sul!display!verrà!visualizzato!il!testo!che!si!sta!scrivendo.!!
Per!quanto!riguarda!l’interfacciamento!con!l’iPhonesi!utilizza!la!connessione!Bluetooth!(la!si!
deve!settare!nel!menu!del!display).!L’iPhone,!avendo!il!VoiceOver!attivo,!può!essere!utilizzato!
con! il! movimento! del! dito! verso! destra! per! scorrere! i! menu! e! doppio! click! su! un! punto!
qualsiasi!dello!schermo!per!accedere!alla!voce!selezionata.!!
!
Figura*2R1*:*Luce*Braille*
!
Si!va!quindi!nella!sezione!VoiceOver!dell’IPhone!per!abbinare!il!display!Braille!al!telefono!in!
modo!tale!da!usarlo!prettamente!come!display.!Ci!sarà!ovviamente!una!voce!elettronica!che!
indicherà!la!posizione!attuale.!!
Il!comando!SPAZIO!+!K!fornisce!l’elenco!di!tutti!i!comandi!eseguibili!tramite!questo!display.!!

23. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
14!
Col!rotore!si!fa!in!modo!di!scorrere!le!parole!che!sono!state!scritte!per!riga,!parola!oppure!
per! carattere,! ad! esempio.! In! questo! modo! è! possibile! correggere! il! file! creato! molto!
agevolmente.!!
Gli*Screen*Reader*
Lo!screen!reader!è!un’altra!funzionalità!per!l'accessibilità!molto!importante.!Si!tratta!di!un!
software! che! permette! di! ascoltare! (invece! di! leggere)! un! contenuto! presente! a! video.!
Scorrendo!il!dito!sullo!schermo,!lo!screen!reader!legge!ad!alta!voce!i!contenuti!selezionati!o!
una! loro! descrizione.! Inoltre! le! notifiche! come! sveglie,! eventi! del! calendario! e! avvisi!
sull'esaurimento!della!batteria!sono!lette!ad!alta!voce.! Questo!strumento!quindi!si!rivela!
essenziale!per!tutti!gli!utenti!non!vedenti,!che!non!ne!potrebbero!farne!a!meno!per!usare!un!
certo!dispositivo.!!
A!seconda!del!sistema!operativo!dello!smartphone!viene!messo!a!disposizione!uno!Screen!
Reader!differente:!
•! Per! i! dispositivi! Android:! TalkBack! che! aggiunge! feedback! vocali,! sonori! con!
vibrazione!al!dispositivo.!!
•! Per!i!dispositivi!Apple:!Voice!Over!con!cui!è!possibile!controllare!il!dispositivo!iOS!con!
alcune!gesture!oltre!al!normale!funzionamento!di!lettura!dello!schermo.!!
•! Per!dispositivi!Windows!Phone!è!disponibile!solo!per!i!dispositivi!più!aggiornati!ed!è!
limitato!alla!sola!lingua!inglese!(Stati!Uniti).!!
Interfaccia*facilitata*Winguido*
Lo!Screen!Reader!più!utilizzato!dai!non!vedenti!si!chiama!Jaws!e!legge!con!la!sua!sintesi!vocale!
tutto!ciò!che!appare!scritto!sullo!schermo,!ma!è!molto!costoso!e!anche!non!molto!semplice!
da!apprendere.!!
Circa!2.000!non!vedenti!utilizzano!invece!"Winguido",!una!interfaccia!che!presenta!tutti!i!
menu! ad! albero! ed! è! quindi! estremamente! facile! ed! intuitiva! nel! suo! utilizzo.! Inoltre! è!
scaricabile!gratuitamente!da!Internet!e,!oltre!a!tutte!le!normali!funzioni!di!scrittura,!lettura,!
navigazione,! posta! elettronica,! skype,! ne! ha! altre! ancora! più! semplificate,! come! l'orario!
ferroviario,!l'elenco!telefonico,!il!televideo.!Inoltre!ha!degli!applicativi!specificamente!creati!
per!i!non!vedenti,!come!diversi!giochi!enigmistici,!una!agenda!con!scadenze,!appuntamenti!e!
ricorrenze,! un! riconoscitore! di! caratteri! per! lo! scanner,! un! programma! di! registrazione!
digitale,!un!catalogo!per!dischi,!un!programma!di!contabilità,!ecc.!!

24. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
15!
Il!vantaggio!più!rilevante!nel!uso!di!winguido!risiede!!nel!rapporto!tra!la!semplicità!del!suo!
utilizzo!e!i!risultati!che!possono!essere!ottenuti,!i!quali!riescono!a!soddisfare!certamente!la!
gamma!di!esigenze!di!un!utente!domestico!del!computer.!un!disabile!della!vista,!grazie!a!
questo! semplice! strumento! può! leggere! un! giornale,! ricevere! una! ricetta! di! cucina! o! le!
istruzioni!di!un!farmaco,!consultare!le!pagine!gialle!!o!l'elenco!telefonico,!accedendo!così!
semplicemente!ad!informazioni!spesso!di!vitale!importanza!altrimenti!inaccessibili.!
!
2.2! IL0WEB0ED0I0NON0VEDENTI0
!
L'accessibilità!ad!internet!per!un!non!vedente!è!diventata!una!priorità!assoluta,!cosa!di!cui!si!
sono! finalmente! accorti! anche! i! politici,! tanto! che! è! stata! già! varata! una! legge!
sull'accessibilità,!approvata!quasi!all'unanimità!nel!2004.!
Avere!Internet!accessibile,!per!un!non!vedente,!significa!riappropriarsi!di!molte!cose!per!le!
quali!prima!dell'avvento!delle!nuove!tecnologie,!venivano!puntualmente!demandate!ad!altri!
o,!nella!migliore!delle!ipotesi,!eseguite!con!l'aiuto!di!altri.!
Con! l'uso! del! computer! abbinato! alla! rete! internet! si! può! fare! acquisti! onLline,! tenere! i!
rapporti!con!la!propria!banca,!accedere!alle!informazioni!dei!maggiori!media,!accedere!alla!
cultura,!accedere!direttamente!alle!università!e!alle!loro!banche!dati,!eseguire!ricerche,!e,!
non! trascurabile,! tenere! i! rapporti! interpersonali! e! per! la! socializzazione! senza! avere! il!
bisogno!di!spostarsi!da!casa!con!tutti!i!problemi!che!gli!spostamenti!comportano!per!un!
disabile!visivo.!
Già!oggi,!se!Internet!fosse!completamente!accessibile,!tutto!quanto!suddetto!sarebbe!realtà!
e!non!un!grosso!punto!interrogativo!ad!ogni!accesso!tentato.!
!
2.3.100LA0LEGGE0STANCA0(5)0
Il! 17! Dicembre! 2003! il! Parlamento! Italiano! ha! approvato! all'unanimità! la! Legge!
sull'Accessibilità!meglio!nota!come!Legge!Stanca!dal!nome!del!Ministro!per!l'Innovazione!e!le!
Tecnologie!Lucio!Stanca!che!l'ha!presentata!sotto!forma!di!Disegno!di!Legge.!

25. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
16!
La!Legge!"!Disposizioni!per!favorire!l'accesso!dei!soggetti!disabili!agli!strumenti!informatici"!
è!stata!pubblicata!in!Gazzetta!Ufficiale!come!legge!9!gennaio!2004,!n.!4.La!Legge!prevede!
l'obbligo!per!la!Pubblica!Amministrazione!di!rendere!accessibili!tutti!i!propri!siti!web,!prevede!
infatti!che!i!nuovi!contratti!stipulati!dalla!pubblica!amministrazione!per!la!realizzazione!di!siti!
Internet! siano! nulli! qualora! non! rispettino! i! requisiti! di! accessibilità.! L'inosservanza! delle!
disposizioni!della!legge!da!parte!del!pubblico!amministratore!inoltre!comporta!responsabilità!
dirigenziale!e!responsabilità!disciplinare.!
Quindi!con!la!Legge!stanca!sono!state!stabilite!alcune!regole!da!rispettare!al!fine!di!poter!
rendere!accessibile!il!web!a!persone!con!disabilità!visive.!
Per!fare!in!modo!che!lo!screenLreader!funzioni!correttamente!fornendo!esattamente!tutto!
quello! che! è! presente! sul! monitor,! il! sito! deve! essere! costruito! in! modo! tale! che!
l'interpretazione!di!tutte!le!informazioni!avvenga!in!maniera!fedele,!senza!perdere!nulla!di!
quello!che!il!sito!contiene.!
Nel! caso! contrario,! il! navigatore! non! vedente! nella! migliore! delle! ipotesi! perderà!
l’orientamento,!ma!il!più!delle!volte!non!potrà!accedere!al!sito.!
Quando! il! web! master! costruisce! il! sito! deve! tenere! conto! di! queste! variabili,! ponendo!
l’attenzione!su!alcune!cose!di!estrema!importanza.!Vediamo!quali!sono:!
1.! Etichettare! le! immagini! in! maniera! comprensibile! e! corrispondente! a! quanto!
riportato!sullo!schermo,!avendo!cura!di!inserire,!per!cose!da!descrivere,!il!tag!long!
Desk!che!consente!descrizioni!più!lunghe!ed!adeguate.!
2.! Se!si!utilizzano!elementi!grafici!nei!link!o!nei!bottoni!significativi,!immettere!del!testo!
alternativo!nell'apposito!attributo!del!tag!IMG!(ALT="testo!descrittivo").!
3.! Non!utilizzare!tecnologie!flash,!in!quanto!gli!screen!reader!meno!recenti!e!i!browser!
testuali! non! riescono! ad! interpretare! questo! tipo! di! tecnologia,! mentre! gli! ultimi!
realizzati! la! interpretano! male.! Sul! sito! di! Macromedia! si! continua! a! parlare! di!
tecnologia!flash!accessibile,!ma!intanto!la!programmazione!in!flash!dei!siti,!forse!
perché!nessuno!si!mette!a!perdere!la!testa!per!creare!dei!flash!accessibili,!continua!
a!creare!problemi!alle!tecnologie!assistive.!
4.! Non!utilizzare!tabelle!nidificate!nel!caso!si!voglia!visualizzare!elenchi!o!dati.!In!alcuni!
casi! di! visualizzazione! personalizzata! o! per! i! browser! testuali,! si! potrebbero!
sovrapporre!gli!elementi!della!pagina!nascondendo!addirittura!gli!stessi!link.!

26. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
17!
5.! Nei! form! di! compilazione! i! campi! devono! essere! etichettati! in! maniera! corretta,!
soprattutto!se!si!usano!i!tag!Label.!
6.! La!struttura!del!sito!non!deve!essere!costruita!a!frame!in!quanto!gli!screen!reader!
testuali!non!la!interpretano!correttamente.!
7.! Le! pagine! del! sito! devono! sempre! riportare! il! link! al! contenuto! della! pagina,!
soprattutto!se!il!menù!di!navigazione!è!molto!grande.!
8.! Tutti!i!comandi!del!sito!sia!essi!di!navigazione!o!di!attivazione!di!procedure!devono!
poter!essere!gestiti!da!tastiera.!
9.! I!pulsanti!radio!devono!avere!l’indicazione!del!comando!che!producono,!leggibile!in!
modo!coretto!durante!la!selezione,!soprattutto!se!si!usano!taglabel.!
10.!Se!si!usano!testi!nei!campi!editazione!per!descrivere!il!dato!da!immettere,!fare!in!
modo!che!il!testo!presente!si!cancelli!appena!si!accede!al!campo!editazione,!evitando!
di!usare!script!per!la!cancellazione.!
11.!Non! utilizzare! Javascript! o! altri! tipi! di! script,! poiché,! con! i! browser! testuali! o! se!
l'utente!decide!di!disattivare!gli!script!per!sicurezza,!si!impedisce!di!usufruire!di!tutto!
quello!che!tali!script!veicolano.!
12.!Inserire!i!tag!per!l'interpretazione!della!lingua!in!quanto!gli!ultimi!screenLreader!già!
riescono!a!leggere!nella!lingua!impostata.!
13.!Inserire!i!significati!espliciti!di!abbreviazioni!ed!acronimi!perché,!anche!questi!,!già!
vengono!correttamente!interpretati!dagli!ultimi!screenLreader.!
14.!Evitare!di!inserire!testo!alternativo!anche!per!i!grafici!di!separazione!del!contenuto!
della!pagina!come!ad!esempio!"linea!tratteggiata",!"freccia",!"!puntini!neri",!eccetera!
ecc.!
15.!Quando!si!usano!le!accessLkey,!evitare!di!usare!questo!comodo!comando!per!tutti!i!
link,! inserendolo! essenzialmente! ai! link! principali! occorrenti! per! una! più! rapida!
navigazione,! come! ad! esempio! la! home! page,! la! mappa,! il! motore! di! ricerca,! e!
qualche!altro!di!importanza!per!il!sito.!Se!tali!comandi!vengono!inseriti!su!tutti!i!link,!
possono!solo!generare!confusione.!Speriamo!che!le!prossime!direttive!internazionali!
diano!una!direttiva!su!queste!cose!che!stanno!proliferando!in!modo!caotico!un!poco!
ovunque.!
16.!Nei!form!di!compilazione,!i!commenti!inseriti!tra!un!campo!e!l'altro!per!spiegare!
meglio!i!dati!da!immettere,!devono!essere!gestiti!tramite!CSS!e!inseriti!come!SPAN!

27. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
18!
nelle!LABEL,!in!modo!che!vengono!regolarmente!letti!anche!quando!è!attivata!la!
modalità!scrittura.!
Quelli!suddetti!sono!i!principali!accorgimenti!che!permettono!ad!un!non!vedente!di!poter!
usufruire!dei!contenuti!di!un!sito!con!un!grado!abbastanza!sufficiente!di!accessibilità.!
!
2.3.200IL0WEB0E0GLI0IPOVEDENTI0
Rendere! fruibile! il! web! anche! ai! soggetti! ipovedenti! significa! dover! tenere! presente!
moltissime!variabili,!quali:!
•! L’acuità!visiva.!
•! Il!campo!visivo.!
•! La!percezione!dei!colori.!
•! Altre!patologie!collaterali!che!influiscono!negativamente!sulla!sensibilità!visiva.!
Inoltre,!bisogna!tenere!conto!di!come!gli!ipovedenti!configurano!i!propri!pc.!Infatti,!non!tutti!
utilizzano! gli! strumenti! assistivi,! i! magnifier! (ingranditori! software).! Molti! tendono! a!
personalizzare!in!maniera!estrema!il!proprio!desktop,!ingrandendo!le!icone,!le!lettere!ed!i!
menù,!altri!ancora!tendono!ad!utilizzare!risoluzioni!di!schermo!molto!basse,!per!esempio!800!
per!600.!
Infine,!ci!sono!coloro!i!quali!utilizzano!l’opzione!di!ingrandimento!caratteri!dei!browser,!e!
magari! usano! browser! diversi! che! interpretano! la! pagina! web! in! maniera! differente,!
privilegiando!il!dimensionamento!dei!caratteri.!
Qui! di! seguito! sono! elencati! 12! punti! dai! quali! iniziare! ad! affrontare! l'argomento!
dell'ipovisione!ed!il!web.!Fondamentale!è!la!progettazione!di!un!layout!semplice!ed!intuitivo,!
dove!sia!facile!raggiungere!le!varie!aree!del!sito.!
Ecco!i!dodici!punti!(6):!
1.! I! link! significativi! dovrebbero! essere! posti! in! posizioni! strategiche,! ad! esempio! a!
sinistra,!dove!lo!sguardo!tende!a!dirigersi.!
2.! Lo! spazio! di! editazione! nei! form! non! deve! essere! esiguo,! ma! sufficientemente!
spazioso,!in!modo!da!poter!essere!scritto!e!letto!con!facilità.!
3.! I!link!non!dovrebbero!essere!troppo!ravvicinati!tra!loro!e!agli!oggetti!circostanti.!

28. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
19!
4.! Gli! sfondi! ed! i! caratteri! devono! essere! sufficientemente! contrastati,! in! modo! da!
essere!decifrati!da!tutti!gli!ipovedenti.!
5.! Bisognerebbe!evitare!l’uso!di!colori!fluorescenti!in!quanto!danno!l’illusione!di!un!
buon!contrasto,!ma!rendono!i!contenuti!inaccessibili.!
6.! Bisognerebbe! evitare! l’utilizzo! di! caratteri! stilizzati! quali:! Impact,! Juice,! Matisse,!
Rockwell,!Matura,!Snap,!Lucida!Handwriting!e!simili.!
7.! Si!dovrebbe!evitare!accuratamente!l’utilizzo!dei!caratteri!testuali!in!dimensioni!fisse.!
Questa!soluzione!preclude!in!maniera!inesorabile!la!possibilità!di!adattare!il!sito!alle!
proprie!esigenze,!tramite!l’utilizzo!dell’accesso!facilitato!del!sistema!operativo!e!del!
browser.!
8.! Non!si!devono!usare!caratteri!che!sono!di!derivazione!grafica,!in!quanto!non!possono!
essere!trattati!a!livello!di!interfaccia!utente.!
9.! Non!si!devono!usare!sfondi!sfumati,!o!immagini!in!movimento,!o!testi!scorrevoli,!i!
quali!compromettono!in!maniera!inesorabile!l’accessibilità.!
10.!Evitare!l’uso!di!sfondi!di!diversi!colori!nella!stessa!pagina.!
11.!Implementare! sempre! il! mouseover! e! il! visited! dei! link,! contestualizzandone! il!
contrasto!con!i!colori!del!sito,!in!quanto!questo!strumento!rappresenta!un!punto!di!
riferimento!per!l’orientamento!del!navigatore!ipovedente.!
12.!Una! possibile! alternativa! per! un! ipovedente! potrebbe! essere! rappresentata! dalla!
possibilità!di!personalizzare!la!visualizzazione!del!sito!secondo!le!proprie!esigenze,!
adattando! colori! di! sfondo! e! del! testo,! tipo! e! dimensione! dei! caratteri,! con!
l’implementazione!di!una!specifica!pagina!del!sito,!raggiungibile!con!uno!dei!primi!
link!della!home!page.!
!
2.3! STRILLONE0
!
Il!digital!divide,!come!già!ampiamente!discusso!nei!capitoli!precedenti,!non!riguarda!solo!la!
mancanza! di! connettività! Internet,! ma! tutti! quegli! ostacoli! che! limitano! l’accesso! alle!
tecnologie!digitali.!!
Ecco!il!caso!di!ISF,!un!gruppo!di!professionisti!che!ha!deciso!di!aiutare!le!persone!a!superare!
il!digital!divide!o!ad!affrontare!emergenze,!ovunque!ce!ne!sia!bisogno.!!

29. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
20!
L’idea!di!Strillone!nasce!da!un’intuizione!di!Roberto!De!Nicolò!che!nell’ambito!di!ISF!si!occupa!
di!coordinare!i!lavori!riguardanti!i!progetti!legati!alla!disabilità.!Strillone!è!un’applicazione!
progettata!per!smartphone,!tablet!e!PC!desktop,!che!consente!alle!persone!non!vedenti!o!
con! gravi! problemi! di! vista! di! sfogliare! e! ascoltare! le! notizie! di! interesse! del! proprio!
quotidiano!preferito!tramite!la!sintesi!vocale!integrata!e!ad!una!facile!organizzazione!dei!
contenuti.!!
L'applicazione! Strillone! è! disponibile! gratuitamente! per! sistemi! operativi! iOS! e! Android,!
quindi!per!smartphone!e!tablet,!ed!è!anche!consultabile!da!un!qualsiasi!computer!desktop!e!
utilizzabile! con! la! tastiera! premendo! i! tasti! è,! +,! à,! ù! e! compatibile! con! gran! parte! delle!
versioni!degli!Screen!Reader!per!non!vedenti!(come!Jaws).!!
Esistono!molte!applicazioni!che!similmente!consentono!a!persone!non!vedenti!di!ascoltare!
cosa!“accade”!sullo!schermo.!Il!gruppo!ISF!che!ha!progettato!ed!implementato!l'applicazione!
Strillone,! ha! però! avuto! un'intuizione! meravigliosa:! il! tatto,! insieme! all'udito,! è! l'unica!
certezza!dei!non!vedenti,!per!cui!ISF!fa!pensato!di!associare!a!ciascun!angolo,!di!tablet!o!
smartphone,!una!funzione!predefinita.!Le!funzioni!svolte!dagli!angoli!del!touch!screen,!sono!
installate!in!quattro!tasti!ben!definiti.!!
Strillone!è!un'applicazione!che!si!rivela!molto!utile!non!solo!per!gli!ipovedenti!ma!anche!per!
tutte!quelle!persone!con!importanti!difficoltà!visive!come!anziani,!autistici,!dislessici,!etc.!!
!
2.4.100L’INTERFACCIA0A0QUATTRO0ANGOLI0
Ma!quali!reali!certezze!può!avere!un!non!vedente!che!utilizza!uno!schermo!touch?!Gli!angoli!!
L'aspetto! interessante,! che! consente! dunque! agli! ipovedenti! o! ai! ciechi! una! facile!
individuazione! dei! pezzi,! è! la! schermata! principale,! suddivisa! in! quattro! aree! uguali!
corrispondenti! quindi! agli! angoli! dei! dispositivi.! Questi! sono! ben! delineati! e! tattilmente!
riconoscibili! anche! da! chi! ha! problemi! di! vista.! A! ciascuna! di! queste! aree! viene! quindi!
associato!un!comando!predefinito.!!
Sfogliare!i!contenuti!è!facile!e!veloce.!Ogni!giornale!è!infatti!distribuito!secondo!lo!schema!
logico!dell'albero!rovesciato:!in!questo!modo,!ogni!giornale!è!la!“radice”!di!un!albero,!il!punto!
di!partenza!della!navigazione.!Scegliendone!uno,!i!“rami”!successivi!rappresentano!le!sezioni!
di!ciascuna!testata!(ad!esempio!sport,!politica,!finanza,!cronaca),!e!una!volta!scelta!una!di!
queste,!le!"foglie"!sono!gli!articoli!di!quella!specifica!sezione!e!rappresentano!i!punti!terminali!

30. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
21!
della!pubblicazione.!Il!segreto,!sta!quindi!nell'uso!del!telefono!come!supporto!all'azione!nel!
programma.!!
!
!
Possiamo!fornire!una!descrizione!dettagliata!di!ciascuna!funzionalità!associata!ai!quattro!
pulsanti!(Figura!2L2):!!
•! Angolo! superiore! sinistro:! toccando! brevemente! questo! angolo! si! torna! al! livello!
superiore.!Se,!ad!esempio,!si!sta!navigando!gli!articoli,!premendo!questo!angolo!si!
può! interrompere! la! lettura! dell’articolo.! Premendolo! nuovamente! si! torna! alle!
sezioni!del!giornale,!e!così!via!fino!alla!navigazione!iniziale.!Se!si!intende!chiudere!
Strillone,!si!preme!a!lungo!questo!pulsante!e!l’applicazione!si!chiuderà.!!
•! Angolo! superiore! destro:! toccando! brevemente! questo! angolo! si! passa! da! una!
sezione!o!da!un!articolo!al!precedente.!!
•! Angolo!inferiore!destro:!toccando!brevemente!questo!angolo!si!passa!da!una!sezione!
o!da!un!articolo!al!successivo.!!
•! Angolo!inferiore!sinistro:!toccando!brevemente!questo!angolo!si!scende!al!livello!
successivo.!Se,!ad!esempio,!si!sta!navigando!le!sezioni!del!giornale,!premendo!questo!
angolo!si!entra!nella!lista!degli!articoli!della!sezione!scelta.!Premendolo!nuovamente,!
dopo!aver!scelto!un!articolo,!si!avvia!la!lettura!del!testo!dell’articolo!di!interesse.!Se!
invece! si! vuole! ascoltare! la! guida! vocale! è! necessario! premere! a! lungo! questo!
pulsante.!!
!
!
Figura*2R2*:*Funzionamento*interfaccia*Strillone*(2)*

31. 2!–!Tecnologie!a!dei!non!vedenti!
!
!
22!
2.4! OBIETTIVI0
!
Sulla!base!delle!ricerche!effettuate,!per!creare!un’applicazione!che!vada!incontro!al!target!
utente! in! questione! è! necessario! aggiungere! una! guida! vocale! che! aiuti! l’utilizzatore!
dell’applicazione!durante!il!suo!utilizzo;!in!aggiunta!è!necessario!utilizzare!combinazioni!di!
colori!che!rendano!accessibile!l’applicazione!anche!a!persone!con!disabilità!visive!di!tipo!
daltoniche.!
Il! progetto! SpokenHouse! punta! a! soddisfare! in! pieno! le! esigenze! dei! suoi! utilizzatori,!
integrando!la!sintesi!vocale!ad!una!facile!organizzazione!dei!contenuti.!!
In!aggiunta,!l'applicazione!dovrà!essere!supportata!da!tutti!i!sistemi!operativi!mobile!(iOS,!!
Android,!Windows!Phone!8,!ecc…).

32. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
23!
!
!
CAPITOLO030
!
3! TECNOLOGIE0 A0 SUPPORTO0 DELLA0 CROSS0
PLATFORM0
!
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!

33. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
24!
(HTML5),! Titanium! di! Appcelerator! (javascript),! RhoLMobile! (Ruby),! Sencha! (HTML5),!
MonoTouch!e!MonoforAndroid!(.NET)!e!Air!(27).!
Queste!tecnologie!permettono!di!avverare!il!sogno!di!ogni!sviluppatore:!scrivere!una!sola!
volta! il! codice! e! usarlo! per! tutte! le! piattaforme.! Di! contro,! il! sogno! del! “write! once,! run!
everywhere”!(wora),!porta!spesso!ad!applicazioni!mal!realizzate!o!mal!integrate!con!il!resto!
del!sistema,!complesse!e!pesanti,!con!un!minimo!comune!denominatore:!una!brutta!userL
interface!scritta!in!HTML5.!
Tuttavia,!non!sempre!le!App!sviluppate!con!tecnologia!crossLplatform!sono!da!considerare!
inferiori.!Un!caso!noto!è!quello!del!team!di!Sencha!(un!framework!per!la!realizzazzione!di!
interfacce!in!HTML5!per!applicazioni!mobili)!che!si!è!offeso!quando!Zuckerberg!ha!affermato!
che! avrebbe! rifatto! in! maniera! nativa! l’App! di! Facebook! perché! HTML5! non! era! ancora!
pronto:!hanno!sviluppato,!così,!un’App!del!tutto!simile!a!quella!di!Facebook!in!HTML5!e!
l’hanno!chiamata!“Fastbook”.!
In!effetti!la!loro!App!risulta!più!veloce!nel!refresh!e!nel!caricamento!delle!varie!viste,!e!la!UI!
è!del!tutto!identica!all’originale.!La!scelta!del!framework!da!usare!non!è!quindi!una!cosa!da!
sottovalutare!e!dovrebbe!essere!guidata!da!una!chiara!idea!del!servizio!che!si!vuole!offrire,!
seguita!da!un’analisi!dettagliata!che!miri!a!semplificare!il!più!possibile!l’interfaccia.!
Con!tutta!probabilità,!il!modello!vincente!è!quello!misto,!composto!da!una!UI!nativa!e!da!un!
core!crossLplatform.!
!
3.2! CLASSIFICAZINE0DELLE0APPLICAZIONI00
!
Allo! stato! attuale! possiamo! classificare! le! applicazioni! per! il! mondo! mobile! in! base! alle!
tecnologie!utilizzate!in!tre!categorie!(28):!
•! App*native:!sono!App!scritte!e!compilate!per!una!specifica!piattaforma!utilizzando!
uno!dei!linguaggi!di!programmazione!supportati!dal!particolare!sistema!operativo;!
•! Web* App:! sono! pagine! Web! ottimizzate! per! dispositivi! mobili! sfruttando! le!
tecnologie!Web,!in!particolare!HTML5,!JavaScript!e!CSS3;!

34. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
25!
App*ibride:!sono!App!che!cercano!di!sfruttare!il!meglio!delle!due!categorie!precedenti:!sono!
scritte!con!tecnologie!Web,!ma!vengono!eseguite!localmente!all’interno!di!un’applicazione!
nativa!
!
3.2.1!APPLICAZIONI0NATIVE0
Un’applicazione!mobile!nativa!è!un’applicazione!per!un!determinato!dispositivo!smartphone!
e!tablet!installata!direttamente!sul!dispositivo.!Lo!sviluppo!delle!mobile!App!per!Tablet!e!
smartphone!prevede!la!progettazione!adLhoc!per!specifici!sistemi!operativi!(!IOS,!Android,!
Blackberry!e!Windows!Mobile)!e!per!specifici!device.!!Gli!utenti!in!genere!acquistano!queste!
applicazioni!tramite!uno!store!online!o!di!mercato,!come!ad!esempio!l’Apple!Store!o!Android!
Apps! su! Google! Play.! Di! solito! le! applicazioni! mobile! sfruttano! il! linguaggio! specifico! del!
dispositivo!e!dialogano!con!i!framework!del!device:!GPS,!fotocamera,!accelerometro,!lista!
contatti,!utilizzando!un!sistema!di!Notifiche!push!e!sono!utilizzabili!anche!in!modalità!offline!
con!una!maggiore!velocità!di!caricamento!dei!dati.!
Sviluppare!App!native!significa!utilizzare!i!linguaggi!nativi!di!ciascuna!piattaforma,!che!nel!
caso!di!Android!è!Java,!mentre!nel!caso!di!iOS!è!ObjectiveLC!oppure!il!nuovo!arrivato!Swift!
(8).!
I! principali! vantaggi! dello! sviluppo! nativo! sono! sicuramente! le! performance! e! l’accesso!
diretto!ai!sensori!hardware!dei!dispositivi!attraverso!le!API!native,!sfruttando!perciò!al!meglio!
le!funzionalità!dello!smatphone.!Essendo!il!codice!compilato!in!codice!macchina!o!comunque!
in!un!bytecode!esso!girerà!in!modo!efficiente!e!rapido!sui!dispositivi.!
Le!applicazioni!native!sono!più!veloci!(rispetto!alle!web!App)!e!possono!funzionare!anche!offL
line,!inoltre!un'applicazione!nativa!gode!della!grande!visibilità!data!dagli!store!digitali.!
D’altronde! bisogna! annoverare! anche! gli! svantaggi! nello! sviluppare! questa! tipologia! di!
applicazioni.!I!costi!e!tempi!di!realizzazione!delle!applicazioni!native!sono!mediamente!più!
elevati! (si! deve! sviluppare! un’applicazione! per! ogni! device! differente,! per! ogni! sistema!
operativo! differente).! Inoltre! per! accedere! agli! store! le! applicazioni! devono! soddisfare!
determinati!requisiti!decisi!dai!distributori.!!
Anche!la!gestione!degli!aggiornamenti!è!difficoltosa,!e!deve!sempre!passare!attraverso!le!
policy! di! approvazione! degli! store.! Sviluppare! nativamente! implica! avere! delle! buone!

35. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
26!
competenze! da! programmatore! ed! alle! spalle! uno! studio! approfondito! dei! framework! di!
riferimento!di!ciascuna!piattaforma!che!si!vuole!targhettizzare,!occorre!dunque!investire!una!
notevole!quantità!di!tempo!per!padroneggiare!questo!genere!di!sviluppo.!
Un’applicazione!mobile!nativa!è!conveniente!nei!seguenti!casi:!
•! Advergaming)L!per!i!giochi!interattivi!una!mobile!App!nativa!è!quasi!sempre!la!scelta!
migliore.!
•! Personalizzazione!L!Se!gli!utenti!di!destinazione!utilizzeranno!l’applicazione!in!modo!
personalizzato.!
•! Maggiore)capacità)di)calcolo!e!reporting!–!una!mobile!App!nativa!è!la!scelta!giusta!
se!si!necessita!di!un’applicazione!per!gestire!ed!elaborare!i!dati!con!calcoli!complessi,!
grafici!o!relazioni!(applicazioni!per!il!banking!e!la!finanza).!
•! Funzionalità)native!L!la!mobile!App!nativa!è!molto!efficace!se!è!necessario!accedere!
a!fotocamera!o!alla!capacità!computazionale!del!dispositivo!mobile.!
•! Nessun) collegamento) richiesto! –! la! mobile! App! nativa! è! la! scelta! giusta! se! è!
necessario!fornire!accesso!offline!ai!contenuti!o!funzioni!senza!connessione.!
)
!
3.2.2!WEB0APPLICATION0
Le!Web!App!mobile!sono!delle!applicazioni!InternetLenabled!!che!possono!essere!fruite!da!
un!dispositivo!mobile!tablet!o!smartphone.!Sono!accessibili!tramite!browser!del!dispositivo!
mobile!e!non!hanno!bisogno!di!essere!scaricate!e!installate!sul!dispositivo.!L’utilizzo!della!
memoria! cache! del! telefono! permette! spesso! di! utilizzare! anche! alcune! funzionalità! in!
modalità!offline!permettendo!in!tal!modo!di!far!avvicinare!ulteriormente!le!web!app!alle!
applicazioni!mobile.!Le!web!app!utilizzano!linguaggi!di!programmazione!web!(HTML,!CSS,!
Javascript)!e!sono!accessibili!da!svariati!dispositivi:!computer!desktop,!laptop,!smartphone,!
tablet.!
I!vantaggi*possono!essere!schematizzati!come!segue:!
•! Immediatezza!L!le!web!App!sono!immediatamente!disponibili!agli!utenti!tramite!un!
browser! su! una! gamma! di! dispositivi! (iPhone,! Android,! BlackBerry,! ecc.).! Le!
applicazioni! mobile! native! invece! richiedono! che! l’utente! innanzitutto! scarichi! e!

36. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
27!
installi!l’applicazione!da!un!mercato!prima!che!il!contenuto!o!l’applicazione!possa!
essere!utilizzata.!
•! Compatibilità!L!un!unico!sito!web!mobile!può!raggiungere!gli!utenti!attraverso!diversi!
tipi!di!dispositivi!mobili,!mentre!applicazioni!native!richiedono!una!versione!separata!
da!sviluppare!per!ogni!tipo!di!dispositivo.!Inoltre,!le!URL!delle!web!App!mobile!sono!
facilmente!integrabili!all’interno!di!altre!tecnologie!mobile!come!gli!SMS,!i!codici!QR!
e!NFC.!
•! Capacità)di)aggiornamento!–!una!web!App!è!molto!più!dinamica!di!un’applicazione!
mobile! in! termini! di! flessibilità! pura! per! aggiornare! il! contenuto.! Se! si! desidera!
modificare!la!struttura!o!il!contenuto!di!una!web!App!mobile!è!sufficiente!pubblicare!
la!modifica!una!volta!e!le!modifiche!sono!immediatamente!visibili;!l’aggiornamento!
di!un!App,!dall’altro!richiede!gli!aggiornamenti!siano!convogliati!agli!utenti,!che!poi!
devono! essere! scaricati! in! modo! da! aggiornare! l’applicazione! su! ogni! tipo! di!
dispositivo.!
•! Ricercabilità!–!le!web!App!sono!maggiormente!ricercabili!dagli!utenti!perché!le!loro!
pagine! possono! essere! visualizzate! nei! risultati! di! ricerca! ed! elencati! nel! settore!
directory!specifiche.!Gli!utenti!del!sito!web!possono!essere!inviati!automaticamente!
al! tuo! sito! mobile! quando! navigano! tramite! un! dispositivo! mobile! smartphone! o!
tablet.!Al!contrario,!la!visibilità!delle!applicazioni!mobile!è!in!gran!parte!limitata!alle!
App!store!del!produttore.!!Inoltre!le!web!App!sono!accessibili!da!tutte!le!piattaforme!
e!possono!essere!facilmente!condivise!da!più!utenti!
•! Condivisione!L!le!web!App!sono!facilmente!condivisibili!tramite!un!semplice!link!(ad!
esempio! all’interno! di! un! messaggio! di! posta! elettronica! o! di! testo,! Facebook! o!
Twitter! post)! mentre! invece! un’applicazione! nativa! non! può! essere! condivisa! in!
questo!modo.!
•! Tempo!e!costi!L!le!web!App!sono!meno!costose!!soprattutto!se!si!necessita!di!avere!
una! presenza! su! diverse! piattaforme! (che! richiede! lo! sviluppo! di! applicazioni!
multiple).!

37. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
28!
•! Supporto!e!manutenzione!L!il!supporto!e!lo!sviluppo!evolutivo!!di!una!mobile!!App!
nativa!(aggiornamenti,!test,!problemi!di!compatibilità!e!lo!sviluppo!in!corso)!sono!più!
costosi!al!supporto!di!una!web!App.!
Principale! svantaggio! delle! web! App! è! che! per! poter! funzionare! hanno! necessità! di! una!
connessione!internet.!In!aggiunta!si!ha!che!una!webapp!non!può!interagire!più!di!tanto!con!
hardware!e!software!del!device!mobile.!Sono!più!lente!nelle!loro!performance!rispetto!alle!
App!native,!e,!visto!che!risiedono!sul!web!e!vengono!fruite!tramite!il!browser,!non!possono!
essere!distribuite!negli!store!e!sono!quindi!penalizzate!dal!punto!di!vista!di!quella!visibilità!
che!i!market!online!garantiscono.!
!
3.2.3!APP0IBRIDE0
Le!App!ibride!sono!applicazioni!che!hanno!un'architettura!che!unisce!caratteristiche!delle!
App!native!a!delle!web!App.!
Un’App!ibrida!è!tipicamente!un’App!nativa!che!ha!comunque!una!parte!web!e!che!si!adatta!
facilmente!alle!diverse!piattaforme!e!diversi!device!mobili!(diciamo!che!il!”contenitore”!è!
un’applicazione!nativa,!che!quindi!sfrutta!le!caratteristiche!del!device!su!cui!è!installata,!e!il!
”contenuto”!è!un’applicazione!webLbased!e!quindi!si!aggiorna!tramite!Web).!
Il!vantaggio!principale!delle!applicazioni!ibride!risiede!nel!fatto!che!il!codice!del!contenuto!
viene!scritto!con!un!linguaggio!comune!a!tutti!i!device!ed!è!solo!il!contenitore!a!dover!essere!
cambiato!in!funzione!del!dispositivo!che!deve!ospitare!l'applicazione!–!questo!significa!che!
per!la!realizzazione!di!una!App!ibrida!ci!sono!tempi!e!costi!più!bassi!rispetto!a!quelli!necessari!
per!le!applicazioni!native.!
Un’App!ibrida!è!comunque!considerata!come!un’App!nativa,!quindi!può!essere!pubblicata!
sugli!store.!
Svantaggio!principale,!invece,è!che!le!App!ibride!non!sono!performanti!e!veloci!come!quelle!
native,!e!inoltre!hanno!le!stesse!difficoltà!che!hanno!le!App!native!per!accedere!agli!store!dei!
distributori!e!per!gli!aggiornamenti.!!
!

38. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
29!
3.2.4!APP0NATIVE0VS0WEB0APP0VS0APP0IBRIDE0
Mentre! le! differenze! di! architettura! tra! un’applicazione! mobile! nativa! e! web! App!
probabilmente!rimarranno!rilevanti!per!un!pò!di!tempo,!a!livello!d’interfaccia!utente!e!di!user!
experience!la!differenza!tra!le!due!interfacce!tende!a!divenire!sempre!più!sfumata!perchè!
ormai!le!mobile!App!native!utilizzano!sempre!più!la!connettività!in!tempo!reale!e!le!web!App!
sono!utilizzabili!offline!sfruttando!la!cache,!arrivando!quindi!a!un!concetto!di!applicazione!
mobile!ibrida.!!
Ormai! le! web! App! stanno! tentando! di! eguagliare! le! App! mobile! native! in! materia! di!
esperienza!utente!grazie!all’evoluzione!dell’HTML5,!ma!non!raggiungono!la!stessa!efficienza!
in!materia!di!User!Interface.!Per!colmare!il!gap!con!le!App,!stanno!nascendo!framework!
specifici! che! forniscono! alle! web! Application! elementi! di! UI! standard! e! garantiscono!
compatibilità!multidevice!e!multipiattaforma!(27).!
I!fattori!da!prendere!in!considerazione!sono:!
•! Performance!dell’interfaccia.!
•! Rapidità!di!caricamento.!
•! Potenza!di!calcolo.!
•! Frequenza!d’uso.!
•! Utilizzo!di!funzionalità!native.!
•! Persistenza!dei!dati.!
•! Revenue.!
•! Integrazione!con!altre!applicazioni!native.!
•! Diffusione!capillare.!
•! Funzionamento!offline.!
•! Quantità!di!contenuti!non!residenti!online.!
•! Restrizioni!sul!contenuto.!
•! Tempo!di!rilascio!degli!aggiornamenti.!
Ad!esempio,!un’applicazione!nativa!ha!dalla!sua!parte!una!maggiore!velocità!di!esecuzione!e!
una!maggiore!integrazione!con!il!look!and!feel!della!piattaforma,!ma!non!è!direttamente!
portabile!su!altre!piattaforme.!

39. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
30!
Una!Web!App!invece!risulta!indipendente!dalla!piattaforma!ma!richiede!una!connessione!
Internet!attiva!e!non!è!in!grado!di!accedere!al!file!system!o!ad!altre!risorse!hardware!del!
dispositivo.!
La! tipologia! di! App! ibrida! coniuga! i! vantaggi! delle! web! App! con! quelle! delle! App! native,!
consentendo!di!utilizzare!le!tecnologie!Web!per!sviluppare!l’applicazione!senza!necessità!di!
una!connessione!Internet!costante!e!avendo!accesso!alle!risorse!locali!del!dispositivo.!
Anche!in!questo!caso!ci!sono!degli!svantaggi!da!considerare:!
•! Una!minore!efficienza!nel!rendering!grafico;!
•! La!potenziale!lentezza!di!esecuzione!nell’accesso!alle!risorse!locali;!
•! Senza! particolari! accorgimenti! l’aspetto! dell’interfaccia! grafica! potrebbe! non!
risultare!abbastanza!omogeneo!con!quello!nativo!della!piattaforma.!
Diciamo!che!in!linea!di!massima!le!App!ibride!si!pongono!a!metà!strada!tra!le!App!native!e!le!
web!App!(Figura!3L1),!rappresentando!un!buon!compromesso!per!la!creazione!di!applicazioni!
mobile!multipiattaforma!con!un!supporto!nativo.!
!
!
!
!
!
!
!
!
!
!
Quanto!detto!può!essere!riportato!schematicamente!nella!tabella!comparativa!Tabella!3L1.!
!
!
Figura*3R1*:*App*a*confronto*

40. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
31!
Tipo*
Integrazione*
con*il*Device*
Tempo* e*
costi* di*
sviluppo*
Funzionamento*
OffRLine*
Modalità* di*
distribuzione*
Approvazione*
dello*store*
Nativa* SI! ALTI! SI! STORE! SI!
Web*
App*
LIMITATO! BASSI! NO! SOLO!WEB! SI!
Ibrida* SI! MEDIO! ALCUNE!PARTI! STORE! SI!
Tabella*3R1:*Tabella*comparativa*App*
!
3.3! 0FRAMEWORK0MULTIPIATTAFORMA0
!
Un!framework!è!un!ambiente!di!sviluppo!evoluto!su!cui!un!software!può!essere!organizzato!
e!progettato.!
Alla!base!di!un!framework!Mobile!c’è!una!serie!di!librerie!di!codice!utilizzabili!con!determinati!
linguaggi!di!programmazione!(SDK),!un!editor!di!codice!sorgente,!un!compilatore,!un!tool!di!
building! automatico! e! un! debugger! o! altri! strumenti! ideati! per! aumentare! la! velocità! di!
sviluppo!del!prodotto!finito.! !
Lo!scopo!di!questi!framework!multipiattaforma!è!duplice:!risparmiare!allo!sviluppatore!la!
riscrittura!di!un!codice!già!scritto!in!precedenza!per!compiti!simili!e!compilare!il!codice!per!i!
vari!tipi!di!smartphone.!
Le!funzionalità!di!smartphone!e!tablet!si!aggiornano!e!migliorano!a!ritmi!sostenuti.!
Un! codice! unico! dà! la! possibilità! di! intervenire! su! tutti! i! device! minimizzando! i! tempi! di!
sviluppo! di! un! applicativo! e! dando! la! possibilità! di! aggiornare,! modificare! e! ottimizzare!
un’applicazione!in!maniera!uniforme!e!univoca.!
Sono!quindi!nati!degli!strumenti!per!supportare!e!velocizzare!il!lavoro!del!programmatore.
! !
Questi!Mobile!framework!permettono!di!scrivere!il!codice!una!sola!volta!e!di!compilarlo!per!
le!varie!piattaforme,!creando!la!stessa!App!per!iOS,!Android,!Windows!Phone!ecc.!
In!conclusione,!dipende!sempre!dalla!tipologia!di!progetto!che!si!intende!realizzare,!in!base!
al! cliente! al! budget! ed! al! target! di! riferimento! dell’applicazione;! ad! esempio,! si! vuole!

41. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
32!
distribuire!su!più!piattaforme!un’applicazione,!con!l’obiettivo!di!svilupparla!una!sola!volta!
senza!ricorrere!a!linguaggi!proprietari,!ma!a!standard!web,!contenendo!i!tempi!e!i!costi!di!
realizzazione.!! !
La!risposta!è!analizzare!meticolosamente,!in!fase!di!progettazione,!tutte!le!funzionalità!di!cui!
abbiamo!bisogno,!e!solo!con!le!idee!chiare!su!obiettivi!e!strumenti!a!nostra!disposizione,!
scegliere!il!framework*multipiattaforma!più!adatto!alle!nostre!esigenze.!
!
3.3.1!SENCHA0TOUCH0
Nella!seconda!metà!del!2010,!il!gruppo!Sencha!ha!rilasciato!Sencha!Touch,!un!progetto!open!
source!che!permette!agli!sviluppatori!di!creare!web!App!che!girano!su!tutte!le!principali!
piattaforme,!iOS,!Android,!BlackBerry!10!e!Windows!Phone,!e!che!somigliano!a!delle!vere!e!
proprie!App!native.! !
Sencha!Touch!utilizza!gli!standard!HTML5,!CSS3!e!JavaScript.!
Con!HTML5,!le!applicazioni!Sencha!Touch!possono!essere!utilizzate!anche!off!line!e,!grazie!
alla!geolocalizzazione,!è!possibile!integrare!dati!geografici!nei!propri!progetti.!
L’uso! di! CSS3! permette! di! non! avere! praticamente! nessuna! immagine! nelle! librerie! dei!
componenti:!gli!stili,!i!bordi,!i!gradienti,!le!ombre,!le!transizioni,!i!menu!e!i!pulsanti!sono!tutti!
componenti! creati! con! CSS! puro.! Tramite! JavaScript! viene! gestita! una! buona! parte! delle!
interazioni!con!l’utente!finale.!!
Dalla!versione!2,!Sencha!supporta!la!creazione!di!App!native!per!iOS,!Android,!BlackBerry!10!
e!Windows!Phone*tramite!il!suo!SDK!(Sencha!Mobile!Packager!integrato!nel!tool!gratuito!
Sencha!Cmd),!che!racchiude!le!web!App!in!un!contenitore!nativo.!Il!risultato!è!che!possiamo!
distribuire!queste!App!sui!vari!store!o!anche!usare!la!fotocamera,!cosa!che!non!è!possibile!ad!
una!semplice!web!App.!
Uno!dei!problemi!nello!sviluppo!di!applicazioni!multipiattaforma!per!i!dispositivi!multimediali!
è!la!difficoltà!nell’adattarle!alle!risoluzioni!diverse!dei!vari!dispositivi.!
Sencha!Touch!utilizza!un!metodo!innovativo!per!eliminare!questo!problema,!consentendo!
agli!sviluppatori!di!modificare!la!scala!globale!delle!loro!interfacce!e!lasciando!al!framework!
l’incarico! di! adattare! i! vari! componenti! utilizzati! alle! caratteristiche! tecniche! dei! diversi!
display.!

42. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
33!
In! questo! modo,! ad! esempio,! i! pulsanti! sono! sempre! abbastanza! grandi! da! poter! essere!
facilmente!toccati,!indipendentemente!dallo!schermo!nel!quale!sono!visualizzati.!
Sencha!Touch!offre!diverse!opportunità!nell’ambito!della!produzione!delle!applicazioni!web!
per!gli!smartphone!e!i!tablet.!
Siccome! il*framework! è! open! source,! lo! sviluppatore! ha! il! vantaggio! di! poterlo!utilizzare*
gratuitamente!e! ha! anche! l’opportunità! di!condividere! idee!e! di!partecipare! al!
miglioramento!del!prodotto.!
Dal!punto!di!vista!tecnico,!tutti!i!componenti!di!Sencha!Touch!rispondono!perfettamente!e!
rapidamente!agli!input:!Sencha!permette!animazioni!fluide!e!uno!scorrimento!continuo!che!
compete!in!tutto!e!per!tutto!con!le!tecnologie!native.!
Nel!caso!di!applicazioni!particolarmente!complesse,!l’hardware!del!dispositivo!fa!da!collo!di!
bottiglia!sulle!prestazioni!del!programma.!Questo!rende!Sencha!Touch!una!valida!soluzione!
per!la!realizzazione!di!diversi!progetti.!
!
3.3.2!TITANIUM0MOBILE0
La! piattaforma! Titanium! è! stata! introdotta! da! Appcelerator! nel! dicembre! 2008,! ma! il!
supporto!per!lo!sviluppo!di!applicazioni!Mobile!è!stato!aggiunto!nel!giugno!2009,!mentre!il!
supporto!all’iPad!soltanto!nell’aprile!2010.!
Appcelerator!Titanium!Mobile!è!un!framework!JavaScript.!Come!Sencha!Touch,!permette!agli!
sviluppatori!il!tanto!agognato!“Write!Once!Run!Anywhere”.!
Si!possono!creare!App!per!iPhone,!Android!o!BlackBerry,!ma!non!per!Windows!Phone.!Si!
compone!di!un!SdK!open!source!basato!su!JavaScript,!e!di!un!ambiente!di!sviluppo!integrato!
(IDE)!basato!su!Eclipse.!Supporta!l’autocompletamento!del!codice!e!ha!un!debugger!integrato!
basato!su!firebug.!Quando!viene!creato!un!nuovo!progetto,!viene!richiesto!quali!piattaforme!
supportare!come!target;!poi,!in!fase!di!compilazione,!si!scelgono!quali!compilare.!
Titanium! compila! il! nostro! codice! in! un’App! nativa! iOS,! Android,! MobileWeb! (HTML5),!
Blackberry!e!Tizen.!Questo!significa!che!non!racchiude!una!web!App!in!un!contenitore!nativo!
come!Sencha!Touch,!ma!compila!direttamente!una!App!nativa.*In!altre!parole,!non!è!un!web!
framework,! ma! un! compatibility! layer,! un! livello! che! sta! sopra! i! tool! che! permettono! di!
sviluppare!nativamente!le!app.!!

43. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
34!
Il!codice!che!scriviamo!non!ha!nulla!a!che!vedere!con!HTML,!CSS!o!sviluppo!web!in!generale,!
bensì!si!appoggia!a!un!object!model!proprietario!che!wrappa!(racchiude)!gli!oggetti!nativi!
delle!varie!piattaforme.!
Il!risultato!è!che!Titanium!genera!codice!nativo,!con!un!layer!che!ne!consente!l’invocazione!
via!JavaScript.! !
Questo!framework!ci!permette,!quindi,!di!sviluppare!delle!App!che!assomigliano!in!tutto!e!
per!tutto!alle!App!native,!con!un’ottima!gestione!di!tutte!le!componenti!hardware!del!nostro!
smartphone,!dalla!fotocamera!al!GPS,!dall’accelerometro!alla!bussola.!Di!contro,!diventano!
difficilmente!implementabili!delle!nuove!funzionalità!a!progetto!finito.!Si!rischia!di!dover!
riscrivere!tutto!o,!peggio,!accorgersi!che!con!questo!framenwork!alcune!funzionalità!non!
possono!essere!create:!la!scarsa!flessibilità!è!sicuramente!uno!dei!limiti!più!difficilmente!
superabili! da! questo! tipo! di! architettura.) In! realtà,! è! possibile! realizzare! dei! wrapper! di!
funzionalità!native!ed!esportarle!tramite!JavaScript!in!Titanium.!Ovviamente,!però,!in!questo!
caso!si!ha!la!necessità!di!scrivere!codice!in!ObjectiveLC!e!o!Java!(a!seconda!della!piattaforma);!
sono!quindi!richieste!delle!conoscenze!superiori,!ma!comunque!questa!è!una!feature!che!
eleva!di!molto!il!livello!del!prodotto.!
!
3.3.3!APACHE(CORDOVA(&(STEROID(
Apache!Cordova!e!Steroids!scaturiscono!dal!knowLhow!nello!sviluppo!per!Internet.!Cordova!
è!la!versione!open!source!del!progetto!PhoneGap!e!serve!a!realizzare!le!cosiddette!App!ibride!
con! un’interfaccia! realizzata! in! modalità! web! ma! in! grado! di! interfacciarsi! con! il! sistema!
operativo!mobile!mediante!un!vasto!numero!di!API.!Steroids!nasce!per!superare!alcuni!limiti!
riscontrati! in! PhoneGap! ma! senza! “reinventare! la! ruota”,! si! basa! infatti! su! Cordova! ma!
approfondisce!il!legame!con!lo!strato!nativo.!
!
3.3.3.1!APACHE0CORDOVA0
Apache! Cordova! nasce! da! un! progetto! di! successo,! PhoneGap,* avviato! da! un’azienda!
canadese,!Nitobi!Software,!e!venduto!nel!2011!ad!Abobe.!Contestualmente!alla!trattativa!
con!Adobe,!Nitobi!ha!donato!alla!fondazione!Apache!il!progetto!che!in!un!primo!tempo!aveva!
assunto!il!nome!di!Apache)Callback!e!successivamente!il!nome!attuale!di!Apache)Cordova.!

44. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
35!
Si!tratta!quindi!un!software!Open!Source!distribuito!con!licenza!Apache!2.0.!Allo!stato!attuale!
il!progetto!PhoneGap!portato!avanti!da!Adobe!non!è!altro!che!una!distribuzione!di!Apache)
Cordova!con!la!possibilità!di!usufruire!di!servizi!aggiuntivi.!!
L’architettura!di!Apache!Cordova!si!presenta!come!una!sorta!di!contenitore!di!applicazione!
Web!eseguita!localmente.!L’interfaccia!grafica!di!un’applicazione!Cordova!è!infatti!costituita!
da!una!Web!view!che!occupa!l’intero!schermo!del!dispositivo!e!all’interno!della!quale!viene!
visualizzato!l’HTML!ed!il!CSS!ed!eseguito!il!codice!JavaScript.!Tramite!JavaScript!è!possibile!
accedere!ad!un!ricco!insieme!di!API!che!interfacciano!l’applicazione!Web!con!le!funzionalità!
della!piattaforma!ospite.!!
Pertanto!Web!view!e!API!sono!le!componenti!dell’applicazione!che!dipendono!dalla!specifica!
piattaforma! mobile.! E! sono! appunto! queste! componenti! che! il! framework! mette! a!
disposizione! dello! sviluppatore,! consentedogli! di! concentrarsi! sul! codice! standard!
indipendente!dalla!piattaforma.!
Cordova! infatti! implementa! lo! stesso! insieme! di! API! sulle! diverse! piattaforme! mobile!
supportate! creando! un! livello! software! standard! a! cui! si! possono! interfacciare! le! nostre!
applicazioni.! Per! chiarire! meglio! il! concetto,! è! come! se!Apache) Cordova!mettesse! a!
disposizione!dello!sviluppatore!delle!app!vuote,!una!per!ciascuna!piattaforma!mobile,!da!
riempire!con!codice!HTML,!CSS!e!JavaScript.!Una!volta!riempite!avremo!un’applicazione!per!
ciascuna!piattaforma!che!condividono!la!stessa!base!di!codice!HTML,!CSS!e!JavaScript.!
Allo!stato!attuale!Apache!Cordova!supporta!le!seguenti!piattaforme!mobile:!Android,!iOS,!
Blackberry,!Bada,!Tizen!e!Windows!Phone.!Questo!dà!un’idea!della!platea!di!utilizzatori!di!cui!
potrebbe!usufruire!la!nostra!App!e!del!lavoro!che!sta!dietro!al!progetto.!
Apache!Cordova!è!un!framework!multipiattaforma!ma!i!requisiti!software!variano!in!base!alla!
piattaforma!mobile!di!riferimento.!
Ad! esempio,! per! sviluppare! un’applicazione! e! compilarla! per! Android! possiamo! usare!
indifferentemente!un!PC!Linux,!Windows!o!un!Mac,!mentre!possiamo!sviluppare!un’app!iOS!
solo!su!Mac.!Questo!perché!per!ciascuna!piattaforma!mobile!di!riferimento!dobbiamo!avere!
installato!il!relativo!SDK!di!sviluppo.!
Prima! di! iniziare! quindi! occorre! definire! la! piattaforma! o! le! piattaforme! mobile! su! cui!
vogliamo!che!venga!eseguita,!quindi!scaricare!ed!installare!i!relativi!SDK.!

45. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
36!
In!pratica,!per!realizzare!un’App!per!Android,!iOS!e!BlackBerry!sul!nostro!PC!devono!essere!
installati!Android!SDK,!Xcode!o!iOS!SDK!e!BlackBerry!WebWorks!framework.!
!
3.3.3.2!STEROID0
Steroids!è!uno!strumento!che!consente!di!creare!applicazioni!mobile!crossLplatform!con!quel!
tocco!di!“nativo”!mancante.!Lo!fa!mettendo!a!disposizione!una!serie!di!oggetti!e!metodi!che!
permettono!di!gestire!alcuni!elementi!dell’interfaccia!utente!nativamente,!con!la!promessa!
di!performance!migliori!e!applicazioni!più!fluide.!
Questo!lato!più!di!basso!livello!riguarda!essenzialmente!il!sistema!di!Views,!lo!stack!e!tutto!
ciò!che!vi!è!collegato:!per!il!resto,!infatti,!Steroids!si!basa!comunque!su!PhoneGap.!
!
Figura*3R2*:*Apache*Cordova*
!
Lo! sviluppo! avviene! in! locale:! scriviamo! il! codice! HTML,! CSS! e! Javascript! (Figura! 3L2)!
richiamando,!dove!opportuno,!le!funzioni!fornite!da!PhoneGap!o!di!Steroids.!
Anche!se!ogni!soluzione!va!valutata!come!caso!specifico,!ecco!gli!scenari!di!utilizzo!in!cui!uno!
strumento!come!questo!sembra!particolarmente!indicato:!
•! demo!o!un!prototipi!da!realizzare!in!tempi!brevi,!senza!funzionalità!complesse!da!
implementare;!
•! realizzazione!di!applicazioni!semplici,!magari!di!supporto!ad!un!servizio!Web;!
•! creazione!di!applicazioni!quando!non!si!ha!il!tempo!giusto!per!imparare!a!lavorare!in!
ambiente!nativo!da!zero;!
•! scarsa!necessità!di!un’interfaccia!dal!look’n'feel!nativo.!
!

46. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
37!
3.3.4!XAMARIN0
Xamarin!offre!vantaggi!simili,!consentendo!l'uso!del!linguaggio!C#!e!di!.NET*per!lo!sviluppo!di!
applicazioni!Android,!iOS!e!Windows!Phone,!con!in!più!la!possibilità!di!poter!utilizzare!tutte!
le!caratteristiche!native,!sia!per!quanto!riguarda!l'interfaccia!che!per!le!peculiarità,!delle!
diverse!piattaforme.!
!
3.3.4.1!XAMARIN0PER0ANDROID0
La! piattaforma! Android! è,! come! molti! sanno,! assai! aperta! alle! modifiche! e! molto! più!
permissiva!di!quella!Apple.!Quindi!su!Android!viene!installato!un!Mono!runtime!che!si!occupa!
di!eseguire!.NET!API!sulle!quali!applicazione!è!basata.!Lo!sviluppo!nativo,!che!consente!di!
utilizzare! C#! per! chiamare! tutte! le! API! di! Android,! si! ottiene! mediante! il!binding!delle!
suddette! API,! consentendo! uno! scambio! bidirezionale! tra! il! Mono! runtime! e! il!Dalvik!
runtime!di!Android.!La!Figura!3L3!illustra!meglio!questo!concetto.!
!
!
3.3.4.2!XAMARIN0PER0IPHONE0
Per!quanto!riguarda!la!piattaforma!iPhone,!le!restrizioni!imposte!da!iOS!non!consentono!l'uso!
di!un!sistema!basato!su!un!runtime!e,!intoltre,!richiedono!l'uso!del!compilatore!contenuto!
nel!sistema!di!sviluppo!di!Apple!stessa,!ovvero!di!XCode,!per!la!compilazione!preventiva!
("head! of! time")! dell'applicazione.! Per! tale! motivo,! l'applicazione! incorpora! al! suo!
interno!tutto! il! necessario! al! suo! funzionamento,! incluse! le! porzioni! del! .NET! Framework!
Figura*3R3*:*:*Xamarin*per*Android*

47. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
38!
necessarie,!compilate!in!nativo.!Anche!in!questo!caso!è!consentito!l'uso!via!C#!di!tutte!le!
librerie!di!sistema,!attraverso!il!meccanismo!di!binding,!come!meglio!illustrato!nella!Figura!
3L4.!
!
Figura*3R4*:*Xamarin*per*iPhone*
0
3.3.4.3!XAMARIN0PER0WINDOWS0PHONE0
Qui!la!strada!è!tutta!in!discesa,!visto!che!C#!e!.NET!sono!la!tecnologia!di!sviluppo!predefinita,!
ma!c'è!comunque!una!precisazione!da!fare.!Con!Windows!Phone!8.1,!possiamo!realizzare!sia!
le! nuove! applicazioni! basate! su!WinRT,! sia! utilizzare!Silverlight.! Al! momento! Xamarin!
supporta!esclusivamente!Silverlight,!anche!se,!in!più!occasioni,!l'azienda!ha!confermato!che!
un!porting!di!WinRT!è!in!corso!di!sviluppo!(e!quindi!avremo!la!possibilità!di!realizzare!anche!
le!Universal!app).!
!
3.3.4.4!SVILUPPO0NATIVO0
Come!si!è!già!detto,!la!caratteristica!che!rende!unico!Xamarin!è!la!possibilità!di!utilizzare!tutte!
le!API*delle!piattaforme!Android,!iOS!e!Windows!Phone.!Inoltre,!Xamarin!ha!anche!un'ottima!
storia! dal! punto! di! vista! dell'adeguamento! del! proprio! sistema! alle! nuove! versioni! delle!
piattaforme!di!riferimento,!come!ad!esempio!iOS!8!o!Android!5.0!Lollipop,!che!tipicamente!
avviene!nello! stesso! giorno! del! rilascio.! La! ciliegina! sulla! torta! è! poi! la! possibilità! di!
creare!custom!binding!a!librerie!di!terze!parti,!scritte!in!Java,!ObjectiveLC!e!C++.!
!

48. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
39!
3.3.5!FRAMEWORK(A(CONFRONTO(
Sulla! base! di! quanto! detto! precedentemente! è! stato! possibile! tabellare! e! comparare! le!
caratteristiche!principali!dei!diversi!framework!crossLplatform!(Tabella!3L2!e!Tabella!3L3).!!
!
* Sencha*Touch*
Titanium*
Mobile*
Apache*
Cordova*
/PhoneGap*
Xamarin*
Piattaforme*
supportate*
iOs,!Android,!
Blackberry!10,!
Window!
Phone,!Kindle,!
Tizen!
iOs,!Android,!
Blackberry,!
MobileWeb,!
Tizen!
Android,!iOS,!
Blackberry,!
Bada,!Tizen!e!
Windows!Phone!
Android,!iOs,!!Window!
Phone!
IDE*di*
sviluppo*
Sencha!Mobile!
Package!(SDK)!
,Sencha!Cmd!
Appcelerator!
Titanium!
Studio!
Plugin!Eclipse,!
Visual!studio,!
IntellJ!e!
NetBeans!
Visual!Studio,!Xamarin!
Studio!
Peculiarità*
Hardware*
Apple:!iOs!
6,7,8!
Android:!da!2.3!
Windows!
Phone:!8.1!e!
Microsoft!
Surface!Pro!e!
NT!
Blackerry!10!
Tizen:!Dark!e!
Light!
Per!l’ultima!
versione!di!
Titanium:!
Android:!
dalla!
versione!2.3!
Blackerry:!
dalla!
versione!10!
Apple:!dalla!
versione!7.1!
iOS!:!min.!5.x!
Android!:!2.3.x!
(Gingerbread,!
dall'API!di!livello!
10)!e!4.x.!Le!
versioni!
precedenti!alla!
10!,!e!la!3.x!(api!
11L13)!falliscono!
nel!5%!dei!casi!
Amazon!Fire!
OS!:!API!level!19!
BlackBerry!10!!
Windows!8.1!
Android!development
:!VS2010+,!e!Android!
4+!
iOS!development:!
VS2010+,!Mac,!iPhone!
con!iOS!8!
Windows!
Phone!development:!
VS2010+,!Win!8!x64,!
inoltre!requisiti!
specifici!per!i!PC!per!
avere!l’emulatore!e!
smartphone!con!WP!
8+!
!
Community*
Attiva!(Più!di!
20!topic!solo!a!
gennaio)!
Attiva!(è!un!
blog,!nel!
quale!è!
possibile!
anche!
vedersi!per!
una!pizza!ad!
esempio)!
Attiva!(quando!
ci!sono!dei!
problemi!è!
possibile!aprire!
un!ticket!sul!
portale!
sviluppatori!di!
SteroidsJS).!
Attiva!(molto.!È!un!
blog!sul!quale!
qualsiasi!utente!
registrato!può!
scrivere).!
Tabella*3R2*:*Tabella*comparativa*Framework*
!
!
!

49. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
40!
* Sencha*Touch*
Titanium*
Mobile*
Apache*
Cordova*
/PhoneGap*
Xamarin*
Pro*
App!utilizzabili!
anche!offline.!
Facile!
adattamento!
della!
risoluzione.!
Ottima!
gestione!
componenti!
hardware!
dello!
smartphone.!
Sviluppo!app!
che!
assomigliano!
in!tutto!per!
tutto!alle!
app!native.!
È!basato!su!
PhoneGap,!
quindi!supporta!
una!grande!
quantità!di!
sensori!e!
feature!di!molti!
dispositivi!in!
circolazione;!è!
possibile!
usufruire!di!un!
servizio!di!Push!
Notifications!
(con!un!
adeguato!setup)!
per!le!
piattaforme!
Android!e!iOS;!
!
Contro*
l'API!utilizza!
una!libreria!
JavaScript!
molto!grande!
(120kb)!
il!markLup!html!
della!pagina!è!
creato!dal!lato!
client!del!
framework!
Sencha!quando!
viene!caricata!
la!pagina!
Difficoltà!ad!
implementar
e!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.!
!

50. 3!–!Tecnologie!a!supporto!alla!Cross!Platform!
!
!
41!
3.3.6!APP0REALIZZATE0CON0FRAMEWORK0CROSSEPLATFORM0
Di!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*