Relazione

Catch, gestisci le tue esperienze con un’app
Laureando Relatore
Davide Meacci Massimo Mecella

1
Catch, gestisci le tue esperienze con un’app
Facoltà di Ingegneria dell’Informazione, Informatica e Statistica.
Corso di laurea in Ingegneria Informatica
Davide Meacci
n° matricola 1462077
Relatore
Massimo Mecella
A/A 2013/2014

2
Riassunto
L’argomento di questa tesi riguarda una serie di modifiche, migliorie ed
aggiunte ad un progetto applicativo chiamato “Catch”: questa app, sviluppata
su più piattaforme (Android,web), presentava un’interfaccia web atta solo alla
visualizzazione.
A fronte di ciò, le modifiche apportate a questo progetto hanno aggiunto una
serie di funzionalità alla parte web che le consentono non solo una maggiore
accessibilità da parte di utenti non muniti di dispositivi Android, ma anche
una migliore gestione ed esposizione delle risorse di cui questo progetto
dispone.

3
Indice
1 Introduzione
1.1 Che cos’è Catch
1.2 Struttura del progetto
2 Registrazione utenti e Amministratore
2.1 Distinzione utenti registrati e non
2.2 Utente Amministratore
2.2.1 Blocco utenti
2.2.2 Statistiche
3 Personalizzazione contenuti
3.1 Aggiunta Catch e Catchbook
3.2 Modifica Catch e Catchbook
3.3 Cancellazione Catch e Catch
4 Condivisione su Facebook
4.1 Condivisione singola;
4.2 Condivisione multipla;
5 Banner
6 Conclusioni

5
1 Introduzione
1.1 Che cos’è Catch?
Il progetto “Catch” nasce per rispondere all’esigenza di avere un diario di
viaggio personale multimediale, ossia per ricontestualizzare un’idea, come
quella del “diario personale”, ormai quasi completamente fuori luogo in una
realtà tecnologica ed in continua evoluzione qual è la nostra.
Infatti, in un’epoca in cui tutto è memorizzabile, condivisibile, e quindi reso
disponibile ai nostri conoscenti ma potenzialmente al mondo intero, la carta e la
penna non adempivano più in maniera esauriente alle necessità di ieri unite a
quelle di oggi: da qui nasce Catch.
Catch quindi esprime una duplice natura: da un lato, la volontà di uno sguardo
al passato, di una ripresa di un abitudine comune ma ormai quasi
completamente dimenticata e fuori luogo; dall’altra, la volontà di rimanere al
passo coi tempi e di poter gestire le nostre esperienze in maniera semplice e
veloce, con la possibilità di creare, modificare, memorizzare e condividere
contenuti altrimenti inaccessibili senza l’ausilio di tecnologie e infrastrutture
moderne come gli smartphone, internet e via discorrendo.
Una volta autenticatosi attraverso le credenziali di accesso del social network
Facebook, le funzioni principali che l’applicazione mette a disposizione
dell’utente finale sono quelle di memorizzare, associandolo ai corrispettivi

6
luogo, data e ora, un numero potenzialmente indefinito di note vocali e scritte,
immagini e video, in un oggetto che nel suo insieme verrà definito “Catch”. Se si
utilizza Catch su un dispositivo mobile, la risoluzione del luogo avviene prima
attraverso la richiesta di attivazione del gps, che una volta attivato consentirà
all’applicazione di rintracciare la posizione dell’utente (ricordiamo che
l’attivazione automatica del gps richiederebbe altrimenti permessi di root).
Ogni Catch è salvato all’interno di un Catchbook, che risulta essere una
directory dei Catch. Ogni Catchbook è identificato da un nome, assegnatogli
dall’utente al momento della sua creazione.
In seguito l’utente potrà poi disporre di questo aggregato di dati come
preferisce: potrà semplicemente tenerli per sé, modificandoli a piacimento,
oppure potrà condividerli su Facebook.
Il tutto, a portata di un tap o click: Tutto questo è Catch.

