1. Università degli Studi di Trieste
Ingegneria Informatica
Tesi di laurea di Ingegneria Informatica
Progetto e realizzazione di strumenti e funzioni per facilitare
la trascrizione di documenti multimediali
Laureando Relatore
Lucio Tomasini Chiar.mo Prof Maurizio Fermeglia
Anno Accademico 2007 - 2008

2. Introduzione
La tesi consiste nell’elaborazione di nuove funzionalità da aggiungere a un’applicazione già
esistente.
Grazie a queste nuove funzioni si permette all’utente un più comodo riascolto di file multimediali e
si agevola l’operazione di trascrizione testuale dei file stessi.
L’obiettivo finale della tesi consiste nel miglioramento della funzionalità dell’applicazione.
La realizzazione di questi nuovi strumenti vuole facilitare l’utilizzo del programma al momento del
riascolto e della trascrizione di registrazioni multimediali.
Si era in presenza di un’applicazione esistente che prevede la realizzazione di interrogatori in
ambito legale.
La trascrizione testuale delle registrazioni multimediali viene agevolata da una funzionalità di
inserimento facilitato dei nomi sul testo.
Il riascolto degli interrogatori, la cui registrazione viene effettuata tramite apposite tecnologie
hardware (web - cam e pc) e software (l’applicazione in questione), viene facilitato dalle nuove
funzionalità realizzate, che permettono di posizionarsi in modo automatico e immediato in
determinate volute posizioni del file multimediale, e quindi dell’interrogatorio, in riascolto.
L’applicazione in oggetto era già utilizzata con profitto in ambito lavorativo ma necessitava di
alcuni miglioramenti dal punto di vista dell’utilizzo da parte dell’utente.
I responsabili aziendali dopo una valutazione hanno deciso che per realizzare questo miglioramento
si doveva agevolare la trascrizione e perfezionare il sincronismo tra l’interrogazione registrata e la
trascrizione stessa.
In commercio attualmente non c’e’ nulla che gestisca esattamente il problema specificatamente per
questo settore lavorativo.
A seguito delle precedenti considerazioni per produrre la tesi bisogna svolgere i seguenti passaggi:
• Una prima fase di studio dell’ambiente lavorativo.
Colloqui con personale aziendale sugli obiettivi realizzabili ed utili in ambito pratico
lavorativo hanno portato alla scelta di realizzazione effettuata.

3. • Segue una fase di studio a livello puramente pratico e visivo dell’applicazione in oggetto,
simulando l’utilizzo da parte di un utente, cercando di riprodurre le diverse possibilità e
varianti che si possano incontrare nell’utilizzo.
• Una volta raggiunta una buona conoscenza funzionale dell’applicazione segue un periodo di
studio e di apprendimento delle tecnologie utilizzate.
• Sviluppo dei test di verifica e di esercizio per simulare, a livello semplificato, la logica di
funzionamento dell’applicazione utilizzando i linguaggi e le tecnologie appropriate.
• Analisi delle problematiche da affrontare per permettere la realizzazione delle funzionalità
volute.
• Ricerca di eventuali soluzioni presenti sul mercato che potessero semplificare la soluzioni di
alcuni ostacoli riscontrati a livello di programmazione.
• Realizzazione a livello schematico della soluzione voluta.
• Implementazione dei vari moduli software e integrazione degli stessi.
• Verifica del software realizzato tramite test che simulassero le possibili varianti di utilizzo.
Visti gli obiettivi da raggiungere e l’ambiente su cui l’applicazione si basa si e’ deciso di sviluppare
il lavoro con le tecnologie Jsp e Servlet operanti sul server applicativo Tomcat, e un ampio utilizzo
della tecnologia Javascript. Si e’ lavorato sul sistema operativo Windows Xp e su browser Explorer.
Il database utilizzato e’ Mysql .
Il capitolo Analisi analizza il dominio del problema e la raccolta dei requisiti. Poi si passa al
capitolo Progettazione dove si traducono i requisiti precedentemente raccolti in specifiche
funzionali, si progetta concettualmente il database, si analizzano le tecnologie da utilizzare e, per
render più chiare le funzionalità volute, si creano gli attori e i casi d’uso che li vede protagonisti
tramite la formulazione degli Actors e degli Use Cases.
Il capitolo Realizzazione studia l’architettura generale del sistema, realizza il database e
l’implementazione del codice vero e proprio.
Il capitolo Conclusioni analizza i risultati ottenuti.

4. Analisi
Lo scopo dell’analisi e’ quello di trasformare lo specifico problema del mondo reale da risolvere in
una serie di schemi e modelli da utilizzare poi nella fase di realizzazione.
L’analisi e’ un procedimento fondamentale per la buona riuscita del progetto e per semplificare il
più possibile il procedimento realizzativo organizzando, fin dall’inizio, il lavoro nel modo migliore
possibile.
Essa si può dividere in due fasi.
La prima fase consiste nel dialogo col committente per capire i bisogni da soddisfare e gli obiettivi
da raggiungere.
Bisogna identificare il vero obiettivo, cercando di capire fin da subito i vincoli da seguire e i
problemi da risolvere per raggiungere lo scopo, per quanto questo sia possibile visto che e’ normale
che insorga poi qualche difficoltà realizzativa da superare nel corso del lavoro.
Dalla prima fase si ottengono informazioni per passare alla seconda fase dove si stila la lista dei
requisiti.
I requisito o bisogni dell’utente sono “una descrizione di come dovrebbe essere il comportamento
del sistema, o di una proprietà o attributo del sistema. Possono costituire un vincolo sul processo di
sviluppo del sistema.” 1 .
1
Tratto da “Requirements Engineering. A Good Practice Guide” – Wiley and Sons 1997, autori: Ian Sommerville,
Pete Sawyer.

5. Raccolta dei requisiti
Dopo la fase di colloquio con il committente si sono individuate le parti dell’applicazione da
considerare, studiare e completare .
La lista dei requisiti individuati dal colloquio e’ la seguente
Custom Needs
Requirements
N001 - Realizzare registrazione
N002 - Salvataggio registrazione
N003 - Recupero e riascolto registrazione
N004 - Trascrizione testuale della registrazione
N005 - Semplificazione nella gestione della trascrizione
N006 - Salvataggio trascrizione
N007 - Recupero registrazione con trascrizione
N008 - Modifiche alla trascrizione
N009 - Salvataggio trascrizione modificata
Figura 1. Requisiti.
Queste sono le parti dell’applicazione su cui bisogna lavorare.
La Realizzazione registrazione e Salvataggio registrazione sono già implementate e non vanno
modificate ma vengono inserite nella lista dei requisiti per completare anche concettualmente la
sessione lavorativa dell’utente per quanto riguarda l’esecuzione e la gestione di un interrogatorio.

6. Nell’utilizzo del programma, per realizzare e gestire un interrogatorio l’utente necessita dei seguenti
requisiti
N001 - Realizzare registrazione
L’utente vuole realizzare una registrazione
N002 - Salvataggio registrazione
L’utente una volta completata la registrazione procede al suo salvataggio
N003 - Recupero e riascolto registrazione
Si vuole riascoltare una determinata deposizione, si procede quindi al recupero della relativa
registrazione dall’archivio
N004 - Trascrizione testuale della registrazione
Si vuole procedere alla trascrizione testuale del file multimediale in riascolto su un verbale
riportando gli interventi dei protagonisti
N005 - Semplificazione nella gestione della trascrizione
Si vuole agevolare il lavoro di trascrizione prevedendo meccanismi di facilitazione e di
collegamento tra file multimediale e file testuale
N006 - Salvataggio trascrizione
L’utente una volta completata la trascrizione testuale del file multimediale o di una parte di esso
procede al salvataggio della trascrizione effettuata nel database

