Luci

La sezione Luci permette il controllo intelligente e personalizzato delle luci della casa. In questa sezione vengono riportate le luci della casa. L’utente può personalizzare le singole luci modificando la luminosità, il colore e lo stato.

64

5.4.2 Allarmi

La sezione allarmi permette la personalizzazione degli allarmi: si possono cambiare i colori delle luci associate all’allarme della medicina o dell’appuntamento e inoltre si può attivare o sospendere l’allarme.

65 5.4.3 Medicine

La sezione Medicine permette l’inserimento della medicina all’interno dell’applicazione. I dati della medicina che si possono inserire sono i seguenti:

• nome della medicina; • dose;

• unità;

• quando prendere la medicina; • orario;

66

• data;

Per quanto riguarda l’interazione con questo form sono stati inseriti due elementi interattivi: l’orologio e il calendario.

Per l’inserimento dell’orario è stato scelto questo elemento interattivo poiché rassomiglia a un orologio naturale, i numeri sono posti nelle posizioni standard. Prima era stato utilizzato un altro tipo di interazione: l’utente poteva inserire l’orario tramite delle frecce, ma dopo averlo fatto provare agli anziani nell’incontro preliminare si è notato che gli anziani hanno avuto problemi nell’interazione con quell’elemento. Il maggiore problema rilevato era l’incapacità di comprendere come inserire l’orario, alcuni di essi hanno consigliato di inserire un orologio naturale che sarebbe stato più semplice da capire e da usare.

67 Gli anziani hanno espresso delle problematiche per quanto riguarda l’assunzione delle medicine.

Molti di loro devono assumere alcune medicine in un intervallo preciso di tempo dopo il quale la medicina non deve essere più assunta. Per questo motivo è stata fatta la scelta di poter interagire con un calendario interattivo che permette all’utente di inserire le due date semplicemente cliccando sopra le date prescelte.

Alla fine della pagina viene mostrata una tabella riassuntiva delle medicine inserite.

Figura 42 Tabella riassuntiva medicine inserite. Figura 41 Interazione con il calendario.

68

5.4.4 Calendario

La sezione Calendario permette l’inserimento degli appuntamenti, precisamente si possono inserire le seguenti informazioni:

• nome dell’appuntamento; • luogo;

• note; • orario; • data.

69 Le interazioni con gli elementi che permettono di inserire l’orario e la data sono le medesime di quelle presenti nella sezione Medicine.

Alla fine della pagina viene mostrata una tabella riassuntiva degli appuntamenti inseriti.

5.5 Implementazione

L’applicazione sviluppata è una Web App Responsive6_{: si adatta ad ogni tipo di}

piattaforma e dispositivo.

Gli utenti non devono scaricare l’applicazione dallo store del sistema in questo modo la memoria dei dispositivi non viene intaccata. Non ci sono problemi di portabilità in dispositivi e sistemi operativi diversi perché non è legata al sistema operativo ma si può visualizzare tramite i browser [48]. Se implementati permettono l’utilizzo di altri componenti del sistema come fotocamera, sms, notifiche. Rispetto ai costi di licenza e strumenti di sviluppo utilizzati nella app native e miste, quelli delle web app sono molto più bassi [48].

L’applicazione è costituita da due parti: il front-end creato attraverso HTML5, CSS3 e JavaScript, la parte di back-end sviluppata con PHP e phpMyadmin. La struttura dell’applicazione è la seguente:

6_{Web app responsive: si intende un’applicazione che funziona come un sito web e si adatta} tranquillamente ad ogni tipo di dispositivo.

70

71 5.5.1 Plugins

I plugins sono dei programmi aggiuntivi che implementano e potenziano le funzionalità del programma con il quale si sta connettendo.

I plugins utilizzati sono:

• chartjs: è una libreria JavaScript che permette la creazione di grafici;

• colorpicker: bootstrap-colorpicker fornisce uno strumento che dà all’utente la possibilità di scegliere un colore;

• Morris: morris chart js: è un plugin di AdminLTE che consente la creazione di vari grafici;

• Timepicker: permette la creazione di un orologio in cui gli utenti possono scegliere l’ora e i minuti;

• Datarangepicker: mostra tramite un pop-up due calendari ravvicinati nei quali si possono selezionare le date che interessano.

5.5.2 Database

Il database è una delle parti fondamentali dell’applicazione perché è una banca dati che raccoglie e memorizza i dati in modo che essi siano catalogati per contenuto e formato interrogabile [49].

Per creare il database del prototipo è stato utilizzato phpMyAdmin [50].

PhpMyAdimn è un’applicazione sviluppata in PHP che permette di controllare e amministrare un database MySQL tramite un qualsiasi browser.

Questa applicazione fornisce un’interfaccia semplice da usare per gli utenti che vogliono creare un database. L’applicazione permette la creazione da zero del database: permette la creazione delle tabelle sulle quali si possono compiere delle operazioni e interrogare i dati inseriti in MySQL.

All’interno delle tabelle vengono inseriti i dati richiesti e vengono ordinati in base all’ordine di inserimento o in base a specifiche “chiavi” che si possono inserire durante la creazione delle tabelle.

Il database sviluppato per l’applicazione si chiama “colorcontrol” ed è costituito da tre tabelle: appuntamenti, medicine e persone.

72

Appuntamenti: questa tabella memorizza tutte le informazioni che sono state inserite dall’utente durante l’interazione con il form presente nella pagina Calendario. Le informazioni memorizzate sono relative agli appuntamenti inseriti (nome dell’appuntamento, luogo, note, orario, data).

Medicine: in questa tabella vengono memorizzate le informazioni relative alle medicine inserite dall’utente nella sezione Medicine. Le informazioni inserite sono: nome della medicina, dose, unità, quando prendere la medicina, orario, data.