7
1.2 Struttura del progetto
Catch è un sviluppato su 3 tier, dove allo strato più basso abbiamo la
memorizzazione dei dati in un database postgreSQL, in quello intermedio
abbiamo la logica applicativa, sviluppata in linguaggio java, web services di tipo
SOAP compresi, ed infine all’ultimo si trova lo strato di presentazione
dell’applicazione, dove in particolare abbiamo due interfacce: una web e una
android.
Prima di occuparci di ogni specifico tier, evidenziamo la struttura del progetto
nella sua interezza.
Catch è composto a sua volta da una serie di sottoprogetti, ognuno adibito ad
una funzione specifica; possiamo quindi individuarne 7:
-CatchWebServer
-CatchWS
-createDB
-createTable
-popolateDB
-Progetto
-Catch!
I primi 6 progetti sono stati gestiti attraverso l’IDE Netbeans, mentre l’ultimo,
che riguarda l’interfaccia android, utilizza Eclipse.
Il primo progetto è una web application adibita alla memorizzazione dei dati
utente e alla gestione dell’interfaccia web attraverso pagine a contenuti dinamici

8
(.jsp); in particolare i dati vengono memorizzati nella cartella CatchDATA, dove
poi avremo una organizzazione gerarchica del tipo
<idutente>/<nomecatchbook>/<nome catch>; questa web-application risulta
strettamente collegata al secondo progetto, un’altra web-application, chiamata
CatchWS.
Quest’ultima prevede la creazione e la disposizione di un web service di tipo
SOAP, chiamato Catch, che si occuperà di fornire, sia all’interfaccia web che a
quella android, un collegamento immediato alla nostra base di dati. Questo
approccio, oltre che a favorire una maggiore modularità e quindi un’eventuale
possibilità di riuso, semplifica notevolmente la comunicazione fra le due
interfacce e il database, potendo veicolare, grazie al protocollo di
comunicazione SOAP, delle richieste lightweight alla base di dati stessa.
Entrambe le web application sono gestite attraverso un server di tipo Apache-
tomcat, versione 8.0.1.
I tre progetti successivi sono invece tre semplici java application relative alla
creazione del database: createDB, Table, popolateDB.
La prima si occupa di creare il database “Catch” vero e proprio, attraverso una
CREATE SCHEMA: se il database fosse già presente, verrebbe cancellato; la
seconda inserisce le tabelle, nel rispetto dei vincoli evidenziati dal diagramma
ER della base di dati, necessarie al funzionamento dell’applicazione attraverso
una serie di CREATE TABLE. Ogni tabella corrisponde ad una classe di
dominio: Utente, Catch, Catchbook, Foto, Video, Memo, Nota. Queste classi
sono presenti nella java application “Progetto”, di cui parleremo a breve; infine
popolateDB si occupa di inserire alcuni dati “fittizi” nella nostra base di dati,
solo per avere un’idea di come l’interfaccia web si comporterebbe in un
contesto reale.
La java application progetto si occupa invece di gestire sia le classi di dominio
del progetto Catch nella sua totalità, sia di interfacciare questi oggetti

9
rappresentati dalle classi di dominio con la base di dati, attraverso due possibili
approcci, DAO o DCS; infatti avremo, per ognuna delle classi, una o più classi
aggiuntive rappresentanti questi approcci.
Le classi di dominio appartenenti a Progetto rispecchiano il diagramma ER
della base di dati: per esempio, ad ogni entità corrisponde una classe, mentre
ad ogni attributo di ogni entità corrisponde un campo private nella classe
corrispondente.
Infine, il progetto Catch! riguarda l’interfaccia android dell’applicazione, grazie
alla quale possiamo sfruttare i tools del nostro smartphone, come la
fotocamera, per personalizzare i nostri Catch; quest interfaccia utilizza, come
per quanto riguarda il corrispettivo web, il progetto CatchWS per le chiamate al

10
WebService dell’applicazione: per identificarlo vi è una stringa che andrà
modificata con l’indirizzo ip del server, dopodiché sarà necessaria una
ricompilazione che produrrà il file .apk da installare sul nostro device.
Nello specifico, l’interfaccia web era stata concepita in prima analisi solo con
scopo puramente visualizzativo dei contenuti: in parole povere, per poter
disporre in maniera libera dei propri Catch era necessario utilizzare un
dispostivo android con l’app installata e con connessione internet funzionante;
di qui la necessità, soddisfatta da questo lavoro, di rivalutare l’interfaccia web
per aggiungere nuove funzioni che avrebbero non solo permesso agli utenti di
poter accedere all’applicazione senza dover necessariamente possedere uno
smartphone, ma anche, ad esempio, di consentire la gestione degli accessi da
parte di un utente amministratore.
Nelle successive pagine verranno evidenziate tali migliorie, riferite
esclusivamente alla parte web.
2 Registrazione utenti e Amministratore

