Università Degli Studi di Ferrara. Facoltà di Ingegneria. Corso di Laurea in Ingegneria Informatica e Dell Automazione
|
|
- Leone Costa
- 8 anni fa
- Visualizzazioni
Transcript
1 Università Degli Studi di Ferrara Facoltà di Ingegneria Corso di Laurea in Ingegneria Informatica e Dell Automazione SISTEMI DI AUTOVERIFICA SU DIGITALE TERRESTRE Relatore: GIANLUCA MAZZINI Tesi di Laurea di: CHIARA MARZOLA A. A. 2008/2009 1
2 2
3 ringraziamenti 3
4 Indice generale Capitolo Introduzione: il Digitale Terrestre Origine ed evoluzione Dalla trasmissione alla ricezione Vantaggi Servizi ed applicazioni disponibili LepidaTV...13 Capitolo Come si producono i contenuti della TV digitale Introduzione Il Transport Stream Il processo di costruzione del flusso di dati, fino al Multiplexing Service Information DSM-CC Rappresentazione di formati video, audio e dati Multiplexing nello specifico Ricezione del segnale e visualizzazione...22 Capitolo Lo standard MHP Lo standard MHP e la sua evoluzione Architettura e funzionamento dello standard MHP Lo stack software MHP Xlet: applicazioni per il DTT...28 Capitolo Tecnologia Javascript, CSS e HTML per la realizzazione di un servizio Web Perché realizzare una versione Web di un servizio DTT? Linguaggi utilizzati Javascript (JS) Cascading Style Sheet o CSS Differenziazione in base al browser...37 Capitolo Realizzazione del servizio Sistema di autoverifica Scelta della grafica Il file contenente le notizie L'applicazione Web HTML CSS Javascript...47 Conclusioni e sviluppi futuri...52 Appendice 1: Listati completi...54 Appendice 2: Schermate dei vari browser a confronto...69 Bibliografia e sitografia
5 5
6 Capitolo 1. Introduzione: il Digitale Terrestre. 1.1 Origine ed evoluzione. Nello sviluppo tecnologico dei sistemi televisivi, la trasmissione digitale costituisce una tappa molto importante: infatti essa rappresenta un passaggio fondamentale verso la convergenza di informatica e telecomunicazioni, consentendo di trasformare la televisione in una piattaforma per lo sviluppo di servizi interattivi, che si aggiungono così alla funzione tradizionale di diffusione dei segnali. All'origine delle attività europee in questo campo c'è il progetto Digital Video Broadcasting, che rappresenta un insieme di standard aperti ed accettati a livello internazionale, concepiti per lo sviluppo e la diffusione della televisione digitale. Attualmente essi sono mantenuti dal DVB Project, un consorzio industriale con più di 270 membri, e vengono pubblicati da un Comitato Tecnico Congiunto (Joint Technical Committee, JTC) dell'istituto Europeo per gli Standard di Telecomunicazioni (European Telecommunications Standards Institute, ETSI), del Comitato Europeo per la Standardizzazione Elettrotecnica (European Committee for Electrotechnical Standardization, CENELEC) e dell'unione Europea per la Radiodiffusione (European Broadcasting Union, EBU). Il progetto ha raggiunto l'obiettivo di stabilire un unico standard comune e condiviso su scala europea per le trasmissioni digitali televisive via satellite (DVB-S), via cavo (DVB-C), via terra () ed uno standard pensato per la modalità di radiodiffusione per la trasmissione di contenuti audio e video a dispositivi handled come smartphone o alcuni tipi di palmari (DVB-H). Questi standard sono stati ora adottati anche dal Giappone e da altri paesi non europei. Quindi, in generale si può dire che i principali standard usati per la trasmissione della televisione Digitale Terrestre sono: (in blu nella mappa): è lo standard più diffuso e quello adottato dall'europa (Italia compresa); 6
7 ATSC(in arancione nella mappa): è utilizzato nell'america Settentrionale (Canada, Messico e Stati Uniti) ed in Corea del Sud; ISDB-T(in verde nella mappa): è utilizzato in Brasile ed in Giappone; DMB-T (in rosso nella mappa): è utilizzato in Cina e Hong Kong. Sono colorati in viola i paesi che adottano più standard. Figura 1.1: I principali standard usati per la trasmissione della televisione Digitale Terrestre. 7
8 Molti paesi hanno regolamentato a livello nazionale la transizione dalle trasmissioni analogiche a quelle digitali, la tabella seguente riassume le varie tempistiche (per semplicità sono indicati solo gli anni). Paese Albania Lancio ufficiale 2004 Andorra Australia 2001 Austria Belgio Brasile Bulgaria Canada Cina 2007 Corea del sud Croazia Danimarca Estonia Inizio transizione Fine transizione 2012 Sistema Interattività Compressione MPEG MHP MHP MPEG-2 MPEG-2 e MPEG MHP Nessuno MPEG ISDB-T Ginga MHP MPEG-4 MPEG ATSC DMB-T/H MPEG-2 e MPEG-4 MPEG ATSC MPEG-2 e MPEG Isole Fær Øer Filippine Finlandia Francia Germania Giappone ISDB-T BML MPEG-2 MPEG-2 Grecia Hong Kong DMB-T/H MHEG-5 MPEG-2 e MPEG-4 Irlanda Israele MHEG-5 MPEG-4 MPEG-4 Italia Littuania MHP MPEG-2 e MPEG-4 MPEG-4 Lussemburgo Malesia Nessuno MHEG-5 MPEG-2 MPEG-4 Marocco Messico ATSC Norvegia 2007 Nuova Zelanda MHP MPEG-2 e MPEG-4 MPEG-4 MHP MPEG-2 e MPEG-4 MPEG-2 MPEG-2 e MPEG-4 MPEG-2 e MPEG-4 MHEG-5 MPEG-4 MPEG-4 Paesi Bassi Polonia Portogallo Regno Unito MHEG-5 MPEG-4 MPEG-2 e MPEG MHP MPEG-2 Repubblica Ceca Romania 2005 MPEG MPEG-4 Russia Slovenia MPEG-4 MPEG-4 Spagna Stati Uniti ATSC Sudafrica Svezia MHP MPEG-4 MPEG-2 e MPEG-4 Svizzera Taiwan MHP MPEG-2 e MPEG Nessuno MPEG Turchia Ucraina 2008 Ungheria MHP MPEG-2 e MPEG-4 MPEG-2 e MPEG-4 MPEG-4 8
9 Legenda: lancio ufficiale: anno in cui la televisione Digitale Terrestre è stata o sarà ufficialmente lanciata (non l'anno di inizio delle trasmissioni di prova); inizio transizione: anno in cui si è cominciato o si comincerà a cessare le trasmissioni analogiche; fine transizione: anno in cui le trasmissioni analogiche sono o saranno cessate completamente. In aggiunta sono indicati anche gli standard correntemente adottati: sistema: standard usato per le trasmissioni (, DMB-T/H, ATSC, ISDB-T); interattività: standard usato per fornire servizi interattivi (MHO, MHEG-5, BML, Ginga); compressione: standard per la compressione video (MPEG-2, H.264/MPEG-4, AVC, entrambi). 1.2 Dalla trasmissione alla ricezione. Quando si vuole trasmettere un segnale DTT, sono necessarie alcune fasi; innanzitutto si devono creare i contenuti audio/video e dati che si desiderano trasmettere (in genere forniti da aziende dette Content Provider), con la relativa corretta formattazione. Spesso i contenuti sono costituiti dalla digitalizzazione di dati analogici (tramite operazioni di campionamento e quantizzazione). Successivamente, si trasmettono i contenuti via etere, come avviene per la TV analogica, usando impianti di radiofrequenza che trasmettono sulle stesse bande (UHF e VHF). Nella fase di ricezione, il segnale digitale viene ricevuto da una antenna TV, che trasmette il segnale al decoder, che a sua volta decodifica il segnale in modo che esso possa essere visualizzato dallo schermo TV. Figura 1: Schema della filiera del Digitale Terrestre Le diverse tipologie di rete di trasmissione utilizzate, devono rispondere alle esigenze dei diversi 9
10 tipi di servizio (nazionale o locale) cui sono destinate, definendo le soluzioni ottimali in termini di uso efficiente dello spettro, del territorio e popolazione serviti, tenendo presente le esigenze di tutto il sistema radiotelevisivo nella sua complessa articolazione e nel suo prevedibile sviluppo. La tecnologia digitale consente di pianificare reti che utilizzano la stessa frequenza per tutti gli impianti trasmittenti che le compongono (reti SFN, Single Frequency Network), e reti che richiedono, invece, più frequenze (reti MFN, Multiple Frequency Network), con la possibilità anche di realizzare reti miste MFN-SFN dette reti k-sfn, cioè reti MFN estese localmente con reti SFN. Queste reti si distinguono anche per la capacità di trasmissione, minore per le reti SFN rispetto alle MFN (le reti SFN possono ad esempio, trasmettere un numero di programmi minore rispetto alle MFN, oppure lo stesso numero con una qualità peggiore). 1.3 Vantaggi. I vantaggi dello standard Digitale Terrestre si possono riassumere in alcuni punti. Potenziamento del servizio televisivo in termini di qualità e quantità. A parità di frequenze utilizzate per le reti televisive analogiche, il numero dei programmi digitali irradiabili potrebbe essere di 4 o 5 volte più grande. Inoltre la trasmissione digitale offre una migliore qualità delle immagini e dei suoni e permette di utilizzare schermi televisivi più grandi (da schermi a 16:9 a quelli a grande formato). Il broadcaster può utilizzare le risorse di trasmissione con maggiore flessibilità: in una determinata area di copertura può ridurre il numero di programmi trasmessi, privilegiando una migliore qualità delle immagini, da diffondere anche in alta definizione. Offerta di una serie di servizi aggiuntivi di tipo interattivo accessibili tramite il televisore. L'adattatore digitale (Set-Top Box), da collegare al normale apparecchio televisivo o già integrato nel televisore come in alcune versioni più moderne, ha capacità di memoria e di elaborazione tali da trattare ed immagazzinare le informazioni: l'utente le può acquisire in forma interattiva semplicemente collegando l'apparecchio alla linea telefonica domestica. Ciò significa che anche nelle case prive di personal computer sarà possibile accedere all'insieme di servizi associati a Internet. Attraverso il televisore collegato al SetTop Box i servizi interattivi potranno essere utilizzati da soli oppure abbinati alle trasmissioni televisive per arricchire i programmi di informazione a richiesta. Progressiva sostituzione degli attuali canali analogici di produzione e trasmissione televisiva con una nuova generazione di mezzi digitali. A livello di produzione televisiva, questa sostituzione è in atto già da tempo; sul fronte degli apparati e delle reti di 10
11 trasmissione i mezzi satellitari si sono aggiornati con grande rapidità per adattarsi alla nuova metodologia di trasmissione digitale. La televisione digitale, come già detto, può essere trasmessa via satellite, via cavo e via etere; ciascun supporto ha caratteri propri che si riflettono in specifici vantaggi e svantaggi. La diffusione analogica televisiva terrestre assicura in Europa una copertura ampia e capillare del territorio, essendo disponibile oltre nel 95% delle abitazioni tramite antenne poco costose e semplici da installare. Rispetto alle potenzialità della televisione via cavo e via satellite, la televisione digitale è quindi migliore, e rappresenta la soluzione ottimale per chi voglia diffondere programmi in un numero elevato di abitazioni. Inoltre, le reti terrestri presentano anche altri vantaggi, come: La regionalità. Il territorio regionale è troppo esteso per essere coperto capillarmente da una rete di trasmissione via cavo con costi non elevati, dove il satellite ha una copertura geograficamente molto ampia, non circoscrivibile in scala regionale. La portabilità del servizio, cioè la possibilità di ricevere i programmi ovunque, grazie a un'antenna mobile, senza predisporre punti di allacciamento alla rete in ognuno dei luoghi deputati, anche temporaneamente al consumo televisivo. Sotto il profilo strettamente economico, le trasmissioni digitali terrestri rappresentano una risorsa per lo Stato, i consumatori e l'industria dei prodotti elettronici a largo consumo. Nel decidere il passaggio alle trasmissioni digitali terrestri, il Governo genera effetti economici di lungo termine: vengono poste le condizioni per un uso più efficiente dello spazio delle frequenze disponibili alla trasmissione, con la liberazione di una parte delle frequenza da destinare a ulteriori canali televisivi terrestri, ad altri servizi diffusivi (data broadcasting) o di telecomunicazione (servizi interattivi mobili), o da ripartire tra le diverse funzioni. Si hanno anche vantaggi per i consumatori, che disporranno di una gamma più ampia di canali televisivi senza aggravi di spesa, e potranno inoltre compiere da casa tramite l'uso del televisore e del Set-Top Box, operazioni che richiederebbero spostamenti o l'utilizzo di un computer con una connessione Internet, come l'e-commerce, home banking ed adempimenti amministrativi (con una drastica riduzione dei costi di transazione). Esistono anche alcuni svantaggi, dovuti soprattutto al fatto che la tecnologia Digitale Terrestre è di recente adozione: infatti molte famiglie italiane, ancora non hanno a disposizione un decoder, e si troverebbero a doverlo comprare, o a comprare una TV con decoder integrato; pertanto, almeno nella fase iniziale di introduzione del digitale, si hanno dei costi aggiuntivi per l'utente. Il secondo problema è relativo alla copertura del segnale digitale, che necessita di una potenza 11
12 minore per la trasmissione, e quindi comporta un numero minore di stazioni trasmittenti. Questo può in alcuni casi rappresentare una contropartita, poiché il segnale Digitale Terrestre è comunque soggetto ai disturbi di trasmissione tipici della codifica MPEG, diversi da quelli della trasmissione analogica: il segnale può essere ricevuto o no, non esiste una possibilità che possa essere ricevuto con qualche lieve disturbo. Quindi alcuni utenti che prima ricevevano un segnale disturbato, potrebbero non ricevere più un segnale. Inoltre, essendo ancora in fase di attuazione, il segnale Digitale Terrestre ha ancora problemi di copertura in Italia, che dovrebbero risolversi entro il 2012, anno in cui lo switch-off dovrebbe considerarsi completato. 1.4 Servizi ed applicazioni disponibili. Gli standard digitali, sviluppati tramite il Consorzio Europeo DVB, offrono nuovi servizi, che si possono suddividere in 3 classi: 1. Enhanced broadcasting, caratterizzata dal formato delle immagini 16:9 (HDTV High Definition Television), particolarmente adatto alla visione di film e contesti sportivi. L'audio ha qualità Compact Disk, con inoltre la possibilità di avere più canali per un programma multilingue. È presente l'epg (Electronic Programmine Guide) che fornisce informazioni sulla programmazione, aggiornate in tempo reale, ed è presente il Super-Teletext, che può fornire contenuti graficamente arricchiti, immagini, ipertesti, clip audio e video. 2. Televisione interattiva. La televisione Digitale Terrestre permette due forme di interattività: l'interattività locale consiste nella trasmissione ciclica di contenuti (Data Carousel), che vengono memorizzati dal ricevitore e utilizzati successivamente da parte degli utenti. l'interattività con canale di ritorno, fondamentale per promuovere lo sviluppo di nuovi servizi di specifico interesse per il singolo utente. 3. L'accesso ad Internet tramite il televisore offre all'utente tutte le potenzialità per la navigazione, offerte da un personal computer. 12
13 1.4 LepidaTV. LepidaTV è un progetto di comunicazione per la community network degli enti pubblici dell'emilia-romagna. Nasce per offrire ai cittadini la possibilità di entrare in contatto con la Pubblica Amministrazione e contribuire in tal modo ad arginare il fenomeno del digital divide. LepidaTV rende disponibili contenuti, ricercando, organizzando e coordinando materiali, che possono essere costituiti da servizi a bassa interattività e filmati, che sono disponibili anche via Internet, tramite il sito Web Tra i servizi che rende disponibile, ad esempio, ci sono: la possibilità di consultare informazioni culturali su alcune città (Bologna, Ferrara, Forlì, Argenta), su mostre e musei, sulla mobilità, o ancora, informazioni scolastiche, sul territorio e l'ambiente, o addirittura, informazioni sul canile e gattile comunale di Bologna. Alla realizzazione di LepidaTV hanno collaborato la Regione Emilia-Romagna, il Comune di Bologna, il Comune di Argenta, ed il Comune di Forlì. 13
14 Capitolo 2. Come si producono i contenuti della TV digitale. 2.1 Introduzione. Un segnale TV digitale è trasmesso come uno stream di dati in codifica MPEG-2, conosciuto come Transport Stream (TS); ogni Transport Stream ha una frequenza di trasmissione dati da 40 Mb/s per una rete via cavo, oppure circa 24 Mb/s per una rete terrestre. Ogni Transport Stream consiste in un set di sub-stream, chiamati Elementary Stream (ES), e ciascun Elementary Stream può contenere sia contenuti audio, video e dato, codificati in MPEG-2, oppure dati incapsulati in uno stream MPEG-2. Ciascun ES ha un identificatore che distingue ogni pacchetto, chiamato PID (Packet Identifier), che funge da identificatore univoco per lo stream all'interno del Transport Stream. L'unica restrizione sul numero di Elementary Stream in un Transport Stream è che ogni Elementary Stream deve avere un unico PID all'interno del Transport Stream che lo contiene, ma finché esso verrà memorizzato con una parola di 13 bit, questa non rappresenterà una vera restrizione; nella pratica, il numero di Elementary Stream è limitato dal bit rate totale del Transport Stream. 2.2 Il Transport Stream. Un Transport Stream consiste in un insieme di stream audio e video codificati in compressione MPEG-2, che vengono multiplexati insieme. Il risultato di questo processo è un insieme di Elementary Stream codificati in MPEG-2, ciascuno contenente un canale video e una traccia audio (mono o stereo); questi stream in realtà non sono altro che degli insiemi continui di frame video o di dati audio, che non sono direttamente multiplexabili. Per rendere più semplice il multiplexaggio Perciò, si dividono questi stream in pacchetti, chiamati PES o Packetized Elementary Stream. Per creare un Transport Stream, ogni Packetized Elementary Stream viene diviso ulteriormente in pacchetti, e i dati provenienti dallo stream sono memorizzati in Transport Packets, di dimensione di 188 byte, molto più piccoli rispetto a un pacchetto PES. In questo modo, ogni singolo PES viene 14
15 diviso in diversi Transport Packet. Questo ulteriore livello di divisione in pacchetti permette una tecnica di correzione degli errori molto più potente. Figura 2.1: Come i PES sono organizzati in un Transport Stream. Nei Transport Packets si possono anche includere stream di dati (Data Stream) come parte del servizio per le applicazioni, per il televideo (Teletext) oppure per altre ragioni: lo standard MPEG-2 provvede una modalità predefinita per trasportare dati di tipo non audio o video. Quando si ha un set completo di pacchetti, ciascuno per una parte diversa del servizio che si vuole creare, essi possono essere inseriti in un Transport Stream finale, facendo attenzione ad inserire i pacchetti nel giusto ordine. Inoltre si deve fare attenzione al fatto che ogni Elementary Stream nel Transport Stream abbia una frequenza dati sufficientemente costante da assicurare una corretta decodifica da parte del ricevitore (senza buffer underrun o overrun); si deve anche fare attenzione al fatto che gli stream video utilizzano una porzione del Transport Stream molto più ampia rispetto a quella utilizzata dai contenuti audio, e perciò non si possono semplicemente inserire pacchetti nello stream. Se multiplexassimo questi Transport Packets insieme, otterremmo un Transport Stream che contiene un numero di Elementary Stream che non può indicare che tipo di dati contengono questi stream, oppure come il ricevitore può ricostruire questi stream in una forma presentabile all'utente. Per risolvere questo problema, entrambi gli standard MPEG e DVB specificano che dovrebbero essere aggiunte delle informazioni ulteriori al Transport Stream; questi informazioni, che vengono codificate in un numero di Elementary Stream che vengono aggiunti al Transport Stream durante il processo di Multiplexing, sono chiamate anche Service Information. Il Service Information, è un insieme di dati che descrive la struttura del Transport Stream: esso 15
16 contiene delle tabelle, ciascuna delle quali descrive un servizio nel Transport Stream. Queste tabelle contengono una lista in cui sono elencati tutti gli stream del servizio, ed indicano per ciascuno il PID e il tipo di dati che esso contiene. Figura 2.2: Anatomia di un Transport Stream DVB. L'informazione sul tipo di stream in un servizio permette al ricevitore, non solo di identificare quale stream è di tipo audio e video, ma anche di identificare diversi tipi di stream dati, separando per esempio, le informazioni sul teletext dalle informazioni sul servizio provenienti da sistemi di trasmissione. È interessante osservare che si possono riusare degli Elementary Stream attraverso i servizi: ad esempio, due Elementary Stream possono apparire in più di un servizio; questo permette il riuso di Transport Stream in maniera efficiente, nei diversi servizi ed è il più comunemente usato per gli stream dati (Data Stream). Se il Transport Stream in esame contiene più di un servizio, si può semplicemente Multiplexare il contenuto audio e video e il contenuto dati, per tutti i servizi, insieme; il Service Information descrive quale ES appartiene a ciascun servizio. 2.3 Il processo di costruzione del flusso di dati, fino al Multiplexing. Nel linguaggio della DTV, ogni Transport Stream è anche conosciuto come Multiplex, poiché consiste in un numero di servizi Multiplexati insieme; ogni Multiplex viene trasmesso ad una determinata ed unica frequenza. 16
17 All'interno di un Multiplex, ogni gruppo di Elementary Stream che costituisce un singolo canale TV viene chiamato Service (servizio); il numero di Elementary Stream in un Service non deve per forza essere costante (può variare a seconda dello show televisivo contenuto in un determinato Service: per esempio alcuni show televisivi possono essere trasmessi con riprese da differenti angolazioni oppure con tracce audio multiple in diverse lingue). Nei sistemi TV digitali, ogni show televisivo è chiamato evento, poiché ogni Service consiste di un numero di Elementary Stream trasmessi simultaneamente e, d'altra parte, il Service consiste in un a serie di eventi individuali, trasmessi uno dopo l'altro. Come abbiamo visto, il Transport Stream, fisicamente, raggruppa un insieme di servizi, ma nei sistemi DVB essi possono anche essere raggruppati per via logica (in questo caso vengono chiamati Bouquet), in modo da rendere il raggruppamento più efficiente. La TV digitale fa uso del concetto di rete, ma non nello stesso modo in cui si intende una rete di computer: in questo ambito si intende un set di Transport Stream che condividono lo stesso Service Information; questi Transport Stream verranno spesso ritrasmessi dalla stessa compagnia (operatore di trasmissione via cavo o satellite), e sarà disponibile più di una rete in qualsiasi momento. Questo vale soprattutto per sistemi di trasmissione terrestre, in cui possono essere disponibili più reti, nella stessa area, allo stesso momento; in questo caso il ricevitore utilizzerà una scansione automatica dei canali. Riepilogando abbiamo: una rete che consiste in uno o più Transport Stream, che sono trasmessi dalla stessa entità; un Transport Stream è uno stream MPEG-2 che contiene diversi servizi; ogni servizio è un canale TV, e consiste in una serie di eventi, uno dopo l'altro; ogni evento è una serie di show televisivi, e consiste in un numero di Elementary Stream; ogni Elementary Stream è diviso in uno stream di pacchetti in MPEG-2, contenenti dati audio, video o binari in codifica MPEG-2; diversi servizi (possibilmente da diversi Transport Stream) possono essere raggruppati insieme in maniera logica, in un bouquet. 17
18 Figura 2.3: Struttura schematica di un Transport Stream 2.4 Service Information. Come detto prima, il Service Information (SI) è un set di Elementary Stream che contiene un insieme di tabelle di dati che descrivono la struttura dei Transport Stream, del servizio che esso contiene ed altre informazioni utili per i ricevitori TV Digitale Terrestre. Ogni Transport Stream, ha alcune informazioni di servizio che lo standard MPEG dichiara obbligatorie; inoltre DVB definisce diverse tabelle Service Information extra, in aggiunta a quelle standard. Le tabelle vengono trasmesse come Elementary Stream all'interno del Transport Stream; alcune di esse sono legate ad un specifico servizio nel Transport Stream, mentre altre sono più generiche e descrivono la struttura del Transport Stream e le proprietà della rete. In alcuni casi, gli Elementary Stream che contengono il Service Information sono trasmessi con un PID prefissato, per rendere più facile la ricerca ai decoder, mentre in altri casi il PID a cui una tabella di un Service Information è associata è memorizzata in un altra tabella Service Information. Le tabelle del Service Information che sono più usate nel DVB all'interno di Transport Stream sono: Program Association Table (PAT), definita dallo standard MPEG; è la tabella fondamentale per il Service Information, poiché descrive quale PID contiene il Program Map Table per ogni servizio, nello stesso modo in cui il Network Information Table per il Transport Stream nelle reti che lo usano. Program Map Table (PMT), definita dallo standard MPEG; è la tabella che effettivamente descrive come un servizio viene messo assieme. Questa tabella descrive tutti gli stream in un servizio; il PMT non è trasmesso con un PID prefissato, e un Transport Stream conterrà un PMT per ogni servizio che esso contiene. Network Information Table (NIT), descrive come il Transport Stream è organizzato nella rete corrente, e descrive anche alcune proprietà fisiche della rete stessa. Contiene anche il 18
19 nome della rete e il Network ID, che identifica unicamente la rete che trasmette correntemente il Transport Stream, e può differire dal'original Network ID, se il Transport Stream è stato ritrasmesso. Service Description Table (SDT) diversamente dalle tabelle PMT, c'è solo una SDT in un Transport Stream, e contiene informazioni per ogni servizio; la SDT tipicamente contiene informazioni come il nome del servizio, il Service ID cioè l'identificativo, lo stato del servizio (running oppure non running, paused, ecc) e se il servizio è stato criptato oppure no. Event Information Table (EIT), fornisce un elenco di informazioni a proposito di un evento in un determinato servizio, includendo il nome dell'evento, la durata del tempo di partenza e lo stato dell'evento. Conditional Access Table (CAT), descrive i sistemi ad accesso condizionato, che sono in uso nel Transport Stream, e forniscono informazioni sul come decodificarli. Bouquet Association Table (BAT) elencano e descrivono i servizi in un bouquet. Time and Date Table (TDT), e Time Offset Table (TOT) forniscono un riferimento temporale per lo stream. Il TDT contiene il tempo UTC (Universal/GMT) corrente, mentre TOT contiene sia il tempo UTC che l'offset per il tempo locale. Application Information Table (AIT), tabella definita dallo standard MHP, che dichiara l'esistenza ed identifica i servizi in un canale del Digitale Terrestre. Perciò deve contenere le seguenti informazioni: Organization ID (32 bit): identificatore univoco del nome dell'organizzazione che produce il servizio MHP. Application ID (16 bit): identificatore univoco del nome del servizio fornito. Status Indicator: specifica se l'applicazione deve essere avviata e terminata, automaticamente dalla Set-Top Box o se deve farlo l'utente in modo manuale. Application Local Descriptor: identificatore dell'object Carousel che contiene l'applicazione. Per tutte le tabelle, esistono alcuni campi comuni, tra cui c'è il Linkage Descriptor: contiene informazioni che riguardano le Service Information, come ad esempio, una trasmissione che subentra, quando quella in esecuzione si blocca. Alcune di queste tabelle potrebbero contenere informazioni a proposito di altri Transport Stream, assieme alle informazioni sul Transport Stream corrente; le tabelle NIT, SDT ed EIT devono contenere informazioni a proposito di il Transport Stream correntemente in uso (tabelle note con il nome di NIT-actual, SDT-actual, ed EIT-actual), ma il Transport Stream può anche contenere versioni di queste tabelle che fanno riferimento ad altri Transport Stream. 19
20 2.5 DSM-CC DSM-CC (Digital Storage Media-Command and Control) è uno standard per la trasmissione di dati, basato su stream MPEG; fornisce molte funzioni utilizzate dallo standard MHP, ed è divenuto uno dei principali metodi per trasmettere applicazioni ad un ricevitore, che può fornire uno stream di dati, e molte altre funzioni. I sistemi di trasmissione sono per natura unidirezionali: i dati infatti vengono mandati da un trasmettitore ad un ricevitore (Set-Top Box), ed esso può richiedere un file specifico al server (come un PC può richiedere uno specifico file dalla rete); il ricevitore non ha altro accesso ai dati. Esiste un'altra soluzione: il broadcaster trasmette periodicamente ogni file nel filesystem, ed il ricevitore aspetta fino a quando non riceve il file che desidera. Un esempio di funzionamento simile è il teletext o televideo:ogni pagina ha un numero unico, ed ogni pagina viene trasmessa a turno; quando l'utente inserisce il numero di una pagina, la TV attende che quella pagina venga trasmessa, decodificata. Questo tipo di soluzione è chiamata Carousel, in cui ogni pagina viene sfogliata a turno, ed il ricevitore deve aspettare che la pagina venga visualizzata ancora nella trasmissione prima di poterla usare; ovviamente questa soluzione non è la più efficiente. In DSM-CC, i dati sono trasmessi in blocchi chiamati modules (moduli), invece che in pagine, ma il principio è lo stesso: i dati che devono essere trasmessi, sono divisi in moduli, ed alcune descrizioni dei moduli sono aggiunte ad esso, e successivamente il modulo viene trasmesso quando è il suo turno. DSM-CC supporta due tipi di Carousel, più semplice è il Data Carousel, che fornisce al broadcaster un modo per trasmettere blocchi di dati al ricevitore. Non da indicazioni riguardo alla collocazione dei dati, e dipende completamente dal ricevitore analizzare questi dati per trasformarli in una forma che abbia un senso. Nei casi più complessi, una migliore soluzione è fornita usando gli Object Carousel; un Object Carousel è costruito sopra un Data Carousel, e consiste di un albero di directory che viene diviso in una serie di moduli, che possono contenere uno o più file o directory; ogni modulo può contenere diversi file, per una dimensione totale più piccola di 64 Kbytes. Poiché dividere file in più di un modulo non è permesso, si ha che file più grandi di 64 Kbyte devono avere un proprio modulo, che conterrà solo quel file; i file di un modulo possono provenire da qualunque parte di un albero di directory che viene trasmesso, e non devono per forza provenire dallo stesso direttorio. Questi moduli sono trasmessi uno dopo l'altro fino a quando sono stati trasmessi tutti quanti, punto in cui il processo ricomincia dal principio ancora una volta, ed il primo modulo viene ritrasmesso ancora. Per accedere al file, il ricevitore deve attendere finchè non riceve il modulo che contiene quel file, e solo a quel punto potrà analizzare il modulo ed accedere al file. Questo potrebbe non 20
21 essere efficiente quando la quantità totale di dati da trasmettere è molto grande, ma la maggior parte dei ricevitori memorizzano alcuni dati in una cache; il caching può anche essere effettuato allo stesso livello del modulo, oppure al livello di ciascun file. 2.6 Rappresentazione di formati video, audio e dati. Per ogni Transport Stream, che rappresenta un canale DTT, possono esistere solo un Elementary Stream di tipo audio e uno solo di tipo video. All'interno di un canale DTT possono anche essere trasmessi flussi Elementary Stream di tipo dati, ed è possibile creare un canale esclusivamente informativo, semplicemente creando Elementary Stream che contengono solo dati e non flussi audio e video. La rappresentazione di informazione di tipo dati, essa può essere memorizzata in Elementary Stream presenti in un numero non noto a priori, nel Transport Stream. La creazione di questo tipo di ES viene effettuata tramite un software chiamato OpenCaster, che trasforma le directory contenenti il codice da eseguire (specifico per le Set-Top Box) in flussi Transport Stream. A eccezione della tabella AIT, nelle altre tabelle i flussi dati non vengono nominati, ma si trasmette solo i dati della AIT che consente di catalogarli in seguito, (a eccezione della PMT che invece trasmette i PID legati ai singoli Elementary Stream dati). I flussi dati vengono visualizzati diversamente in ricezione sulla Set-Top Box: se si includono dei flussi dati in un Transport Stream (costruendo correttamente le Service Information Table), saranno le Set-Top Box stesse ad integrare automaticamente un menù di selezione applicazione. 2.7 Multiplexing nello specifico. Infine, il Transport Stream che viene convertito in analogico, è, come abbiamo detto, il risultato del multiplexing dei vari flussi elementari. Appena prima della fase di multiplexing dei segnali, essi vengono suddivisi in pacchetti di 188 bytes l'uno, i Transport Packets, che vengono inseriti dal multiplexer nel Transport Stream in uscita, costruendo in questo modo un flusso costituito da quelli che verranno definiti poi Elementary Stream. (il Multiplexer non aggiunge nessuna informazione sul contenuto degli Elementary Stream, ed è per questo che si inseriscono le Service Information nel flusso finale). 21
22 2.8 Ricezione del segnale e visualizzazione La ricezione del segnale e la successiva visualizzazione del segnale sullo schermo del televisore, si può considerare come l'atto finale di tutto il processo che è stato finora illustrato; la protagonista di questa fase è la Set-Top Box. La Set-Top Box, in sigla STB, è una tipologia di apparecchio elettronico televisivo non portatile destinato ad aggiungere alcune funzionalità televisive (inizialmente non previste) ad un televisore, un monitor, o un videoproiettore. Tra le varie Set-Top Box, di estrema importanza sono i Decoder, il cui funzionamento è composto da più passaggi: 1. il decoder riceve il segnale dalla normale antenna per tv; 2. successivamente il decoder divide in 4 o5 canali differenti DTT, trasmessi su una determinata frequenza; 3. il decoder estrae il flusso di Transport Stream relativo al determinato programma scelto dallo spettatore. Per effettuare questa operazione, il decoder si basa sulle informazioni memorizzate nelle Service Information Tables; 4. successivamente il decoder inizia a dividere i vari Elementary Stream, contenuti nel Transport Stream e a convertirli da un segnale digitale ad uno analogico, in modo da poterli poi trasmettere al televisore a cui è collegato. Figura 2.3: un esempio di Set-Top Box Spesso, il decoder è anche dotato di una tecnologia per la interpretazione anche di tabelle costituite da Elementary Stream di tipo dati, che vengono estratti dal Transport Stream (demultiplexati) ed eseguiti, una volta ricevuto l'intero Carousel; infine il risultato viene convertito in un segnale di tipo analogico che viene trasmesso al televisore. Molte Set-Top Box compatibili con il linguaggio MHP sono dotate di una memoria interna, per la memorizzazione temporanea del codice che costituisce le applicazioni DDT, e che svolge anche la funzione di cache per i dati dei Transport Stream. 22
23 23
24 Capitolo 3. Lo standard MHP 3.1 Lo standard MHP e la sua evoluzione. Il Multimedia Home Platform, in sigla DVB-MHP o MHP, è il nome con cui si identifica un insieme di specifiche middleware (cioè un software che serve per creare una piattaforma di base per eseguire altre applicazioni e al tempo stesso permette l'interfacciamento con più dispositivi di livello inferiore al middleware stesso), standard della famiglia DVB che definiscono l interfaccia software tra le applicazioni interattive digitali e gli apparati dove queste sono attivate. Questo standard permette l'accesso alle applicazioni interattive e ai servizi, indipendentemente dalla piattaforma hardware su cui essi sono eseguiti. Figura 3.1: Logo MHP Anche se lo standard MHP è fortemente basato sulla tecnologia Java, si ricorda che questo linguaggio non costituisce l'intero standard MHP, ma solo una parte: infatti si devono considerare anche tutte le altre componenti dello stack MHP che riguardano i dati audio/video (MPEG). Attualmente sono state pubblicate tre versioni dello standard MHP (1.0, 1.1 e ora anche 1.2) che descrivono dettagliatamente cosa e come si può realizzare sul middleware MHP. Figura 3.2: Versioni attuali del MHP 24
25 La prima specifica, 1.0, costituita insieme allo standard MHP, contiene: architettura di base MHP, informazioni dettagliate sull'enhanced Broadcasting e Interactive Profiles (prime due modalità di funzionamento); differenti formati di contenuto in MHP (JPEG, MPEG2, ecc.); protocolli per il trasporto, inclusi IP per un eventuale canale di ritorno e DSM-CC per la trasmissione broadcast; modelli di applicazione DVB-J e DVB-HTML; varie API. La seconda specifica, 1.1, invece contiene: informazioni dettagliate sulla modalità di funzionamento Interactive Profiles e l'introduzione di un'altra modalità di funzionamento, Internet Access Profiles; possibilità di memorizzazione di applicazioni in una memoria persistente; possibilità di download di applicazioni via broadcast o di canali di interazione; estensioni per il DVB-J per supportare meglio applicazioni internazionali e l'accesso a lettori di smart cards non certificati (che derivano dall'esperienza degli sviluppatori in Italia); specifiche per DVB-HTML; maggiore supporto per plug-in (ad esempio per la grafica in sistemi HD,); supporto per riferimenti bidirezionali tra contenuti in MHP e contenuti Internet; Infine, l'ultima released, la versione 1.2, aggiunge un supporto per la trasmissione di servizi DVB attraverso IPTV, cioè reti di tipo broadband basate su protocollo IP, tramite l'uso di nuove API, definite dove è necessario sfruttare i vantaggi di queste reti. Viene aggiunto anche un supporto per applicazioni che devono essere eseguite per tutto il tempo in cui l' environment del MHP sta eseguendo. 3.2 Architettura e funzionamento dello standard MHP. Poiché l'mhp è un middleware, esso ha una architettura che riguarda tre livelli: Resources (risorse): è il livello più basso, che gestisce la parte hardware, come ad esempio il processing MPEG (demodulatore hardware), i dispositivi di input ed output (come telecomando, le smart card), la CPU, la memoria e il sistema per la grafica. System Software (Sistema): questo livello, essendo intermedio ha il compito di svolgere funzioni che riguardano i due livelli a cui si frappone: gestisce le risorse hardware del 25
26 sistema in modo che il software in esecuzione le possa utilizzare, e, riguardo al livello più alto, gestisce il flusso di stream MPEG-2 secondo lo standard DVB. Per potere fare tutto ciò utilizza una macchina virtuale Java, JVM, alcuni pacchetti software con funzioni generali (nucleo con API Java di Sun), e con funzioni specifiche (Java TV API, HAVI e DAVIC), un application manager, che permette di gestire il running delle applicazioni Java e i protocolli di trasporto DVB. Applications (Applicazioni): è il livello più alto, che costituisce una interfaccia in grado di ricevere ed interpretare l'output delle applicazioni, che verrà visualizzato sul televisore. È diviso in tre sotto-livelli, a seconda del tipo di applicazioni che possono essere: - Residenti: applicazioni specifiche per uno specifico decoder, - Installabili: applicazioni spesso offerte dai fornitori di servizi, che possono essere installate e vanno ad aggiungere delle funzionalità alle applicazioni già presenti, - Scaricabili:applicazioni offerte dai fornitori di servizi, che possono essere facoltativamente installate per arricchire il gruppo di applicazioni già presenti. Figura 3.3: Schema rappresentativo dei tre livelli dello standard MHP Per quanto riguarda l'architettura dello standard MHP, sono stati definiti tre diversi profili per i ricevitori MHP (decoder), che permettono ai costruttori di ricevitori e agli sviluppatori di applicazioni, di costruire diversi prodotti con diverse capacità (e costi); le tre modalità esistenti sono: Enhanced Broacasting Profile: definita nello standard MHP 1.0, questa modalità è destinata ai ricevitori di basso costo, essendo la modalità più semplice e leggera; essa permette solamente l'arricchimento dei contenuti audio-video con informazioni e immagini navigabili sullo schermo del televisore. Per questo profilo non sono quindi richieste performance particolari della Set-Top Box. In questa modalità sono comprese: la JVM, le API Java DVB, alcuni formati multimediali come JPEG, MPEG, GIF,ecc., i protocolli di 26
27 trasporto broadcast e opzioni HTML. Non richiede la presenza di un canale di ritorno. Interactive Broadcast Pofile: anche questa modalità è definita nello standard MHP 1.0; la novità introdotta è l'inclusione di un supporto standardizzato per il canale di ritorno. Le applicazioni possono, in questo caso, effettuare il download di classi tramite l'uso del canale di ritorno (sono incluse anche delle API per la gestione e il controllo del canale di ritorno), poiché nella modalità Enhanced Broadcasting questo è possibile solo via broadcast stream. Questa modalità è la base di servizi che presuppongono una interattività con l'utente, come l'e-commerce, e pertanto l'utente deve essere abilitato a trasmettere le sue scelte (dati), in modo che vengano elaborati dalle applicazioni, e per fare ciò è necessario appunto, il canale di ritorno. In questo livello si collocano anche tutti i servizi che necessitano dell'uso delle smart card. Internet Access Profile: questa modalità è stata aggiunta nella versione MHP 1.1; essa permette ai broadcaster di avere un supporto per applicazioni Internet, come le , il Web-browsing (navigazione in Internet) ed altre attività relative alla rete Internet, che possono essere eseguite sul ricevitore del Digitale Terrestre. In questo modo si introduce una interattività superiore rispetto al profilo precedente, poiché effettivamente basata sull'utilizzo pieno e cosciente da parte dell'utente (mentre prima veniva più a un livello incosciente, poiché effettuato più che altro dalle applicazioni), che utilizza il ricevitore attivamente (ad esempio per navigare in Internet). Questo profilo necessita di performance di alto livello, da parte della Set-Top Box, essendo obbligatoria l'adozione di un browser Internet, e di un client embedded. Pertanto è stato inserito un linguaggio di markup chiamato DVB-HTML, studiato appositamente per permettere la visione di pagine Web sullo schermo del televisore. Figura 3.4: Le tre modalità per il ricevitore MHP. 27
28 3.3 Lo stack software MHP. Lo stack software MHP è costituito da un insieme di API che permettono l'esecuzione delle applicazioni: Figura 3.5: Lo stack software MHP Questo schema presenta un esempio di stack software: non tutti i middleware seguono questo modello; in questo caso, ogni API viene costruita sopra un'altra API, mostrando le dipendenze esistenti tra le diverse componenti. In generale le API che costituiscono il MHP, sono divise in due parti principali: la prima riguarda i contenuti e stream MPEG, mentre la seconda fornisce servizi costruiti direttamente sulla base delle API standard, che fanno parte di ogni piattaforma Java (servizi pjava), meno dipendenti dalla piattaforma sottostante. Vediamo alcune delle API disponibili: Selection Filtering: servono per filtrare pacchetti dallo stream MPEG; Service Information (SI): usano il Selection Filtering per individuare le tabelle di Service Information, nello stream del Data Carousel DSM-CC; Tuning: fanno affidamento sul SI per localizzare il Transport Stream (che contiene il servizio richiesto) su cui si devono sintonizzare; Service Selection: cercano il servizio da sintonizzare (ogni applicazione è associata a un servizio); Application Management: gestiscono la creazione e la distruzione di nuovi servizi, in base alle scelte (selezione o deselezione) effettuate dall'utente. 3.4 Xlet: applicazioni per il DTT. Una Xlet è una particolare applicazione Java concepita per essere scaricata ed eseguita su decoder interattivi nei quali un software specifico, l'application Manager, è in grado di controllarne il ciclo 28
29 di vita; le similitudini con le Applet, dove l'application Manager è rappresentato dal browser sono molteplici. Una compito molto importante, è quello dell'application Manager, poiché, prima ancora che una applicazione DTT (o Xlet) venga avviata ed eseguita, il middleware possiede una applicazione che controlla i permessi di esecuzione e l'esistenza della Xlet, ed esegue il download dal broadcaster dei file necessari, (filtra e riconosce i file che vengono trasmessi ciclicamente), dando priorità a quelli necessari urgentemente, per il caricamento iniziale della applicazione. L'Application Manager continua ad seguire lo stato delle Xlet in esecuzione, e fornisce all'utente la lista delle applicazioni disponibili. Sono accettati solo alcuni formati di file, come classi java, immagini png, jpeg, gif, file audio mp2 e video mpeg, file xml o txt. Il ciclo di vita di una Xlet. È caratterizzato da 4 stati: Loaded: la Xlet è stata creata ma non inizializzata, se durante questa fase viene rilevata un eccezione allora si passa direttamente nello stato Destroyed. La Xlet si può trovare in questo stato solo una volta durante tutto il suo ciclo di vita. Started: la Xlet è attiva e utilizza le risorse necessarie per fornire i suoi servizi, se dotata di GUI allora dovrebbe essere l'unica registrata per ricevere gli eventi del telecomando (allocazione del set di tasti del telecomando dell'utente da gestire). Paused: la Xlet è inizializzata e può trovarsi in questo stato sia dopo che il metodo initxlet() è ritornato con successo dallo stato Loaded oppure dopo che il metodo pausexlet() è ritornato con successo dallo stato Started. In entrambi i casi in questo stato la Xlet dovrebbe limitare al massimo l'utilizzo delle risorse condivise e soprattutto non impegnare la GUI televisiva. Destroyed: la Xlet deve rilasciare tutte le risorse in uso per predisporsi alla terminazione; in questo caso è importante anche disallocare i tasti del telecomando. Figura 3.6: Il ciclo di vita di una Xlet. 29
30 Una sequenza tipica di questo ciclo potrebbe essere: L' Application Manager crea una nuova istanza di una Xlet chiamando il suo costruttore (stato Loaded). La Xlet usa il context passatogli dall'application manager nel metodo initxlet() e si inizializza (stato Paused). L'application manager chiama il metodo startxlet() e la Xlet inizia ad utilizzare le risorse necessarie per fornire i servizi per cui è stata costruita (stato Started). L'application manager chiama il metodo destroyxlet() e la Xlet rilascia le risorse, dopodiché viene terminata (stato Destroyed). Prima che l'xlet possa essere nello stato Loaded, la Set-Top Box deve attendere che tutti i moduli che compongono il filesystem dell'applicazione siano caricati nella memoria interna; pertanto, l'esecuzione della Xlet è sempre locale, e ogni aggiornamento o modifica operata dal broadcaster, avrebbe effetto al successivo caricamento del servizio dalla Set-Top Box. 30
31 31
32 Capitolo 4. Tecnologia Javascript, CSS e HTML per la realizzazione di un servizio Web. 4.1 Perché realizzare una versione Web di un servizio DTT? Lo scopo principale di questa tesi, è quella di fornire una versione Web di un servizio di autoverifica (che potrebbe essere realizzato in DTT), in grado di sottoporre un ipotetico utente a un test per valutare la sua conoscenza di un determinato argomento. Si può decidere di fornire un servizio sia in versione Web che in versione DTT; innanzitutto per un motivo di continuità: gli utenti in questo modo possono utilizzare lo stesso tipo di servizio sia via DTT che via Internet, entrambi con la stessa interfaccia grafica (in questo modo non si disorienta l'utente). Inoltre tramite lo sviluppo dello stesso servizio via Web, che lavora visualizzando gli stessi contenuti, si può sempre dare una dimostrazione funzionante delle applicazioni realizzate. Per realizzare questo piccolo esempio si procede seguendo due step: 1. L'utente che accede al servizio attraverso un Web browser, apre la pagina principale HTML, che verifica il tipo di browser e reindirizza l'utente ad una seconda pagina HTML, realizzata in base alla versione adatta. Questo reindirizzamento è dovuto al fatto che i browser della famiglia Microsoft interpretano alcune pagine HTML in maniera totalmente differente da tutti gli altri browser; perciò è stata costruita una pagina apposita per questa famiglia. 2. Una volta effettuato il detecting del browser, si procede alla realizzazione e costruzione della pagina tramite i tre linguaggi HTML, Javascript e CSS. 32
33 4.2 Linguaggi utilizzati. In questa tesi sono stati utilizzati tre linguaggi, che rappresentano le fondamenta su cui si basano molti siti Web, cioè la trilogia HTML-CSS-Javascript, utilizzata sia per compatibilità verso il software prodotto già esistente, ma soprattutto perché, se utilizzato correttamente, questo modello è molto solido e veloce nel costituire una pagina Web Javascript (JS). In questa tesi il linguaggio Javascript è stato determinante, in quanto è la struttura su cui si basa la gestione principale del programma; in particolare, è stato utilizzato il Javascript per il controllo dei tasti dell'utente (1, 3, 4, 6, 5, 8), sia attraverso la tastiera che il click del mouse sull'immagine corrispondente ai tasti. È stato scelto il Javascript, sia per la già citata continuità con il software prodotto, che per la sua caratteristica di essere un linguaggio interpretato, in modo da potere essere integrato in un file HTML, per arricchirne le funzionalità. Javascript ha una sintassi analoga a quella di un linguaggio compilato (relativamente simile a quella del C, del C++ e del Java), con la possibilità di utilizzare funzionalità tipiche dei linguaggi di programmazione ad alto livello e con in più anche la potenzialità di definire strutture più complesse, vicine a quelle adottate nei normali linguaggi object oriented. Un'altra caratteristica importante di Javascript consiste nel fatto che permette l'assegnazione del tipo delle variabili anche in una fase che non sia di dichiarazione, le variabili stesse vengono 33
34 convertite in maniera automatica dall'interprete. Vi sono anche altri aspetti di interesse: in Javascript lato client il codice Javascript viene eseguito sul client, quindi il server non viene sollecitato, con il vantaggio che con la presenza di script particolarmente complessi il server non verrebbe sovraccaricato. Di conseguenza però, nel caso di script che presentano una considerevole mole di dati, il tempo per lo scaricamento diventa eccessivo. Inoltre, lavorando solamente sul client, ogni informazione che presuppone un accesso a dati stoccati in un database deve essere rimandata ad un linguaggio che effettua esplicitamente la transazione per poi restituire i risultati ad una o più variabili Javascript. Il linguaggio non ha propri costrutti di input o output: un interprete Javascript si basa su un programma ospite in cui è integrato, ma la tecnologia Javascript rende disponibili alcuni strumenti per ricevere e gestire eventi legati all'input da tastiera e dal mouse, molto utili nel nostro caso. Javascript, se integrato in un browser Web, si collega tramite interfacce chiamate DOM (Document Object Model) alle applicazioni, specialmente al lato server (Web server) e al lato client (browser) delle applicazioni internet. Molti siti Web usano la tecnologia Javascript lato client per creare potenti applicazioni Web dinamiche. Il DOM ha una struttura ad albero, creata e compilata da ogni browser all'atto della visualizzazione di una pagina HTML. Un uso principale del Javascript basato su Web è la scrittura di piccole funzioni integrate nelle pagine HTML che interagiscono con il DOM del browser per compiere determinate azioni non possibili con il solo HTML statico; in questo modo è possibile controllare i valori nei campi di input, nascondere o visualizzare determinati elementi, o come nel nostro caso, cambiare alcune parti di testo o il colore di sfondo di una porzione di pagina. Gli standard DOM imposti dal W3C non sempre vengono rispettati dai vari browser: browser diversi (anche a seconda del loro motore di rendering) espongono diversi oggetti o metodi allo script (Internet Explorer è solito aderire agli standard con piccole modifiche, e tratta ad esempio l'oggetto event come globale); spesso è necessario implementare controlli aggiuntivi ad una funzione Javascript, per garantirne la compatibilità con ciascun browser. Relativamente alla velocità, si nota che rispetto a tutti gli altri, Internet Explorer è il browser più lento nel caricamento degli script, anche se una volta caricato lo script, i tempi di risposta sono buoni. 34
35 Figura 4.2: Benchmark con algoritmo di Keane in Javascript su vari browser (tempi in ms) Figura 4.3: Confronto tra i tempi di esecuzione dei benchmark nei diversi browser Cascading Style Sheet o CSS. I fogli di stile a cascata, meglio noti con l'acronimo CSS (dall'inglese Cascading Style Sheet) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti. I CSS hanno molti vantaggi, tra questi: diminuire i tempi di sviluppo e di restyling di un sito; produrre pagine più leggere, e quindi ridurre i tempi di attesa per gli utenti; rendere un sito più accessibile a screen reader, browser testuali e dispositivi alternativi; facilitare il posizionamento sui motori di ricerca. Inoltre, tra le molteplici funzionalità offerte, quelle che abbiamo utilizzato maggiormente sono: la creazione di id e classi grafiche da applicare ai tag HTML; la possibilità di applicare ed associare una serie di attributi grafici al contenuto del tag a cui sono abbinati; 35
36 utilizzo dell'ereditarietà delle classi, quindi la formattazione applicata ad un elemento ricade anche sui suoi discendenti, fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà. Un tag a cui è applicata una classe, permetterà che la stessa classe venga applicata al contenuto di tutti i suoi tag annidati (proprio in questo caso si nota una differente interpretazione da parte di alcuni browser). Non tutte le proprietà sono ereditate. Vediamo alcuni esempi: <div class= Sottolineato > Primo. <div class= Rosso > Secondo. </div> </div> <div class= Rosso > Primo. <div class= Sottolineato > Secondo. </div> </div> <div class= Sottolineato > Primo. </div> <div class= Rosso > Secondo. </div> Primo. Secondo. Primo. Secondo. Primo. Secondo. L'ereditarietà è implementata tramite la generazione fatta dal DOM, è il DOM a stabilire la parentela tra le due classi, se esiste. L'inserimento di codice CSS nelle pagine Web può essere effettuato in due modi: 1. Inserendo nel tag <head> della pagina un collegamento ad un foglio di stile esterno, cioè un file contrassegnato dall'estensione.css come negli esempi seguenti: <HTML> <head> <title>esempio</title> <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"> </head> <HTML> <head> <title>esempio</title> <style url(foglio_di_stile.css); </style> </head 2. Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css. <HTML> <head> <title>esempio</title> <style type="text/css"> codice css </style> </head> 36
37 La tipica sintassi della costruzione di una classe è:.nome_classe attributo: valore; [...] Oppure nella costruzione degli id, che possono solo essere applicati ai tag di pagine HTML: #nome_identificatore attributo: valore; [...] Utilizzando i CSS, la pagina HTML costituisce solo la base degli oggetti da inserire nella pagina Web, ed in questo modo la gestione da parte del DOM è molto più leggera e accessibile da Javascript per effettuare modifiche dinamiche della pagina Differenziazione in base al browser. Mentre lo script Javascript può essere caricato con tempi differenti, ma all'atto dell'esecuzione è uguale per tutti i browser testati, non è lo stesso per i CSS; infatti la visualizzazione è differente soprattutto per quanto riguarda i browser della famiglia Microsoft. Nonostante la mole di utenti di Mozilla e degli altri browser, stia aumentando notevolmente, Internet Explorer resta comunque il browser più usato e quindi si rende necessario l ottimizzazione dei fogli di stile per il browser di casa Microsoft. In generale si possono notare due tipi di problematiche di visualizzazione: quelle relative alla creazione leggermente diversa del DOM, e quelle relative alla differente interpretazione della visualizzazione a monitor delle istruzioni CSS. Queste differenze sono dovute a al fatto che ogni browser ha un proprio motore di rendering. In generale, il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale, ma esistono browser che si avvicinano molto a questo risultato ed altri che invece ne sono molto lontani. La lista che segue è di motori di rendering perché a loro è assegnato il compito di formattare la pagina secondo le istruzioni CSS. Trident (Internet Explorer e AOL Browser): Internet Explorer è attualmente il browser più diffuso. Explorer presenta molti bachi nella formattazione delle pagine, che le rendono diverse da quelle ottenute con altri browser, e non supporta alcune porzioni delle specifiche CSS 2. Le mancanze più gravi sono l'assenza di supporto per i contenuti generati e per il 37
38 selettore di attributo. Gli unici strumenti a disposizione dei Webdesigner sono i commenti condizionali, una particolare funzionalità di Explorer che consente di inviare istruzioni solo a questo browser. Gecko (Firefox e Netscape): Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso utilizzato nella verifica della resa delle pagine Web. Presto (Opera): anche Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un'opzione che permette all'utente di disattivare i fogli di stile o usarne di propri. KHTML (Safari e Konqueror): KHTML è attualmente il motore che offre il maggior supporto ai CSS, offrendo una parziale interpretazione anche dei CSS 3. Un esempio rappresentativo della diversa visualizzazione dei CSS da parte dei vari browser è quello delle istruzioni di formattazione come la line-height, che serve per fissare l'altezza di una o più linee di testo contenute nei tag HTML a cui è applicata, ed ha la sintassi: line-height: 10px. Il problema che si crea, è che le due famiglie di browser renderizzano a monitor questa istruzione in due modi diversi: la famiglia Microsoft renderizza in modo che tutte le linee del testo siano alte, come nell'esempio, 10px, mentre invece, la famiglia di browser non Microsoft renderizzano in modo che l'altezza totale di tutto l'insieme di righe di testo sia 10px, cioè in modo che il tag a cui è applicato questo comando CSS, sarà sempre alto 10px, indipendentemente dal numero di righe di testo che contiene (che non verranno quindi visualizzate). Inoltre, si ha anche un'altra problematica che coinvolge il DOM; esso è organizzato con una struttura gerarchica ad albero, e contiene tutti gli oggetti specificati in una data pagina HTML; questo albero viene creato e mantenuto aggiornato dal motore di rendering durante la visualizzazione della pagina stessa. Un classico esempio di albero DOM è quello generato da un browser Web nell'interpretazione di un documento HTML. Il seguente documento HTML, che avrebbe l'albero DOM: Figura 4.4: Esempio di albero generato dal DOM 38
39 39
40 Capitolo 5. Realizzazione del servizio. 5.1 Sistema di autoverifica. In questa tesi è stato realizzato un esempio di servizio, costituito da un test di autoverifica che viene sottoposto all'utente/spettatore, che può essere utilizzato in vari settori: ad esempio nel caso in cui si offrano lezioni di una determinata materia a distanza e si voglia verificare l'apprendimento dello spettatore, o per fare questionari di valutazione della soddisfazione dell'utente, o questionari a scopo statistico Scelta della grafica. La grafica essenzialmente è stata mantenuta uguale a quella dei servizi realizzati precedentemente, dagli sviluppatori di LepidaTV, in modo da non confondere l'utente, e che sia il più possibile chiara e user-friendly. Tutta la grafica deve essere mirata a essere utilizzata da una utenza che non ha necessariamente molta dimestichezza con la tecnologia informatica, e pertanto, la navigazione può essere effettuata tramite alcuni tasti. Figura 5.1: Tasti che l'utente può premere 40
41 Per quanto riguarda l'uso dei tasti: il tasto 1 serve per tornare indietro alla domanda precedente, qualora non si avesse risposto, o per visualizzare la risposta data in precedenza. Il tasto 3 permette di passare alla domanda successiva, sia se si ha risposto alla domanda attuale, sia se non lo si ha fatto. I tasti 4 e 6 permettono di scegliere quale domanda selezionare. La selezione della domanda è evidenziata da un colore diverso, più chiaro. Il tasto 5 permette di confermare la risposta che è selezionata in un determinato istante. Il tasto 8 termina il questionario, fornendo il risultato e il tempo impiegato dall'utente. Da notare che il questionario viene terminato anche nel caso in cui si proceda selezionando sempre la domanda successiva, anche senza rispondere (cioè se si continua a premere il tasto 3 fino a fine questionario). 5.2 Il file contenente le notizie. In questa tesi non abbiamo attivamente lavorato su un server, ma è stato costruito un esempio di servizio che potrebbe funzionare su un server, e a questo scopo è necessario approfondire alcuni aspetti. La parte di informazione che può essere modificata in questa applicazione è quella relativa al questionario: cioè un insieme di domande, risposte e relativi punteggi; queste possono essere acquisite da un insieme di feed RSS, fornite da aziende o organizzazioni, che attraverso alcuni passaggi vengono prelevate, formattate e visualizzate correttamente dal decoder (nel caso il servizio sia in DTT), o come nel nostro caso sul Web, ed è interessante capire come tutto questo processo avviene. Ci riferiamo al caso Web, poiché la parte DTT non è stata trattata in questa tesi. Sul server di LepidaTV risiedono, per ogni servizio, tre oggetti: lo scaricatore e creatore delle notizie per l'mhp; lo scaricatore e creatore delle notizie per il Web; il creatore automatico del JS con le notizie integrate per il web. Tutto questo processo si svolge utilizzando programmi in Java, che materialmente sono file.jar, che includono al loro interno tutte le librerie necessarie per il loro funzionamento, eseguiti con cadenza regolare da un processo di sistema (demone) residente sul server. In questo modo sul server vengono salvati dei file che contegno le notizie in arrivo dai feed RSS (cioè l'insieme delle domande e risposte del questionario, e dei punteggi). In base alle esperienze dei realizzatori della parte Web di LepidaTV, sappiamo che questi file sono di tipo binario, ed 41
42 utilizzano la classe Java RandomAccessFile, e del metodo seek(), per localizzare una determinata domanda nell'insieme (cioè un determinato feed RSS che è stato memorizzato nel file binario). Ipoteticamente, il file binario che riguarda questa applicazione avrebbe la struttura: # tot domande # tot risposte 1 Pos x 2 Pos y 3 Pos z 4 Pos w Len domanda1 domanda1 # risp per domanda1 Len risp1 risp1 valore1 Len risp2 Risp2 valore2 Len domanda2 domanda2 # risp per domanda2 Len risp1 risp1 valore1 Len risp2 Risp2 valore2 Len risp3 Risp3 valore3... Per velocizzare l'accesso al file (che conterrà al massimo ad esempio 1000 domande), si è pensato di utilizzare un file unico; la parte iniziale serve per la visualizzazione, cioè per indicare il numero totale di domande e di risposte. Nella parte di visualizzazione sarà presente una funzione per il calcolo del numero delle domande già lette/risposte. La parte in grigio è un header/directory che serve per indicizzare al meglio il file e migliorarne l'accesso in termini di velocità, e posizionamento e contiene il numero della domanda e la posizione a cui è all'interno del file dati vero e proprio. L'ultima parte del file, in bianco, è il vero e proprio file dati, i cui campi sono: Len domanda_n: lunghezza in byte della domanda. domanda_n: testo della domanda. # risp per domanda_n: numero di risposte possibili (serve per la scansione). Len risp_n: lunghezza della prima risposta. risp_n: testo della risposta valore_n: punteggio (diverso a seconda della domanda) Non è detto che esista una sola risposta giusta o che ve ne sia comunque una giusta. Per la sola parte web del servizio (cioè il nostro caso), è necessario un ulteriore passaggio di formattazione, dal file che contiene i feed RSS alla creazione di un file Javascript; è stata presa la decisione di incapsulare quindi i dati relativi a domande, risposte e punteggi, destinate al web in un file.js che contiene oltre alle componenti del questionario, anche il codice Javascript necessario al funzionamento delle appplicazioni on-line. Per fare questo è stato creato dai realizzatori, un oggetto java sul server di LepidaTV e periodicamente eseguito insieme agli altri due che, presi i file delle notizie per il Web appena creati, ne esegue un parsing per estrapolare le notizie e scriverle nel file.js sotto forma di matrici di 42
43 stringhe, così che il motore JS del browser che eseguirà detto script possa velocemente accedervi con una semplice interrogazione delle matrici stesse. La creazione e scrittura di questo oggetto non ha richiesto l introduzione di particolari librerie dato che esso si trova a dover elaborare dei normali file di testo e dare in uscita un file.js che altro non è che un altro file testuale semplicemente con una estensione diversa. 5.3 L'applicazione Web. Per la scelta dei colori, è stata seguita l'impaginazione dei servizi già presenti; i colori sono stati scelti dai realizzatori dei servizi di LepidaTV, tramite un software, il Contrast Analyzer, in grado di determinare una combinazione di colori che fosse visibile anche agli utenti affetti da cecità ad alcuni tipi di colori (Pronatopia, Deuteranopia, Tritanopia). Relativamente al funzionamento, una volta aperta la pagina index.html, questa in base alla famiglia del browser, reindirizza alla pagina associata, cioè Xlet.HTML oppure Xlet_explorer.HTML; il file HTML richiama funzioni nel file Javascript Questionario.js, e l'impaginazione e la grafica sono definiti tramite un file CSS, Xlet.css HTML. La parte HTML non è particolarmente complessa, ma serve comunque mostrare la struttura della pagina. Da notare è il file principale, index.html in cui è contenuto i reindirizzamento ai due file HTML, uno per i browser della famiglia Microsoft, e uno per quelli non Microsoft, tramite uno script in Javascript inserito nel listato: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1-transitional.dtd"> <HTML xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>reindirizzamento in base al browser</title> <SCRIPT language="javascript"> if (document.all) // Explorer document.write("<meta http-equiv=\"refresh\" content=\"3; url=./internet Explorer/XLet_explorer.HTML\">"); else // FireFox document.write("<meta http-equiv=\"refresh\" content=\"3; url=./firefox/xlet.html\">"); </SCRIPT> </head> <body> </body> </HTML> 43
44 Ad esempio, nella struttura della pagina per i browser della famiglia non Microsoft è interessante osservare la parte di listato in cui viene fatto il controllo per capire quale tasto della tastiera viene premuto: <script type="text/javascript" language="javascript" src="questionario.js"> <!---> </script> <script language="javascript"> <!-function keypress(tasto) if (tasto == 49) leftarrowaction(); else if (tasto == 51) rightarrowaction(); else if (tasto == 54) downarrowaction(); else if (tasto == 52) uparrowaction(); else if (tasto == 53) confirm(); else if (tasto == 56) terminatecalculate(); //--> </script> In cui si vede che, a ogni tasto corrisponde una funzione che sarà riportata nel file Javascript. Al caricamento della pagina viene attivata la funzione Javascript init(), e viene associato all'evento onkeydown (tasto della tastiera premuto), la funzione keypress(), di cui abbiamo accennato prima. Il restante codice riguarda la disposizione delle figure: </head> <body onload="init()" onkeydown="keypress(event.which)"> <DIV id="header"> <DIV id="logo-servizio"> <img src="logo_prova.gif"></img> <DIV id="logo-emilia"> <img src="logo_reg_b.gif"></img> <DIV id="logo-lepida"> <img src="logo_lepida.gif"></img> <DIV id="logo-emilia-pic"> <img src="logo_reg_l.gif"></img> 44
45 In questa sezione invece viene strutturata la parte in cui verranno visualizzate le domande e le risposte del questionario: <DIV id="body"> <DIV id="bodyleft"> <DIV class="cellist" align="center"> <DIV id="title-quest"> <DIV class="text-nav" align="center">questionario di autoverifica per... <DIV id="title-ask"> titolo domanda <DIV id="index"> x/y <DIV id="help"> <DIV id="content"> <DIV id="imgupleft" class="uparrow"> <DIV id="r0" CLASS="focused"> Risposta 1 <DIV id="r1" CLASS="notfocused"> Risposta 2 <DIV id="r2" CLASS="notfocused"> Risposta 3 <DIV id="r3" CLASS="notfocused"> Risposta 4 <DIV id="r4" CLASS="notfocused"> Risposta 5 <DIV id="imgdownleft" class="downarrow"> Che molto schematicamente, corrisponde a: 45
46 Per quanto riguarda la gestione del tastierino su cui si può cliccare con il mouse, a cui corrispondono i tasti sulla tastiera: <DIV id="bodyright"> <DIV id="av"> <img src="lepidatv_grande.gif"></img> <DIV id="navback1"> <DIV class="text-nav">domanda prec/succ <DIV class="leftbutton"> <img src="leftarrownav.gif"></img> <img src="one.jpg" onclick="leftarrowaction()"></img> <DIV class="rightbutton"> <img src="three.jpg" onclick="rightarrowaction()"></img> <img src="rightarrownav.gif"></img> <DIV id="navback2"> <DIV class="text-nav">scegli la risposta su/giù <DIV class="upbutton"> <img src="four.jpg" onclick="uparrowaction()"></img> <img src="uparrownav.gif"></img> <DIV class="downbutton"> <img src="six.jpg" onclick="downarrowaction()"></img> <img src="downarrownav.gif"></img> <DIV id="navback3"> <DIV class="text-nav">conferma risposta <DIV class="confirmbutton"> <img src="five.jpg" onclick="confirm()"></img> <DIV class="text-nav">termina <DIV class="terminatebutton"> <img src="eight.jpg" onclick="terminatecalculate()"></img> In cui, molto semplicemente: CSS. Per quanto riguarda il file CSS, come già detto nel capitolo 4, varia rispetto alle due famiglie di browser, relativamente alla posizione e alla dimensione di alcuni oggetti. Il foglio CSS è strutturato in maniera gerarchica, in modo da seguire il più possibile la struttura e la composizione del file 46
47 HTML. È stato creato un file CSS, a partire dai contenitori HTML fino ad arrivare agli oggetti più particolari, in modo da rendere la creazione del DOM abbinato alla pagina il più uniforme possibile tra i due casi, e fare in modo che il CSS venisse interpretato correttamente dalle due famiglie di browser Javascript. La creazione della parte Javascript è avvenuta per gradi, ipotizzando la costruzione di un file che contiene le domande e le risposte del questionario, e di alcune matrici: //per indicizzazione random vectrandomindex= new Array(); randomindex=0; //matrice che contiene il titolo del questionario titlequest= new Array("Questionario di verifica sul libro sistemi operativi e i sistemi informativi aziendali."); //matrice che contiene il numero di risposte per la domanda in posizione corrispondente numanswers= new Array(4, 2); // vettore che contiene i flag per capire se una domanda è già stata risposta o no FlagAnswers = new Array(); //matrice delle domande.ogni matrice contiene una domanda, alla posizione corrisponedente si trovano n risposte matasks = new Array(); matasks[0] = new Array("La gestione a pagine è un concetto che si puo' applicare:"); matasks[1] = new Array("Vero o falso: il file system comprime gli archivi per occupare meno spazio su disco"); // matrice con le risposte alle domande in posizione corrispondente matanswers = new Array(); matanswers[0] = new Array("al'impiego dello spazio su disco", "all'impiego della memoria di lavoro", "alla gestione delle periferiche", "all'organizzazione dei file"); matanswers[1] = new Array("vero", "falso"); //matrice che contengono il punteggio alla risposta in posizione corrispondente matscore = new Array(); matscore[0] = new Array(-1, 1, 3, 0); matscore[1] = new Array(+1, -1); matscore[2] = new Array(0, 1, 2, 3, 4); matrcalcscore = new Array(); // array di dimensione numansw per il calcolo del punteggio In pratica, esistono tre matrici: matasks, che contiene le domande del questionario; matanswers, che contiene le risposte associate a ogni domanda del questionario. Domande e risposte sono indicizzate allo stesso modo, c'è una corrispondenza: per ogni domanda ci possono essere una o più risposte; matscore, che contiene i punteggi per ogni risposta. 47
48 Sono stati creati anche dei vettori, cioè: vectrandomindex, che contiene una randomizzazione degli indici delle domande. In pratica si utilizza un indice (index) per scorrere questo vettore sequenzialmente, si preleva nella posizione corrispondente al valore di index, un valore numerico che rappresenta un indice randomizzato (randomindex), che rappresenta il numero della domanda da visualizzare; numanswers, vettore composto dal numero di risposte corrispondente a ogni domanda, serve per la visualizzazione. Non è randomizzato, si basa sull'indice index. FlagAnswers, indica se a una determinata domanda è già stata data una risposta. Non è randomizzato, si basa sull'indice index. Relativamente alla generazione del codice Javascript, effettuata ipoteticamente dal server, si ha che tutte le matrici ed i vettori devono essere rigenerate in base alle modifiche dei feed RSS. Schematicamente: Appena viene caricata la pagina HTML, viene richiamata la funzione init(), che provvede a creare il vettore randomizzato (vettrandomindex) e ad azzerare gli indici, richiama la funzione per il 48
49 calcolo del tempo timedcount() e per l'inserimento della domanda e delle risposte, setaskanswer(). Nel caso in cui vengano premuti i tasti 1 e 3 vengono richiamate rispettivamente le funzioni leftarrowaction() e rightarrowaction(), che servono per cambiare le domande e risposte, tramite l'incremento di un indice e il richiamo di setaskanswer(); inoltre vengono fatti dei controlli per la visualizzazione e l'inserimento delle risposte nei box. Quando invece l'utente scorre le risposte relative a una determinata domanda, lo fa utilizzando i tasti 4 e 6, che se premuti tramite tastiera o mouse, richiamano le funzioni, rispettivamente, uparrowaction() e downarrowaction(). Nel caso in cui venga premuto il tasto 5, viene confermata la domanda tramite la funzion confirm(), che modifica il vettore FlagAnswer(), per indicare che la domanda ha avuto risposta, e viene calcolato il punteggio. Infine se l'utente spinge il tasto 8, viene richiamata la funzione terminatecalculate(), che calcola il punteggio complessivo e lo visualizza all'utente, accanto al tempo impiegato per terminare il risultato. Da notare, è l'uso della funzione document.getelementbyid, che ha avuto un ruolo determinante nella realizzazione: document.getelementbyid("r0").style.background='#80ffc4' document.getelementbyid("r0").style.color='#000000' Questa funzione è in grado di recuperare l'elemento con attributo ID pari a R0 e di modificarne prima il colore di background e poi il colore del testo, permettendo di cambiare la formattazione di un elemento della pagina HTML associata, tramite il foglio CSS. Inoltre è stata anche usata la funzione DivElement.InnerHTML: Var DivElement= document.getelementbyid("title-quest") DivElementTitQuest.innerHTML=titleQuest; Funzione in grado di inserire all'interno di un DIV specifico della pagina HTML, il testo contenuto in una determinata variabile (come nell'esempio) o specificato direttamente tra doppi apici. Queste due funzioni permettono di cambiare al volo il contenuto di un DIV, e sono state usate per aggiungere il contenuto di matrici e vettori in modo che potessero essere visualizzati sulla pagina HTML. Al di la del funzionamento per passi dell'applicazione, è interessante analizzare la problematica principale dello sviluppo della parte Javascript di questa tesi: lo slittamento delle varie risposte all'interno dei box. Infatti, la pagina HTML è stata strutturata in modo da avere una area per il titolo del questionario, una per il titolo della domanda (e relative visualizzazioni del numero della domanda e del tempo), e 5 box verticali che contengono il testo delle risposte per ogni domanda. Nel caso in cui il numero di risposte sia minore o uguale al numero di box, non si hanno problemi 49
50 di grande entità, poiché si deve semplicemente implementare uno slittamento del focus: cioè cambiare dinamicamente il colore del box che viene selezionato (tramite un incremento parallelo dell'indice jr e la modifica dei colori via Javascript). Diverso è il caso in cui il numero di risposte supera quello dei box: in quel caso di deve slittare anche il testo, e cambiare anche le frecce che indicano quando è possibile scorrere altre domande. Questo tipo di problematica emerge nello scorrimento verticale delle risposte, pertanto nelle funzioni uparrowaction() e downarrowaction(); vediamo in particolare una delle due funzioni, poiché il funzionamento è analogo e si tratta in un caso di incrementare un indice e nell'altro di decrementarlo. Si deve ricordare, che all'atto del caricamento della pagina HTML viene richiamata la funzione init(), che richiama a sua volta la funzione per settare le risposte (setaskanswers()), in modo che vengano visualizzate le prime 5 risposte per ogni domanda, ed il focus sia impostato sulla prima. Pertanto, esiste un indice (jr) che serve per effettuare lo scorrimento, e inizialmente, viene posto a zero, e successivamente incrementato man mano che l'utente scorre le risposte. function downarrowaction() if ((terminateflag==0)&&((flaganswers[index])==0)) 1 numansw = numanswers[randomindex]; //num max risposte. if ((numansw<=numbox)&&(jr<numansw-1)) // non c'è slittamento 2 // not focused document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr+1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' if (numansw>numbox) //qui si arriva con jr=4. if (jr<numbox-1) 3 // not focused document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr+1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' jslide=1; else if ((jr>=(numbox-1))&&(jr<=numansw-1)) 4 jr=jr+1; if ((jr==(numbox))&&(matanswers[randomindex][jr]!=undefined)) setaskanswer(index, jslide); 5 if ((jr>=(numbox+1))&& (matanswers[randomindex][jr]!=undefined) 6 if ((numansw-jr)>=0) jslide=jslide+1; setaskanswer(index, jslide); if (jr>numansw-1) jr=numansw-1; 50
51 In pratica, questa funzione viene eseguita solo se l'utente non ha ancora terminato il questionario, e se non è stata già data la risposta alla domanda in questione ( 1 ), altrimenti lo scorrimento è bloccato. Come già detto quindi, se in numero di risposte è inferiore o uguale al numero dei box, si cambia semplicemente il focus ( 2 ), cambiando il colore del box che corrisponde alla domanda, ed incrementando l'indice jr che serve per scorrere la matrice matanswers. Nel caso opposto invece dividiamo la trattazione in due sotto-casi, se l'indice (jr, variabile globale), che viene utilizzata per scorrere la matrice matanswers nell'indice relativo alle rispostee indica la posizione nella matrice, ha un valore minore del numero di box, si cambia semplicemente il focus (come nel caso precedente). Appena l'indice raggiunge o supera il numero dei box, occorre scorrere le domande, per mostrare quelle successive ( 4 ), e creare un nuovo indice, jslide, per scorrere le domande successive, in modo che possa essere utilizzato per riscalare solo il focus, mentre la matrice viene trattata con l'indice jr; questo perché jr e jslide hanno valori diversi, jr è sicuramente più grande del numero di box, mentre jslide no. È stata divisa la trattazione nel caso in cui jr è pari a 5 ( 5 ) o superiore a 6 ( 6 ), poiché quando si scorre, nel caso in cui si ha 5, basta utilzzare jslide pari a 1, mentre per casi maggiori di 5 si deve incrementarlo ogni volta. 51
52 Conclusioni e sviluppi futuri. In questa tesi abbiamo fatto un largo uso delle tecnologie HTML, Javascript e CSS, approfondendo anche pregi e limiti di questi linguaggi, e dei vari browser in commercio; abbiamo approfondito la conoscenza del DTT, dal punto di vista delle telecomunicazioni, studiando lo standard DVB e MHP. È stato compreso come è stata costruita fase per fase, dagli stessi realizzatori, sia la parte in DTT che web di LepidaTV, fatto determinante per capire come realizzare questa tesi. Nonostante la semplicità concettuale dell'applicazione realizzata in questa tesi, il problema principale è stato quello dello scorrimento, che ha necessitato molte prove per trovare un metodo giusto che lo facesse sembrare naturale e che fosse comunque compatibile con una grafica semplice e una possibile implementazione duale in DTT. È stata affrontata la programmazione da un punto di vista differente da quello visto finora: mentre in molti altri casi la problematiche richiedono un uso semplice e diretto degli oggetti messi a disposizione di un linguaggio di programmazione, in questo caso sono stati utilizzati componenti di base (vettori, matrici e indici), e grazie alla composizione di insieme con la pagina HTML attraverso l'uso di CSS, si è arrivato a un risultato più complesso. Questo è stato fatto per mantenere la semplicità e la leggerezza caratteristica della parte Web di LepidaTV, ma anche in riferimento alla parte in DTT. Per quanto riguarda gli sviluppi futuri, questa tesi può essere implementata al lato pratico sul server di LepidaTV, ovviamente aggiungendo la parte in Java che manca, che riguarda la gestione dei feed RSS e la creazione dei file.js generati in maniera automatica per il lato Web (mentre in questa tesi sono stati costruiti manualmente, aggiungendoli al listato). Inoltre può essere costruita l'implementazione DTT di questa applicazione, magari prima effettuando delle prove in simulazione. Si potrebbero ancora fare miglioramenti per quanto riguarda lo scorrimento, renderlo ancora meno meccanico. Inoltre si potrebbe adattare la tesi alla nuova veste grafica di LepidaTV, ed arricchirla con ulteriori funzioni, o ottimizzarne la grafica. 52
53 53
54 Appendice 1: Listati completi Il listato della pagina HTML è: <HTML> <head> <title>xlet - RSS - Sistema di autoverifica</title> <link rel="stylesheet" type="text/css" href="xlet.css"> <script type="text/javascript" language="javascript" src="questionario.js"> <!---> </script> <script language="javascript"> <!-function keypress(tasto) if (tasto == 49) leftarrowaction(); else if (tasto == 51) rightarrowaction(); else if (tasto == 54) downarrowaction(); else if (tasto == 52) uparrowaction(); else if (tasto == 53) confirm(); else if (tasto == 56) terminatecalculate(); //--> </script> </head> <body onload="init()" onkeydown="keypress(event.which)"> <DIV id="header"> <DIV id="logo-servizio"> <img src="logo_prova.gif"></img> <DIV id="logo-emilia"> <img src="logo_reg_b.gif"></img> <DIV id="logo-lepida"> <img src="logo_lepida.gif"></img> <DIV id="logo-emilia-pic"> <img src="logo_reg_l.gif"></img> <DIV id="body"> <DIV id="bodyleft"> <DIV class="cellist" align="center"> <DIV id="title-quest"> <DIV class="text-nav" align="center">questionario di autoverifica per... <DIV id="title-ask"> titolo domanda <DIV id="index"> x/y <DIV id="help"> <DIV id="content"> <DIV id="imgupleft" class="uparrow"> <DIV id="r0" CLASS="focused"> Risposta 1 <DIV id="r1" CLASS="notfocused"> Risposta 2 <DIV id="r2" CLASS="notfocused"> Risposta 3 <DIV id="r3" CLASS="notfocused"> Risposta 4 <DIV id="r4" CLASS="notfocused"> Risposta 5 <DIV id="imgdownleft" class="downarrow"> <DIV id="bodyright"> <DIV id="av"> <img src="lepidatv_grande.gif"></img> 54
55 <DIV id="navback1"> <DIV class="text-nav">domanda prec/succ <DIV class="leftbutton"> <img src="leftarrownav.gif"></img> <img src="one.jpg" onclick="leftarrowaction()"></img> <DIV class="rightbutton"> <img src="three.jpg" onclick="rightarrowaction()"></img> <img src="rightarrownav.gif"></img> <DIV id="navback2"> <DIV class="text-nav">scegli la risposta su/giù <DIV class="upbutton"> <img src="four.jpg" onclick="uparrowaction()"></img> <img src="uparrownav.gif"></img> <DIV class="downbutton"> <img src="six.jpg" onclick="downarrowaction()"></img> <img src="downarrownav.gif"></img> <DIV id="navback3"> <DIV class="text-nav">conferma risposta <DIV class="confirmbutton"> <img src="five.jpg" onclick="confirm()"></img> <DIV class="text-nav">termina <DIV class="terminatebutton"> <img src="eight.jpg" onclick="terminatecalculate()"></img> </body> </HTML> 55
56 Il listato della pagina Javascript è: // N.B. # = not focused // #80FFC4 = focused jslide=1; jr=0; // indice per la corretta posizione in matanswers UpArrowFlag=0; // flag per le frecce DownArrowFlag=0; terminateflag=0; // flag per quando il questionario è terminato confirmflag=0; //flag per la conferma della risposta totask=11; //numero di domande totali. 6 = domande che vanno da 0 a 5 numbox=5; //numero di caselle del box index=0; //conteggio del tempo minutes=0; seconds=0; // per la tandomizzazione vectrandomindex= new Array(); randomindex=0; //matrice che contiene il titolo del questionario titlequest= new Array("Questionario di verifica sul libro sistemi operativi e i sistemi informativi aziendali."); //matrice che contiene il numero di risposte per la domanda in posizione corrispondente numanswers= new Array(4, 2, 5, 6, 3, 8, 4, 4, 5, 6, 7); // vettore che contiene i flag per capire se una domanda è già stata risposta o no FlagAnswers = new Array(); //matrice delle domande.ogni matrice contiene una domanda, alla posizione corrisponedente si trovano n risposte matasks = new Array(); matasks[0] = new Array("La gestione a pagine è un concetto che si puo' applicare:"); matasks[1] = new Array("Vero o falso: il file system comprime gli archivi per occupare meno spazio su disco"); matasks[2] = new Array("Per mezzo di quali elementi software il sistema operativo gestisce i dispositivi collegati al computer?"); matasks[3] = new Array("Come si puo' chiamare un dispositivo corredato del software che ne permette la gestione?"); matasks[4] = new Array("Un sistema operativo multitasking permette sempre di:"); matasks[5] = new Array("Che caratteristiche ha sempre un programma segmentato"); matasks[6] = new Array("Che cosa si intende con sistema distribuito?"); matasks[7] = new Array("Perchè la rete Arpanet avrebbe potuto funzionare anche in caso di conflitto nucleare?"); matasks[8] = new Array("Quale delle seguenti definizioni corrisponde al termine download?"); matasks[9] = new Array("Quale tra le seguenti afermazioni descrive meglio le caratteristiche del linguaggio HTML?"); matasks[10] = new Array("Per il trasferimento dei file contenenti le pagine web, dal disco al proprio computer al server Internet dove devono essere pubblicate, si usa:"); // matrice con le risposte alle domande in posizione corrispondente matanswers = new Array(); matanswers[0] = new Array("al'impiego dello spazio su disco", "all'impiego della memoria di lavoro", "alla gestione delle periferiche", "all'organizzazione dei file"); matanswers[1] = new Array("vero", "falso"); matanswers[2] = new Array("elaboratori di canale", "device driver", "macchine virtuali", "buffer di i/o", "simulatori"); matanswers[3] = new Array("elaboratore di canale", "macchina virtuale", "device driver", "black box", "hard disk", "ram"); matanswers[4] = new Array("far lavorare contemporaneamente diversi utenti", "lavorare usando interfacce grafiche", "eseguire contemporaneamente piu' programmi"); matanswers[5] = new Array("e' scritto in linguaggio C", "e' scritto da piu' programmatori", "si costruisce a partire da oggetti collegabili", "il suo sorgente sta su computer diversi", "e' costruito in linguaggi diversi", " costruito solo da procedure", "si legge meglio", " strutturato a segmenti"); matanswers[6] = new Array("un sistema in cui le risorse sono distribuite", "un sistema in cui gli elementi sono distribuiti", "un insisme di elementi che hanno in comune alcuni attributi", "un insieme di computer che condividono un collegamento tra loro"); matanswers[7] = new Array("perche' in Internet la lettura delle pagine e' sempre sequenziale", "perche' Internet permette la lettura non sequenziale seguendo collegamenti sia interni al documento che esterni", "perche' Internet permette di distribuire su vari server le informazioni che si vogliono presentare", "perche' internet presenta una architettura distribuita"); matanswers[8] = new Array("l'operazione per spedire un messaggio di posta elettronica ad un altro 56
57 computer", "l'operazione di ricerca dei siti Internet mediante parole chiave", "l'operazione di trasferimento dei file dal proprio computer ad un server interno", "l'operazione per partecipare ad una videoconferenza", "l'operazione di trasferimento dei file da un server Internet al proprio computer"); matanswers[9] = new Array("e' un linguaggio di programmazione simile al linguaggio Pascal", "e' un linguaggio di formazione della pagina diverso da un linguaggio di programmazione", "e' un linguaggio di programmazione ma diverso da Pascal", "e' un linguaggio di formazione della pagina simile al linguaggio Pascal", "e' un linguaggio interpretato, non compilato", "e' un linguaggio basato sull'uso di tag"); matanswers[10] = new Array("un programma di posta elettronica", "un programma browser", "un programma HTTP", "un programma FTP", "un programma di filesharing", "un programma di video editing", "nessuna delle risposte precedenti"); //matrici che contengono il punteggio alla risposta in posizione corrispondente matscore = new Array(); matscore[0] = new Array(-1, 1, 3, 0); matscore[1] = new Array(+1, -1); matscore[2] = new Array(0, 1, 2, 3, 4); matscore[3] = new Array(-1, 0, 3, 5, 1, -3); matscore[4] = new Array(0, 1, 2); matscore[5] = new Array(-1, 0, 3, 5, 1, -3, 1, 2); matscore[6] = new Array(1, 0, -1, 2); matscore[7] = new Array(-2, -1, 2, +1); matscore[8] = new Array(-1, -2, -3, 0, 3); matscore[9] = new Array(-2, 1, -1, 1, 2, 3); matscore[10] = new Array(-5, 1, 3, -1, 0, -4, 3); matrcalcscore = new Array(); totscore=0; // array di dimensione numansw // funzione per settare le frecce function SetArrow(UpArrowFlag, DownArrowFlag) var BoxArrowDown = document.getelementbyid("imgdownleft"); var BoxArrowUp = document.getelementbyid("imgupleft"); // freccia su if (UpArrowFlag==1) BoxArrowUp.innerHTML="<img src=\"uparrow.gif\"></img>"; else if(uparrowflag==0) BoxArrowUp.innerHTML=""; // freccia giu if (DownArrowFlag==1) BoxArrowDown.innerHTML="<img src=\"downarrow.gif\"></img>"; else if(downarrowflag==0) BoxArrowDown.innerHTML=""; //cambia la risposta e la domanda. da zero. come init senza lo scorrimento function setaskanswer(index, jk) var DivElement = document.getelementbyid("index"); var DivElementTitQuest = document.getelementbyid("title-quest"); var DivElementTit = document.getelementbyid("title-ask"); var Box0 = document.getelementbyid("r0"); var Box1 = document.getelementbyid("r1"); var Box2 = document.getelementbyid("r2"); var Box3 = document.getelementbyid("r3"); var Box4 = document.getelementbyid("r4"); // genero l'indice che mi da la randomizzazione. indice del vettore con valori random randomindex= vectrandomindex[index]; // non ci sono domande con 0 risposte! se no aggiungere 1 condizione all'if if ((totask<=0) (totask-index<0) (index<0)) if ((index<0)&&(terminateflag==0)) DivElement.innerHTML=""; DivElementTit.innerHTML=""; Box0.innerHTML= ""; Box1.innerHTML= ""; Box2.innerHTML= ""; Box3.innerHTML= ""; Box4.innerHTML= ""; 57
58 else if else ((index<0)&&(terminateflag==1)) index=0; numansw = numanswers[randomindex]; //riscalo index solo x visualizzazione DivElement.innerHTML= (index+1) + "/" + totask; DivElementTitQuest.innerHTML=titleQuest; if (matasks[randomindex]!=undefined) DivElementTit.innerHTML=matAsks[randomIndex]; else DivElementTit.innerHTML=""; Box0.innerHTML= ""; Box1.innerHTML= ""; Box2.innerHTML= ""; Box3.innerHTML= ""; Box4.innerHTML= ""; //funzioni per il setting delle frecce if (numansw>numbox) SetArrow(0, 1); else SetArrow(0, 0); if (jr>(numbox-1)) SetArrow(1, 1); if (jr==(numansw-1)) SetArrow(1, 0); //box 0 if ((matanswers[randomindex][0+jk])!= undefined) Box0.innerHTML= matanswers[randomindex][0+jk]; else Box0.innerHTML=""; // box 1 if ((matanswers[randomindex][1+jk])!= undefined) Box1.innerHTML= matanswers[randomindex][1+jk]; else Box1.innerHTML=""; // box 2 if ((matanswers[randomindex][2+jk])!= undefined) Box2.innerHTML= matanswers[randomindex][2+jk]; else Box2.innerHTML=""; // box 3 if ((matanswers[randomindex][3+jk])!= undefined) Box3.innerHTML= matanswers[randomindex][3+jk]; else Box3.innerHTML=""; // box 4 if ((matanswers[randomindex][4+jk])!= undefined) Box4.innerHTML= matanswers[randomindex][4+jk]; else Box4.innerHTML=""; //caricamento inizializzazionesenza randomizzazione function init() //prevederne una versione randomizzata jr=0; index=0; // inizializzo il vettore che contiene i flag-risposte //controllo anti-ripetizione for (i=0; i<totask; i++) FlagAnswers[i]=0; help= Math.floor(Math.random()* totask); helpflag=0; j=0; while((j<i)&&(helpflag==0)) if (vectrandomindex[j]==help) 58
59 j++; helpflag=1; // sono diversi, scorro if (helpflag==0) vectrandomindex[i]=help; if (helpflag==1) //decremento così all'iterazione successiva rifà la randomizzazione i--; timedcount(); setaskanswer(index, jr); // funzione che passa alla prossima domanda. se non viene data 1 risposta e' obbligo confermare? function rightarrowaction() confirmflag=0; if ((totask-index-1)!=0) index=index+1; jr=0; resetfocus(); setaskanswer(index, jr); //scostamento nullo.resetto focus su 1 risposta else terminatecalculate(); index=0; if ((terminateflag==1) ((FlagAnswers[index])==0)) if (terminateflag==1) var Divjr = document.getelementbyid("help"); Divjr.innerHTML="Questionario terminato. Il tuo punteggio e': "+ totscore + ", con tempo: " + minutes + " : " + seconds; //visualizzo le risposte date dall'utente if (matrcalcscore[index]<=numbox-1) setaskanswer(index, 0); if (matrcalcscore[index]==0)// la prima risposta // focused document.getelementbyid("r0").style.background='#80ffc4' document.getelementbyid("r0").style.color='#000000' // not focused document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==1)// la prima risposta // focused document.getelementbyid("r1").style.background='#80ffc4' document.getelementbyid("r1").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==2)// la prima risposta // focused document.getelementbyid("r2").style.background='#80ffc4' document.getelementbyid("r2").style.color='#000000' 59
60 // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==3)// la prima risposta // focused document.getelementbyid("r3").style.background='#80ffc4' document.getelementbyid("r3").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==4)// la prima risposta // focused document.getelementbyid("r4").style.background='#80ffc4' document.getelementbyid("r4").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' if (matrcalcscore[index]>numbox-1) numansw = numanswers[randomindex]; //mum max risposte. if (matrcalcscore[index]>numbox-1) if (matrcalcscore[index]>=5)// la prima risposta // focused document.getelementbyid("r4").style.background='#80ffc4' document.getelementbyid("r4").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.geelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' if (matrcalcscore[index]==5) setaskanswer(index, 1); if (matrcalcscore[index]==6) setaskanswer(index, 2); if if if if (matrcalcscore[index]==7) setaskanswer(index, 3); (matrcalcscore[index]==8) setaskanswer(index, 4); (matrcalcscore[index]==9) setaskanswer(index, 5); (matrcalcscore[index]==10) setaskanswer(index, 6); 60
61 function leftarrowaction() confirmflag=0; if (index>0) index=index-1; jr=0; resetfocus(); setaskanswer(index, jr); //scostamento nullo.resetto focus su 1 risposta if ((terminateflag==1) ((FlagAnswers[index])==0)) if (terminateflag==1) var Divjr = document.getelementbyid("help"); Divjr.innerHTML="Questionario terminato. Il tuo punteggio e': "+ totscore + ", con tempo: " + minutes + " : " + seconds; //visualizzo le risposte date dall'utente if (matrcalcscore[index]<=numbox-1) setaskanswer(index, 0); if (matrcalcscore[index]==0)// la prima risposta // focused document.getelementbyid("r0").style.background='#80ffc4' document.getelementbyid("r0").style.color='#000000' // not focused document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==1)// la prima risposta // focused document.getelementbyid("r1").style.background='#80ffc4' document.getelementbyid("r1").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==2)// la prima risposta // focused document.getelementbyid("r2").style.background='#80ffc4' document.getelementbyid("r2").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==3)// la prima risposta // focused document.getelementbyid("r3").style.background='#80ffc4' document.getelementbyid("r3").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' 61
62 document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' if (matrcalcscore[index]==4)// la prima risposta // focused document.getelementbyid("r4").style.background='#80ffc4' document.getelementbyid("r4").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' if (matrcalcscore[index]>numbox-1) numansw = numanswers[randomindex]; //mum max risposte. if (matrcalcscore[index]>numbox-1) if (matrcalcscore[index]>=5)// la prima risposta // focused document.getelementbyid("r4").style.background='#80ffc4' document.getelementbyid("r4").style.color='#000000' // not focused document.getelementbyid("r0").style.background='#000036' document.getelementbyid("r0").style.color='#c0ffff' document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' if (matrcalcscore[index]==5) setaskanswer(index, 1); if (matrcalcscore[index]==6) setaskanswer(index, 2); if (matrcalcscore[index]==7) setaskanswer(index, 3); if (matrcalcscore[index]==8) setaskanswer(index, 4); if (matrcalcscore[index]==9) setaskanswer(index, 5); if (matrcalcscore[index]==10) setaskanswer(index, 6); // funzione che scorre le risposte in basso function downarrowaction() if ((terminateflag==0)&&((flaganswers[index])==0)) numansw = numanswers[randomindex]; //mum max risposte. if ((numansw<=numbox)&&(jr<numansw-1)) // non c'è slittamento // not focused document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr+1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' //qui si arriva con jr=4. if (numansw>numbox) if (jr<numbox-1) // not focused 62
63 =undefined)) document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr+1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' jslide=1; else if ((jr>=numbox-1)&&(jr<=numansw-1)) jr=jr+1; if ((jr==numbox)&&(matanswers[randomindex][jr]!=undefined)) setaskanswer(index, jslide); if ((jr>=(numbox+1))&&(matanswers[randomindex][jr]! if ((numansw-jr)>=0) jslide=jslide+1; setaskanswer(index, jslide); if (jr>numansw-1) jr=numansw-1; // funzione che scorre le risposte in alto function uparrowaction() if ((terminateflag==0)&&((flaganswers[index])==0)) numansw = numanswers[randomindex]; //num max risposte. if ((numansw<=numbox)&&(jr>0)) // non c'è slittamento // not focused document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr-1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' if ((numansw>numbox)&&(jr>0)) if (jr<=numbox-1) // not focused document.getelementbyid("r"+jr).style.background='#000036' document.getelementbyid("r"+jr).style.color='#c0ffff' jr= jr-1; // focused document.getelementbyid("r"+jr).style.background='#80ffc4' document.getelementbyid("r"+jr).style.color='#000000' setaskanswer(index, jslide); else if ((jr>numbox-1)&&(jr<=numansw-1)) if ((jr==numbox)&&(matanswers[randomindex][jr]!=undefined)) jslide= jslide-1; jr=jr-1; setaskanswer(index, jslide); if ((jr>=(numbox+1))&&(matanswers[randomindex][jr]! =undefined)) if ((numansw-jr)>=0) jslide=jslide-1; setaskanswer(index, jslide); jr= jr-1; // funzione per la conferma di una risposta function confirm() 63
64 if (terminateflag==0) FlagAnswers[index]=1; matrcalcscore[index]= jr; totscore= totscore+ matscore[randomindex][jr]; // funzione per terminare il questionario function terminatecalculate() if (terminateflag==0) terminateflag=1; // metto index a -1, così incrementando in setaskanswer sarà a 0 index=-1; rightarrowaction(); //funzione richiamata per resettare il focus sulla prima risposta function resetfocus() jslide=1; // focused document.getelementbyid("r0").style.background='#80ffc4' document.getelementbyid("r0").style.color='#000000' // not focused document.getelementbyid("r1").style.background='#000036' document.getelementbyid("r1").style.color='#c0ffff' document.getelementbyid("r2").style.background='#000036' document.getelementbyid("r2").style.color='#c0ffff' document.getelementbyid("r3").style.background='#000036' document.getelementbyid("r3").style.color='#c0ffff' document.getelementbyid("r4").style.background='#000036' document.getelementbyid("r4").style.color='#c0ffff' // funzione per il conteggio del tempo in minuti e secondi function timedcount() var Divjr = document.getelementbyid("help"); if (terminateflag==0) seconds=seconds+1; if (seconds>=60) seconds = seconds-60; minutes = minutes+1; Divjr.innerHTML="Tempo "+ minutes + " : " + seconds; settimeout("timedcount()", 1000); else clearcount(); 64
65 Il listato della parte in CSS: body background-color:#ffffff; #header width: 726px; #logo-servizio float: left; background-color:#000000; border-bottom-style:solid; border-bottom-color:#ffffff; border-bottom-width:1px; #logo-emilia float: left; background-color:#000000; border-bottom-style:solid; border-bottom-color:#ffffff; border-bottom-width:1px; #logo-lepida float: left; background-color:#000000; height:70px; border-bottom-style:solid; border-bottom-color:#ffffff; border-bottom-width:1px; #logo-emilia-pic float: left; background-color:#000000; width:80px; height:70px; border-bottom-style:solid; border-bottom-color:#ffffff; border-bottom-width:1px; #body width:726px; height:496px; clear:left; background-color:#003333; font-family: Georgia, "Times New Roman", serif; #bodyright float:left; border-left-style:solid; border-left-color:#ffffff; border-left-width:1px; height:100%; #bodyleft float:left;.cellist clear:left;.uparrow width:40px; 65
66 .downarrow height:25px; float:right; position:relative; top:30px; border-style:solid; border-color:#ffffff; border-width:1px; color:#c0ffff; line-height:40px; background-color:#000036; width:40px; height:25px; float:right; position:relative; top:60px; border-style:solid; border-color:#ffffff; border-width:1px; color:#c0ffff; line-height:40px; background-color:#000036;.focused.notfocused width:390px; height:55px; float:left; left:10px; top:30px; text-align:left; position:relative; background-color:#80ffc4; border-style:solid; border-color:#ffffff; border-width:1px; color:#000000; line-height:40px; font-size: 12px; line-height: 2; width:390px; height:55px; float:left; left:10px; top:30px; text-align:left; position:relative; border-style:solid; border-color:#ffffff; border-width:1px; color:#c0ffff; line-height:40px; background-color:#000036; font-size: 12px; line-height: 2; #av padding:5px; float:left; #title-ask border-top-style:solid; border-top-color:#ffffff; 66
67 border-top-width:1px; border-left-style:solid; border-left-color:#003333; border-left-width:5px; border-right-style:solid; border-right-color:#003333; border-right-width:5px; clear:left; text-align:center; font-weight:bold; height:40px; width:445px; color:#c0ffff; %line-height:40px; font-size:12px; line-height: 2; #title-quest background-color:#003333; color:#c0ffff; text-align:center; font-weight:bolder; font-size:15px; height:60px; clear:left; width:445px; line-height: 2; font-variant: small-caps; #content #help.text-nav.leftbutton padding-top: 5px; border-top-style:solid; border-top-color:#ffffff; border-top-width:1px; border-left-style:solid; border-left-color:#003333; border-left-width:5px; border-right-style:solid; border-right-color:#003333; border-right-width:5px; clear:left; text-align:center; height:300px; width:445px; %line-height:240px; color: #C0FFFF; color: #C0FFFF; font-size:12px; text-align:center; font-weight:bold; font-size: 14px; color:#c0ffff; clear:left; padding:2px; float:left; left:40px; position:relative; 67
68 .rightbutton float:left; left:70px; position:relative;.upbutton.downbutton float:left; left:74px; position:relative; float:left; top:35px; left:10px; position:relative;.confirmbutton float:left; left:74px; position:relative;.terminatebutton float:left; left:72px; top:3px; position:relative; #index text-align:right; font-weight:bold; color:#c0ffff; clear:left; padding:5px; font-size:15px; #navback1 background-color:#000036; height: 290px; #navback2 background-color:#005252; height: 95px; #navback3 background-color:#003333; height: 30px; 68
69 Appendice 2: Schermate dei vari browser a confronto. In Windows abbiamo: Mozilla Firefox 3 Internet Explorer 8 69
70 Flock 2.5 Opera
71 Safari 4 In Linux (Ubuntu 9.04) abbiamo, con Mozilla Firefox: 71
72 In Kubuntu 9.04, con Konqueror: 72
Studio di Tecnologie ed Architetture DVB e Sviluppo di un Dimostratore di una Piattaforma di Teleassistenza
Studio di Tecnologie ed Architetture DVB e Sviluppo di un Dimostratore di una Piattaforma di Teleassistenza Facoltà di Ingegneria Corso di laurea in Ingegneria Informatica (LS) Tesi in Progettazione del
DettagliCreare una Rete Locale Lezione n. 1
Le Reti Locali Introduzione Le Reti Locali indicate anche come LAN (Local Area Network), sono il punto d appoggio su cui si fonda la collaborazione nel lavoro in qualunque realtà, sia essa un azienda,
DettagliIl Digital Signage. Utilizzi. Il Digital Signage
Il Digital Signage Il Digital Signage Il digital signage è una forma di pubblicità, anche nota in Italia come avvisi pubblicitari digitali, dove i contenuti vengono mostrati ai destinatari attraverso schermi
DettagliGestione delle informazioni necessarie all attività di validazione degli studi di settore. Trasmissione degli esempi da valutare.
Gestione delle informazioni necessarie all attività di validazione degli studi di settore. Trasmissione degli esempi da valutare. E stato previsto l utilizzo di uno specifico prodotto informatico (denominato
DettagliDispensa di Informatica I.1
IL COMPUTER: CONCETTI GENERALI Il Computer (o elaboratore) è un insieme di dispositivi di diversa natura in grado di acquisire dall'esterno dati e algoritmi e produrre in uscita i risultati dell'elaborazione.
DettagliRegistratori di Cassa
modulo Registratori di Cassa Interfacciamento con Registratore di Cassa RCH Nucleo@light GDO BREVE GUIDA ( su logiche di funzionamento e modalità d uso ) www.impresa24.ilsole24ore.com 1 Sommario Introduzione...
DettagliStrutturazione logica dei dati: i file
Strutturazione logica dei dati: i file Informazioni più complesse possono essere composte a partire da informazioni elementari Esempio di una banca: supponiamo di voler mantenere all'interno di un computer
DettagliManuale Utente Albo Pretorio GA
Manuale Utente Albo Pretorio GA IDENTIFICATIVO DOCUMENTO MU_ALBOPRETORIO-GA_1.4 Versione 1.4 Data edizione 04.04.2013 1 TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione delle modifiche apportate
DettagliPortale tirocini. Manuale utente Per la gestione del Progetto Formativo
GESTIONE PROGETTO FORMATIVO Pag. 1 di 38 Portale tirocini Manuale utente Per la gestione del Progetto Formativo GESTIONE PROGETTO FORMATIVO Pag. 2 di 38 INDICE 1. INTRODUZIONE... 3 2. ACCESSO AL SISTEMA...
DettagliMODELLO CLIENT/SERVER. Gianluca Daino Dipartimento di Ingegneria dell Informazione Università degli Studi di Siena daino@unisi.it
MODELLO CLIENT/SERVER Gianluca Daino Dipartimento di Ingegneria dell Informazione Università degli Studi di Siena daino@unisi.it POSSIBILI STRUTTURE DEL SISTEMA INFORMATIVO La struttura di un sistema informativo
DettagliGHPPEditor è un software realizzato per produrre in modo rapido e guidato un part program per controlli numerici Heidenhain.
*+33(GLWRU GHPPEditor è un software realizzato per produrre in modo rapido e guidato un part program per controlli numerici Heidenhain. Il programma si basa su un architettura di tasti funzionali presenti
DettagliReti di Telecomunicazione Lezione 6
Reti di Telecomunicazione Lezione 6 Marco Benini Corso di Laurea in Informatica marco.benini@uninsubria.it Lo strato di applicazione protocolli Programma della lezione Applicazioni di rete client - server
DettagliDatabase. Si ringrazia Marco Bertini per le slides
Database Si ringrazia Marco Bertini per le slides Obiettivo Concetti base dati e informazioni cos è un database terminologia Modelli organizzativi flat file database relazionali Principi e linee guida
DettagliManuale Utente Amministrazione Trasparente GA
Manuale Utente GA IDENTIFICATIVO DOCUMENTO MU_AMMINISTRAZIONETRASPARENTE-GA_1.0 Versione 1.0 Data edizione 03.05.2013 1 Albo Pretorio On Line TABELLA DELLE VERSIONI Versione Data Paragrafo Descrizione
DettagliI MODULI Q.A.T. PANORAMICA. La soluzione modulare di gestione del Sistema Qualità Aziendale
La soluzione modulare di gestione del Sistema Qualità Aziendale I MODULI Q.A.T. - Gestione clienti / fornitori - Gestione strumenti di misura - Gestione verifiche ispettive - Gestione documentazione del
DettagliGui Gu d i a d ra r p a i p d i a V d o a d f a one Int fone In e t r e net rnet Box Key Mini
Guida rapida Vodafone Internet Key Box Mini Ideato per Vodafone QSG_VMCLite_v31_10-2007_e172_IT.1 1 10/10/07 14:39:10 QSG_VMCLite_v31_10-2007_e172_IT.2 2 10/10/07 14:39:11 Benvenuti nel mondo della connessione
DettagliReti di calcolatori ed indirizzi IP
ITIS TASSINARI, 1D Reti di calcolatori ed indirizzi IP Prof. Pasquale De Michele 5 aprile 2014 1 INTRODUZIONE ALLE RETI DI CALCOLATORI Cosa è una rete di calcolatori? Il modo migliore per capire di cosa
DettagliNOTE OPERATIVE. Prodotto Inaz Download Manager. Release 1.3.0
Prodotto Inaz Download Manager Release 1.3.0 Tipo release COMPLETA RIEPILOGO ARGOMENTI 1. Introduzione... 2 2. Architettura... 3 3. Configurazione... 4 3.1 Parametri di connessione a Internet... 4 3.2
DettagliBanca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste
Banca dati Professioniste in rete per le P.A. Guida all uso per le Professioniste versione 2.1 24/09/2015 aggiornamenti: 23-set-2015; 24-set-2015 Autore: Francesco Brunetta (http://www.francescobrunetta.it/)
DettagliALBO PRETORIO WEB MANUALE DELLA PROCEDURA SOMMARIO. Uso del manuale. Informazioni generali. Interfaccia grafica. Guida di riferimento
#K$+ SOMMARIO ALBO PRETORIO WEB SOMMARIO Uso del manuale Informazioni generali Interfaccia grafica Guida di riferimento Guida alle operazioni ricorrenti Appendici # 000 K SOMMARIO $ SOMMARIO + 00001 Pagina
DettagliDefinizione Parte del software che gestisce I programmi applicativi L interfaccia tra il calcolatore e i programmi applicativi Le funzionalità di base
Sistema operativo Definizione Parte del software che gestisce I programmi applicativi L interfaccia tra il calcolatore e i programmi applicativi Le funzionalità di base Architettura a strati di un calcolatore
DettagliMon Ami 3000 Centri di costo Contabilità analitica per centri di costo/ricavo e sub-attività
Prerequisiti Mon Ami 000 Centri di costo Contabilità analitica per centri di costo/ricavo e sub-attività L opzione Centri di costo è disponibile per le versioni Contabilità o Azienda Pro. Introduzione
DettagliGuida alla registrazione on-line di un DataLogger
NovaProject s.r.l. Guida alla registrazione on-line di un DataLogger Revisione 3.0 3/08/2010 Partita IVA / Codice Fiscale: 03034090542 pag. 1 di 17 Contenuti Il presente documento è una guida all accesso
DettagliManuale di Aggiornamento BOLLETTINO. Rel. 5.20.1H4. DATALOG Soluzioni Integrate a 32 Bit
Manuale di Aggiornamento BOLLETTINO Rel. 5.20.1H4 DATALOG Soluzioni Integrate a 32 Bit - 2 - Manuale di Aggiornamento Sommario 1 2 PER APPLICARE L AGGIORNAMENTO... 3 1.1 Aggiornamento Patch Storica...
DettagliIRSplit. Istruzioni d uso 07/10-01 PC
3456 IRSplit Istruzioni d uso 07/10-01 PC 2 IRSplit Istruzioni d uso Indice 1. Requisiti Hardware e Software 4 1.1 Requisiti Hardware 4 1.2 Requisiti Software 4 2. Installazione 4 3. Concetti fondamentali
DettagliSOMMARIO... 3 INTRODUZIONE...
Sommario SOMMARIO... 3 INTRODUZIONE... 4 INTRODUZIONE ALLE FUNZIONALITÀ DEL PROGRAMMA INTRAWEB... 4 STRUTTURA DEL MANUALE... 4 INSTALLAZIONE INRAWEB VER. 11.0.0.0... 5 1 GESTIONE INTRAWEB VER 11.0.0.0...
DettagliMANUALE DI UTILIZZO: INTRANET PROVINCIA DI POTENZA
MANUALE DI UTILIZZO: INTRANET PROVINCIA DI POTENZA Fornitore: Publisys Prodotto: Intranet Provincia di Potenza http://www.provincia.potenza.it/intranet Indice 1. Introduzione... 3 2. I servizi dell Intranet...
DettagliCapitolo 4 Pianificazione e Sviluppo di Web Part
Capitolo 4 Pianificazione e Sviluppo di Web Part Questo capitolo mostra come usare Microsoft Office XP Developer per personalizzare Microsoft SharePoint Portal Server 2001. Spiega come creare, aggiungere,
DettagliGuida rapida Vodafone Internet Box
Guida rapida Vodafone Internet Box Benvenuti nel mondo della connessione dati in mobilità di Vodafone Internet Box. In questa guida spieghiamo come installare e cominciare a utilizzare Vodafone Internet
DettagliBMSO1001. Virtual Configurator. Istruzioni d uso 02/10-01 PC
BMSO1001 Virtual Configurator Istruzioni d uso 02/10-01 PC 2 Virtual Configurator Istruzioni d uso Indice 1. Requisiti Hardware e Software 4 1.1 Requisiti Hardware 4 1.2 Requisiti Software 4 2. Concetti
DettagliIntroduzione alle tecnologie informatiche. Strumenti mentali per il futuro
Introduzione alle tecnologie informatiche Strumenti mentali per il futuro Panoramica Affronteremo i seguenti argomenti. I vari tipi di computer e il loro uso Il funzionamento dei computer Il futuro delle
DettagliIl SOFTWARE DI BASE (o SOFTWARE DI SISTEMA)
Il software Software Il software Il software è la sequenza di istruzioni che permettono ai computer di svolgere i loro compiti ed è quindi necessario per il funzionamento del calcolatore. Il software può
DettagliSoftware di interfacciamento sistemi gestionali Manuale di installazione, configurazione ed utilizzo
01595 Software di interfacciamento sistemi gestionali Manuale di installazione, configurazione ed utilizzo INDICE DESCRIZIONE DEL SOFTWARE DI INTERFACCIAMENTO CON I SISTEMI GESTIONALI (ART. 01595) 2 Le
Dettagli2015 PERIODO D IMPOSTA
Manuale operativo per l installazione dell aggiornamento e per la compilazione della Certificazione Unica 2015 PERIODO D IMPOSTA 2014 società del gruppo Collegarsi al sito www.bitsrl.com 1. Cliccare sul
DettagliPer cosa posso utilizzarlo?
Guida rapida Vodafone Mobile Connect Card Express Vodafone Broadband Benvenuti nel mondo della connessione dati in mobilità di Vodafone Mobile Connect Card Express. In questa guida spieghiamo come installare
DettagliCORSO ACCESS PARTE II. Esistono diversi tipi di aiuto forniti con Access, generalmente accessibili tramite la barra dei menu (?)
Ambiente Access La Guida di Access Esistono diversi tipi di aiuto forniti con Access, generalmente accessibili tramite la barra dei menu (?) Guida in linea Guida rapida Assistente di Office indicazioni
DettagliApproccio stratificato
Approccio stratificato Il sistema operativo è suddiviso in strati (livelli), ciascuno costruito sopra quelli inferiori. Il livello più basso (strato 0) è l hardware, il più alto (strato N) è l interfaccia
DettagliComunicazione tra Computer. Protocolli. Astrazione di Sottosistema di Comunicazione. Modello di un Sottosistema di Comunicazione
I semestre 04/05 Comunicazione tra Computer Protocolli Prof. Vincenzo Auletta auletta@dia.unisa.it http://www.dia.unisa.it/professori/auletta/ Università degli studi di Salerno Laurea in Informatica 1
DettagliEDICOLA MANAGER 2.2. + EM Importer
EDICOLA MANAGER 2.2 + EM Importer Con la versione 2.2 del programma sono state introdotte numerose novità grazie anche alla collaborazione di colleghi che hanno messo a disposizione utility e documenti
DettagliProgetto INCOME. Manuale Utente Operatore Installazione
VERSIONI Manuale Utente Operatore Installazione Tosca-Mobile VERS. Motivo Modifiche Data Approvazione Approvatore 1.0 Prima emissione 02/12/11 1/21 Sommario SOMMARIO... 2 INTRODUZIONE... 3 1.1. CONTENUTI
DettagliIstruzioni per l installazione del software per gli esami ICoNExam (Aggiornate al 15/01/2014)
Istruzioni per l installazione del software per gli esami ICoNExam (Aggiornate al 15/01/2014) Il software per gli esami ICON può essere eseguito su qualunque computer dotato di Java Virtual Machine aggiornata.
DettagliInstallazione e caratteristiche generali 1
Installazione e caratteristiche generali 1 Introduzione SIGLA Ultimate e SIGLA Start Edition possono essere utilizzati solo se sono soddisfatti i seguenti prerequisiti: Microsoft.Net Framework 3.5 (consigliato
DettagliGUIDA DI INSTALLAZIONE E PRIMA CONFIGURAZIONE DI EDILCONNECT PER I CONSULENTI
1 GUIDA DI INSTALLAZIONE E PRIMA CONFIGURAZIONE DI EDILCONNECT PER I CONSULENTI Introduzione Dal 24 ottobre è possibile per i consulenti effettuare l installazione e la configurazione del nuovo applicativo
DettagliManuale d'uso. Manuale d'uso... 1. Primo utilizzo... 2. Generale... 2. Gestione conti... 3. Indici di fatturazione... 3. Aliquote...
Manuale d'uso Sommario Manuale d'uso... 1 Primo utilizzo... 2 Generale... 2 Gestione conti... 3 Indici di fatturazione... 3 Aliquote... 4 Categorie di prodotti... 5 Prodotti... 5 Clienti... 6 Fornitori...
DettagliLa Videosorveglianza Criteri per il dimensionamento dello storage
La Videosorveglianza Criteri per il dimensionamento dello storage Serie vol 1005/2010 L importanza di registrare le immagini video Il valore di un sistema di videosorveglianza non dipende solo dall abilità
Dettaglilem logic enterprise manager
logic enterprise manager lem lem Logic Enterprise Manager Grazie all esperienza decennale in sistemi gestionali, Logic offre una soluzione modulare altamente configurabile pensata per la gestione delle
DettagliConsiglio regionale della Toscana. Regole per il corretto funzionamento della posta elettronica
Consiglio regionale della Toscana Regole per il corretto funzionamento della posta elettronica A cura dell Ufficio Informatica Maggio 2006 Indice 1. Regole di utilizzo della posta elettronica... 3 2. Controllo
DettagliManuale Utente MyFastPage
Manuale MyFastPage Utente Elenco dei contenuti 1. Cosa è MyVoice Home?... 4 1.1. Introduzione... 5 2. Utilizzo del servizio... 6 2.1. Accesso... 6 2.2. Disconnessione... 7 2.3. Configurazione base Profilo
DettagliCorso di Informatica
Corso di Informatica Modulo T2 1 Sistema software 1 Prerequisiti Utilizzo elementare di un computer Significato elementare di programma e dati Sistema operativo 2 1 Introduzione In questa Unità studiamo
DettagliCreare un sito Multilingua con Joomla 1.6
Creare un sito Multilingua con Joomla 1.6 Istruzioni Vai a: navigazione, ricerca Testo originale: http://docs.joomla.org/language_switcher_tutorial_for_joomla_1.6 Questa guida è valida sia per Joomla 1.6
DettagliFon.Coop Sistema di Gestione dei Piani di Formazione. Manuale per la Registrazione utente nel Nuovo
Fon.Coop Sistema di Gestione dei Piani di Formazione Manuale per la Registrazione utente nel Nuovo sistema informativo GIFCOOP del 03/12/2014 Indice 1 SCOPO E CAMPO DI APPLICAZIONE DEL DOCUMENTO... 3 2
DettagliOnline Help StruxureWare Data Center Expert
Online Help StruxureWare Data Center Expert Version 7.2.7 StruxureWare Data Center ExpertDispositivo virtuale Il server StruxureWare Data Center Expert 7.2 è disponibile come dispositivo virtuale, supportato
DettagliEsplorate le possibilità di Adobe Acrobat 3.0
Esplorate le possibilità di Adobe Acrobat 3.0 In questo momento state usando Adobe Acrobat Reader, fornito gratuitamente con Adobe, per visualizzare ed esplorare i file PDF (Portable Document Format).
DettagliManuale Servizio NEWSLETTER
Manuale Servizio NEWSLETTER Manuale Utente Newsletter MMU-05 REDAZIONE Revisione Redatto da Funzione Data Approvato da Funzione Data 00 Silvia Governatori Analista funzionale 28/01/2011 Lorenzo Bonelli
DettagliTelerilevamento e GIS Prof. Ing. Giuseppe Mussumeci
Corso di Laurea Magistrale in Ingegneria per l Ambiente e il Territorio A.A. 2014-2015 Telerilevamento e GIS Prof. Ing. Giuseppe Mussumeci Strutture di dati: DB e DBMS DATO E INFORMAZIONE Dato: insieme
DettagliCome costruire una presentazione. PowerPoint 1. ! PowerPoint permette la realizzazione di presentazioni video ipertestuali, animate e multimediali
PowerPoint Come costruire una presentazione PowerPoint 1 Introduzione! PowerPoint è uno degli strumenti presenti nella suite Office di Microsoft! PowerPoint permette la realizzazione di presentazioni video
DettagliDirezione Centrale per le Politiche dell Immigrazione e dell Asilo
Direzione Centrale per le Politiche dell Immigrazione e dell Asilo Sistema inoltro telematico domande di nulla osta, ricongiungimento e conversioni Manuale utente Versione 2 Data creazione 02/11/2007 12.14.00
DettagliSUAP. Per gli operatori SUAP/amministratori. Per il richiedente
Procedura guidata per l inserimento della domanda Consultazione diretta, da parte dell utente, dello stato delle sue richieste Ricezione PEC, protocollazione automatica in entrata e avviamento del procedimento
DettagliSistema Banca dati e Repertorio dei dispositivi medici Notifiche multiple di DM simili
Sistema Banca dati e Repertorio dei dispositivi medici Notifiche multiple di DM simili Questa presentazione intende illustrare brevemente la nuova funzionalità (Notifiche multiple di DM simili) predisposta
DettagliMANUALE D'USO DEL PROGRAMMA IMMOBIPHONE
1/6 MANUALE D'USO DEL PROGRAMMA IMMOBIPHONE Per prima cosa si ringrazia per aver scelto ImmobiPhone e per aver dato fiducia al suo autore. Il presente documento istruisce l'utilizzatore sull'uso del programma
DettagliGUIDA UTENTE MONEY TRANSFER MANAGER
GUIDA UTENTE MONEY TRANSFER MANAGER (vers. 1.0.2) GUIDA UTENTE MONEY TRANSFER MANAGER (vers. 1.0.2)... 1 Installazione... 2 Prima esecuzione... 5 Login... 7 Funzionalità... 8 Anagrafica... 9 Registrazione
DettagliPROTOTIPAZIONE DI UN TRADUTTORE DA SORGENTE PLC AD ASSEMBLY DI UNA MACCHINA VIRTUALE
PROTOTIPAZIONE DI UN TRADUTTORE DA SORGENTE PLC AD ASSEMBLY DI UNA MACCHINA VIRTUALE Relatore: prof. Michele Moro Laureando: Marco Beggio Corso di laurea in Ingegneria Informatica Anno Accademico 2006-2007
DettagliUNIVERSITA DEGLI STUDI DI BRESCIA Facoltà di Ingegneria
ESAME DI STATO DI ABILITAZIONE ALL'ESERCIZIO DELLA PROFESSIONE DI INGEGNERE PRIMA PROVA SCRITTA DEL 22 giugno 2011 SETTORE DELL INFORMAZIONE Tema n. 1 Il candidato sviluppi un analisi critica e discuta
DettagliCHIUSURE di MAGAZZINO di FINE ANNO
CHIUSURE di MAGAZZINO di FINE ANNO Operazioni da svolgere per il riporto delle giacenze di fine esercizio Il documento che segue ha lo scopo di illustrare le operazioni che devono essere eseguite per:
DettagliIl software ideale per la gestione delle prenotazioni GUIDA UTENTE
Il software ideale per la gestione delle prenotazioni GUIDA UTENTE Presentazione... 2 Installazione... 3 Prima esecuzione... 6 Registrazione del programma... 8 Inserimento Immobile... 9 Inserimento proprietario...
DettagliServizio Telematico Paghe
Servizio Telematico Paghe GUIDA ALL USO DELLE PAGINE DI AMMINISTRAZIONE DEL SERVIZIO PAGHE.NET Software prodotto da Nuova Informatica srl 1 SOMMARIO SOMMARIO...2 INTRODUZIONE...3 FLUSSO DELLE INFORMAZIONI...3
DettagliMon Ami 3000 Produzione base Produzione articoli con distinta base e calcolo dei fabbisogni
Prerequisiti Mon Ami 3000 Produzione base Produzione articoli con distinta base e calcolo dei fabbisogni L opzione Produzione base è disponibile per le versioni Azienda Light e Azienda Pro. Introduzione
DettagliInformativa Privacy Privacy Policy di www.castaldospa.it
Informativa Privacy Privacy Policy di www.castaldospa.it Questa Applicazione raccoglie alcuni Dati Personali dei propri Utenti. Titolare del Trattamento dei Dati Castaldo S.p.A - VIA SPAGNUOLO 14-80020
DettagliE-LEARNING ACADEMY GUIDA OPERATIVA
E-LEARNING ACADEMY INDICE PREMESSA 3 1. FUNZIONALITÀ DELLA PIATTAFORMA E-LEARNING ACADEMY 4 2. REGISTRATI 5 2.1 COME EFFETTUARE LA REGISTRAZIONE 5 3. PERCORSI 8 3.1 COME FRUIRE DEI CONTENUTI FORMATIVI
Dettagli11/02/2015 MANUALE DI INSTALLAZIONE DELL APPLICAZIONE DESKTOP TELEMATICO VERSIONE 1.0
11/02/2015 MANUALE DI INSTALLAZIONE DELL APPLICAZIONE DESKTOP TELEMATICO VERSIONE 1.0 PAG. 2 DI 38 INDICE 1. PREMESSA 3 2. SCARICO DEL SOFTWARE 4 2.1 AMBIENTE WINDOWS 5 2.2 AMBIENTE MACINTOSH 6 2.3 AMBIENTE
DettagliPIANO DI TUTELA DELLE ACQUE DELLA SICILIA (di cui all'art. 121 del Decreto Legislativo 3 aprile 2006, n 152)
Commissario Delegato per l Emergenza Bonifiche e la Tutela delle Acque in Sicilia PIANO DI TUTELA DELLE ACQUE DELLA SICILIA (di cui all'art. 121 del Decreto Legislativo 3 aprile 2006, n 152) Sistema WEB-GIS
DettagliDomande frequenti su Phoenix FailSafe
Domande frequenti su Phoenix FailSafe Phoenix Technologies Ltd, leader riconosciuto per la produzione di piattaforme software, strumenti e applicazioni per sistemi strategici di livello mondiale, introduce
DettagliMon Ami 3000 Multimagazzino Gestione di più magazzini fisici e/o logici
Prerequisiti Mon Ami 3000 Multimagazzino Gestione di più magazzini fisici e/o logici L opzione Multimagazzino è disponibile per le versioni Azienda Light e Azienda Pro. Introduzione L opzione Multimagazzino
DettagliAvvio di Internet ed esplorazione di pagine Web.
Incontro 1: Corso di aggiornamento sull uso di internet Avvio di Internet ed esplorazione di pagine Web. Istituto Alberghiero De Filippi Via Brambilla 15, 21100 Varese www.istitutodefilippi.it Tel: 0332-286367
DettagliDENUNCE EDILCONNECT GUIDA COMPILAZIONE
Cassa Edile Como e Lecco DENUNCE EDILCONNECT GUIDA COMPILAZIONE COMPILAZIONE DA FILE PAGHE Guida per i consulenti e le imprese che compilano la denuncia utilizzando il file di esportazione dei software
DettagliManuale Amministratore Legalmail Enterprise. Manuale ad uso degli Amministratori del Servizio Legalmail Enterprise
Manuale Amministratore Legalmail Enterprise Manuale ad uso degli Amministratori del Servizio Legalmail Enterprise Pagina 2 di 16 Manuale Amministratore Legalmail Enterprise Introduzione a Legalmail Enterprise...3
DettagliMANUALE UTENTE. Computer Palmare WORKABOUT PRO
MANUALE UTENTE Computer Palmare WORKABOUT PRO INDICE PROCEDURA DI INSTALLAZIONE:...3 GUIDA ALL UTILIZZO:...12 PROCEDURA DI AGGIORNAMENTO:...21 2 PROCEDURA DI INSTALLAZIONE: Per il corretto funzionamento
DettagliCorso di Informatica
Corso di Informatica Modulo T2 3-Compilatori e interpreti 1 Prerequisiti Principi di programmazione Utilizzo di un compilatore 2 1 Introduzione Una volta progettato un algoritmo codificato in un linguaggio
DettagliDINAMIC: gestione assistenza tecnica
DINAMIC: gestione assistenza tecnica INSTALLAZIONE SU SINGOLA POSTAZIONE DI LAVORO PER SISTEMI WINDOWS 1. Installazione del software Il file per l installazione del programma è: WEBDIN32.EXE e può essere
DettagliFPf per Windows 3.1. Guida all uso
FPf per Windows 3.1 Guida all uso 3 Configurazione di una rete locale Versione 1.0 del 18/05/2004 Guida 03 ver 02.doc Pagina 1 Scenario di riferimento In figura è mostrata una possibile soluzione di rete
DettagliGUIDA UTENTE PRIMA NOTA SEMPLICE
GUIDA UTENTE PRIMA NOTA SEMPLICE (Vers. 2.0.0) Installazione... 2 Prima esecuzione... 5 Login... 6 Funzionalità... 7 Prima Nota... 8 Registrazione nuovo movimento... 10 Associazione di file all operazione...
DettagliCONTENT MANAGEMENT SY STEM
CONTENT MANAGEMENT SY STEM I NDI CE I NTRODUZI ONE Accesso al CMS 1) CONTENUTI 1.1 I nserimento, modifica e cancellazione dei contenuti 1.2 Sezioni, categorie e sottocategorie 2) UTENTI 3) UP LOAD FILES
Dettagli02 L Informatica oggi. Dott.ssa Ramona Congiu
02 L Informatica oggi Dott.ssa Ramona Congiu 1 Introduzione all Informatica Dott.ssa Ramona Congiu 2 Che cos è l Informatica? Con il termine Informatica si indica l insieme dei processi e delle tecnologie
DettagliRicezione fax integrata e faxtomail
Ricezione fax integrata e faxtomail 1 Introduzione In questa mini-guida illustreremo come configurare ed utilizzare una delle più interessanti funzionalità del centralino integrato del FRITZ!Box 1 : la
DettagliManuale Gestore. Utilizzo Programma. Magazzino
UNIVERSITA DEGLI STUDI DI FERRARA Manuale Gestore Utilizzo Programma Magazzino Cosa puoi fare? GESTO: Acquisti OnLine Tramite il modulo di Gesto che verrà illustrato in seguito, potrai gestire in tempo
Dettagliconnessioni tra i singoli elementi Hanno caratteristiche diverse e sono presentati con modalità diverse Tali relazioni vengono rappresentate QUINDI
Documenti su Internet LINGUAGGI DI MARKUP Internet permette (tra l altro) di accedere a documenti remoti In generale, i documenti acceduti via Internet sono multimediali, cioè che possono essere riprodotti
DettagliI.N.A.I.L. Certificati Medici via Internet. Manuale utente
I.N.A.I.L. Certificati Medici via Internet Manuale utente CERTIFICATI MEDICI... 1 VIA INTERNET... 1 MANUALE UTENTE... 1 COME ACCEDERE AI CERTIFICATI MEDICI ON-LINE... 3 SITO INAIL... 3 PUNTO CLIENTE...
Dettaglilo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000
Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,
DettagliExcel. A cura di Luigi Labonia. e-mail: luigi.lab@libero.it
Excel A cura di Luigi Labonia e-mail: luigi.lab@libero.it Introduzione Un foglio elettronico è un applicazione comunemente usata per bilanci, previsioni ed altri compiti tipici del campo amministrativo
DettagliACCESSO AL SISTEMA HELIOS...
Manuale Utente (Gestione Formazione) Versione 2.0.2 SOMMARIO 1. PREMESSA... 3 2. ACCESSO AL SISTEMA HELIOS... 4 2.1. Pagina Iniziale... 6 3. CARICAMENTO ORE FORMAZIONE GENERALE... 9 3.1. RECUPERO MODELLO
DettagliFidelJob gestione Card di fidelizzazione
FidelJob gestione Card di fidelizzazione Software di gestione card con credito in Punti o in Euro ad incremento o a decremento, con funzioni di ricarica Card o scala credito da Card. Versione archivio
DettagliIl Sistema Nazionale di Autovalutazione
Il Sistema Nazionale di Autovalutazione PROCESSO DI AUTOVALUTAZIONE Versione 1.3 06/07/2015 Indice 1- INTRODUZIONE... 3 2- ACCESSO ALLE FUNZIONI... 3 3- UNITÀ DI VALUTAZIONE... 5 4- INDICATORI... 8 5-
DettagliMANUALEDIUTILIZZO MODULO CRM POSTVENDITA
MANUALEDIUTILIZZO MODULO CRM POSTVENDITA INDICE INTRODUZIONE INSERIMENTO CHIAMATA CHIAMATE Dettaglio Chiamate Macchine Coinvolte Documenti Riepilogo MACCHINE Dettaglio Macchine Documenti Interventi MACCHINE
DettagliMANUALE PARCELLA FACILE PLUS INDICE
MANUALE PARCELLA FACILE PLUS INDICE Gestione Archivi 2 Configurazioni iniziali 3 Anagrafiche 4 Creazione prestazioni e distinta base 7 Documenti 9 Agenda lavori 12 Statistiche 13 GESTIONE ARCHIVI Nella
DettagliCollegamento remoto vending machines by do-dots
Collegamento remoto vending machines by do-dots Ultimo aggiornamento 23 marzo 2011 rev1 - Stesura iniziale 18/10/2010 rev2 - Approfondimenti 12/11/2010 rev3 Riduzione dei contenuti per una lettura generica
DettagliIl calendario di Windows Vista
Il calendario di Windows Vista Una delle novità introdotte in Windows Vista è il Calendario di Windows, un programma utilissimo per la gestione degli appuntamenti, delle ricorrenze e delle attività lavorative
DettagliPORTALE CLIENTI Manuale utente
PORTALE CLIENTI Manuale utente Sommario 1. Accesso al portale 2. Home Page e login 3. Area riservata 4. Pagina dettaglio procedura 5. Pagina dettaglio programma 6. Installazione dei programmi Sistema operativo
DettagliWEBGIS 1.0. Guida per l utente
WEBGIS 1.0 Guida per l utente SOMMARIO 1 INTRODUZIONE...3 2 FUNZIONALITA...4 2.1 Strumenti WebGIS... 4 2.1.1 Mappa... 5 2.1.2 Inquadramento mappa... 6 2.1.3 Toolbar... 7 2.1.4 Scala... 9 2.1.5 Legenda...
DettagliL APP PER IPHONE E ANDROID
L APP PER IPHONE E ANDROID PER LA PIANIFICAZIONE E GESTIONE DELLA FORZA LAVORO IN MOBILITA GIUGNO 2013 RCSOFT Software House 1 GAT MOBILE COS E GAT MOBILE è una APP rivolta alle aziende che si occupano
DettagliFrerEnergy: PROGRAMMA PER LA SUPERVISIONE DEI CONSUMI DI ENERGIA ELETTRICA
FrerEnergy: PROGRAMMA PER LA SUPERVISIONE DEI CONSUMI DI ENERGIA ELETTRICA Descrizione Generale E un programma di supervisione in grado di comunicare, visualizzare, memorizzare e stampare i consumi dell
Dettagli