Persone: in questa tabella vengono memorizzati i dati della persona che si registra nell’applicazione. I dati registrati sono: username, password, e-mail, scelta dei colori. 5.5.3 Back-end

Il back end è principalmente come il sito funziona, si aggiorna e cambia. Il back end è il ponte che collega il server all’utente. I linguaggi solitamente utilizzati sono PHP, Python, java, nodejs.

Il linguaggio di programmazione utilizzato in questa applicazione è il PHP. Figura 45 Struttura database phpMyAdmin.

73 L’Hypertext Preprocessor (PHP) è un linguaggio di programmazione “general-purpose”7

interpretato, viene utilizzato principalmente per creare siti web dinamici [49].

Il PHP viene interpretato da un server web ed è utilizzato per generare dinamicamente i documenti HTML che il client deve ricevere e visualizzare nel browser.

I codici scritti in PHP possono essere inglobati all’interno della struttura dell’HTML ma vanno distinti tramite la seguente delimitazione <?php e ?> [49].

Per prima cosa è stato creato il database “colorcontrol” tramite phpMyAdmin successivamente è stato collegato, attraverso un codice in PHP, al sito sviluppato in HTML.

In ogni pagina dell’applicazione è stato inserito uno script in PHP che permetteva di richiamare la connessione al server.

Il comando session_start() permette di avviare la connessione con il database, dopo è stato inserito uno script che controlla la sessione dell’utente attivo tramite l’id dell’utente e il suo username. In base a queste informazioni viene fatta un’interrogazione al database dove vengono controllati se l’id identificativo dell’utente e il suo username corrispondono.

7 _{Linguaggio general purpose: linguaggi caratterizzati da una certa versatilità, possono essere usati per} affrontare qualunque problema.

74

Nelle pagine Calendario e Medicine sono stati inseriti dei codici in PHP che permettono l’inserimento dei dati presi in input dall’utente all’interno del database:

Per l’inserimento delle date all’interno del database, è stata fatto un passaggio aggiuntivo: presa la variabile che contiene le informazioni della data è stata divisa per ottenere in due variabili diverse dataI e dataF, i valori della data iniziale e della data finale. Le date sono state riordinate in base al formato (yyyy-mm-gg) richiesto da phpMyAdmin. Dopo questo procedimento, le informazioni fornite dall’utente tramite l’apposito form vengono salvate nell’array $_POST. Successivamente queste informazioni vengono inserite all’interno della tabella medicine tramite l’INSERT.

Figura 48 Connessione, Sessione utente.

75 Le tabelle presenti nelle pagine: pagina iniziale, medicine e allarmi sono state generate creando una tabella in HTML e richiamando i valori delle variabili in cui sono salvati i dati delle medicine inserite dall’utente nelle rispettive colonne della tabella.

5.5.4 Front end

Il front end è la parte visibile del sistema che gestisce l’interazione con l’utente. Per lo sviluppo della parte front end sono stati utilizzati i seguenti linguaggi: l’HTML, il CSS e JavaScript per creare alcuni elementi interattivi.

L’HTML e il CSS non sono dei linguaggi di programmazione. L’HyperText Markup

Language (HTML) è un linguaggio di marcatura. Questo linguaggio è utilizzato

principalmente nella formattazione e impaginazione delle pagine web e per definire la struttura delle pagine. La caratteristica di questo linguaggio è l’utilizzo di specifici tag che permettono il riconoscimento dei singoli elementi grafici della pagina. Nell’HTML si utilizza un tag iniziale (<tag>) e un tag di chiusura (</tag>) [51].

Il Cascading Style Sheets (CSS) è un linguaggio che si occupa principalmente della struttura grafica della pagina. Il CSS è il linguaggio che permette di modificare il layout, i colori, i font di una pagina web [51].

76

Il JavaScript è un linguaggio di programmazione che non ha necessità di essere compilato prima di essere avviato. Il JavaScript viene eseguito dal browser quando la pagina web è stata caricata o in risposta a qualche evento innescato dall’utente (ad esempio il click di un bottone). Il JavaScript viene utilizzato per rendere le pagine web interattive e dinamiche e può essere inglobato all’interno di una pagina HTML tramite l’utilizzo dell’apposito tag: <script> [52].

Un piccolo script che è stato implementato all’interno dell’applicazione è il seguente:

Con questo script sono stati aggiunti nell’interfaccia due bottoni che servono per migliorare l’accessibilità del sito. I due bottoni sviluppati danno la possibilità agli utenti di poter aumentare e diminuire le scritte presenti nell’interfaccia a loro piacimento. Per farlo è stata modificata la proprietà che controlla la grandezza dei font del body. I pulsanti creati con l’HTML sono degli elementi che sono in “ascolto di un evento”, ad esempio aspettano che un elemento si premuto. Per rendere questi elementi “in ascolto” è stata aggiunta la funzionalità on click nel singolo bottone. Quando un bottone viene cliccato aumenterà o diminuirà i font presenti all’interno della pagina.

77

6 Test dell’usabilità

Il test dell’usabilità è un metodo che permette di valutare l’usabilità di un sistema in base alla soddisfazione di determinati criteri [34].

Il modo migliore per capire se un’interfaccia è usabile è vedere come gli utenti la utilizzano e ci interagiscono: se riescono a utilizzarla con facilità o se riscontrano molti problemi durante l’utilizzo.

Durante il test di usabilità gli utenti devono completare alcuni task o compiti in periodo di tempo determinato dal ricercatore. Solamente i requisiti che si vogliono valutare sono:

• comprendere se gli utenti sono in grado di completare i compiti; • controllare quanto tempo impiegano a completare il compito; • valutare la soddisfazione degli utenti dopo l’interazione; • analizzare le performance degli utenti [53].