11
2.1 Distinzione utenti registrati e non
Nel primo progetto, tutti gli utenti che effettuavano l’accesso per la prima volta,
non venivano registrati: ad essi veniva richiesto di installare l’applicazione
android sul proprio smartphone per poter usufruire dell’applicazione, asserendo
non che l’utente non fosse registrato sul database, ma che per quest’ultimo non
ci fosse associato alcun Catch o Catchbook.
Nell’ottica di upgrade della parte web, ad ogni utente che accede per la prima
volta viene offerta la possibilità di registrarsi: questa opzione è richiesta per
poter accedere ai contenuti offerti dal sito, che verranno offerti esclusivamente
ad utenti registrati sul database.
Tornando al nostro progetto, una volta inoltrata la richiesta di registrazione al
Web Service, attraverso la chiamata del metodo inserisci Utente(String id),
quest’ultimo si farà carico di veicolarla al nostro database, attraverso, in
particolare, la classe UtenteDAO, classe che gestisce, secondo il paradigma
Data Access Objects, la parte di codice SQL relativa alla classe di dominio
Utente.
Una volta terminata l’esecuzione del metodo, otterremo una stringa che
determinerà l’esito della registrazione; in caso positivo, l’utente potrà iniziare ad

12
usufruire dell’applicazione, altrimenti, dovrà re-inoltrare la richiesta come
effettuato precedentemente.
2.2 Utente Amministratore

13
Ogni sito internet che si rispetti deve avere la possibilità di essere gestito da un
utente con privilegi superiori rispetto all’utente comune, un amministratore,
avente la possibilità di gestire a piacimento le risorse di cui il sito dispone.
All’accesso, tutto è come per gli altri: la pagina index.html e la necessità di
effettuare il login attraverso facebook.
Una volta effettuato l’accesso, comparirà una finestra di popup in alto, che
reciterà “Welcome administrator!”: l’accesso è andato a buon fine.
A questo punto, verrà caricata una pagina diversa rispetto a quella di ogni altro
utente: è una pagina di gestione, denominata per l’appunto Admin.jsp, che ci
offrirà possibilità riservate solo per questo utente.
In particolare, nel progetto Catch l’utente amministratore ha la capacità di
bloccare/sbloccare tutti gli utenti presenti all’interno del database: immaginiamo
infatti che sia stato appena inserito un contenuto indesiderato da parte di un
utente. Il contenuto è prontamente segnalato all’amministratore: questo quindi
potrà, una volta verificato l’id della persona corrispondente, bloccarlo ed
impedirgli così qualsiasi accesso ad ogni pagina web del server.
A questa possibilità, si aggiunge quella di poter osservare una serie di
statistiche relative al sito stesso; queste saranno poi mostrate sulla pagina
attraverso l’interfaccia grafica javascript disponibile gratis online Chart.js.
Infine è stata inclusa la capacità, da parte dell’Amministratore, di avere dei
propri Catch o Catchbook come ogni altro utente: pertanto avremo un bottone

14
che ci permetterà di essere reindirizzati alla pagina di gestione dei contenuti
dedicata agli utenti.
2.2.1 Blocco Utenti

15
Non appena effettuato l’accesso, notiamo subito un riquadro contenente due
liste contenenti una serie di stringhe numeriche, ognuna di esse affiancata da
una checkbox; dopodiché alla fine di ogni lista troviamo due bottoni, con scritto
blocca sul primo e sblocca sul secondo.
Ad ogni stringa corrisponde un utente, che apparterrà alla lista degli utenti
bloccati o sbloccati; per farlo passare da una lista all’altra, quindi per bloccare o
per sbloccare un qualsiasi utente, è semplicemente necessario spuntare la
casella corrispondente e poi premere il bottone associato
all’azione che vogliamo che si verifichi (sono quindi possibili scelte multiple); al
click del bottone corrispondente, una servlet verrà richiamata per svolgere il
proprio compito, dopodichè verremo re-indirizzati alla pagina Admin.jsp, con i
dati aggiornati all’ultima modifica effettuata.
15
15