7. N007 - Recupero registrazione con trascrizione
Si vuole riascoltare una determinata deposizione visualizzando la relativa trascrizione testuale
precedentemente editata e salvata
N008 – Modifiche alla trascrizione
Si vuole avere la possibilità di modificare, aggiungendo o cancellando interventi o semplice testo ad
una trascrizione precedentemente salvata
N009 – Salvataggio trascrizione modificata
Si vuole permettere una buona gestione nel salvataggio delle modifiche apportate a una trascrizione

8. Progettazione
Dopo la sessione d’analisi nella quale si sono raccolti i requisiti richiesti si passa alla fase di
progettazione.
Anche la progettazione si può dividere in diverse fasi.
La prima fase consiste nella trasformazione dei requisiti, che sono espressi in un linguaggio non
tecnico, nel documento delle specifiche.
Una specifica, o una caratteristica del sistema e’ “un servizio che il sistema fornisce per soddisfare
uno o più bisogni” 2 .
La seconda fase si occupa della suddivisione del sistema in moduli coesi tramite l’utilizzo degli use
case e della definizione degli attori.
La terza fase si occupa della progettazione della struttura del database.
La quarta fase pone le basi della realizzazione dell’applicazione dallo studio delle tecnologie da
utilizzare per realizzarla.
Si ottiene così il modello logico del sistema, che descrive e modella cosa dovrà fare il sistema stesso
e con che principi, non come dovrà farlo. E’ una sua rappresentazione minima, sufficiente a
catturarne i requisiti e la logica essenziale: considera le specifiche funzionali contenendo il
comportamento dettagliato dei casi d’uso.
2
Tratto dal webcast Microsoft Aspire Architect – Architettura del software: dai requisiti ai casi d’uso.

9. Raccolta delle specifiche
Una volta stilato il documento dei requisiti si passa ad una riformulazione degli stessi in modo
formalizzato per l’utilizzo nel processo interno, in modo da definire precisamente che cosa deve
fare il software da produrre .
Di seguito sono elencate le specifiche funzionali.
Citeremo anche le specifiche relative all’esecuzione della registrazione e al suo salvataggio anche
se, come già accennato nei requisiti, non vengono modificate rispetto alla versione originale del
programma.
Custom Functional Requirements
Feautures
F001 - Realizzazione registrazione
F002 - Salvataggio registrazione
F003 - Recupero e riascolto registrazione
F004 - Trascrizione testuale della registrazione
F005 - Inserimento facilitato dei nomi sul verbale
F006 - Posizionamento facilitato nella registrazione
F007 - Salvataggio trascrizione
F008 - Recupero registrazione con trascrizione
F009 - Cancellare interventi sulla trascrizione
F010 - Aggiungere interventi sulla trascrizione
F011 - Salvataggio trascrizione modificata
Figura 2. Specifiche Funzionali.

10. Di seguito si rappresenta uno schema che traccia il collegamento tra requisiti e specifiche.
Custom Needs vs Feautures
Realizzare registrazione
Realizzare registrazione
Salvataggio registrazione
Salvataggio registrazione
Recupero e riascolto
Recupero e riascolto
registrazione
registrazione
Trascrizione testuale
Trascrizione testuale
registrazione
registrazione
Inserimento facilitato di
nomi sul verbale
Semplificazione nella
gestione della trascrizione
Posizionamento facilitato
sulla registrazione
Salvataggio trascrizione Salvataggio trascrizione
Recupero registrazione con Recupero registrazione con
trascrizione trascrizione
Modificare o cancellare
interventi nella trascrizione
Modifiche alla trascrizione
Aggiungere interventi nella
trascrizione
Salvataggio trascrizione Salvataggio trascrizione
modificata modificata
Figura 3. Tracciabilità delle specifiche.

11. F002 – Realizzare registrazione
L’utente vuole registrare un interrogatorio ottenendo un file audio o audio/video
F002 – Salvataggio registrazione
L’utente vuole salvare nel database la registrazione multimediale effettuata
F 003 - Recupero e riascolto registrazione
L’utente vuole riascoltare una registrazione precedentemente realizzata, sia essa audio o audio –
video, e la seleziona dall’elenco degli interrogatori nella pagina con l’indice - interrogatori
F 004 - Trascrizione testuale della registrazione
L’utente vuole precedere alla trascrizione del file multimediale sull’apposito file testuale
reimpostato, visualizzando file multimediale e file testuale nella stessa schermata applicativa
F 005 - Inserimento facilitato dei nomi sul verbale
Si vuole agevolare l’utente nell’inserimento sul verbale della trascrizione dei nomi dei protagonisti
dell’interrogatorio
F 006- Posizionamento facilitato sulla registrazione
Si vuole permettere all’utente di posizionare il cursore del file multimediale in modo automatico
nelle posizioni relative all’inizio degli interventi
F 007- Salvataggio trascrizione
L’utente può salvare la trascrizione editata che sarà associata al file multimediale
F 008- Recupero registrazione con trascrizione

12. L’utente può riascoltare un interrogatorio consultandone contemporaneamente la trascrizione grazie
ad un efficace ricaricamento sul file editabile degli interventi trascritti
F 009 – Modificare o cancellare interventi dalla trascrizione
Si vuole permettere all’utente di modificare o cancellare dalla trascrizione caricata interventi già
trascritti e salvati la volta precedente
F 010- Aggiungere interventi sulla trascrizione
Si vuole permettere all’utente di aggiungere interventi sulla trascrizione caricata permettendo così
di suddividere il lavoro di trascrizione in più volte
F 011- Salvataggio trascrizione modificata
Si vuole ottenere un efficace meccanismo di salvataggio della trascrizione ottimizzando il
salvataggio degli interventi

13. Attori
Una volta stilato il documento delle specifiche si può passare alla suddivisione in moduli del
sistema. Per prima cosa bisogna definire gli attori che interagiscono col software.
uc Actors
Actors
A001 - Soggetto
A002 - Server
A003 - Registrazione
A004 - Trascrizione
Figura 4. Attori.
A001 - Soggetto
Il Soggetto può essere l’interrogatore, l’interrogato o il generico utente
A002 - Server
Il Server contiene i file dei vari interrogatori

14. A003 - Registrazione
E’ la registrazione multimediale, il file o audio o audio – video che rappresenta l’interrogatorio
A004 - Trascrizione
E’ la trascrizione testuale della registrazione effettuata su apposita sezione editabile dell’interfaccia
dell’applicazione.

15. Casi d’uso
Successivamente si possono descrivere i casi d’uso.
Essi comprendono sia una parte grafica, sia una Use Case Specification formata da una Descrizione
dell’uso e da un Flusso d’esecuzione. In alcuni casi sono previste eventuali eccezioni consistenti
sostanzialmente in una gestione da parte del programma di piccoli possibili errori da parte
dell’utente nell’utilizzo dell’applicazione.
Inoltre possono essere descritti dei flussi d’esecuzione alternativi a quello base rappresentativi di
possibili piccole varianti d’utilizzo.
uc Use Case Model
Use Cases
UC001 - Riascolto interrogatorio con trascrizione vuota
UC002 - Compilare la trascrizione
UC003 - Consultare trascrizione e registrazione multimediale
UC004 - Salvataggio trascrizione
UC005 - Riascolto interrogatorio con trascrizione
UC006 - Modifiche alla trascrizione
Figura 5. Casi d’uso.
I flussi di esecuzione incominciano sempre da un attore. Il cuore di tutti i casi d’uso e’ la Use Case
Specification. Essa non deve contenere né come soddisfare i requisiti né sapere se i requisiti sono
stati soddisfatti.
La parte grafica dei casi d’uso e’ utilizzata per creare il diagramma dei casi d’uso che serve per
avere una visione d’insieme di quello che dovrà fare il sistema.