16
Una volta bloccato, l’utente non potrà accedere a nessuna delle pagine
dell’applicazione; infatti se tentasse di farlo comparirebbe un messaggio
ribadente l’impossibilità di accesso e la necessità, per modificare il proprio
status, di contattare l’amministratore.
2.2.2 Statistiche
Al di sotto dell’area dedicata alla gestione degli utenti, vi è una serie di grafici
visualizzati attraverso javascript che mostrano una serie di dati relativi
all’applicazione nel suo complesso; in particolare, possiamo notare 8 grafici che
riguardano:
1. I Catch
2. I Catchbook
3. Le foto
4. I video
5. I memo
6. Le note
7. Gli utenti
8. Gli accessi

17
Ogni grafico presenta dati relativi alla media, massimi e minimi.
I dati sono ottenuti attraverso chiamata a metodi del Web Service volti a trarre
tali dati, come getMaxVideo() e getMinVideo(), mentre sono visualizzati
attraverso lo script free Chart.js.
Per raccogliere dati sufficienti, alla classe Utente sono stati aggiunti alcuni
attributi, come totAccesses, contatore degli accessi totali, lastAccess, per
l’ultima data di accesso, e registeredAt, per la data di registrazione.
17
17

18
3 Personalizzazione Contenuti
Come già sottolineato in precedenza, il progetto Catch precedente non
permetteva che, attraverso la parte web, si potessero personalizzare i propri
contenuti; adesso invece si può, attraverso un’intuitiva interfaccia grafica,
accedere alle usuali opzioni di gestione dei contenuti: aggiunta,modifica e
cancellazione.
3.1 Aggiunta Catch e Catchbook
Nella pagina di gestione dei nostri Catchbook chiamata Connected-after-
website-login.jsp ci si presenta immediatamente la possibilità di creare un
nuovo Catchbook: si tratta semplicemente di riempire un campo con un nome,
che poi diverrà il nome del nostro book, e poi cliccare sull’immagine con scritto
“Click here to create a new Catchbook” oppure premere invio.
Se un nome adeguato non dovesse essere fornito (ad esempio, la stringa nulla)
il Catchbook non verrà creato; altrimenti, dopo aver richiamato la servlet
addetta alla creazione dei Catchbook CreateCatchBook.java verremo
reindirizzati prima ad una pagina che determinerà l’esito della creazione del
nostro Catchbook, per poi ritornare alla pagina di gestione principale.

19
Per quanto riguarda la creazione di un Catch, l’iter da seguire è più complesso
rispetto a quello riguardo alla creazione di un book, in quanto non è sufficiente
avere il suo nome, ma bisognerà aggiungere ulteriori dati relativi al Catch
stesso.
Per la creazione di un Catch, è innanzitutto necessario accedere alla pagina
relativa al book di cui vogliamo che il Catch sia parte: infatti non è possibile in
alcun modo aggiungere un Catch senza conoscere a quale book appartenga.
Una volta raggiunta la pagina relativa al book desiderato, chiamata
Catchbook.jsp, noteremo che la parte destinata alla creazione di un Catch sia
molto simile a quella relativa alla creazione di un Catchbook, ma stavolta non
avremo il form per l’inserimento del nome; stavolta il click sulla scritta “Click to
19
stesso.
19
stesso.

20
create a new Catch!” ci reindirizzerà alla pagina relativa al primo step da
seguire per la creazione del nuovo elemento.
Vi sono tre pagine il cui compito è quello di creare il nuovo Catch:
CreateCatch.jsp
CreateCatch-2.jsp
CreateCatch-3.jsp
Ognuna di queste pagine ha un compito ben determinato.
La prima pagina, CreateCatch.jsp, si occupa di raccogliere i dati relativi alla
data, all’ora e alla posizione del nuovo Catch.
20
CreateCatch.jsp
CreateCatch-2.jsp
CreateCatch-3.jsp
20
CreateCatch.jsp
CreateCatch-2.jsp
CreateCatch-3.jsp

21
I dati inseriti devono essere formattati correttamente: la data deve avere
formato aaaa-mm-dd, l’ora hh.mm.ss e infine la posizione può contenere
qualsiasi carattere ma può contenerne sino ad un massimo di 32.
Una volta inseriti i dati corretti, cliccando sul bottone in basso si attiverà la
Servlet CreateNewCatch, che si occuperà della creazione del nuovo elemento e
di aggiungerlo al database; se una di queste azioni non dovesse andare a buon
fine, ci verrà comunicato nella pagina result.jsp, come in precedenza, per poi
essere reindirizzati al nostro Catchbook o alla pagina di gestione dei book.
La seconda, CreateCatch-2.jsp, ha il compito di raccogliere i file che l’utente
vuole associare al Catch corrente: in particolare, accetterà file .jpg/.jpeg per le
foto, .mp4 per i video e .m4a per i memo vocali; file con estensioni differenti
dalle suddette verranno filtrati successivamente e scartati. Possiamo evitare
21
21

22
questa parte, per poi caricare i file successivamente, cliccando sul pulsante
“skip”.
Una volta selezionati i file, cliccando su upload attiveremo la servlet
FileUploadHandler, che si occuperà del filtraggio dei file selezionati e del
caricamento dei file nel path server “CatchData/<nome utente>/<nome
catchbook>/<nome-catch>/” attraverso l’uso delle librerie
org.apache.commons.fileupload e com.oreilly.servlet.multipart, come ad
esempio fPart.writeTo(new File(fileSavePath)), che si occupa di salvare il vero e
proprio file nella directory corretta. Contemporaneamente alla scrittura, ogni file
è aggiunto ad una lista (foto,video,memo), che poi diverranno parte del Catch
che stiamo creando; dopodiché, al termine di queste operazioni, se andate a
buon fine, verremo reindirizzati alla pagina addetta alla creazione e all’aggiunta
di eventuali note.
Infatti l’ultima pagina di questo percorso di creazione, chiamata CreateCatch-
3.jsp, è addetta proprio allo scopo di aggiungere note scritte al nostro Catch.
Quest’ultima parte è stata suddivisa dalla precedente per i seguenti motivi:
-le note non vengono salvate come files, ma come stringhe direttamente sul
database;
-suddivisone dei task per maggiore modularità e semplicità in caso di modifica e
utilizzo.

23
In questa pagina, dopo aver inserito il nome e il contenuto della nota, potremo
aggiungerla al nostro Catch; se non volessimo aggiungere alcuna nota,
semplicemente cliccheremo su “Skip”.
A questo punto la creazione del Catch è completa, e una volta reindirizzati al
nostro book, possiamo notare come il nuovo Catch compaia nella lista dei
Catch registrati.
23
Catch registrati.
23
Catch registrati.

24
Per quanto riguarda la modifica dei Catchbook, essa consiste perlopiù nella
possibilità di cancellare dei Catch al suo interno.
A questo scopo, è stato aggiunto un bottone appartenente alla classe
denominata button2 che consente di cancellare il Catch selezionato; infatti, una
volta cliccato il bottone, si attiverà la servlet deleteCatch.java che si occuperà di
cancellare sia i dati dal nostro database, sia i file effettivi presenti nella directory
relativa al Catch da cancellare.
24
24

25
La modifica di un Catch risulta invece, come per quanto concerneva la
creazione, più articolata rispetto a quella di un Catchbook, perché qui è
possibile andare a modificare i singoli contenuti del nostro oggetto,
aggiungendo elementi o cancellando quelli pre-esistenti.
A quest’ultimo scopo, per ogni oggetto appartenente al Catch in esame è stato
aggiunto un bottone, sempre appartenente alla classe button2,
che ci permetterà di cancellare l’oggetto corrispondente. Attivando il bottone, si
attiverà una servlet chiamata deleteCatchElement.java, del tutto speculare a
quella relativa alla cancellazione dei Catch: questa però cancellerà solo
l’elemento prestabilito, occupandosi poi di aggiornare la lista a cui l’elemento
precedentemente apparteneva.
25
25

26
Per aggiungere ulteriori elementi al catch corrente, sono stati aggiunti due form
che ci consentono l’uno di aggiungere ulteriori files, l’altro di aggiungere note, in
rispetto della modularità e della scelta progettuale prima citata.
Il primo form chiamerà la servlet updateCatch, mentre il secondo ci reindirizzerà
alla pagina CreateCatch-3.jsp, per aggiungere note come fatto in precedenza.
Ognuna di queste pagine ci reindirizzerà, dopo aver mostrato il risultato
dell’operazione effettuata, alla pagina di gestione dei Catch o dei Catchbook.
26
26