16. uc Use Case Model
Riascolto interrogatorio
A003 – Registrazione
con trascrizione vuota
A001 - Soggetto
Compilare la
A004 – Trascrizione
trascrizione
Consultare trascrizione
e registrazione multimediale
Salvataggio
trascrizione
Riascolto
interrogatorio con
trascrizione
A003 - Server
Modifiche alla
trascrizione
Consultare trascrizione
e registrazione multimediale
Salvataggio
trascrizione
Figura 6. Diagramma dei casi d’uso.

17. Di seguito sono riportati gli Use Case Specification di tutti i casi d’uso
UC001 – Riascolto Interrogatorio con trascrizione vuota
L’utente accede alla schermata iniziale dell’applicazione e ricerca un determinato interrogatorio
nell’elenco degli interrogatori visualizzato nella pagina
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 L’utente clicca sull’icona apposita di riascolto
5 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione. E’presente la registrazione
multimediale mentre la trascrizione verbale e’ vuota.
UC002 – Compilare la trascrizione
L’utente durante il riascolto di un interrogatorio procede alla compilazione della relativa
trascrizione
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione
5 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione. E’presente la registrazione
multimediale mentre la trascrizione verbale e’ vuota.
6 Si procede alla trascrizione testuale della registrazione multimediale tramite tastiera sul verbale
editabile posto a lato del filmato nella finestra dell’applicazione
7 Si sfruttano le funzionalità di inserimento automatico dei nomi

18. UC003 – Consultare la trascrizione ed il file multimediale
Nella gestione della trascrizione l’utente abbina scrittura del verbale e posizionamento automatico
sul file multimediale
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione
5 nell’interfaccia grafica a lato del file multimediale in esecuzione si visualizza la relativa
trascrizione
Sottocasi
A L’utente lavora su una trascrizione nuova, procede quindi come visto alla scrittura degli
interventi. Può, anche senza aver ancora salvato le modifiche apportate, posizionarsi sulle posizioni
del file multimediale ciccando sulle frecce – link editate automaticamente sul verbale alato del
nome dell’interlocutore
B L’utente procede al riascolto di un interrogatorio già precedentemente modificato e salvato. Al
caricamento del file verranno caricati anche le frecce – link con i relativi dati di posizionamento sul
file multimediale.
L’utente potrà quindi posizionarsi sia da interventi relativi al precedente salvataggio sia, come visto
nel caso precedente, da nuovi interventi da lui inseriti
UC004 – Salvataggio trascrizione
L’utente procede al salvataggio nel database del verbale di trascrizione
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione

19. 5 nell’interfaccia grafica a lato del file multimediale in esecuzione si visualizza la relativa
trascrizione
6 Dopo aver gestito la trascrizione, aggiungendo interventi e testo o togliendone, si procede al
salvataggio nel database del file modificato
UC005 – Riascolto interrogatorio con trascrizione
L’utente accede alla schermata iniziale dell’applicazione e ricerca un determinato interrogatorio
nell’elenco degli interrogatori visualizzato nella pagina
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 L’utente clicca sull’icona apposita di riascolto
5 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione. E’presente la registrazione
multimediale e la trascrizione verbale e’ già parzialmente o completamente compilata.
UC006 – Modifiche alla trascrizione
L’utente durante il riascolto di un interrogatorio con trascrizione procede alla modifica della relativa
trascrizione
Flow of Events
1 L’utente accede alla pagina principale dell’applicazione
2 L’utente consulta l’elenco degli interrogatori visualizzato
3 L’utente seleziona il file che gli interessa
4 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione
5 Il file selezionato viene riprodotto nell’interfaccia dell’applicazione. E’presente la registrazione
multimediale mentre la trascrizione verbale e’ vuota.
6 Se necessario si procede alla modifica della trascrizione testuale tramite cancellazione di paragrafi
già inseriti e salvati precedentemente sia tramite l’inserimento di nuovi
7 Si sfruttano le funzionalità di inserimento automatico dei nomi

20. Progettazione concettuale del database
Contestualmente all’analisi del software bisogna anche fare l’analisi del database.
Ci si è trovati nella situazione di lavorare su un database già progettato e operativo.
Si e’ quindi scelto di suddividere la progettazione del database in tre fasi
La prima consiste nella raccolta dei requisiti, mediante vari colloqui col committente.
In questa fase bisogna anche comprendere il dominio applicativo del database.
Da questa prima fase si vuole ottenere le informazioni necessarie per capire di cosa effettivamente
si ha bisogno dal punto di vista dei dati necessari alle funzionalità che si vogliono ottenere.
Dalla prima fase si passa alla seconda, dove bisogna tradurre le informazioni risultanti dalla fase
precedente in un schema concettuale
Sostanzialmente, dalla prima fase di colloquio si e’ giunti alla conclusione che c’era bisogno
lavorare con le seguenti entità :
Interrogatorio Paragrafo Segmento
Figura 7. Entità.
Si e’ dovuto progettare uno schema concettuale che legasse queste entità in modo da tener conto
del database già presente e della nuova struttura.
Lo schema tiene conto anche delle entità
Soggetto Procedimento
Figura 8. Entità.
Esse erano già presenti concettualmente nel database dell’applicazione, ma sono visualizzate
anch’esse nello schema per rappresentare meglio la logica di ciò che si voleva realizzare

21. Si rappresenta di seguito uno schema concettuale di come sarà strutturato il database
Schema concettuale
1 n
Soggetto Procedimento
crea
Procedimento
1
possiede
n
n 1
Paragrafo Interrogatorio
possiede
Paragrafo Interrogatorio
1
possiede
n
Segmento
n

22. Progettazione Applicazione
Il Modello di Design e’ un’astrazione del modello di implementazione e del relativo codice
sorgente.
Descrive e modella un’astrazione di come il sistema realizzerà i requisiti richiesti.
Nasce come raffinamento del modello di analisi ma dipende anche dai requisiti non funzionali.
Si e’ dovuto gestire la complessità del sistema e il mantenimento dei requisiti non funzionali
lavorando con la stessa filosofia, struttura e logica del codice presente nel programma.
L’applicazione e’ strutturata a livelli di gestione, con le varie funzionalità necessarie al corretto ed
efficiente funzionamento del programma sviluppate in blocchi software diversi e specifici.
Questo tipo di organizzazione permette di mantenere e soddisfare i requisiti non funzionali di cui
abbiamo parlato prima: la manutenibilità, l’estendibilità, la riusabilità del codice.
Questo tipo di sviluppo strutturale permette anche di organizzare in modo più efficiente la
distribuzione del lavoro per così aumentare le performance, la scalabilità e il fault tolerance.
I principali svantaggi sono la comunicazione tra i blocchi diversi, che in quanto sviluppati anche
separatamente possono, soprattutto in fase di sviluppo, impattare sulle performance
dell’applicazione inducendo in problemi funzionali in certi casi risolvibili meno semplicemente
rispetto ad uno sviluppo più compatto.
Il bilancio dei pregi – difetti di questo sviluppo e’ sicuramente in attivo in quanto l’applicazione
finale sarà sicuramente più facilmente gestibile, modificabile e ampliabile.
Lo stesso sviluppo poi viene come detto velocizzato in quanto, a fronte di un numero forse
maggiore di intoppi funzionali, i vari blocchi possono venir sviluppati da diversi soggetti.
La strutturazione dell’applicazione in oggetto si basa sulla comunicazione tra pagine diverse sia
per quanto riguarda il codice al loro interno sia per quanto riguarda le funzionalità da esse
sviluppate.
Possiamo suddividere le pagine in quattro blocchi separati, cooperanti poi ai fini della funzionalità
applicativa.
Segue un’analisi delle tecnologie utilizzate.