27
3.3 Cancellazione Catch e Catchbook
La cancellazione di un Catch o un Catchbook risulta semplice e intuitiva: è
sufficiente infatti premere, per entrambi, il bottone con il simbolo di una croce
situato all’angolo in alto a destra.
Una volta cliccato, a seconda dell’oggetto da eliminare si attiverà la servlet
deleteCatch o deleteCatchbook. In ogni caso, al termine dell’azione verremo
reindirizzati, come al solito, prima a result.jsp per verificare il risultato
dell’operazione, e successivamente ad una delle pagine di gestione.

28
4 Condivisione su Facebook
La condivisione sul social network facebook risulta essere uno degli aspetti
chiave del progetto nella sua totalità; infatti la capacità di condividere con i
nostri conoscenti è diventata, più che una possibilità, quasi una vera e propria
necessità.
Nel primo progetto Catch la condivisione di un Catch era unicamente possibile
grazie alla condivisione del link associato alla pagina vera e propria del Catch.
Questo approccio, oltre a non sfruttare le interfacce grafiche e non di face book,
risultava molto scomodo e poco pratico, dovendo ogni volta operare una sorta
di copia e incolla del link sulla nostra bacheca di facebook.
Adesso invece all’interno della pagine SingleCatch.jsp è possibile decidere se
condividere un solo oggetto (una foto, un video, e così via) oppure tutto
l’insieme, lasciando maggiore spazio di personalizzazione dell’utente, il tutto
accompagnato da un’interfaccia grafica più responsive ed intuitiva fornita da
face book, quella del feed dialogue.
L’immagine associata al link con il contenuto richiesto che comparirà su
facebook è puramente dimostrativa, essendo questo progetto testato solo in
locale: infatti facebook richiede esplicitamente che le immagini condivise, per
essere visualizzate direttamente sulla bacheca, debbano essere disponibili sul
web attraverso URL; pertanto, nell’ottica di un progetto di maggior respiro, non
solo potremo far visualizzare direttamente i nostri oggetti sulla nostra bacheca

29
(o quella di un amico), ma potremo anche aggiungerli direttamente ad album
pre-esistenti o creati al momento: per far tutto ciò è strettamente necessario
esporre pubblicamente il nostro server, attraverso opportune modifiche alla
configurazione del nostro router e a quella del server, nel nostro caso apache
tomcat.
Per la condivisione inoltre viene richiesto, dopo il login, in caso di primo
accesso alla applicazione, il permesso publish_actions, oltre che agli usuali
permessi di accesso ai dati dell’utente. Questi permessi non vengono concessi
ad ogni applicazione: infatti dall’Aprile 2014 facebook ha adottato una diversa
politica di gestione al riguardo, richiedendo ai vari developers di sottoporre la
propria applicazione ai supervisori di facebook nel caso in cui la propria
applicazione dovesse richiedere il permesso di pubblicare contenuti sulla
bacheca degli utenti.
Per quanto riguarda il progetto Catch, la richiesta di ottenimento di tale
permesso è stata effettuata, ma è stata rifiutata in quanto, essendo un progetto
testato in locale come già evidenziato, i supervisori addetti al testing non hanno
potuto effettuare un’analisi approfondita e pertanto sono stati costretti a negare
la possibilità di richiedere tale permesso; pertanto la condivisione è mostrata a
scopo dimostrativo attraverso un utente amministratore dell’applicazione, al
quale non è necessario richiedere permessi di condivisione. Ad ogni modo,
volendo esporre il progetto online, sarà possibile effettuare una ulteriore e più
valida richiesta per ottenere questi permessi necessari al funzionamento
corretto dell’applicazione.
Infine è da sottolineare come, per la condivisione, sia necessario un access-
token; questo in particolare viene trasmesso di pagina in pagina attraverso

30
l’header, e viene rinnovato da ognuna di queste attraverso dei metodi della
libreria restfb (disponibile su www.restfb.com); se un access-token dovesse non
essere valido, la pagina non verrà caricata e verrà mostrato un messaggio di
errore.
4.1 Condivisione singola
Per la condivisione di un singolo contenuto, ad ogni oggetto all’interno di un
Catch è stata aggiunto un bottone che offre la possibilità di condividere quel
determinato contenuto su Facebook.
30
errore.
30
errore.

31
Una volta cliccato, verrà attivata una funzione javascript attraverso la proprietà
“onclick” , funzione chiamata Share (link,type,name) che, come risulta evidente,
accetterà tre parametri: un campo denominato link, contenente il link al
contenuto, un campo chiamato type, contenente il tipo di oggetto da
condividere, ed infine un campo name, con il nome dell’oggetto da condividere.
Questa funzione attiverà, attraverso le api di face book, una finestra feed
dialogue contenente il link al nostro contenuto e una sua breve descrizione;
dopodichè si attiverà un popup che ci segnalerà se la condivisione è andata a
buon fine oppure no.
Al termine della condivisione, sulla nostra bacheca facebook noteremo una
finestra che reciterà "I'm sharing one <type> of my Catch's !" dove type è uno
dei parametri passati alla funzione Share(); al click dell’immagine, verremo
reindirizzati al link dove si trova il nostro contenuto.
4.2 Condivisione multipla
Per la condivisione multipla, invece, è stato aggiunto un bottone nell’area
sottostante a quella riguardo alla modifica del Catch corrente, che offre la
possibilità di condividere quel determinato Catch su Facebook.
Stavolta, cliccando sul bottone attiveremo una servlet chiamata
shareOnFace.java che, attraverso la libreria restfb, provvederà a condividere
una finestra feed dialogue come in precedenza sulla nostra bacheca; il link

32
condiviso corrisponderà però al link di una nuova pagina, chiamata Catch.jsp,
che corrisponde alla pagina SingleCatch.jsp senza però le possibilità di
personalizzazione e di logout, insomma con funzione solo visualizzativa.
Una volta terminata la condivisione, verremo indirizzati alla solita pagina
result.jsp, che prima ci comunicherà l’esito della condivisione, e poi ci
reindirizzerà ad una delle pagine di gestione.
Sulla nostra bacheca facebook noteremo, come per la condivisione singola, una
finestra che reciterà "I'm sharing one Catch of mine!", come verifca della
condivisione avvenutalla; al click dell’immagine, verremo reindirizzati alla
pagina Catch.jsp che ci mostrerà i contenuti del Catch richiesto.
32
32