23. 1° Blocco : Bean
Sono blocchi di codice con estensione .java, quindi pure pagine scritte in linguaggio di
programmazione Java. In esse vengono creati gli oggetti, vengono cioè sviluppati modelli ad oggetti
, sottoforma di classi Java, dei protagonisti dell’applicazione.
Un bean è una classe scritta in un linguaggio ad oggetti che presenta un costruttore vuoto ed un
insieme di campi leggibili e scrivibili solo attraverso degli appositi metodi get e set ( detti metodi
accessori ) o delle proprietà.
I bean sono utilizzati per rappresentare in modo logico dei dati che sono memorizzati su disco fisso,
vengono quindi creati dei modelli ad oggetti sottoforma di classi Java.
2° Blocco : Pagine JSP
JavaServer Pages, di solito indicato con l'acronimo JSP ( letto anche talvolta come Java Scripting
Preprocessor ) è una tecnologia Java per lo sviluppo di applicazioni Web che forniscono contenuti
dinamici in formato HTML o XML. Si basa su un insieme di speciali tag con cui possono essere
invocate funzioni predefinite o codice Java. In aggiunta, permette di creare librerie di nuovi tag che
estendono l'insieme dei tag standard. Le librerie di tag JSP si possono considerare estensioni
indipendenti dalla piattaforma delle funzionalità di un Web server.
Nel contesto della piattaforma Java, la tecnologia JSP è correlata con quella dei servlet. All'atto
della prima invocazione, le pagine JSP vengono infatti tradotte automaticamente da un compilatore
JSP in servlet. Una pagina JSP può quindi essere vista come una rappresentazione ad alto livello di
un servlet. Per via di questa dipendenza concettuale, anche l'uso della tecnologia JSP richiede la
presenza, sul Web server, di un servlet container, oltre che di un server specifico JSP detto motore
JSP ( che include il compilatore JSP ); in genere, servlet container e motore JSP sono integrati in un
unico prodotto ( per esempio, Tomcat svolge entrambe le funzioni ).
JSP differisce da altre tecnologie per lo sviluppo di applicazioni Web non tanto per il tipo di
contenuti dinamici che si possono produrre, quanto per l'architettura interna del software che
costituisce l'applicazione Web ( e, di conseguenza, sui tempi di sviluppo, la portabilità, la
modificabilità, le prestazioni, e altri aspetti di qualità del software ).
Analizziamo brevemente la struttura di una pagina jsp:
Una pagina JSP è un documento di testo, scritto con una sintassi specifica, che rappresenta una
pagina Web di contenuto parzialmente o totalmente dinamico. Elaborando la pagina JSP, il motore

24. JSP produce dinamicamente la pagina HTML finale che verrà presentata all'utente. La pagina JSP
può contenere tre tipi di elementi, a cui corrispondono tre diversi modi di elaborazione: contenuti
statici, direttive e script.
I contenuti statici sono porzioni della pagina JSP che devono essere mantenute integralmente nella
pagina Web generata dinamicamente, senza alcuna elaborazione. Devono pertanto essere scritte nel
linguaggio di tag di cui il client può usufruire direttamente, per esempio HTML (se il client è un
browser).
Le direttive JSP si possono interpretare come comandi rivolti al motore JSP. Questi comandi
vengono eseguiti in una fase di preprocessing, prima che siano elaborate le porzioni della pagina
contenenti script. Le due direttive principali sono include e page.
La terza categoria di elementi presenti nella pagina JSP sono frammenti di codice sorgente ( Java ).
Questi frammenti di codice sono quindi eseguiti dalla Java Virtual Machine e producono in output
un testo, che va a contribuire al sorgente della pagina Web in via di generazione. L'invocazione di
codice Java è la chiave della generazione di pagine dinamiche in JSP; per esempio, le pagine JSP di
un sito di acquisti online potrebbe includere codice Java che verifica la disponibilità di un prodotto
e genera in output una pagina che riporta questa informazione.
3° Blocco : Servlet
Le servlet sono oggetti (in senso informatico) che operano all'interno di un server per applicazioni
(per esempio, Tomcat) e potenziano le sue funzionalità.
La parola servlet deriva da una precedente, applet, che si riferisce a piccoli programmi scritti in
linguaggio Java che si eseguono all'interno di un browser. Per contrapposizione, una servlet è un
programma che si esegue in un server web.
L'uso più frequente delle servlet è generare pagine web in forma dinamica a seconda dei parametri
della richiesta spedita dal browser.
Una servlet può avere molteplici funzionalità e può essere associato ad una o più risorse web,
è sostanzialmente un programma che deve rispettare determinate regole e che processa in un
determinato modo una richiesta HTTP. Nulla vieta che all'interno dello stesso server web possano
girare più servlet associate a URL diversi; ognuna di queste servlet farà cose diverse e estenderà le
funzionalità del server web.

25. 4° Blocco : Script Javascript
Sono gli script Javascript, blocchi di codice che aggiungono molte funzionalità fondamentali alle
nostre pagine di visualizzazione .
JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nei siti web.

26. Realizzazione
Nella sezione di Realizzazione si va a tradurre nello specifico caso in esame le tecnologie trattate
nella sezione Progettazione Applicazione.
Si passa alla realizzazione pratica del progetto tramite realizzazione del database e implementazione
del codice vero e proprio dei vari moduli.
Analizziamo per prima cosa le realizzazione della tabella del database necessaria al corretto
funzionamento.
Realizzazione Database
1 n
tbl_Interrogatori tbl_ RecPosition
id id_interrogatorio
id_procedimento id_procedimento
id_interrogato id_frame
id_interrogatore time
dataora id_segmento
creazione
posizione
tipo
luogo
Figura 9. Tabelle.
Queste sono le due tabelle con cui si e’ dovuto lavorare.
La tabella aggiunta alla struttura del database e’ la RecPosition.
Essa rappresenta tutto ciò di cui si ha bisogno per il recupero delle posizioni relative alla
registrazione multimediale. Si visualizza anche la tabella Interrogatori in quanto strettamente
correlata alla RecPosition. Infatti Interrogatori contiene tutti i dati relativi ad un interrogatorio
La gestione dei procedimenti avviene nella tabella Procedimenti, dove ci sono due campi:
descrizione e id.
Tra i campi della tabella Interrogatori c’e’ anche l’id identificatore del procedimento: un
determinato procedimento può essere associato e quindi ‘ possedere diversi interrogatori .
Come detto, e’ stata progettata quindi una nuova tabella, la RecPosition dove bisognava prevedere
di salvare tutti i dati necessari alla funzionalità di posizionamento automatico su file multimediale.

27. La tabella si è quindi dotata dei seguenti campi:
idinterrogatorio,idprocedimento,idframe,time,idsegmento.
Questi campi rappresentano tutto ciò che era necessario salvare per identificare dove posizionare il
cursore del file multimediale per riprendere la riproduzione dall’istante relativo all’inizio di uno
specifico paragrafo della deposizione trascritta.
Andremo ora ad analizzare i diversi blocchi esponendo alcune parti di codice dell’applicazione.
1° Blocco : Bean
Trattiamo questo blocco per chiarezza espositiva anche se esso non e’ stato modificato dalla sua
versione originale. Analizzarlo però rende più chiaro lo sviluppo logico del codice dell’applicazione
Il blocco Bean è il blocco software che rappresenta l’implementazione del modello analitico.
I principi di sviluppo di questo blocco sono le basi del Domain Model Design:
- Il Domain Model e’ un object model in cui ogni singola classe ha uno specifico significato, e può
incorporare sia dati che comportamento. Un’applicazione che fa uso di Domain Model usa un
proprio modello Object Oriented che rappresenti al meglio le entità.
- Le classi del Domain Model possono avere associazioni fino a formare un vero e proprio grafo.
- Le classi del Domain Model possono modellare sia le Entità che le regole di business.
- La logica di business del Domain Model interagisce a sua volta col istanze di classi.
Il Domain Model deve essere indipendente da tutte le altre parti del sistema. Deve essere facilmente
isolabile e modificabile.
Il modello di entità della nostra applicazione prevede diverse figure . L’elenco delle Bean previste
dal programma e’ il seguente:
Attivita’,AudioInfo,ConfOscillogramma,DataBuffer ecc….
Noi nella nostra analisi ne consideriamo alcune, le più vicine al lavoro svolto e legate al capitolo
Actors esposto nella sezione Analisi, dandone una spiegazione un po’ più approfondita per
rappresentare la logica di funzionamento del programma.
Per esempio la classe Soggetto