33
5 Banner
La parola inglese banner significa bandiera, vessillo o striscione. La striscia che
solitamente compare all'inizio di una pagina web e che riporta il nome del sito è
un banner.
Con web banner o banner ad si intende pubblicità fatta con l'uso di un banner,
ed è generalmente un link. Questa espressione, erroneamente abbreviata in
italiano in banner, è una delle forme pubblicitarie più diffuse su internet ed è
una strategia di marketing definita online marketing promotions, che prevede
l'inserimento un annuncio su una pagina web. Un banner può essere statico
(quando va fruito così com'è) oppure attivo o interattivo (quando consente, una
volta cliccato, di raggiungere un'altra pagina web).
Il messaggio è costituito da un'immagine (GIF, JPEG), programmi JavaScript o
applicazioni multimediali sviluppate in Java, ShockWave Flash o Flash, che
spesso comprendono suoni o animazioni per attrarre un maggior numero
di utenti. Tali immagini hanno spesso una forma molto allungata, in alcuni casi
alta e stretta, in altri larga e bassa. Queste immagini sono spesso collocate in
pagine web di interesse, come giornali online o risorse web.
Molti banner si basano su sistemi a pagamento basati sul click-through rate.
Quando l'azienda pubblicizzata rileva il numero di click effettuati sul banner,
invia una somma di denaro all'ospitante (generalmente 0,05 o 0,10 €). Questo è
quindi il metodo col quale la maggior parte dei siti web si autofinanzia.

34
La funzione dei banner web è la medesima dei sistemi classici di promozione:
informare gli utenti dell'esistenza di un prodotto o di un servizio e proporre le
motivazioni per le quali l'utente dovrebbe acquistare il prodotto, ma i banner si
differenziano per il fatto che i risultati della campagna pubblicitaria sono
consultabili in tempo reale e possono essere rivolti ad un pubblico realmente
interessato.
Nel nostro caso in particolare, i banner inseriti sono stati progettati per essere
statici, con il duplice obiettivo di non distrarre l’utente dal contenuto delle pagine
e di non sottoporlo ad un eccessivo stress visivo.
Vi sono tre tipi di banner presenti in quasi tutte le pagine (esclusa la pagina
Admin.jsp) :
1. 160x600
2. 200x200
3. 728x90
Il primo tipo pubblicizza uno dei siti di prenotazioni online di hotel e simili più
famoso al mondo, www.trivago.com; il secondo si riferisce ad uno spazio web
per la creazione e la personalizzazione di siti internet, www.imcreator.com; il
terzo ed ultimo link ci collega invece al famoso sito di pubblicizzazione di
ristoranti e affini attraverso e grazie ai commenti dei clienti,
www.tripadvisor.com.

35
Questi banner contengono quindi link a dei siti internet attinenti e in qualche
modo collegati al progetto Catch: infatti, dati i contenuti condivisi, è molto
probabile che ad un visitatore possa essere istigata la curiosità di vedere i
giudizi dei clienti riguardo per esempio, un’enoteca, oppure che, una volta viste
foto e video del viaggio di un proprio amico, sia spinto a voler prenotare un
hotel per lo stesso luogo; in questo modo i banner offrono queste possibilità in
maniera immediata, fornendo un duplice servizio all’utente e all’azienda
pubblicizzata.
35
pubblicizzata.
35
pubblicizzata.

36
6 Conclusioni
In seguito a questa serie di upgrades, e anche grazie ad un rinnovato design
grafico, più intuitivo e interattivo, il progetto Catch è stato sensibilmente
rinnovato e ampliato, esprimendo quindi una facilità e un’immediatezza di
utilizzo che, nel progetto precedente, non era presente o in maniera poco
significativa.
Grazie a tutto ciò, le potenzialità di utilizzo di questa applicazione sono
aumentate, portando il progetto ad un livello completamente differente, con
l’eventualità di poterlo realizzare e commercializzare su vasta scala.
Inoltre, quest’ultimo lavoro ha offerto comunque ulteriori spunti di miglioramento
e di riflessione, dimostrando che non vi è mai fine alle possibili novità,
specialmente riguardo un ambito, come quello del web, in continua evoluzione.

37
Bibliografia
Middleware
http://www.dis.uniroma1.it/~baldoni/SOII-middleware.pdf
Web Service
http://it.wikipedia.org/wiki/Web_service
Web Service SOAP e REST
www.html.it/pag/19612/differenze-tra-web-service-rest-e-
soap/+&cd=1&hl=it&ct=clnk&gl=it
Servlet e JSP
http://www.html.it/pag/17162/servlet-e-jsp/
Facebook developers
https://developers.facebook.com/
Banner
http://it.wikipedia.org/wiki/Banner
Create Website link Banner
http://www.imcreator.com/
Tripadvisor link Banner
http://www.tripadvisor.com/
Trivago link Banner
http://www.trivago.com/
Facebook
http://www.facebook.com/
Commenti e guide html
http://www.html.it/pag/16031/i-commenti1/

38
Creazione immagini in jsp
https://today.java.net/article/2004/04/19/generating-images-jsps-and-servlets
RestFB
http://restfb.com/
Stackoverflow
http://stackoverflow.com/questions/
Ridimensionamento immagini
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-
queries-to-create-a-mobile-version-of-your-website/
Tag video e memo vocali
http://www.free-video-hosting.net/embed.php
File upload servlet (1)
http://javarevisited.blogspot.it/2013/07/ile-upload-example-in-servlet-and-jsp-
java-web-tutorial-example.html
File upload servlet (2)
http://snlkjha.blogspot.it/2013/09/code-to-upload-multiple-files.html
Hover master
http://ianlunn.github.io/Hover/
Creazione pulsanti online
http://onlinehtmltools.com/button-genaretor/#sthash.QM15Cues.dpbs
Upload foto in javascript su Facebook(1)
http://pastebin.com/VmFPL1RX
Upload foto in javascript su Facebook(2)
http://kevincobain2000.hatenablog.com/entry/2013/07/07/193559
Full post in javascript su Facebook
http://daipratt.co.uk/using-fb-api-to-make-a-full-post-to-a-users-wall

Relazione

More Related Content

Viewers also liked

Similar to Relazione

Relazione