28. public class Soggetto {
public final static int TIPO_INTERROGATO = 0;
public final static int TIPO_INTERROGATORE = 1;
private int id;
private String nome = quot;quot;;
private String cognome = quot;quot;;
private String luogoNascita = quot;quot;;
private String luogoResidenza = quot;quot;;
private String viaResidenza = quot;quot;;
private Date dataNascita = null;
public Soggetto() {
}
public void setId(int id){
this.id = id;
}
public void setNome(String nome) {
this.nome = nome;
}
public void setCognome(String cognome) {
this.cognome = cognome;
}
public void setLuogoNascita(String luogoNascita) {
this.luogoNascita = luogoNascita;
}
-
-
-
public String getNome() {
return nome;
}
public String getCognome() {

29. return cognome;
}
public String getLuogoNascita() {
return luogoNascita;
}
public int getId(){
return id;
}
-
-
-
}
Essa rappresenta l’entità Soggetto, con i suoi attributi e i metodi ad essa applicabili per ottenerne e
settarne le caratteristiche.
Come si può intuire dalle due costanti TIPO_INTERROGATO e TIPO_INTERROGATORE l’entità
Soggetto rappresenta la classe base da cui poi derivano altre due classi, appunto Interrogato e
Interrogatore.
La classe Interrogato in particolare prevede una gestione di un banco dati contenente gli
identificatori degli interrogatori associati a quel soggetto.
Rappresentiamo di seguito il codice iniziale relativo alla classe Interrogato dove si vede l’oggetto
HashTable contenente la lista di interrogatori.
Gia nel costruttore dell’entità interrogato viene creata una tabella vuota, che verra’ poi riempita
tramite il metodo setInterrogatori .
public class Interrogato extends Soggetto{
private Hashtable interrogatori;
private String documentoIdentita;
public Interrogato() {
interrogatori = new Hashtable();
}

30. public void setDocumentoIdentita(String documentoIdentita) {
this.documentoIdentita = documentoIdentita;
}
public void setInterrogatori(Interrogatorio[] interrogatori) {
for (int index = 0; index < interrogatori.length; index++) {
Interrogatorio interrogatorio = interrogatori[index] ;
this.interrogatori.put(new
Integer(interrogatorio.getId()),interrogatorio);
}
}
La HasTable interrogatori verra’ riempita di oggetti Interrogatorio, un’altra Bean del nostro modello
dati.
Senza andare ad analizzare più approfonditamnete la complessità del nostro Domain Model si puo’
già capire la logica di programmazione e di funzionamento.
Oltre alle Bean viste ce ne sono delle altre, tra cui AudioInfo eVideoInfo, fondamentali per la
gestione dellle funzionalita’ multimediali di registrazione e riproduzione dell’applicazione.
2° Blocco : Pagine JSP
E’ il gruppo di file con estensione jsp che rappresenta, in termini un pò semplicistici, le pagine di
visualizzazione del programma.
Come abbiamo visto nella sezione di Progettazione la logica di questo tipo di file consiste infatti in
una simbiosi tra il linguaggio di formattazione Html e il linguaggio di programmazione ad oggetti
Java.
Dalle jsp si accede ad altre funzionalità tramite il richiamo delle servlet.
In particolare l’ accesso al db con relative scrittura e lettura dati viene gestito tramite la servlet
CaricaDati di cui si parlerà più avanti nello studio della sezione Servlet.
Si e’ lavorato principalmente sul file editor,jsp.
E’questa infatti la pagina che, come vedremo, si occupa del caricamento della sezione relativa alla
trascrizione del file multimediale.
Diamo una veloce spiegazione della logica di funzionamento che permette il caricamento
dell’editor.

31. Quando l’utente vuole riascoltare un interrogatorio lo seleziona dalla lista degli interrogatori
visualizzata nella pagina iniziale dell’applicazione.
Figura 10. Indice dei procedimenti in archivio con i relativi interrogatori.
Ciccando sull’icona di riascolto posta per ciascun interrogatorio a fine riga, si carica la pagina
RiascoltoAudioVideo.jsp. In questa pagina, nel tag body c’è la gestione dell’evento caricamento
onload che richiama due funzioni:
<body onLoad=quot;init();InitNavbar()quot;style=quot;text-align:center;quot;>
La function init() è implementata nella stessa RiascoltoAudioVideo.jsp.
Init() richiama a sua volta un’altra function, loadSourceEditor.

32. loadSourceEditor(quot;trascrizionequot;,editorMode);
Questa function è implementata nel file funzioni.js, un file javascript inserito nel blocco javascript e
richiamato da RiascoltoAudioVideo.jsp tramite apposito codice
<script type=quot;text/JavaScriptquot; src=quot;/asset/js2/player/funzioni.jsquot;></script>
E’ la function loadSourceEditor che si occuperà di attivare il form frmLoadEditor presente in
RiascoltoAudioVideo passandogli i valori corretti per provvedere al caricamento
<form name=quot;frmLoadEditorquot; action=quot;/caricaDatiquot; target=quot;editorquot;>
<input type=quot;hiddenquot; name=quot;tipoquot; value=quot;<%=CaricaDati.CARICA_EDITOR%>quot; />
<input type=quot;hiddenquot; name=quot;idProcedimentoquot; value=quot;quot;/>
<input type=quot;hiddenquot; name=quot;idInterrogatoquot; value=quot;quot;/>
<input type=quot;hiddenquot; name=quot;idInterrogatorioquot; value=quot;quot;/>
<input type=quot;hiddenquot; name=quot;forwardquot; value=quot;/operatore/editor.jspquot;/>
<input type=quot;hiddenquot; name=quot;documentoquot; value=quot;quot;/>
</form>
Il form come si vede dal suo codice richiama la servlet CaricaDati che analizzeremo in seguito ma
che come abbiamo già accennato e la servlet fondamentale di gestione tra pagina e server dove sono
salvati i dati degli interrogatori.
I campi del form vengono riempiti con i valori corretti che derivano dall’interrogatorio selezionato
dalla pagina principale, permettendo così il caricamento dell’editor corrispondente, si può
comunque già vedere l’attributo forward con valore editor.jsp che serve per gestire il caricamento di
quella pagina.

33. Visualizziamo di seguito la schermata di riascolto audio/video di un file con trascrizione ancora
vuota
Figura 11. Pagina di riascolto di un interrogatorio con trascrizione ancora vuota.
3° Blocco : Servlet
E il gruppo di file .java che implementa le funzionalità esecutive del programma.
Per la realizzazione della funzionalià aggiuntiva si e’ lavorato con la sevlet CaricaDati.
Dal nome si può intuire la sua principale funzionalità. Essa opera tramite le sue funzioni al
caricamento dei dati dal database per poi inviarli alle pagine preposte alla loro visualizzazione.

34. La richiesta di caricamento di determinati dati può avvenire in diverse modalità di funzionamento e
in diverse pagine di visualizzazione. I vari casi verranno gestiti dalla servlet CaricaDati che
all’interno del suo codice implementa i diversi casi d’uso.
public class CaricaDati extends HttpServlet {
public static final int NUOVO_INTERROGATORIO = 1;
public static final int DETTAGLIO_INTERROGATO = 2;
public static final int DETTAGLIO_PROCEDIMENTO = 3;
public static final int RIPRODUCI_INTERROGATORIO = 4;
--------------------
--------------------
--------------------
public static final int SALVA_DOCUMENTO = 14;
public static final int SALVA_CONFIGURAZIONE_PLAYER = 15;
public static final int OPERAZIONI_INTERROGATORIO = 16;
public static final int CANCELLA_INTERROGATORIO = 17;
public static final int GESTIONE_INTERROGANTI = 18;
public static final int NUOVO_INTERROGATORE = 19;
Quella appena visualizzata e’ una porzione della parte iniziale del codice della classe CaricaDati.
Dalla sua struttura dati si può capire la logica di funzionamento a cui prima si accennava.
Le pagine jsp chiameranno la servlet CaricaDati passandole tramite dei form i dati da utilizzare .
Attraverso la funzione service si andrà a recuperare il dato tipo, che poi tramite una tipica struttura
di programmazione del linguaggio java e della programmazione ad oggetti , il case, lancerà funzioni
apposite per i singoli casi
Si e’ lavorato sul case
case CARICA_EDITOR:
doLoadEditor(request, response);
break;
Esso come si vede richiama la funzione doLoadEditor.
Questa funzione svolge il fondamentale ruolo di recupero dell’id dei paragrafi, dei segmenti e dei
relativi istanti di inserimento dalla tabella RecPosition analizzata precedentemente.
Questa operazione di recupero darà i seguenti risultati:

35. non verrà trovato nessun valore se non sono ancora stati inseriti paragrafi ( rappresentativi degli
interventi trascritti) nella trascrizione o se sono stati inseriti ma non salvati, verranno trovati i valori
cercati se precedentemente sono stati inseriti e correttamente salvati uno o più interventi.
Questo recupero dal database viene fatto tramite connessione allo stesso e tramite la seguente string
sql
String sql = quot;select * from recuperointerrog where
dprocedimento=quot;+idProcedimento+quot; and idinterrogatorio=quot;+idInterrogatorio;
Verranno passati l’id del procedimento e dell’interrogatorio per permettere il filtraggio dei dati .
I dati recuperati andranno composti in tre stringhe che andranno settate in tre attributi dell’oggetto
request
request.setAttribute(quot;idFramesquot;,recproce);
request.setAttribute(quot;istantequot;,istante);
request.setAttribute(quot;segmentoquot;,segmento);
Questi tre attributi potranno essere poi recuperati nella editor.jsp, come analizzeremo dopo.
Si è poi lavorato sul case
case SALVA_DOCUMENTO:
doSalvaDocumentoEditor(request, response);
break;
Questo e’ il caso che gestisce il salvataggio dell’editor e quindi della trascrizione.
Esso come si vede richiama la funzione doSalvaDocumentoEditor.
La funzione provvederà per prima cosa a recuperare il semplice testo trascritto tramite la gestione
dell’oggetto request e in particolare del suo parametro testo dove viene settato tutto il puro testo
trascritto e salvato fino a quel momento
String testo = (String) request.getParameter(quot;testoquot;);
Si procede al recupero degli identificatori dei paragrafi inseriti sempre attraverso l’oggetto request
per il passaggio dei parametri
int idInterrogatorio = Integer.parseInt((String)
request.getParameter(quot;idInterrogatorioquot;));
String ilprocedimento=(String)request.getParameter(quot;idProcedquot;);

36. Questi due parametri andranno salvati nella tabella RecPosition come identififcatori
dell’interrogatorio.
Al salvataggio dell'editor salvo anche gli id dei paragrafi inseriti con relativi segmento e istante
Prima di salvare i paragrafi editati, si procede prima di tutto al cancellamento di tutti i paragrafi
salvati precedentemente realativi a quell’interrogatorio.
Questo primo passo e’ fondamentale per permettere di cancellare o modificare testo editato in fasi
precedenti del lavoro che si scopre per qualunque motivo inesatto.
I nuovo paragrafi editati andranno poi salvati nella tabella con chiave la coppia idProcedimento e
idInterrogatorio
Questa gestione di delete e write sul db viene gestita dalle due seguenti stringhe sql
sql = quot;delete from recuperointerrog where idinterrogatorio = quot; +
numinterrogatorio + quot; and idprocedimento = quot; + ilprocedimento;
sql = quot;insert into recuperointerrog
(idinterrogatorio,idprocedimento,idframe,time,idsegmento) values (quot; +
numinterrogatorio + quot;,quot; + ilprocedimento + quot;,quot; + frames[i] + quot;,quot; + tempi[i] +quot;,quot;
+ segmenti[i] + quot;)quot;;
4° Blocco : Javascript
Un ruolo fondamentale nella gestione dell’editor e delle funzionalità lo ha il blocco di script
Javascript
Si e’ lavorato principalmente con il file editor.js.
In esso si implementa la function mytextLoad, la funzione che gestisce le funzionalità della sezione
editabile della pagina editor.jsp, la parte appunto dove si andrà ad editare la trascrizione
dell’interrogatorio inserendo i paragrafi relativi agli interventi.
Si e’ accennato al collegamento, alla collaborazione tra editor.jsp e editor.js,in particolare con la sua
funzione mytextLoad: essa infatti viene richiamata nel tag body di editor.jsp alla gestione
dell’evento di caricamento della pagina
<body onload=quot;mytextLoad();quot; style=quot;background-image:none; background-
color:#999999; margin:0ptquot;>
Al caricamento della pagina jsp si lancia quindi la funzione mytextLoad..
La prima operazione svolta dalla function e’ quella di rendere editabile la parte della pagina dove
verrà editata la trascrizione.

37. mytext.document.designMode=quot;onquot;;
mytext e’ l’id di un iframe posizionato su una sezione di editor.jsp.
Procedo poi ad una gestione di recupero dei paragrafi inseriti tramite una gestione incrociata di
oggetti array tra pagina jsp ( editor.jsp ) , servlet ( CaricaDati ) e javascript ( editor.js ).
Dall’id dei paragrafi recuperati dall’ array e dal testo globale salvato e recuperato vado a ritrovarmi
le celle e i paragrafi per poterci applicare poi le azioni che vogliamo realizzare.
var cellarecuperata=mytext.document.getElementById(framesarray[i]+'id');
var parrecuperato=mytext.document.getElementById(framesarray[i]);
Le azioni applicate poi agli eventuali oggetti recuperati sono le seguenti
cellarecuperata.onclick=richiamaposizione1;
parrecuperato.ondblclick=selectpar;
Si va a gestire gli eventi click e doppio click del mouse tramite questi costrutti javascript,
permettendo il lancio di funzioni implementate
Queste due funzioni gestiscono rispettivamente le due funzionalità di richiamo della posizione sul
file multimediale e di selezione tramite colorazione di un determinato paragrafo.
Prima di procedere ad una breve analisi di queste due funzionalità studiamo la gestione di
inserimneto facilitato dei nomi sulla trascrizione con relativo posizionamneto anche del paragrafo
che servirà da link per la posizione sul fiòle multimediale.
Tutto questo viene gestito nella function premuto implementata sempre nel editor.js
In questa funzione viene gestito l’evento di pressione dei tast ctrl e 1 sulla parte editabile.questo
evento lancia alcune azioni
if(mytext.event.keyCode == 49 && mytext.event.ctrlKey){
var par=addParagraph();
par.style.fontSize='12pt';
par.innerHTML=quot;quot;+A1.value+quot; : quot;;
moveCursore();
return false;
}
Si lancia un ulteriore funzione, la addParagraph che analizzeremo tra poco.
Essa in parole povere aggiunge un paragrafo, in cui viene scritto automaticamente il nome scritto
nella casella di testo A1 posizionata sopra la parte editabile, seguito da :.

38. In questo modo viene garantità la possibilità di inserimneto automatizzato dei nomi. Sono presenti
tre caselle di testo, basterà editare in esse i nomi dei protagonisti all’inizio della sessione lavorativa
e poi ogni volta che si vorrà aggiungere un’intervento di uno dei tre basterà premere i tasti
Ctrl + 1, ctrl +2, ctrl +3, per gestire rispettivamnete le caselle uno, due e tre.
Visualizziamo due immagini che rappresentano ciò che succede alla pressione di questi tasti
Figura 12. Inserimento del paragrafo con il primo nome tramite short – cut da tastiera.

39. Figura 13. Inserimento del paragrafo con il secondo nome tramite short – cut da tastiera.
Vediamo un po’ più nel dettaglio come opera la function addParagraph.
Per prima cosa crea un nuovo paragrafo
var paragrafo=new Paragrafo();
essendo Paragrafo() la seguente function
function Paragrafo(){
this.id=quot;quot;;
this.time=quot;quot;;
this.seg=quot;quot;;
this.verifica=quot;0quot;;
}

40. Subito dopo si crea un oggetto di tipo Date.
JavaScript offre una serie di utility per il controllo e la gestione della data, grazie all'utilizzo
dell'oggetto Date().
L'oggetto Date() viene dichiarato in una variabile di tipo new NOME_OGGETTO(), a questa
variabile vengono associati dei metodi che, memorizzati a loro volta in una serie di variabili,
vengono poi utilizzate.
L'ora che verrà visualizzata sarà l'ora del sistema operativo del browser dell'utente, essendo
Javascript un linguaggio di scripting client – side.
All’oggetto Date creato si applica il metodo getTime() che restituisce l’ora in millesimi di
secondo.ed il valore così trovato viene settato al campo id dell’oggetto paragrafo
paragrafo.id =quot;quot;+tDate.getTime();
Questo settaggio viene fatto per garantire che tutti i paragrafi avranno id diversi.
I settaggi del paragrafo si completano
paragrafo.id =quot;quot;+tDate.getTime();
paragrafo.seg=quot;quot;+parent.getIdSegmentoAttuale();
paragrafo.time = quot;quot;+parent.POSIZIONE_CORRENTE;
Si recupera tarmite function javascript i valori del segmento attuale di riproduzione e della relativa
posizione corrente, cioè dei secondi trascorsi nell’attuale segmento.
La riproduzione si divide in segmenti in quanto mettendo in pausa la riproduzione, al riavvio si
parte con un nuovo segmento.
Dopo i settaggi dei suoi campi il paragrafo andra a riempire un array di paragrafi che permetterà di
gestirli tutti
paragrafi.push(paragrafo);
Il paragrafo appena creato viene recuperato per lavorarci
var par=mytext.document.getElementById(quot;quot;+tDate.getTime());
Dopo le operazioni grafiche e di posizionamento corretto del paragrafo nell’editor, il paragrafo
viene suddiviso in celle tramite costrutti javascript che permetteranno di applicare alla prima cella a
lato del nome inserito, dove viene visualizzata l’icona di collegamento con il file multimediale,

41. la gestione dell’evento onclick richiamando la function richiamaposizione, e all’intero paragrafo la
gestione dell’evento ondblclick chiamando la function selectpar
td1.onclick=richiamaposizione;
par.ondblclick=selectpar;
La addParagraph ritornerà tutto il paragrafo costruito e settato nei suoi campi con i dati necessari al
recupero delle posizioni multimediali e alla gestione della sua selezione.
Facendo quindi un breve riepilogo, alla pressione dei tasti nell’area editabile si lancia la function
addParagraph che ritornerà un paragrafo strutturato come visto che andrà ad incrementare l’array
dei paragrafi.
La funzionalità fondamentale di posizionamento sul file multimediale e’ poi permessa dalla
function richiamaposizione, che come abbiamo visto viene richiamata dall’evento onclick sulla
prima cella del paragrafo creato.
Di questa funzione riportiamo il codice integralmente
function richiamaposizione(){
var idCella = this.id;
var idParagrafo = idCella.substring(0,13);
var paragrafo = null;
var paragrafoFound = false;
for(var i=0;i<paragrafi.length;i++){
paragrafo = paragrafi[i];
if(paragrafo.id == idParagrafo){
paragrafoFound = true;
break;
}
}
if(paragrafoFound){
var posizioneRichiesta = paragrafo.time;
var segmentoRichiesto = paragrafo.seg;
if(parent.vaiA != null){
parent.vaiA(posizioneRichiesta,segmentoRichiesto);
}
}
}
Facciamone una rapida analisi:
si recupera L’id della cella, e del paragrafo tramite una gestione di stringhe essendo stati fissati
idParagrafo pari ai primi 1 caratteri dell’idCella.
Si va a ciclare su tutto l’aray dei paragrafi, se si trova il paragrafo si fissano le variabili segmento e
posizione richiesti dai valori del paragrafo trovato, e si chiama poi la function memoVaiA con i
parametri trovati
La function vaiA e’ implementata di seguito

42. function vaiA(posizione,idSegmento){
if(event != null){
event.cancelBubble=true;
}
if(idSegmento != interrogatorio.getIdSegmentoRiproduzione()){
seekOnloadRequested = true;
seekOnloadPositionRequested = posizione;
seekSegment(idSegmento);
return;
}
seekPlay(posizione);
aggiornaInterfaccia(posizione,quot;MEMOquot;);
}
La funzione provvede a posizionare l’interfaccia e la riproduzione del file multimediale nella
posizione richiesta
I paragrafi inseriti durante il lavoro hanno già attiva questa funzionalità prima ancora di procedere
al salvataggio della trascrizione, ma questa operazione di scrittura nel database risulta importante
per recuperare la lista di paragrafi, salvarli nel database e poi recuperarli come visto al momento del
caricamento della pagina editor.jsp come visto nella sezione Jsp.
Il salvataggio della trascrizione avviene tramite la pressione del tasto di salvataggio visualizzato
nell’interfaccia di lavoro.
L’operazione di salvataggio procede caricando la function salva
function salva(){
var testo = quot;quot;;
if (mytext.document.body.innerText.length>0) {
testo=mytext.document.body.innerHTML;
}
eseguiSalva(testo);
//Setto la variabile lunghezza al valore della lunghezza dell'array paragrafi
per permettere il salvataggio di
//nuove celle inserite dal valore dell'ultima cella salvata.All'inizio,quindi
a un nuovo cariamento della pagina
// lunghezza e' settata a 0

43. testoOriginale=testo;
mytext.focus();
}
La funzione come si vede recupera tutto il contenuto del documento e lo passa alla funzione
eseguiSalva .
function eseguiSalva(testo){
formData=document.frmData;
var i;
var ver;
var idParagrafi = quot;quot;;
var timeParagrafi = quot;quot;;
var segParagrafi = quot;quot;;
var cellarecuperata1;
//Carico le variabili prelevando i valori dall'array paragrafi partendo dal
valore dell'ultima cella salvata durante questa sessione di lavoro
//Ciclo su framesarray che e' stato caricato al caricamento della pagina,la
prima volta sara' nullo
if(recframesarray.length!=0){
for(i=0;i<recframesarray.length;i++){
cellarecuperata1=mytext.document.getElementById(recframesarray[i]+'id');
if(cellarecuperata1==null){
recframesarray.splice(i,1);
recistarray.splice(i,1);
recsegmarray.splice(i,1);
i--;
}
}
}
//Ciclo su array paragrafi se al salvataggio trovo effettivamente sul foglio
i paragrafi
//Questo mi permette di cancellare manualmente su foglio gli interventi e poi
salvare quello che effettivamente c'e'
for (i=0; i<paragrafi.length; i++){
cellarecuperata1=mytext.document.getElementById(paragrafi[i].id+'id');
if(cellarecuperata1==null){
paragrafi.splice(i,1);
//Diminuisco di 1 l'indice i perche' con splice il prossimo elemento da
controllare e' diventato quello appena controllato
i--;
}
}
//Altro ciclo per andare a creare le stringhe da mandare a CaricaDati con i
valori presenti nell'array paragrafi
if(recframesarray.length!=0){
for (i=0; i<recframesarray.length; i++){
idParagrafi +=(recframesarray[i]) +quot;,quot;;

44. timeParagrafi +=(recistarray[i]) +quot;,quot;;
segParagrafi +=(recsegmarray[i]) +quot;,quot;;
}
}
for (i=0;i<paragrafi.length;i++){
idParagrafi +=(paragrafi[i].id) +quot;,quot;;
timeParagrafi +=(paragrafi[i].time) +quot;,quot;;
segParagrafi +=(paragrafi[i].seg) +quot;,quot;;
}
formData.idInterrogatorio.value= idInterrogatorio;
formData.idParagrafo.value= idParagrafi;
formData.time.value= timeParagrafi;
formData.segmento.value= segParagrafi;
formData.testo.value=testo;
formData.tipoDocumento.value= tipoDocumento;
isToSave=false;
formData.submit();
//Vado a recuperare le celle dopo il salvataggio e aggiungo l'evento onclick
for (i=0; i<paragrafi.length; i++){
var cellarecuperata=mytext.document.getElementById(paragrafi[i].id+'id');
var parrecuperato=mytext.document.getElementById(paragrafi[i].id);
if(cellarecuperata!=null){
parrecuperato.ondbclick=selectpar;
cellarecuperata.onclick=richiamaposizione;
}}
}
Con questa funzione, tramite una gestione di array composti da paragrafi caricati e paragrafi inseriti
nella presente sessione di lavoro si recuperano i paragrafi effettivamente presenti sulla trascrizione
al momento del salvataggio, permettendo la cancellazione di paragrafi inseriti o caricati
precedentemente.

45. Conclusioni
Gli obiettivi proposti per la tesi sono stati raggiunti.
L’applicazione si occupa della gestione facilitata della trascrizione di un interrogatorio
rappresentato da un documento multimediale.
L’interfaccia dell’applicazione e suddivisa in due parti, la parte che visualizza il file multimediale e
la parte che visualizza il file editabile dove verrà editata la trascrizione.
Si prevede una funzionalità di inserimento facilitato dei nomi dei protagonisti, interrogatore o
interrogato, dell’interrogatorio e un contemporaneo inserimento a lato e degli stessi nomi di
un’icona di collegamento tra file editabile e relativo istante del file multimediale permettendo di
posizionare la riproduzione al momento corrispondente all’istante di inserimento del nome sulla
trascrizione, istante che coincide con l’inizio di un intervento dell’interrogatore o dell’interrogato.
Il lavoro svolto si e’ diviso in tre parti: analisi, progettazione e realizzazione
La parte di analisi ha portato alla formulazione di nove requisiti.
La parte di progettazione ha portato alla formulazione di undici specifiche funzionali e ha realizzato
che sostanzialmente le nuove funzionalità interessano sei casi d’uso.
Si e’ lavorato su un database già formato a cui si e’ aggiunta una tabella.
Per quanto riguarda il codice si e’ lavorato su cinque progetti, per un totale di circa un migliaio di
righe di codice e duecento righe di commenti.
Si sono implementate quindici funzioni suddivise nei due diversi linguaggi utilizzati.
Si e’ lavorato su quattro interfacce provvedendo alla modifica di una di queste.
Questi sono gli obiettivi tattici che sono stati posti a monte del lavoro:
1. Analisi del problema a livello generale per comprendere bene il dominio applicativo del
software.
2. Colloqui col committente per raccogliere i requisiti.
3. Studio dei requisiti e formulazione delle specifiche funzionali.
4. Studio dell’ IDE di sviluppo JBuilder.
5. Studio del linguaggio di programmazione Java.
6. Studio della tecnologia Jsp ( JavaServer Pages).
7. Studio degli oggetti Servlet
8. Studio del DOM, modello a oggetti del documento.

46. 9. Studio delle tecnologie DHTML.
10. Studio del linguaggio di scripting Javascipt.
11. Studio e analisi del software già precedentemente sviluppato.
12. Progettazione e implementazione dei nuovi blocchi da integrare all’applicazione.
13. Test di verifica di funzionamento dell’applicazione con i nuovi blocchi software integrati.
Sono stati raggiunti tutti gli obiettivi tattici anche se, soprattutto nello studio delle tecnologie
utilizzate, solo in relazione allo specifico lavoro sviluppato, approfondendo quindi solo una piccola
parte delle possibilità di sviluppo che queste tecnologie offrono.
Appendice
Il CD allegato alla tesi contiene questo documento in formato MS word, il codice sviluppato, le
slide della presentazione.