UNIVERSITÀ DEGLI STUDI DI BRESCIA FACOLTÀ DI INGEGNERIA

CORSO DI LAUREA IN INGEGNERIA DELL’INFORMAZIONE

Realizzazione di un sito web dinamico per la gestione di servizi rivolti al cliente

Studente: Giovanni Maggini Matricola: 48930 Ente ospitante: 3Services S.r.l. Relatore: Marina Zanella

Correlatore: Denis Moras

ANNO ACCADEMICO 2006/2007

I am part of all that I have met; Yet all experience is an arch wherethro' Gleams that untravell'd world, whose margin fades For ever and for ever when I move. Alfred Lord Tennyson, Ulysses

I

Indice
1 Introduzione............................................................1
1.1 Ente Ospitante.................................................................................2 1.2 Presentazione del lavoro svolto.......................................................3 1.3 Strumenti................................................................................. ........4 1.3.1 PHP............................................................................. ..............4 1.3.2 Apache.......................................................................... ............6 1.3.3 MySQL...................................................................................... 6 1.3.4 Browser web.............................................................................7 1.3.5 Sistemi LAMP...........................................................................9

2 Content Management System.................................11
2.1 Perché adottare un CMS................................................................12 2.2 Come scegliere un CMS.................................................................16 2.3 Analisi di CMS...............................................................................18 2.3.1 Drupal....................................................................................20 2.3.2 Mambo e Joomla!..................................................................22 2.3.3 TYPO3........................................................................ ............23 2.4 TYPO3: il CMS adottato................................................................24 2.4.1 Ragioni della scelta................................................................24 2.4.2 Struttura................................................................................27 2.4.3 Ruoli degli utenti...................................................................28 2.4.4 Community............................................................................29 2.5 GNU General Public License.........................................................31

3 Programmazione TYPO3.......................................33
3.1 TypoScript.....................................................................................34 3.2 Struttura, albero delle pagine e contenuti....................................38 3.3 Front-end....................................................................................... 41 3.3.1 Processo di rendering.............................................................41

II 3.3.2 API.........................................................................................43 3.3.3 TSFE......................................................................................44 3.3.4 Oggetti contenuto..................................................................46 3.4 Template.......................................................................................48 3.5 Layout............................................................................... .............55 3.6 Estensioni......................................................................................57 3.7 Utenti TYPO3.................................................................................61 3.7.1 Utenti back-end......................................................................61 3.7.2 Utenti front-end.....................................................................62

4 Svolgimento dell'attività.......................................64
4.1 Installazione di TYPO3..................................................................65 4.1.1 Requisiti di sistema................................................................65 4.1.2 Processo di installazione........................................................66 4.1.3 Interfaccia di amministrazione (back-end)...........................69 4.2 Sito web HTML preesistente.........................................................72 4.3 Installazione delle estensioni........................................................74 4.4 Modifica del sito web preesistente................................................77 4.5 Scrittura del template TypoScript.................................................79 4.5.1 Creazione di un template radice............................................79 4.5.2 Template ext:BASE TEMPLATE...........................................82 4.6 Creare e modificare contenuti......................................................90 4.7 Area privata clienti........................................................................92 4.8 Gestione preventivi.......................................................................96

5 Approfondimento: gestione documenti on-line. . .105
5.1 Sistemi operativi basati sul web..................................................106 5.2 Sistema operativo eyeOS.............................................................108 5.3 Installazione e personalizzazione................................................111

6 Conclusioni.........................................................120
6.1 Ricapitolazione.............................................................................121 6.2 Prospettive future........................................................................121 6.3 Valutazione complessiva.............................................................122

Riferimenti bibliografici, Appendice......................123

III Bibliografia e fonti web.....................................................................124 File modello.html..............................................................................128 Campo Setup di ext:BASE TEMPLATE............................................135 Foglio di stile CSS..............................................................................141

Ringraziamenti.......................................................145

IV

Indice delle Figure
Figura 2.1: Ciclo di vita dei contenuti. ................................................13 Figura 2.2.: Logo ufficiale di TYPO3..................................................26 Figura 2.3.:Diagramma della struttura di TYPO3..............................28 Figura 3.1.: Registro di configurazione di Microsoft Windows..........36 Figura 3.2.: Codice all'interno di TypoScript Object Browser...........38 Figura 3.3.: Processo di rendering del front-end...............................50 Figura 4.1.: Schermata conclusiva del processo di installazione........67 Figura 4.2.: Messaggio di errore dovuto all'assenza di pagine..........68 Figura 4.3.Interfaccia utente del back-end TYPO3.............................71 Figura 4.4.: Pagina del sito HTML di 3Services.................................73 Figura 4.5.: Extension manager nel menu di TYPO3.........................74 Figura 4.6.: Extension Manager..........................................................75 Figura 4.7.: Interfaccia di Fileadmin..................................................77 Figura 4.8.: Interfaccia per la creazione di una pagina.....................80 Figura 4.9.: Messaggio di errore di template non trovato.................81 Figura 4.10.: TinyRTE, un Rich Text Editor per TYPO3....................91 Figura 4.11.:Pagina web realizzata con TYPO3...................................92 Figura 4.12.: Vista articoli con Webformat Extendedshop..............104 Figura 4.13.: Procedura di acquisto di Webformat Extendedshop. .104 Figura 5.1.: Diagramma di rete di eyeOS per le PMI........................109 Figura 5.2.: Pagina di login di eyeOS.................................................115 Figura 5.3.: Desktop di eyeOS...........................................................116 Figura 5.4.: Menu “Start” di eyeOS...................................................116 Figura 5.5.: Menu di avvio di eyeFiles...............................................117 Figura 5.6.: eyeNav, gestore file di eyeOS.........................................119

V

Indice delle Tabelle
Confronto tra CMS..............................................................................18 Array myObject...................................................................................36 Cartelle principali dell'installazione di TYPO3...................................67 Contenuto di typo3/............................................................................68

1 Introduzione
Ente ospitante, presentazione del lavoro svolto, strumenti.

Pa gi na 2

1.1 E nte Ospi ta nte

1.1 Ente Ospitante
L'attività di Stage si è svolta presso la ditta 3Services S.r.l. con sede in Brescia. L'azienda opera nel settore dell'Information Technology riguardante i sistemi informativi, la gestione di reti aziendali, l'assistenza sistemistica. Nata nel 2002 dalla fusione di tre diverse aziende operanti in Brescia dal 1985, 3Services S.r.l. lavora per mettere a disposizione dei propri clienti soluzioni per il loro business, seguendoli sotto ogni aspetto utile alla loro attività: dalla fornitura dell'hardware all'assistenza tecnica, dalla messa a punto di software gestionali su misura alla realizzazione e gestione di reti. Il lavoro di Stage si è svolto sotto la supervisione di Denis Moras con la consulenza tecnica di Ugo Finocchiaro. La postazione di lavoro è stata un elaboratore Apple MacBook sul quale è stato installato l'ambiente di sviluppo e testing per il software, costituito dal server web Apache corredato da moduli PHP e librerie per la manipolazione di immagini, dal DBMS MySQL e un editor di testo ( TextWrangler[1] per Mac OS X ) con il supporto all'highlighting di codice PHP e TypoScript. Il materiale utilizzato come fonte di documentazione è stato prevalentemente reperito sul World Wide Web, in quanto le soluzioni adottate mettono a disposizione, oltre alle pagine di documentazione ufficiale in formato elettronico realizzate dagli sviluppatori, community e forums dedicati agli utenti che scelgono di realizzare progetti basati sui loro prodotti software. Non mancano poi guide e manuali scritti o tradotti dagli utenti stessi, che vanno ad arricchire le fonti ufficiali con note personali e soluzioni a problemi comuni.

Università degli Studi di Brescia

1.2 Prese nta zi o ne de l la vo ro sv o lt o

Pa gi na 3

1.2 Presentazione del lavoro svolto
Avendo evidenziato le aree di competenza dell'azienda 3Services S.r.l., appare chiara l'importanza che il web ricopre in un'azienda che deve saper sfruttare le migliori soluzioni presenti sul mercato per offrirle ai propri clienti. L'attività svolta è stata dunque la realizzazione di un sito web dinamico, gestito tramite un Web Content Management System (WCMS, oppure Content Management System, d'ora in avanti CMS), che mette in contatto l'azienda con i propri clienti (sia acquisiti che potenziali) permettendo a essi di accedere a informazioni in modo interattivo e personalizzato, tramite aree riservate. I contenuti gestiti da un CMS possono essere file di computer, immagini, file multimediali, documenti elettronici e contenuti web: i concetti alla base di un CMS sono quelli di separazione dei contenuti dal layout e di modularità. L'obiettivo dell'attività è stato innanzi tutto la realizzazione del sito web aziendale, ma il lavoro che presento è anche una dimostrazione generale di ciò che è possibile realizzare per qualunque cliente che necessiti di una gestione dinamica dei dati sul proprio sito, che richieda l'accesso e la manipolazione dei contenuti da parte di più persone, oltre che un contatto più diretto con i visitatori del proprio sito web. Proprio perché un CMS è basato sul principio di separazione dei contenuti dal layout, cioè dalla “veste grafica” del sito, si è voluto dimostrare di poter mantenere invariate le scelte stilistiche del sito web statico, inserendole in, o meglio costruendo attorno a esse, un sito web dinamico. Un'altra scelta effettuata e che ha influenzato l'intero svolgimento del lavoro è stata la decisione di puntare su strumenti Open Source, non solo per l'accessibilità e per la comprovata qualità degli stessi ma anche come ulteriore showcase delle potenzialità del mondo Open Source al giorno d'oggi.

Università degli Studi di Brescia

Pa gi na 4

1.2 Pre sent az io ne del l av o ro svo l to

Un'ampia parte del progetto riguarda l'analisi dei CMS come soluzioni attualmente disponibili sul mercato informatico e la valutazione di quale sia il prodotto più adatto alle esigenze dell'azienda in base ai requisiti specificati. Presenterò le fasi di installazione, di configurazione e di utilizzo del CMS TYPO3, da me scelto per questo progetto, l'adattamento di un layout HTML precedente con il linguaggio TypoScript utilizzato da TYPO3, con particolare attenzione alla configurazione delle estensioni del sistema utilizzate che forniscono tutte le funzioni che rendono TYPO3 potente e versatile, vero punto di forza dei CMS. Tramite le estensioni verrà realizzata un'area ad accesso riservato e un sistema per la gestione di contratti e servizi rivolti al cliente. Come approfondimento verrà studiato e configurato eyeOS, un Web-based Operating System, che si inserisce nel discorso di gestione on-line dei documenti elettronici. Anche in questo caso saranno affrontate tematiche e tecnologie a oggi poco diffuse ma che costituiscono la naturale evoluzione degli attuali sistemi informatici.

1.3 Strumenti
1.3.1 PHP
PHP (acronimo di “PHP: Hypertext Preprocessor”) è un linguaggio Open Source cross-platform di scripting general-purpose dedicato allo sviluppo web che può essere inserito all'interno di codice HTML prodotto dal PHP Group e rilasciato sotto “Licenza PHP” (meno restrittiva della licenza GNU GPL, a detta del PHP Group[2]):non esistendo una specifica formale dell'implementazione di PHP, quella fornita dal PHP Group è considerata uno standard de facto. É stato inizialmente progettato per la produzione di pagine web dinamiche e, a partire dalla versione 4 di PHP, è basato sul un motore di scripting (macchina virtuale) Zend. É utilizzato principalmente negli script server-side, ed è questo
Università degli Studi di Brescia

1.3.1 PHP

Pa gi na 5

l'utilizzo di interesse in questo progetto, ma può essere usato anche da a linea di comando (sostituendo applicazioni comunemente programmate in Perl, Python, awk o script di shell) o in applicazioni grafiche standalone (ad esempio PHPGTK).[3][4] Nel nostro ambito, l'interprete PHP installato sul server web riceve come input uno script PHP e produce una pagina web come output. PHP può essere installato praticamente su qualunque sistema operativo o piattaforma durante la fase di sviluppo. Nel presente progetto è stato installato su una piattaforma Mac OS X 10.4.8; la scelta è coerente con la previsione di installazione su un server Linux del software realizzato: Mac OS X cade nella categoria dei sistemi operativi “Unix-like” (o, per seguire le linee guida del “The Open Group”, “UNIX system-like”) e, nella sua più recente versione 10.5 “Leopard”, Mac OS X è a tutti gli effetti un prodotto registrato Open Brand UNIX 03.[5][6] La versione di PHP utilizzata è PHP 5.2.0. La major release 5.x di PHP è datata 13 Luglio 2004, e presenta parecchi miglioramenti[7] rispetto alla precedente 4.x (destinata a essere definitivamente abbandonata al termine del 2007): ● Supporto migliorato alla programmazione orientata agli oggetti. ● Estensione “PHP Data Objects”, che definisce una interfaccia leggera e consistente per l'accesso alle basi di dati. ● Miglioramenti delle prestazioni. ● Migliore supporto per MySQL e MSSQL. ● Integrato supporto per SQLite e SOAP. ● Iteratori di dati. ● Gestione degli errori tramite eccezioni.

Università degli Studi di Brescia

Pa gi na 6

1.3.2 Apa che

1.3.2 Apache
Il Progetto Server HTTP Apache (conosciuto semplicemente come “Apache”) ha lo scopo di sviluppare e mantenere un server HTTP Open Source per i moderni sistemi operativi, inclusi UNIX e Windows NT. “L'obiettivo di questo progetto”, recita la pagina iniziale[8] del Progetto Apache (http://httpd.apache.org), “è di offrire un server sicuro, efficiente ed estensibile che fornisce servizi HTTP coerenti agli standard HTTP odierni”. A partire dal 1996, Apache è diventato il server HTTP più diffuso sul World Wide Web, incontrando sul suo cammino la concorrenza solo della piattaforma .NET/IIS (Internet Information Services) di Microsoft e di Sun Java System Web Server di Sun Microsystems. La diffusione di Apache (oltre il 45% del mercato secondo gli ultimi dati[9]), la natura Free e Open Source del progetto l'hanno reso il candidato ideale per lo sviluppo del progetto di questo Stage. La sua relativa difficoltà di configurazione è compensata dal fatto che l'installazione standard nella configurazione di default offre, salvo alcune necessarie ma piccole modifiche, tutto il necessario per l'hosting di un sito web o, come in questo caso, il deployment di una piattaforma di sviluppo.

1.3.3 MySQL
MySQL è un database management system (DBMS) relazionale. Diversamente da Apache, che è sviluppato da una community pubblica e il cui codice sorgente è copyright dei singoli autori, MySQL è proprietà della svedese MySQL AB e il software è rilasciato secondo la licenza GPL nella sua forma denominata “Community Server”. Con il nome MySQL Enterprise si indicano invece una serie di servizi legati alla gestione del database, forniti tramite sottoscrizione di abbonamento, che assicurano supporto tecnico, consulenza e software di monitoraggio non disponibili nella versione “Community”. Un database (cioè una collezione strutturata di dati) relazionale registra i dati in tabelle separate, permettendo di migliorare tempi di accesso e flessibilità.

Università degli Studi di Brescia

1.3.3 My SQ L

Pag ina 7

“SQL” significa Structured Query Language: esso è il linguaggio di accesso ai database più comune, definito dallo Standard ANSI/ISO SQL. Le API (Application Program Interface) fornite da PHP per interfacciarsi con MySQL sono le seguenti:

mysql. Disponibile per PHP 4 e 5, questa estensione è intesa per

l'uso con versioni di MySQL precedenti alla 4.1. Non supporta i protocolli di autenticazione avanzata disponibili in MySQL 5.1 e altre funzioni.

mysqli (MySQL Improved). Questa estensione, disponibile

solo in PHP5, è intesa per l'uso in MySQL 4.1.1 e successivi. Supporta pienamente il protocollo di autenticazione usato in MySQL 5.1, Prepared Statements e Multiple Statements. Fornisce anche un'interfaccia di programmazione orientata agli oggetti. La connessione tra PHP e MySQL avviene tramite la API Open Database Connectivity (ODBC). ODBC fornisce un metodo standard per l'utilizzo di DBMS, indipendente dal linguaggio di programmazione, dal sistema operativo e dalla base di dati. [10]

1.3.4 Browser web
Avendo a che fare con delle applicazioni basate sul web, è d'obbligo menzionare lo strumento con cui interagiremo con il software: il browser web. Sia che si svolga il ruolo di amministratori, sviluppatori o utilizzatori, l'accesso alle informazioni avverrà sempre tramite di esso. Il web browser[11] è un'applicazione software che permette a un utente di interagire con testi, immagini, video, musica o altre informazioni tipicamente posizionate su una pagina web all'interno di un sito web sul World Wide Web o su una intranet locale. La navigazione avviene tramite hyperlink, cioè collegamenti contenuti all'interno della pagina web, che contengono un riferimento a un altro documento, sia esso un'altra pagina web oppure un file audio, video, ecc.
Università degli Studi di Brescia

Pa gi na 8

1.3.4 Bro w ser we b

Le informazioni contenute all'interno di una pagina web sono scritte in formato HTML (HyperText Markup Language) e quindi interpretate dal browser. Questo significa che ogni browser potrebbe avere delle differenze più o meno leggere nel momento della visualizzazione della pagina. L'implicazione di questo è che i web designer devono, al momento della realizzazione, effettuare una fase di testing delle proprie pagine assicurandosi che, anche se non perfettamente identiche nella visualizzazione, le pagine risultino ugualmente accessibili per lo meno sui browser più diffusi[12], vale a dire Internet Explorer, Mozilla Firefox e Safari. Da quando Microsoft ha introdotto Internet Explorer come parte dei propri sistemi operativi Windows (cioè a partire da Windows 95), si è sempre più accentuata l'associazione tra browser web e sistema operativo: Internet Explorer è divenuto icona di Windows, Safari è stato sviluppato per dare un'identità sul web a Mac OS X (che fino a quel momento usava una versione per Mac di Internet Explorer) e Mozilla Firefox è diventato il baluardo del software libero su ciascuna piattaforma, a partire dall'ambiente che gli è più congeniale, cioè le varie distribuzioni Linux. Mentre alcuni browser sono disponibili solo per una sistema operativo (Internet Explorer è volutamente legato ai sistemi operativi Microsoft Windows), altri sono cross-platform, cioè disponibili per vari sistemi operativi: Mozilla Firefox, in particolare, è disponibile per sistemi operativi Windows, Linux e Mac OS X, garantendo quindi agli sviluppatori di pagine web che gli utenti che accedono al proprio sito web utilizzando Firefox potranno visualizzare le informazioni in modo identico, indipendentemente dal sistema operativo utilizzato, nonché sicuro.[13] Tutti i browser web garantiscono una compatibilità minima molto elevata e sono rari i casi di completa inoperabilità tra codice sviluppato per un determinato browser web rispetto a un altro. Web 2.0 viene percepito come una seconda generazioni di comunità on-line e di servizi in rete che mirano a semplificare la collaborazione e la condivisione tra gli utenti in rete. Questo termine è stato coniato nel 2004 da Tim O'Reilly
Università degli Studi di Brescia

1.3.4 Bro w ser we b

Pag ina 9

proprio per identificare la rivoluzione nell'industria dei computer causata dalla visione di internet come una piattaforma per lo sviluppo di software.[14] Non si parla di cambiamenti dal punto di vista tecnologico, non esiste una “seconda versione” del World Wide Web dal punto di vista delle specifiche e molte delle tecnologie utilizzate oggi sono in realtà diffuse da molto tempo; si assiste invece a un cambiamento delle informazioni che vengono scambiate e dell'utilizzo a cui le attuali tecnologie vengono sottoposte: weblog, social bookmarking, wiki, podcast, feeds RSS, social software e servizi on-line. É naturale che, contestualmente ai cambiamenti dal punto di vista sociale, anche le tecnologie abbiano dovuto sapersi adattare migliorando i software lato-server, dato il peso sempre maggiore delle applicazioni sul fornitore di servizi, dovuto al loro spostamento dal sistema operativo al web.

1.3.5 Sistemi LAMP
Quando si parla di sistemi LAMP[15] (o di pacchetto LAMP) si intende uno stack (“pila”) di software utilizzato per ospitare web server per la gestione di siti web dinamici. In genere si parla di software libero/Open-Source in quanto LAMP costituisce l'acronimo (coniato da Michael Kunze nel 1998 ) dei termini Linux, Apache, MySQL, PHP (talvolta sostituito da Perl o Python), dei quali ho parlato in precedenza. L'utilizzo e la combinazione di queste tecnologie definisce l'infrastruttura del server web, il paradigma di programmazione e identifica una distribuzione di software. Questi software non sono stati progettati e sviluppati fin dall'inizio per operare tra loro, ma la facilità nel reperimento e il basso costo hanno sancito la diffusione e la standardizzazione di questa soluzione software, aiutata dal fatto che praticamente ogni distribuzione Linux offre all'utente, al momento dell'installazione, la possibilità di configurare il proprio sistema come server LAMP in pochi minuti. Anche se il nome più diffuso per la sua identificazione è il termine LAMP, esistono diverse varianti per indicare un simile pacchetto software utilizzato per il deployment di server web. In particolare, nel sistema di test da me allestito,
Università degli Studi di Brescia

Pa gi na 10

1.3.5 Sist emi LAMP

dovremmo parlare di sistema MAMP (dove la lettera “M” iniziale sostituisce Linux inserendo, al suo posto, Mac OS X). Esistono soluzioni AMP (nelle quali non è incluso il sistema operativo) integrate del tipo “1-click-to-install” e con un pannello di controllo unificato, che tuttavia non sono state utilizzate in questo progetto: il motivo risiede nel fatto che queste implementazioni talvolta risultano spesso invasive, aggiuntivi difficilmente inutili allo personalizzabili, contenenti componenti

sviluppatore e, soprattutto, non-standard; per questo motivo risulta difficile la modifica e l'aggiornamento di singole parti di quella che viene resa disponibile come una “suite”.[16] Risultano pertanto utili allo sviluppatore alle prime armi o per siti web personali ma non sono, a mio avviso, una valida soluzione per la realizzazione di sistemi a livello aziendale. Seguendo questa convinzione, il sistema MAMP/LAMP sviluppato per questo progetto di Stage è stato installato “da zero”, seguendo procedure di installazione standard e personalizzate per ogni singola applicazione utilizzata per lo sviluppo.

Università degli Studi di Brescia

2 Content Management System
Sistemi CMS, comparazione, criteri di scelta, CMS adottato.

Pa gi na 12

2 Co nte nt Ma na g eme nt Sy ste m

2.1 Perché adottare un CMS
I sistemi per la gestione di contenuti sono diventati lo standard per la creazione e lo sviluppo di contenuti mission-critical sul World Wide Web e nelle reti intranet. Ci si riferisce a sistemi software dedicati a questo scopo con il termine di Web Content Management System (WCMS) o, in breve, Content Management System (CMS). Quando mirano a un approccio end-to-end nel contenuto, spaziando dalla gestione di documenti verso il web o verso output di stampa, tali sistemi sono chiamati Enterprise Content Management System. Un principio importante alla base dei CMS è la separazione del contenuto dalla grafica. In pratica, la specifica del layout è gestita indipendentemente dal contenuto delle pagine, sia che si tratti di testo, immagini o altri formati. Questo principio ha molti vantaggi quando si tratta di cambiare la grafica del sistema: il contenuto può essere modificato dagli autori senza alcuna influenza sui dettagli dello stile mentre i parametri del layout possono essere modificati in modo indipendente, permettendo cambiamenti di design anche all'interno di siti web estesi. I CMS supportano il ciclo di vita dei contenuti[17], riportato in tutti i suoi stadi in Figura 4.11, dalla creazione dei contenuti con software di editing, all'organizzazione di parti di codice, fino all'effettivo rilascio e seguente archiviazione dei dati. Prima di iniziare a lavorare sul progetto, è stato necessario chiedersi se implementare da zero un'applicazione software che soddisfacesse i requisiti richiesti fosse la soluzione migliore da adottare.

Università degli Studi di Brescia

2 .1 Perc hé a do t ta re u n CMS

Pa gi na 13

Figura 2.1: Ciclo di vita dei contenuti.

Dopo una attenta analisi delle richieste, che in seguito riassumo, è risultata vincente la scelta di adottare un CMS e adattarlo alle esigenze dell'azienda. Durante la prima fase del lavoro di Stage erano stati definiti dall'azienda in base alle richieste del settore commerciale, i seguenti requisiti (seppure a grandi linee):
● ● ●

Registrazione di ciascun cliente. Gestione dell'autenticazione dei clienti. Formulazione on-line della richiesta di un preventivo dei servizi

forniti dall'azienda da parte del cliente.

Interrogazione delle richieste dei clienti da parte di un

amministratore e realizzazione di un preventivo in base alle richieste formulate dal cliente;

Visualizzazione del proprio contratto da parte del cliente;
Università degli Studi di Brescia

Pa gi na 14

2 .1 Perc hé a do t ta re u n CMS

Gestione on-line di documenti in formato elettronico.

In particolare è parso poco redditizio investire risorse nello sviluppo di un'applicazione quando, utilizzando lo stesso numero di ore, sarebbe stato possibile studiare l'uso e il funzionamento di sistemi diffusi e di comprovata affidabilità per sapere poi gestirli, modificarli e adattarli quindi alle richieste. Non solo: la conoscenza acquisita garantirà la possibilità di soddisfare esigenze più vaste di quelle che sono state definite inizialmente, quando esse dovessero presentarsi in futuro. Dato che la modularità è una componente essenziale di tutti i CMS di un certo spessore presenti sul mercato, tale prospettiva è risultata molto interessante. Al di là dei pregi che ogni singolo produttore presenta nelle pagine dedicate al proprio prodotto, esistono dei punti chiave[18] a favore dell'adozione di un sistema per la gestione dei contenuti all'interno della propria infrastruttura, rivolti essenzialmente all'utente finale, che vado a elencare:

Non sono necessarie conoscenze tecniche specifiche per l'utente e

per chi è incaricato delle modifiche da apportare ai contenuti del sito (editor). É sufficiente una conoscenza delle nozioni basilari dell'utilizzo di un editor di testo e dei principi basi della navigazione web.

É possibile gestire, aggiornare, modificare il proprio sito da

qualunque postazione connessa a internet, quindi anche effettuare correzioni, aggiungere o rimuovere immagini e documenti, inserire articoli, ecc.

Le correzioni e gli aggiornamenti sono istantanei: ogni modifica

effettuata al sito sarà immediatamente visibile.

É possibile garantire la presenza di aree riservate a utenti

registrati e, in base alla registrazione effettuata, creare gruppi di utenti per i quali personalizzare le informazioni mostrare.

Il fatto che lo sviluppo dei maggiori CMS sia effettuato da team di

programmatori e la presenza di una community di utenti e sviluppatori
Università degli Studi di Brescia

2 .1 Perc hé a do t ta re u n CMS

Pa gi na 15

sempre a disposizione garantisce che il sistema sia stato sottoposto a una fase di test prima del rilascio, che eventuali errori (“bug”) vengano corretti nel minor tempo possibile e che sia possibile ricevere supporto per i problemi che si possono presentare.

É presente un'interfaccia di amministrazione semplice e

unificata.

Naturalmente la visione relativa all'argomento non è uniforme: nonostante i vantaggi, esistono comunque dei detrattori dei CMS. Sono state valutate anche queste visioni e, proprio perché le paure presentate si sono rivelate infondate, è stata confermata la validità della scelta. Cito di seguito alcuni punti che riassumono questi concetti:

Grandi dimensioni: i CMS sono in genere stracarichi di

funzionalità, spesso troppe per un sito di medio-piccole dimensioni. Questo rende la gestione delle pagine troppo farraginosa per i progetti più semplici;

Piccole dimensioni: d’altra parte i cosiddetti micro-cms, tanto

comodi per i siti che non puntano sul numero di pagine o dei servizi per il loro successo, hanno la tendenza a essere privi proprio delle funzionalità che potrebbero rivelarsi utili per il nostro progetto;

Sicurezza: se il CMS ha un bug si dovrà invece aspettare che la

comunità di sviluppo risolva il problema, con la distribuzione dell’ennesima patch, in attesa del prossimo bug…

Template e personalizzazione: quale CMS permette di adattare

perfettamente il layout alle nostre esigenze? Molti CMS mettono a disposizione tantissimi template pronti all’uso da utilizzare liberamente, ma è difficile modificarli senza studiare prima mille righe di codice per un semplice include()! <1>

1 http://www.onecms.it/21/10/2007/perche-non-utilizzare-un-cms/

Università degli Studi di Brescia

Pa gi na 16

2 .1 Perc hé a do t ta re u n CMS

Parrebbe proprio, leggendo i punti appena citati, che la scelta del CMS ideale sia una fatica improba e, nella maggior parte dei casi, frutto di delusioni o di frustrazioni quando si passa al vero e proprio uso; questo può essere considerato vero se si tratta di un utente privato che desidera dedicarsi alla pubblicazione del proprio sito web personale avvalendosi di un CMS ma, quando si tratta di un CMS di uso aziendale, la scelta viene effettuata da persone aventi conoscenze tecniche superiori e quindi capaci di valutare pregi e difetti di un prodotto software, oltre che l'effettiva applicabilità dello stesso in un contesto aziendale. Il problema della sicurezza viene costantemente esposto dai detrattori e costituisce il maggior punto di forza di questa teoria, capace di spaventare adeguatamente eventuali potenziali acquirenti di soluzioni sviluppate dalla concorrenza. In realtà, come è già stato detto e come avrò modo di ribadire in seguito, il fatto che sul software lavori un'intera community permette che i problemi vengano rapidamente individuati e risolti; su un prodotto realizzato in proprio, invece, eventuali problemi rischierebbero di non essere nemmeno mai individuati, e quindi mai corretti. Il discorso della personalizzazione è una questione importante e, come avrò modo di mostrare in seguito, apprendere le conoscenze adatte per personalizzare un CMS richiede un certo impegno. É altresì vero che, una volta acquisite tali conoscenze, si ha accesso a strumenti molto potenti per la produttività.

2.2 Come scegliere un CMS
Nell'affrontare la scelta riguardante quale CMS utilizzare[19], è stato necessario compiere i passi illustrati di seguito[20]. Innanzi tutto si è determinato il tipo di sito web da gestire. In questo caso, la scelta si è ristretta ai CMS che offrivano potenzialità nell'ambito dei portali web.
Università degli Studi di Brescia

2 .2 Co me sce g lie re u n CMS

Pag ina 17

In seguito, è stato necessario decidere quali funzioni e caratteristiche sarebbe stato utile avere all'interno del sito web. Per esempio, le informazioni avrebbero dovuto essere dinamiche, avere la possibilità di mostrare un eventuale calendario con eventi, un'area download, mentre una galleria di immagini non è risultata indispensabile. Tutte queste funzioni sono generalmente offerte da moduli esterni, o plug-in e sono delle aggiunte al sistema di base (o integrate in esso) e variano molto da un sistema a un altro. Il fatto che un CMS sia presente da più tempo e, quindi, abbia una base di diffusione più ampia, garantisce un gran numero di queste funzionalità, tuttavia esso potrebbe essere basato su una struttura vecchia e quindi non supportare i più recenti aggiornamenti. Quest'ultimo è un fattore da considerare che potrebbe portarci a scartare tale CMS nella nostra scelta. Una volta scelto il sistema di base e i moduli aggiuntivi da installare, è tempo di scegliere la presentazione del sito web. I sistemi recenti utilizzano fogli di stile (CSS, Cascading Style Sheet) e template (la cui traduzione sarebbe “maschere di struttura”) che permettono di modificare rapidamente l'aspetto del sito; ci si riferisce talvolta a essi con il termine skin. Lo stesso contenuto mostrato con skin differenti può avere un impatto completamente diverso sull'utente finale, è quello che distingue un sito web professionale da uno amatoriale. A questo proposito, i CMS offrono spesso dei template già pronti da utilizzare oppure degli strumenti per realizzare i propri. Avendo scelto come comportarsi a livello di presentazione del sito, ci si concentra sul contenuto vero e proprio, che è quello che interessa realmente all'utente che accede al sito. É quindi indispensabile che le informazioni possano essere gestite in modo agile e potente allo stesso tempo, e che siano accessibili nel modo in cui l'utente si aspetta dal nostro sistema: se fosse un sito personale avrebbe, ad esempio, l'aspetto di un blog, oppure potrebbe disporre di una galleria di immagini; in questo caso è indispensabile la presenza, tra le altre cose, di una pagina contenente notizie aggiornate e di un'area riservata per i clienti.

Università degli Studi di Brescia

Pa gi na 18

2 .2 Co me sce g lie re u n CMS

Infine, l'ultimo aspetto da considerare è la manutenzione. Si tratta di considerare come comportarsi per quanto riguarda i backup e l'archiviazione dei dati, in quanto ogni CMS gestisce questo aspetto in maniera differente.

2.3 Analisi di CMS
La quantità di CMS disponibili in rete è immensa. Come se non bastasse, recenti sondaggi[21] hanno mostrato come una grande quantità di utilizzatori di CMS sviluppi il proprio sistema, andando quindi ad ampliare il parco. Wikipedia ci offre una pagina[22] contenente una lista dei maggiori CMS disponibili sul mercato e relativa licenza. Alcune demo[23] sono disponibili al sito opensourcecms.com, che mette a disposizione sistemi CMS installati a cui è possibile accedere per visionare le potenzialità. Un altro sito che si è rivelato utile nella scelta del sistema da usare nel lavoro di Stage è stato cmsmatrix.com, dove è possibile visionare delle tabelle comparative di moltissimi CMS in circolazione. In particolare, lo spettro della mia scelta si è ristretto ai famosi Drupal, Joomla! e TYPO3 in quanto tutti rilasciati sotto licenza Open Source. La Tabella 1 presenta una tabella comparativa[24] tra i CMS in esame, in cui i fattori di confronto sono stati ridotti in base alle necessità di questo lavoro di Stage.

Tabella 1: Confronto tra CMS.
Product Last Updated System Requirements Application Server Approximate Cost Drupal 5.3 11/22/2007 Drupal PHP 4.3.3+ Free Joomla! 1.0.7 4/25/2006 Joomla! Apache recommended, any server that supports PHP and MySQL $0 TYPO3 4.1.1 4/20/2007 TYPO3 PHP 4.3.0+ Free

Università degli Studi di Brescia

2 .3 Ana li si d i CMS

Pag ina 19

Database License Operating System Programming Language Root Access Shell Access Web Server Security Audit Trail Captcha Content Approval Email Verification Granular Privileges Kerberos Authentication LDAP Authentication Login History NIS Authentication NTLM Authentication Pluggable Authentication Problem Notification Sandbox Session Management SMB Authentication SSL Compatible SSL Logins SSL Pages Versioning Support Certification Program Code Skeletons Commercial Manuals Commercial Support Commercial Training Developer Community On-line Help Pluggable API Professional Hosting Professional Services Public Forum Public Mailing List Test Framework Third-Party Developers Users Conference Ease of Use Drag-N-Drop Content Email To Discussion Friendly URLs Image Resizing Macro Language Mass Upload Prototyping Server Page Language Site Setup Wizard Spell Checker Style Wizard Subscriptions

MySQL, Postgres GNU GPL Any PHP No No Apache, IIS Drupal Yes Free Add On Yes Yes Yes No Free Add On Yes No Free Add On Yes No No Yes No Yes No No Yes Drupal No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Free Add On Yes Yes Drupal Free Add On Free Add On Yes Free Add On Free Add On Free Add On Limited Yes Limited Free Add On Limited Free Add On

MySQL GNU GPL Any PHP No No Apache Joomla! No Yes Yes Yes No No Free Add On Yes No No No No No Yes No No No No Yes Joomla! No No Yes Yes Yes Yes Yes Yes Yes Yes Yes No No Yes Yes Joomla! No Free Add On Yes Yes Yes No Yes Yes No No No

MySQL, PostGreSQL, Oracle, MSSQL GNU GPL Any PHP No No Apache, IIS TYPO3 Yes Free Add On Yes Yes Yes Free Add On Free Add On Yes Free Add On Free Add On Free Add On Yes Yes Yes Free Add On Yes Yes Free Add On Yes TYPO3 No Free Add On Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Free Add On Yes Yes TYPO3 Free Add On Free Add On Yes Yes Yes Free Add On Free Add On Yes Yes Yes Free Add On

Università degli Studi di Brescia

Pa gi na 2 0

2 .3 Anal isi di CMS

Template Language UI Levels Undo WYSIWYG Editor Zip Archives Management Advertising Management Asset Management Clipboard Content Scheduling Content Staging Inline Administration On-line Administration Package Deployment Sub-sites / Roots Themes / Skins Trash Web Statistics Web-based Style/Template Management Web-based Translation Management Workflow Engine

Limited No Limited Free Add On No Drupal Free Add On Yes No Free Add On Free Add On Yes Yes No Yes Yes No Yes Yes Yes Limited

Yes No No Yes No Joomla! Yes Yes No Yes No Yes Yes No Yes Yes Yes Yes Yes Free Add On No

Yes Yes Yes Yes Free Add On TYPO3 Free Add On Yes Yes Yes Free Add On Yes Yes Yes Yes Yes Free Add On Free Add On Yes Yes Limited

É possibile notare innanzi tutto il fatto che i dati di Joomla! risultano poco aggiornati ad oggi. Questo è un aspetto importante, tuttavia non fondamentale in quanto la versione 1.0.x era comunque quella disponibile come release “stabile” al tempo della scelta del sistema.

2.3.1 Drupal
Drupal è un prodotto software che permette a un privato a una comunità di utenti di pubblicare, gestire e organizzare una grande varietà di contenuti su un sito web[24]. Decine di migliaia di persone e organizzazioni hanno usato Drupal per allestire diversi generi di siti web, inclusi:
● ● ● ● ●

Portali web delle community e siti di discussione. Siti web “corporate”, portali intranet. Siti web personali. Applicazioni di E-Commerce. Direttori di risorse.

Università degli Studi di Brescia

2 .3.1 D ru pal

Pa gi na 2 1

Drupal include caratteristiche che permettono la gestione dei contenuti, blog, ambienti di authoring collaborativo, forum, newsletter, gallerie di immagini, upload e download di file e molto altro. Drupal è un software Open Source rilasciato sotto licenza GPL ed è mantenuto e sviluppato da una community di migliaia di utenti e sviluppatori. Drupal è utilizzabile liberamente. Drupal è relativamente giovane se comparato agli altri CMS, tuttavia il framework sembra ben realizzato, robusto ed estendibile e la community è parecchio coinvolta nello sviluppo. Molte delle funzioni richieste sono disponibili come moduli aggiuntivi da inserire nelle funzionalità core. [25] Il fatto che, come detto, si tratti di un prodotto recente, è stato il principale motivo per cui si è deciso di non usare questa piattaforma: il lavoro di Stage prevedeva infatti la necessità di una diffusione notevole, per garantire massimo supporto possibile. scaricabile ed

2.3.2 Mambo e Joomla!
L'installazione di default di Mambo Open Source è facile. Il programma di setup utilizza un'interfaccia “wizard” che permette in quattro passi di installare l'intero sistema senza la necessità di conoscenze tecniche avanzate. Una volta installato, il sistema include una varietà di template tra cui scegliere e un gran numero di funzionalità pronte all'uso. Il contenuto può essere aggiunto, modificato o manipolato senza conoscenze di HTML, XML o DHTML: è sufficiente inserire il testo utilizzando un editor e selezionare il comando “Pubblica”. Utenti più avanzati saranno in grado di controllare il sistema nel modo che più si addice alla loro abilità. I file del sistema “core” sono scritti in PHP e possono essere facilmente modificati. Il sistema è robusto, collaudato e sostenuto da un'ampia community di utenti e sviluppatori professionisti. La gestione dei template avviene tramite un sistema di tag, all'interno dei quali viene sostituito il contenuto. La qualità dell'output (nell'ottica di un sito

Università degli Studi di Brescia

Pa gi na 2 2

2 .3.2 Ma mb o e J o o ml a !

rispondente alle specifiche del W3C) dipende quindi dalla qualità del codice che verrà sostituito all'interno dei tag. [24] Mambo è molto popolare e sembrava offrire un'installazione molto semplice e un'interfaccia di amministrazione facile da usare[25]. Solitamente poco considerata, la gestione di un CMS è molto importante quando si tratta di affidare la stessa ai propri clienti (cioè se il sito web viene realizzato per conto di terzi).

Joomla! è un CMS totalmente Open Source, nato dalla scissione del precedente progetto denominato Mambo e realizzato totalmente in PHP.[26] Mediante l'interazione con un database (MySQL è il database di riferimento ma non l'unico utilizzabile), il prodotto è in grado di pubblicare sul web contenuti di varia natura e di gestirne l'archiviazione e la formattazione mediante l'utilizzo di template e fogli di stile CSS, in modo simile alla gran parte dei CMS. Quando mi sono trovato a effettuare la scelta tra i CMS, la versione di Joomla! considerata stabile era una di quelle derivate in seguito alla scissione da Mambo, ovvero una delle 1.0.x. Era disponibile anche la versione Beta 1.5, recentemente divenuta Release Candidate, che si distacca definitivamente dall'eredità lasciata dal progetto Mambo. La necessità di optare per una soluzione che fosse quanto più stabile e supportata possibile ma che nel contempo avesse un futuro certo e non prossima all'abbandono da parte dagli sviluppatori, mi ha portato a scartare questo CMS.

2.3.3 TYPO3
TYPO3 è un Enterprise CMS Open Source rilasciato sotto licenza GPL.[24] Viene utilizzato da più di 122.000 server in tutto il mondo, è stato tradotto in 43 lingue ed è attivamente sviluppato da una community di oltre 27.000 utenti in 60 Paesi. Tra i suoi utilizzatori compaiono BASF, DaimlerChrysler, EDS, Konika-Minolta, Volkswagen, UNESCO e altre numerose università, agenzie governative e organizzazioni non-profit.
Università degli Studi di Brescia

2 .3.3 T Y PO3

Pa gi na 2 3

TYPO3 si è espanso molto rapidamente. Il maggiore gruppo di utilizzatori sono PMI data la difficoltà nell'apprendimento dell'utilizzo di TYPO3, che rappresenta un ostacolo per gli utenti privati. Molti marchi famosi hanno affidato la gestione dei propri documenti al sistema TYPO3, usando sistemi enterprise Open Source nelle proprie intranet e in altri ambienti critici, dimostrando la validità di tali sistemi. TYPO3 è gigantesco nel numero di linee di codice. Ha anche un gran numero di collaboratori e di caratteristiche fornite dalle estensioni. Come è prevedibile, la curva di apprendimento è molto ripida. TYPO3 può fare tutto quello che viene chiesto, a patto di imparare a utilizzarlo. Il sistema per la realizzazione dei template,basato su standard xHTML e fogli di stile CSS, è complesso ma molto potente. Un difetto riscontrato è l'aspetto dell'interfaccia di controllo, che appare un po' “vecchio stile” rispetto alla concorrenza, più recente e caratterizzata da una certa “freschezza” nei colori, nelle icone e nella disposizione degli elementi.

Esistono moltissimi altri sistemi per la gestione dei contenuti. Molti di essi hanno un target specifico riguardo all'utenza e alle funzioni offerte. Un esempio su tutti è il famoso e diffusissimo WordPress (definito come un “semantic personal publishing platform”, cioè piattaforma per la pubblicazione personale di testi sul World Wide Web), sebbene sia a tutti gli effetti un CMS e possa essere preso in considerazione a buon diritto da parte di chi debba dedicarsi allo sviluppo di un sito web personale o per una piccola organizzazione. Esso però non rispecchia le necessità individuate per questo progetto di Stage. Altri CMS, invece, sono basati su piattaforme diverse rispetto a quella di riferimento per il progetto di Stage (il sistema LAMP), come ad esempio Plone o Ruby On Rails. Il primo, pur essendo sviluppato in PHP, utilizza come base di dati il DBMS a oggetti ZODB (Zope Object Database) mentre il secondo più che un CMS vero e proprio è una piattaforma che permette la creazione di un CMS, utilizzando il linguaggio di programmazione orientato agli oggetti chiamato
Università degli Studi di Brescia

Pa gi na 2 4

2 .3.3 T YPO 3

Ruby. La creazione di un CMS dal nulla è certamente interessante ma date le restrizioni di tempo era preferibile utilizzare un CMS preesistente su cui poi lavorare.

2.4 TYPO3: il CMS adottato
2.4.1 Ragioni della scelta
In base alle considerazioni fatte nella sezione 2.3, dopo una prima analisi i CMS tra cui scegliere si sono ridotti a due: TYPO3 e Drupal. Entrambi offrivano caratteristiche interessanti e mettevano a disposizione parecchie risorse per gli sviluppatori:
● ● ● ●

Documentazione in formato elettronico. Localizzazione della documentazione. Gruppi di discussione. Community di sviluppatori, anche in lingua italiana.

Tuttavia, la quantità di documentazione disponibile relativa a TYPO3 e la relativa “giovinezza” di Drupal, sono stati l'ago della bilancia in questa scelta. In particolare, sebbene le fonti evidenziassero la ripida curva di apprendimento[27][28] relativa a TYPO3, la versatilità e la potenza degli strumenti messi a disposizione da questo software era indubbia, in particolare era interessante il motore per la creazione dei template personalizzati (che consente di adattare il CMS alla veste grafica esistente del sito web). L'organizzazione dei contenuti in un unico repository simile a un file system (Unix o Win), il menu contestuale all'interno delle pagine di amministrazione, la quantità di estensioni disponibili, la possibilità di creare menu grafici dinamici all'interno dell'applicazione e la gestione dei permessi di accesso

Università degli Studi di Brescia

2 .4.1 Rag io ni de ll a sc el ta

Pag ina 2 5

hanno costituito i motivi decisivi per scegliere TYPO3 durante lo svolgimento di questo progetto. A essi si aggiungono caratteristiche[29] positive comuni a molti altri CMS, ovvero:
● ● ● ●

Licenza GPL (quindi software “libero” Open Source). Supporto a MySQL e PHP. Costi nulli per l'acquisto di licenze, per l'intera piattaforma. Editor WYSIWYG (What You See Is What You Get) per la

gestione del testo.

Gestione e manipolazione delle immagini all'interno del CMS

tramite le librerie GD e ImageMagick.

Impostazioni avanzate della visualizzazione delle pagine, quali

intervalli di visibilità e permessi di accesso.
● ●

Disponibilità di componenti base già sviluppati. Sviluppo e manutenzione in remoto grazie all'interfaccia web.

TYPO3 (in Figura 2.2 il logo ufficiale) inoltre abbraccia il concetto di separabilità dei ruoli all'interno del team di sviluppo, individuati in tre figure principali (Redattore, Amministratore, Sviluppatore) per le quali sono stati progettati l'interfaccia e gli strumenti di lavoro. TYPO3 è stato uno dei primi sistemi che ha reso modulare le proprie funzionalità su diversi livelli. Dall'immagazzinamento (storage) dei dati alla pubblicazione, questi livelli descrivono classi o moduli. Il livello di storage contiene le API per la connessione di TYPO3 a diversi tipi di Database oppure file XML attraverso i cosiddetti handler. D'altro lato TYPO3 ha a propria disposizione API per estendere il software core, detti “extension system”, che si connettono a TYPO3 tramite il TYPO3 Extension Manager, che ha anche la funzione di IDE.

Università degli Studi di Brescia

Pa gi na 2 6

2 .4.1 Rag io ni de ll a sc el ta

Le estensioni possono aggiungere funzionalità e interfacce a tutti i livelli del software senza modificarne il core, permettendo quindi facilità di aggiornamento e una base stabile del codice. Tutti i distributori di software di gestione dei contenuti hanno adottato un simile approccio modulare, portando alla nascita di molti sistemi CMS Open Source simili a TYPO3, ognuno dei quali segue i propri differenti concetti tecnici circa le singole API.

Figura 2.2.: Logo ufficiale di TYPO3.

2.4.2 Struttura
La suddivisione più semplice per descrivere l'organizzazione di TYPO3 è quella in front-end e back-end. Per front-end si intende quella parte del programma che interagisce direttamente con l'utente, mentre il back-end comprende i componenti che gestiscono le informazioni e inviano l'output al front-end. Sebbene da questa definizione possa sembrare che il back-end sia una parte del software inaccessibile e automatizzata, in TYPO3 possiamo riferirci ad essa come l'amministrazione, o il pannello di controllo, dell'intero sistema. Qualunque sia l'interfaccia grafica scelta per mostrare le informazioni, il back-end ha una propria interfaccia, i propri utenti (separati da quelli del front-end) e permette la gestione dei contenuti e delle informazioni in modo nettamente separato da come vengono mostrate all'utente finale, consentendo di modificare separatamente impaginazione, contenuti, dati e installazione del software.

Università degli Studi di Brescia

2 .4.2 St rut tu ra

Pa gi na 2 7

In realtà la suddivisione è molto più complessa ed è schematizzata in Figura 2.3. I componenti[30] sono:

Interfaccia unificata: sebbene le funzionalità di TYPO3 siano

in gran parte fornite dalle estensioni, tutte queste si inseriscono in un'unica interfaccia unificata che fornisce, sia all'utente finale sia all'amministratore del back-end, un unico insieme di funzioni.

Livello Server: alla base di TYPO3 si trova il linguaggio di

scripting PHP e i server MySQL e APACHE.
● ●

Core: codice controllato e sviluppato dal Core Group Estensioni: parti di codice con un netto confine rispetto al Core

ma che a esso si interfacciano per estendere le funzionalità. Sono create e gestite dai contribuenti alla community e sottoposte a revisione da parte di alcuni addetti del Core Group.

Front-end: il sito web è presentato attraverso la formattazione

dei contenuti (template) usando le estensioni disponibili, quando necessario.

Back-end: il contenuto è amministrato attraverso le funzioni

core e da un set di estensioni apposite.

2.4.3 Ruoli degli utenti
TYPO3 offre supporto a diversi tipi di utenti[31], rispondendo alle necessità di ciascun gruppo.

Editor (Redattore): esistono vari livelli di questo utente, a

seconda delle necessità dell'azienda e del numero di collaboratori: si va dalla semplice aggiunta di notizie nell'apposita pagina alla creazione e modifica della grafica del sito. Qualunque sia il livello in cui opera, il ruolo di questo utente è generalmente relativo a modifiche del front-end, con accesso al back-end limitato.

Università degli Studi di Brescia

Pa gi na 2 8

2 .4.3 Ru o li deg l i u te nti

Figura 2.3.:Diagramma della struttura di TYPO3.

Administrator (Amministratore): il suo ruolo è quello di gestire il

sistema in modo da renderlo disponibile agli utenti finali. In genere, oltre al completo accesso al software, ha anche accesso al server sul quale TYPO3 è installato. Crea i template TypoScript, installa e rimuove estensioni e le configura per le necessità dei redattori. L'amministratore, al contrario del redattore, concentra il proprio lavoro sul back-end del sistema.

Developer (Sviluppatore): lo sviluppatore ha il ruolo di creare

nuove estensioni del sistema e modificare parti del Core di TYPO3.

Nell'ambito del lavoro di Stage, il ruolo che ho rivestito nei confronti di TYPO3 si posiziona tra l'Amministratore e lo Sviluppatore: mi è stato infatti
Università degli Studi di Brescia

2 .4.3 Ruo l i d eg li ut ent i

Pag ina 2 9

necessario acquisire nozioni e concetti propri della sfera di sviluppo del software per poter apportare le modifiche essenziali per l'adattamento e il corretto funzionamento delle estensioni. Successivamente ho dovuto concentrarmi sul lavoro di amministrazione: scrittura del codice TypoScript, personalizzazione delle estensioni, configurazione dell'intero sistema. Non mi è poi mancata una parte di lavoro nel ruolo di redattore, vale a dire l'inserimento dei dati e delle informazioni per la realizzazione del sito dell'azienda ospitante.

2.4.4 Community
La community TYPO3 è un gruppo internazionale e in rapida crescita di appassionati e di utenti di TYPO3. Le mailing list rappresentano il centro della comunità alle quali chiunque può accedere, anche usando software con supporto ai newsgroup, per la lettura delle discussioni riguardanti i vari aspetti del software, oppure per la partecipazione attiva richiedendo informazioni o mettendo a disposizione la propria conoscenza per aiutare gli altri utenti. Grazie alla community, come in molti altri progetti Open Source, si garantisce un supporto rapido e pratico, anche per i problemi più complicati, a patto di rispettare i canoni della netiquette nella formulazione delle richieste. Il supporto viene quindi nella maggior parte dei casi fornito da persone (altri utenti e sviluppatori) che con buona probabilità si sono già trovati ad affrontare i problemi in questione e quindi possono proporre soluzioni pratiche e non teoriche e, soprattutto, quando più voci concorrono a fornire un aiuto, è possibile che vengano esposte varie modalità e che quindi almeno una delle soluzioni proposte possa risolvere il problema nel nostro specifico caso. Più di una volta mi sono trovato nella situazione di avere necessità di aiuto ulteriore rispetto alle informazioni contenute nei manuali: nella maggior parte dei casi, avvalendomi dei motori di ricerca, è stato possibile individuare messaggi nei forum o nelle mailing list inseriti da persone che si erano già trovate nella mia stessa situazione (evitando così messaggi duplicati); in altre situazioni mi è stato necessario richiedere personalmente aiuto e informazioni, nel qual caso ho
Università degli Studi di Brescia

Pa gi na 30

2 .4.4 Co mm uni ty

ricevuto la risposta dallo sviluppatore stesso della extension con cui avevo incontrato difficoltà, a riprova della validità di un simile sistema. Per superare le difficoltà che si incontrano, specialmente nelle prime fasi dello sviluppo, è sufficiente leggere con attenzione le fonti ufficiali di aiuto messe a disposizione dal sito typo3.org : FAQs (Frequently Asked Questions), manuali in formato elettronico, video tutorial e guide on-line; oppure acquistare il libro ufficiale di TYPO3. Esistono anche traduzioni in italiano di alcuni articoli al sito typo3.it[32], che tuttavia coprono solo la documentazione introduttiva al CMS. Da segnalare il fatto che, chi desiderasse conoscere di persona gli sviluppatori e altri membri della comunità di TYPO3, vengono organizzati a cadenze regolari delle conferenze (in genere nell'area tedesca, dato che è questa la nazione degli sviluppatori) chiamate TyCON3 con seminari legati all'approfondimento del CMS e tempo libero volto a favorire le conoscenze tra i membri della comunità. Nel Novembre 2004 un gruppo di persone della TYPO3 community, incluso Kasper Skårhøj (ideatore di TYPO3) e altri partecipanti da lungo tempo, hanno fondato un'organizzazione non-profit chiamata TYPO3 Association. L'obiettivo principale di questa organizzazione è di supportare lo sviluppo del core con un ritmo più costante e migliorare la trasparenza e l'efficienza di vari aspetti del progetto TYPO3. Altri obiettivi di questa associazione sono l'organizzazione di eventi per l'informazione e l'addestramento dei propri membri, la comunicazione con il pubblico per la diffusione dell'uso del software TYPO3, la certificazione del prodotto per garantire degli standard qualitativi elevati e il supporto delle versioni internazionali localizzate del software. Esistono due tipi di tesseramento, suddivisi in Active Members e Supporting Members: la seconda modalità è aperta a chiunque e permette l'invio di fondi e supporto all'associazione, la prima invece è accessibile su invito ed è riservata a chi ha collaborato con l'associazione da lunga data. Solo ai membri attivi è riservato il diritto di voto sul futuro dell'associazione. [17]
Università degli Studi di Brescia

2 .5 GN U Ge nera l Pu bli c Li ce nse

Pa gi na 31

2.5 GNU General Public License
Il software TYPO3 è rilasciato sotto licenza GNU GPL[33]. Desidero parlare brevemente di questo tipo di licenza software, nonostante siano già state spese parole sull'argomento. La licenza GNU GPL (GNU General Public License) è una licenza per il software libero, inizialmente scritta da Richard Stallman per il Progetto GNU (GNU's Not Unix). Costituisce il più famoso e popolare esempio di licenza copyleft (gioco di parole della parola copyright), cioè dell'utilizzo delle leggi sui diritti d'autore per rimuovere le restrizioni anziché aggiungerne, che richiede che i lavori derivati da prodotti rilasciati sotto licenza GPL siano resi disponibili secondo gli stessi diritti. Basandosi su questa filosofia, i destinatari di un software rilasciato sotto GPL possono dichiararsi quindi possessori di “software libero” e i diritti di copyleft utilizzati garantiscono che questa libertà sia conservata, anche quando il prodotto viene modificato o sono effettuate aggiunte.

Università degli Studi di Brescia

3 Programmazione TYPO3
TypoScript, struttura dell'albero delle pagine del CMS, analisi della programmazione front-end, template e layout.

Pa gi na 34

3.1 T ypo Scri pt

3.1 TypoScript
Un CMS deve essere in grado di gestire vari tipi di contenuto sotto varie forme dato che, come detto in precedenza, si basa sulla separazione dei contenuti dalla presentazione. TYPO3 si occupa di questo con l'introduzione di TypoScript (TS), che permette la creazione personalizzata di template di output, garantendo massimo controllo sulla formattazione del risultato e del layout, più di quanto permettono i tradizionali template HTML. TypoScript può essere considerato un linguaggio (ma non un vero e proprio linguaggio di programmazione) per la creazione di template con TYPO3. Utilizzando TypoScript è possibile non solo inserire contenuto dinamico all'interno di un template, ma anche influenzare in dettaglio l'aspetto dell'output (cioè il front-end). Il layout di base può essere generato interamente in TYPO3, oppure essere basato su un file HTML usato come template (come in questo caso). Per la navigazione è possibile usare menu basati su immagini, testo, vari layer, Flash oppure un semplice menu di selezione. I menu vengono generati dinamicamente e l'aspetto di ognuno di essi può essere specificato individualmente. É possibile creare elementi grafici da testo e immagini durante l'esecuzione del programma o controllare l'impaginazione e i contenuti dell'output indipendentemente dal momento o dagli utenti connessi. Anche il comportamento del back-end per ogni utente è controllato via TypoScript. TypoScript si comporta da mediatore tra le informazioni e le funzioni che sono implementate nel core di TYPO3 tramite PHP, oppure aggiunte tramite le estensioni. In questo modo, TypoScript può essere visto come un layer intermedio per trasmettere le informazioni alle funzioni di sistema. Per evitare fraintendimenti, è meglio specificare innanzi tutto cosa non è TypoScript prima di definire cosa sia effettivamente.
Università degli Studi di Brescia

3.1 T ypo Sc ript

Pa gi na 35

TypoScript non è né un linguaggio di programmazione né un linguaggio di scripting, quindi non può venire comparato a Java, PHP o JavaScript; ad esempio, non è possibile usare strutture di controllo (for, while, ...). TypoScript ha la funzione di “trasportare informazioni”, e non viene in alcun modo “eseguito” come i classici linguaggi di programmazione.[34] TypoScript ha una sintassi tramite la quale informazioni gerarchiche possono essere definite in una struttura ad albero tramite semplice testo ASCII. In questo modo, qualunque informazione può essere passata tramite TypoScript all'interfaccia del sistema, ma solo gli oggetti e le proprietà richieste dal sistema influenzano il comportamento del back-end e del front-end e sono disponibili solo gli oggetti e le proprietà descritte nella documentazione di TYPO3. Per fare un esempio pratico[35], agli utenti dei sistemi Windows è familiare il concetto di struttura gerarchica di informazioni del sistema con l'utilizzo del Registro di Configurazione, che mostra i valori come oggetti (Figura 3.1). In modo simile, oggetti individuali configurati con TypoScript sono inseriti in una struttura ad albero. Il sotto-modulo TypoScript Object Browser (collocato all'interno del modulo Template) rappresenta[17] questa gerarchia in un'interfaccia grafica. Desidero illustrare la relazione tra TypoScript e PHP all'interno di TYPO3, servendomi di alcuni utili esempi tratti dal manuale TYPO3. Nonostante si possa creare il proprio output in qualunque forma utilizzando PHP, come regola viene utilizzato TypoScript Front-end Engine (TSFE) quando viene richiamata una pagina web del sito tramite il file index.php (tslib/index.php): questa ha il compito di analizzare le informazioni contenute nel template di ciascuna pagina del sito. I valori e gli oggetti dei record di template, strutturati dal layer intermedio di TypoScript, sono elaborati da PHP.

L'informazione è inserita dal sistema in un array multidimensionale di PHP, utilizzando la classe
t3lib_TSparser

Università degli Studi di Brescia

Pa gi na 36

3.1 T ypo Scri pt

(t3lib/class.t3lib_tsparser.php). Questo array è disponibile in alcune applicazioni e funzioni di TYPO3.

Se l'informazione viene inserita in un array PHP che non viene utilizzato dalle funzioni delle classi di TYPO3, si comporta come le variabili create in PHP che non vengono richieste. Sono ignorate ma non vengono restituiti errori.

Figura 3.1.: Registro di configurazione di Microsoft Windows.

Un esempio per chiarire questo concetto: nel codice TypoScript riportato qui sotto l'informazione, dopo il parsing di PHP, viene inserita in un array multidimensionale.
myObject.property1 = value_x myObject.property2 = value_y myObject.property2.property3 = value_z

In PHP l'array sarebbe creato direttamente, in questo modo:
Università degli Studi di Brescia

3.1 T ypo Sc ript

Pag ina 37

$TS['myObject.']['property1'] = 'value_x'; $TS['myObject.']['property2'] = 'value_y'; $TS['myObject.']['property2.']['property3'] = 'value_z';

o, alternativamente:
$TS = array( 'myObject.' => array( 'property1' => 'value_x', 'property2' => 'value_y', 'property2.' => array ( 'property3' => 'value_z' ) ) )

Un array può anche essere mostrato utilizzando la funzione debug() di TYPO3 che restituisce il risultato nella Tabella 2.

property1 property2 myObject property2.

value_x value_y property3 value_z

Tabella 2: Array myObject.

TYPO3 fornisce TypoScript Object Browser, un tool per mostrare e modificare TypoScript. Questo codice di esempio viene mostrato come in Figura 3.2.

3.2 Struttura, albero delle pagine e contenuti
Il primo importante concetto da affrontare nell'utilizzo di TYPO3 è quello di pagina (Page).

Università degli Studi di Brescia

Pa gi na 38

3.2 Stru tt ura , al bero de ll e pa g ine e c o ntenu ti

Figura 3.2.: Codice all'interno di TypoScript Object Browser.

Una pagina non contiene alcun elemento al suo interno: è semplicemente una cornice, un contenitore, per gli elementi che a essa vengono assegnati. Ogni pagina ha un numero di identificazione univoco assegnato (ID), ed è tramite di esso che si accede alla pagina sia nel front-end che nel back-end. Esso rimane invariato ovunque si sposti la pagina e anche se la pagina dovesse essere cancellata, quel numero non verrà più utilizzato. La pagina superiore a essa, invece, è indicata nel campo PID (parent ID). La tabella del database chiamata pages è la struttura portante di TYPO3: fornisce la struttura gerarchica delle pagine nella quale sono posizionati tutti i vari record gestiti dal CMS. La tabella delle pagine può essere compresa come una serie di cartelle in un hard disk e tutti i vari record costituiscono i file che appartengono a una di queste cartelle. La struttura del sito viene mostrata nel Page Tree (l'albero delle pagine), un principio comune in informatica. Il simbolo del globo in cima alla colonna indica il livello di root (radice) dell'albero, al quale sono aggiunte le pagine che vengono create, che formano concettualmente i rami e le foglie dell'albero. Interi gruppi di pagine possono essere spostati, inseriti all'interno di altre pagine o semplicemente il loro ordine può essere cambiato. In base alle icone
Università degli Studi di Brescia

3.2 St rut tu ra, a lbe ro del le pag i ne e co nte nut i

Pa gi na 39

mostrate, è inoltre possibile distinguere vari tipi di pagine, ognuno caratterizzato da comportamento e funzionalità proprie. Ogni tipo di pagina ha i seguenti elementi in comune: Tipo (Type), Titolo Pagina (Page Title), Impostazioni di localizzazione (Localization settings) e Opzioni generali (General options). Per semplificare i lavori di routine, TYPO3 fornisce una serie di tipi[17] di pagina predefiniti che differiscono tra di loro per le funzionalità e aspetto nel front-end. Standard Il tipo di pagina Standard è solitamente sufficiente per la maggior parte degli utilizzi: fornisce una semplice selezione degli elementi principali della pagina. Advanced Il tipo Avanzato di pagina fornisce parecchi vantaggi: possono essere specificate informazioni “meta” e possono essere integrati file e plug-in (cioè funzionalità offerte dalle estensioni). É inoltre possibile fornire un titolo pagina diverso dal proprio nome, che comparirà come titolo nel browser web dell'utente. External URL In questo caso la pagina contiene un riferimento a un indirizzo URL esterno al sito, ad esempio un indirizzo web, FTP o email. La pagina stessa non ha alcun tipo di contenuto, ed è usato per integrare link ad applicazioni esterne all'interno dei menu. Shortcut La pagina Shortcut (letteralmente “scorciatoia”) funziona allo stesso modo dell'External URL, con la differenza che la pagina a cui ci si riferisce è interna al sistema. Per esempio può essere utilizzata per avere un link alla pagina “Home” del sito web. Not in menu

Università degli Studi di Brescia

Pa gi na 4 0

3.2 Stru tt ura , al bero de ll e pa g ine e c o ntenu ti

É un tipo speciale di pagina la cui caratteristica è quella di non comparire nei menu del sito web: per accedervi è necessario conoscere l'ID della pagina ed è per esempio utile quando si sta lavorando a una sezione del sito che non è ancora accessibile in quanto in via di completamento. SysFolder Quella che più si discosta dal concetto di “pagina” a cui solitamente tutti fanno riferimento è il tipo di pagina detto “Cartella di sistema”. Nonostante sia un oggetto di tipo “pagina”, infatti, esso viene rappresentato con l'icona di una cartella e fornisce un contenitore di informazioni. Non viene mostrato all'interno dei menu e, nonostante possa contenere pagine, viene solitamente utilizzato per la gestione delle informazioni e dei record che non vengono mostrati nel front-end (in questo progetto sono state utilizzate SysFolder per contenere informazioni sugli utenti del front-end e i file di configurazione per il template del sito). A ogni pagina possono essere associati permessi di accesso, rendendole visibili o accessibili solo a determinati utenti o gruppi di utenti del front-end. In base alla struttura del database di TYPO3, la tabella delle pagine occupa un ruolo centrale all'interno di esso. Visto che l'ID della pagina è unico, ognuna di esse può essere collegata e referenziata dalle altre. La struttura ad albero del sistema permette di organizzare non solo la tabella delle pagine ma tutti i contenuti del sito web: tutti i record della tabella tt_content, che ha al suo interno i dati dell'intero sistema (i contenuti delle pagine), hanno assegnato un identificatore univoco (UID) e sono collegati tra di essi tramite il PID della pagina corrispondente, in relazione al punto in cui sono stati creati.

3.3 Front-end
Con il termine front-end (FE) ci si riferisce[36] generalmente all'estensione di sistema installata nella directory typo3/sysext/cms/, che è resa accessibile
Università degli Studi di Brescia

3.3 F ro nt -e nd

Pag ina 4 1

all'installazione di TYPO3 tramite il link simbolico tslib/ nella directory di installazione del pacchetto “dummy”. Si sta parlando di quello che è il sito web mostrato all'utente o, come lo chiamano alcuni il “motore per la pubblicazione”. Si tratta, quindi, della parte responsabile di mostrare il contenuto del sistema nel browser web. Il fatto che si tratti di un'estensione (sebbene di sistema, e quindi impossibile da modificare o rimuovere) fa sì che, teoricamente, potrebbero esistere altri front-end. Proprio come il back-end, nuove funzionalità possono essere aggiunte al front-end tramite l'uso di estensioni[17], ed è possibile sviluppare le proprie tramite un tool chiamato Kickstarter, che mette a disposizione un framework per lo sviluppo di estensioni compatibili con il front-end di TYPO3. Le applicazioni per il front-end possono essere costituite semplicemente da alcune linee di codice TypoScript, oppure essere un'intera applicazione PHP con tanto di tabelle del database.

3.3.1 Processo di rendering
Il setup di default del front-end di TYPO3 prevede che il file index.php riceva tutte le richieste e determini conseguentemente cosa fare. Il processo di rendering[17] di una pagina è il principio del funzionamento dello script tslib/index_ts.php.

Durante la fase di inizializzazione vengono impostate le costanti,

viene stabilita una connessione al database e sono integrate le librerie di front-end.

Viene creata la variabile globale $TSFE della classe tslib_fe, che

controlla il processo di rendering.

Viene creato l'oggetto per l'autenticazione degli utenti di front-

end e per la gestione delle sessioni.

Università degli Studi di Brescia

Pa gi na 4 2

3.3.1 Pro ce sso di rend eri ng

Se è attivo un utente di back-end, sono inizializzate funzioni

addizionali come la modifica di front-end e Admin Panel (pannello di amministrazione).
● ●

Viene inizializzato TypoScript Front-end Engine. Se disponibile, la pagina completa viene letta dalla cache del

database.
● ●

L'array config viene letto dal setup di TypoScript. Vengono letti i dati di base da $TCA (array contenente tutti i

cambiamenti della tabella del database in cui, nell'oggetto tt_content, vengono immagazzinati i contenuti della pagina).
● ● ●

Viene determinata la localizzazione da utilizzare. Vengono elaborati i dati trasmessi, per esempio quelli di un form. Se la pagina non può essere letta dalla cache, viene mostrata dal

setup di TypoScript e scritta nella cache.

Gli oggetti che non sono immagazzinati nella cache (cObjects)
USER_INT,

sono mostrati e inseriti nell'output: PHP_SCRIPT_INT,
PHP_SCRIPT_EXT.

La pagina, una volta effettuato il rendering, viene mostrata con il

comando echo().
● ● ●

Vengono salvati i dati della sessione dell'utente di front-end. Vengono scritti i dati del log. Se richiesto, viene inserito un box di preview se un utente di

back-end ha richiesto un'anteprima della pagina.

Se attivato nel pannello di amministratore, viene scritto un file

HTML statico.
● ●

Viene inserito il pannello di amministrazione, se configurato. Se è installata un'estensione di debug, viene effettuata la

chiamata in modo che possa gestire l'output.
Università degli Studi di Brescia

3.3.2 API

Pag ina 4 3

3.3.2 API
Oltre alle librerie t3lib, sono disponibili altre librerie e oggetti nel front-end. Il processo di rendering produce la struttura di oggetti illustrata di seguito.
$TSFE (tslib_fe) | ---> fe_user (tslib_feUserAuth) | ---> sys_page (t3lib_pageSelect) | ---> cObj (tslib_cObj) | ---> myPluginObj (extends tslib_pibase) | ---> cObj (tslib_cObj)

Nella maggior parte dei casi un'estensione del front-end è un plug-in che rappresenta una delle classi tslib_pibase. Dal plug-in è possibile quindi avere accesso diretto alle seguenti classi e oggetti[17]: tslib_fe Il TypoScript Front-end Engine (TSFE) è disponibile come variabile globale per i plug-in tramite $GLOBAL['TSFE'] tslib_cObj É disponibile come oggetto per plug-in tramite $this->cObj e contiene metodi per rendering di oggetti TypoScript come, ad esempio, TEXT e IMAGE; inoltre, in questa classe possono essere trovate anche funzioni come stdWrap o
parseFunc.

tslib_pibase I plug-in sono un'estensione di questa classe, che offre numerose funzioni utili per i plug-in. t3lib_pageSelect Funzione delle pagine; può essere indirizzata nel front-end tramite l'oggetto
$GLOBALS['TSFE']->sys_page.

t3lib_div

Università degli Studi di Brescia

Pa gi na 4 4

3.3.2 API

La collezione di funzioni t3lib_div è disponibile automaticamente nel front-end.

3.3.3 TSFE
Il TypoScript Front End è disponibile come oggetto per i plug-in nella variabile globale $TSFE e contiene informazioni, metodi e oggetti. Come già detto in precedenza, TSFE è l'oggetto centrale che controlla l'intero processo di rendering del front-end. Per molti plug-in è sufficiente l'utilizzo delle funzioni degli oggetti t3lib_div e cObj, ma all'interno di questo progetto è stato utile anche l'utilizzo di sys_language_uid nello sviluppo di un'interfaccia multilingua,
tmpl

nell'utilizzo dei template e alcune semplici funzioni utili nel debug

dell'applicazione quali set_no_cache(). Segue un estratto[17] dei dati e degli oggetti presenti nella variabile $TSFE.
$TSFE -> id

uid (identificativo univoco) della pagina corrente.
$TSFE -> page[]

Array contenente il record della pagina corrente.
$TSFE -> sys_page

Oggetto con metodi riferiti alla pagina.
$TSFE -> additionalHeaderData[]

Array per ulteriori dati di header HTML.
$TSFE -> sys_language_uid

ID del linguaggio corrente.
$TSFE -> tmpl

Oggetto template di TypoScript.
$TSFE -> tmpl-setup[]

Array per l'intero setup di TypoScript
Università degli Studi di Brescia

3.3.3 T SFE

Pag ina 4 5

$TSFE -> pSetup[]

Array del setup TypoScript dell'oggetto pagina.
$TSFE -> config[]

Array di configurazione di TypoScript.
$TSFE -> register[]

Registro di TypoScript.
$TSFE -> cObj

Oggetto cObject centrale; l'oggetto cObject è reso disponibile ai plug-in tramite $this ->
cObj.

$TSFE -> fe_user

Utente del front-end corrente (oggetto).

L'oggetto $TSFE fornisce anche i metodi utili specifici per i plug-in elencati di seguito.
getStorageSiterootPids()

Restituisce un array con i campi _SITEROOT e STORAGE_PID contenenti gli ID pagina della pagina di root del sito web e la pagina in cui devono essere immagazzinati i record.
getPagesTSconfig()

Basato sulla rootline corrente (cioè sul “ramo” in cui si trova la pagina corrente), questo metodo ritorna l'array TSconfig delle pagine.
setJS()

Imposta codice JavaScript integrato nell'header HTML.
setCSS()

Imposta dati CSS integrati nell'header HTML.
uniqueHASH()

Oggetto template di TypoScript.

Università degli Studi di Brescia

Pa gi na 4 6

3.3.3 T SFE

set_no_cache()

Imposta la pagina corrente a non-cacheable (cioè i dati relativi a essa non sono inseriti nella cache del sistema).
set_cache_timeout_default()

Imposta il timeout per la cache relativa alla pagina corrente

L'estensione FE Debug/Info output (cc_feinfo) fornisce un plug-in utilizzabile per mostrare nel front-end i valori attuali dell'oggetto $TSFE. Può essere utile durante il debugging o per avere informazioni relative ai dati disponibili.

3.3.4 Oggetti contenuto
Gli oggetti di contenuto (content objects, cObjects) sono utilizzati per trasformare in rendering di front-end i dati dei vari tipi di contenuti messi a disposizione dal back-end (FILE, HTML, TEXT, ...) e salvati nel database. Un cObject è un oggetto TypoScript, come ad esempio TEXT, IMAGE, o
HMENU.

La generica definizione di un cObject all'interno delle pagine in

TypoScript è la seguente:
# Commento myObject = OBJECTTYPE myObject.PROPERTY = value_1 myObject.subObject = OBJECTTYPE myObject.subObject.PROPERTY = value_2

Nonostante non sia ancora stato affrontata la creazione di una pagina, desidero comunque rendere più chiaro questo concetto, fondamentale per la comprensione del funzionamento dell'intero sistema di scripting di TYPO3. Propongo di seguito alcuni esempi: 1. Il cObject di tipo HTML viene utilizzato per inserire all'interno della pagina un semplice contenuto di testo senza formattazione. Adesso

Università degli Studi di Brescia

3.3.4 Og g e tti co nt enu to

Pa gi na 4 7

verrà creato l'oggetto TEXT chiamato 10, il quale avrà un valore assegnato, cioè “oggetto di testo”.
10 = TEXT 10.value = oggetto di testo

2. Il cObject di tipo IMAGE permette di integrare delle immagini all'interno degli script in TypoScript. Le immagini hanno la proprietà di essere dei file, e quindi sono riferite come tali all'interno del linguaggio, tuttavia ai cObjects di tipo IMAGE possono essere applicate particolari funzioni per la manipolazione di immagini.
20 = IMAGE 20.file = fileadmin/images/template/nome_immagine.gif

Gli oggetti sono implementati tramite PHP nella classe tslib_cObj (class.tslib_content.php). Nella stessa classe è possibile anche trovare funzioni TypoScript come stdWrap o parseFunc. Nei plug-in c'è un'istanza di tslib_cObj disponibile tramite $this -> cObj. Questo riferimento all'oggetto è impostato automaticamente durante l'inizializzazione del plug-in. Segue un estratto[17] dall'API di di tslib_cObj.
data[]

Rende disponibile il record corrente (dalla tabella tt_content)
cObjGetSingle()

Crea un cObject nel front-end in base al nome che viene passato ( TEXT,
IMAGE, ...) e con il relativo setup di TypoScript. stdWrap

Funzione “standard wrap”; applicata ai parametri TypoScript specificati, viene usata per creare un largo numero di opzioni.
enableFields()

Crea una query SQL WHERE che seleziona solo i record validi nelle queries del front-end.
Università degli Studi di Brescia

Pa gi na 4 8

3.3.4 Og g et ti co nte nut o

DbgetUpdate()

Crea uno statement SQL UPDATE da una tabella che gestisce la configurazione dell'array $TCA.
DbgetInsert()

Simile a DbgetUpdate ma usato per la gestione degli inserimenti di dati.

Nell'implementazione PHP, gli oggetti di contenuto e altri metodi in tslib_cObj condividono lo stesso concetto di parametri:
function cImage($file,$conf) function stdWrap($content,$conf) function typoLink($linktxt, $conf)

Il primo parametro contiene un valore (ad esempio, una stringa) da manipolare. Il secondo parametro $conf contiene un array di setup TypoScript che configura il comportamento del metodo. Anche i plug-in seguono questo concetto, dato che sono chiamati tramite
USER o USER_INT e si aspettano un metodo con i parametri $content e $conf. Nei

plug-in normali, tuttavia, $content non viene utilizzato e può essere ignorato.

3.4 Template
Parlo ora degli oggetti di alto livello o Top Level Objects (TLO). Mentre i
cObjects

rappresentano i contenuti della pagina e, in genere, elementi “esterni”

al sistema (immagini, testo, script in PHP, ecc.), i TLO sono utilizzati dal sistema come contenitori di cObjects, come variabili di configurazione e librerie di funzioni. Sono quindi la rappresentazione di dati a un livello di astrazione più elevato rispetto ai cObjects. Ad essi appartiene il TLO di tipo PAGE, che genera una pagina del sistema, config che contiene al suo interno le variabili di configurazione del sito web (ad esempio la lingua predefinita del sito), oppure
Università degli Studi di Brescia

3.4 T emp l at e

Pa gi na 4 9

altri oggetti come variabili temporanee all'interno del codice (generalmente chiamati temp, ma il nome è a discrezione del programmatore).

I template TypoScript determinano come Front-end Engine dovrà gestire l'output, ovvero quali contenuti saranno letti dal database, se dovrà essere usato un template HTML, dove saranno inserite le costanti, e così via. Non solo, la trasformazione del contenuto del database per l'output del front-end è controllata dal template di TypoScript, in generale si tratta di quali famiglie di font, dimensioni e colori saranno utilizzati.

Durante la generazione dell'output (un processo semplificato è presentato in Figura 3.3)vengono controllate le seguenti aree[17] da parte dei template TypoScript:
● ● ● ● ● ● ● ●

Cache. Statistiche/file di log. Dettagli dell'header HTML. Tipi di pagina. Layout di base (basato su un file HTML). Elementi di contenuto (funzioni e aspetto). Creazione dei link. Integrazione delle estensioni e di eventuali script PHP.

Esistono due tipi di template all'interno di TYPO3: root template e extension template. Nel lavoro di Stage sono stati utilizzati entrambi, in quella che è l'implementazione più versatile resa disponibile da questa separazione. Il concetto di root template indica che un template è inserito alla radice (root, appunto) del sito web. Ovvero, tutte le pagine dell'albero, nel caso non sia specificato espressamente un template, ricorreranno a quello del ramo precedente fino, eventualmente, alla radice del sito web. Questo permette la

Università degli Studi di Brescia

Pa gi na 5 0

3.4 T e mp la te

creazione di cascading template (ovvero template “a cascata”) in cui i template delle “foglie” dell'albero aggiungono funzionalità al template di root qualora fosse necessario.

Figura 3.3.: Processo di rendering del front-end.

Lo strumento per la creazione dei template si trova nei moduli principali di TYPO3. Per la navigazione all'interno dei moduli del menu del CMS introduco la notazione Modulo | Sotto-modulo per indicare quando si seleziona un sottomodulo che appartiene ad un modulo principale. Selezionando Web|Template e utilizzando il tool Template Analyzer è possibile avere una visione globale dei template esistenti. Selezionando la singola pagina viene mostrata la gerarchia dei template applicata a quella pagina. Osserviamo, come detto in precedenza, che quando lavoriamo all'interno del modulo dei template siamo completamente

Università degli Studi di Brescia

3.4 T emp l at e

Pa gi na 5 1

indipendenti rispetto al contenuto della pagina. Modificando, eliminando o creando template all'interno di questo modulo non sarà in alcun modo influenzato il contenuto ma solamente l'output. All'interno del sito web installato nell'ambito del progetto di Stage, la pagina “rootpage” ha associato un template chiamato NEW SITE (nome di default al momento della creazione). Questo template contiene poche informazioni, salvo avere al suo interno il collegamento verso un extension template[37] chiamato BASE TEMPLATE che contiene le informazioni per la generazione dell'output e per l'impaginazione dei contenuti. Selezionando il singolo record dei template, TYPO3 mostra il contenuto delle variabili di configurazione, tuttavia per modificarle è necessario utilizzare il tool Info/Modify, che permette di cambiare il valore dei campi del template[17], indicati di seguito.

Template Title Contiene il nome del template che verrà visualizzato nel back-end. Per questo campo è possibile specificare le funzioni aggiuntive Deactivated, Start e Stop, che consentono di stabilire la validità dell'oggetto template. Website title É il campo contenente il titolo del sito web, che verrà inserito all'interno del tag HTML <title></title>. Constants Imposta i valori che andranno a sostituire le variabili specificate nel campo Setup. Sono valori utili per modificare agilmente configurazioni dell'intero template come, ad esempio, colori e dimensioni dei font. Setup Contiene il codice TypoScript che definisce sia il comportamento sia l'aspetto dell'intera applicazione. Resources
Università degli Studi di Brescia

Pa gi na 5 2

3.4 T e mp la te

Resources contiene riferimenti a file che vengono utilizzati all'interno del codice TypoScript, ai quali si può fare riferimento tramite il tipo di dato
resources.

Clear e Rootlevel Clear Constants, Clear Setup e Rootlevel sono delle checkbox utilizzate per la realizzazione di cascading template. In particolare, Rootlevel permette di definire all'interno di una struttura di pagine quale sarà il punto di partenza (root) di un intero sito web. Clear Constants e Clear Setup, invece, permettono di terminare l'eredità di Setup e Constants da parte della corrente pagina rispetto al template impostato a livello di root. Include Static I template statici sono inclusi all'interno di ogni installazione base di TYPO3. Sono dei modi molto semplici di impaginazione, per quanto già essi garantiscano la visualizzazione del contenuto. Include Static (from extensions) Si tratta di template messi a disposizione dalle estensioni, e quindi

necessitano di essere installati prima di renderli disponibili. Non sono da considerare come interfacce grafiche predefinite ma piuttosto come applicazioni messe a disposizione dei designer di template. Ad esempio, CSS_styled_content permette l'utilizzo di fogli di stile all'interno del template corrente. Include Basis Template I Basis Template costituiscono librerie personali che possono essere realizzate dagli sviluppatori del sito e messi a disposizione per organizzare il codice TYPO3 in moduli. Questo principio è stato sfruttato all'interno del progetto di Stage, realizzando un template che viene incluso nel template di root come estensione. Static template files from T3 extensions Offre un menu per la selezione della collocazione dei template messi a disposizione da parte delle estensioni. Possono essere collocati prima del
Università degli Studi di Brescia

3.4 T emp l at e

Pa gi na 5 3

template se è impostato a livello di root (impostazione di default) oppure possono essere inclusi sempre in anticipo oppure mai. Template on next level Permette di specificare, qualora ve ne fosse la necessità, un template da inserire nel livello immediatamente successivo all'attuale. Description Offre la possibilità di inserire una breve descrizione del template, visibile solo nel back-end. Back-end Editor Configuration. Utilizzato per passare stili predefiniti all'editor CSS, ma non è correntemente usato.

Tra i campi del Template Editor, i due più importanti sono Setup e Constants. Il primo contiene il codice TypoScript, ovvero quello che definisce tutte le configurazioni che controllano l'aspetto e il comportamento del sito web. Il campo Constants, invece, passa al campo Setup valori globali, chiamati costanti. Questo modo di procedere offre una visione d'insieme quando si tratta di modificare i valori per singole parti di pagina. Usato nel modo corretto permette, ad esempio, di modificare un singolo valore per ottenere un cambiamento di una variabile nell'intero sistema di template. Riporto di seguito un breve esempio per spiegare il concetto precedente, affrontando la creazione di una pagina in TypoScript. Campo Constants:
myText.Content = Hello world!

Campo Setup:
pagina = PAGE pagina { typeNum = 0 10 = TEXT 10.value = {$myText.Content} Università degli Studi di Brescia

Pa gi na 5 4

3.4 T e mp la te

}

In questo caso, l'output della pagina sarà:
Hello world!

Il campo Setup contiene anche la definizione dell'oggetto PAGE, a cui viene dato il nome pagina tramite l'operatore di assegnazione “=”. All'oggetto page viene aggiunta la proprietà typeNum, con valore 0. typeNum è una variabile che indica, all'interno dell'oggetto pagina, a quale contenuto ci si sta riferendo. La pagina potrà poi essere chiamata dal browser con informazioni aggiuntive riguardo al contenuto della pagina a cui si vuole accedere. In questo caso il typeNum = 0 indica il contenuto di default. Tutto il contenuto delle parentesi “{“ e “}” è riferito all'oggetto pagina. Sarebbe stato equivalente scrivere:
pagina = PAGE pagina.typeNum = 0 pagina.10 = TEXT pagina.10.value = {$myText.Content}

L'oggetto page.10 viene definito come tipo TEXT (testo) e, seguendo i concetti espressi in precedenza riguardo a TypoScript, il numero 10 indica la posizione nell'array della configurazione della pagina, e pagina.10 il percorso per accedere al valore. Un ipotetico altro oggetto, per esempio ancora di tipo testo, dovrebbe avere numero diverso rispetto al precedente per evitare errori. Gli oggetti sono elaborati in ordine crescente quindi un oggetto con valore inferiore sarà posizionato all'interno della pagina in posizione precedente agli altri, indipendentemente da come è posizionato all'interno del codice TypoScript nel campo Setup. Infine, con la riga
pagina.10.value = {$myText.Content}

Università degli Studi di Brescia

3.4 T emp l at e

Pag ina 5 5

si va ad aggiungere una proprietà all'oggetto pagina.10 e si assegna il valore
{$myText.Content},

che in questo caso sarebbe stato equivalente alla seguente

riga:
pagina.10.value = Hello world!

3.5 Layout
Gli esempi visti finora esprimono concettualmente come TypoScript interpreta il codice; in realtà non è stato effettuato alcun accesso al database e non è ancora stato scritto codice che permette di inserire i contenuti della tabella tt_content, in quanto l'output è contenuto all'interno di TypoScript stesso (ovvero la frase Hello World!). La separazione dei contenuti dal codice avviene solo nel momento in cui utilizziamo TypoScript per la creazione del layout dell'applicazione web e non come definizione del contenuto che verrà mostrato. TYPO3 mette a disposizione vari modi per la creazione dei layout tramite i template TypoScript, uno dei quali è stato scelto per l'utilizzo in questo progetto.

Template standard (statici) Come visto in precedenza, TYPO3 mette a disposizione template statici predefiniti con cui visualizzare il contenuto del database. Essi tuttavia risultano inadeguati per il corrente progetto: graficamente sono molto semplici e hanno limitati margini di personalizzazione.

Template in puro TypoScript All'interno del codice TypoScript è possibile definire il layout di un sito web in modo da produrre output HTML, basandosi solo sulle funzioni TypoScript.
Università degli Studi di Brescia

Pa gi na 5 6

3.5 La yo ut

Ad esempio, una tabella HTML può essere creata come un cObject di tipo
CTABLE,

e al suo interno potremo riferirci alle varie parti con le aree chiamate
leftMenu, rightMenu, bottomMenu

topMenu,

e

content-cell,

previste da

TYPO3.

Template HTML e Template Auto-Parser Lavorando con un web designer, si rende evidente la suddivisione dei ruoli di cui ho parlato in precedenza: le conoscenze di HTML del designer possono unirsi alle conoscenze di TypoScript del programmatore esperto in TYPO3, con conoscenze minime da parte di entrambi del lavoro del proprio collega. Tramite l'estensione Template Auto-Parser[36] è infatti possibile includere all'interno di un template una pagina HTML opportunamente formattata, il ruolo dell'estensione sarà quello di analizzare il file HTML fornito e individuare al suo interno le parti comprese tra alcuni tag di interesse. Il file HTML deve essere collocato all'interno del direttorio fileadmin/ del sistema, e i riferimenti alle immagini saranno mantenuti, permettendo quindi di conservare intatto il lavoro del web designer mentre il sistema viene configurato per lavorare solo sui tag di interesse e inserire il contenuto del database al loro interno.

TemplaVoila! TemplaVoila! è un'estensione di TYPO3 espressamente dedicata al lavoro sul codice HTML: trattandosi di una delle aggiunte recenti, la sua documentazione è inferiore rispetto al più diffuso Template Auto-Parser, che è stato considerato il metodo ideale per la gestione dei template all'interno di questo progetto. TemplaVoila![17] rappresenta comunque una delle strade che seguirà il design di layout per TYPO3: sviluppata da Kasper Skårhøj e Robert Lemke, perfeziona il lavoro effettuato con Template Auto-Parser, offrendo un editor WYSIWYG per la modifica della pagina HTML inclusa, estendendo la gestione dei layout di TYPO3 e il concetto di “colonne”.

Università degli Studi di Brescia

3.6 E stensi o ni

Pa gi na 5 7

3.6 Estensioni
Una caratteristica essenziale del framework di TYPO3 è l'estensibilità che si concretizza tramite l'utilizzo di pacchetti chiamati estensioni (extension), contenenti moduli, plug-in, codice TypoScript e molto altro. Le estensioni vengono installate in linea con l'utilizzo di Extension Manager e provengono da un unico direttorio centralizzato, il TYPO3 Extension Repository (TER). Le estensioni sono una funzionalità ormai da lungo tempo presente in TYPO3: siamo alla versione 4.1 e sono state introdotte nella 3.5 per espandere il sistema, precedentemente basato sulle interfacce. Alcune estensioni affondano le loro radici in questo periodo, e hanno mantenuto la loro caratteristica di nomi di tabelle aventi il prefisso tt_. Il sistema di estensioni ha permesso di avere un'interfaccia chiara per la creazione di nuovi pacchetti e quelli precedenti sono stati riscritti secondo i nuovi metodi; l'introduzione di un repository centralizzato ha infine contribuito all'aumento del numero di estensioni disponibile in modo esponenziale. Le estensioni sono pubblicate all'interno del TER da parte sia di provider web professionali sia di singoli sviluppatori più o meno esperti e sono rese pubblicamente disponibili. Talvolta si tratta di semplici miglioramenti alla struttura di base ma nella maggior parte dei casi lo scopo per cui viene sviluppata un'estensione è la realizzazione di intere nuove applicazioni quali, ad esempio, nel nostro caso la gestione di utenti, la realizzazione di form per il contatto con clienti e l'acquisto on-line di servizi, la gestione dei template. Extension System di TYPO3 è costituito principalmente da tre

componenti[17] comunicanti:

Extension API: l'interfaccia verso il core di TYPO3, l'integrazione

delle estensioni nel sistema TYPO3.

Extension

Manager:

un

modulo

di

back-end

per

l'amministrazione e l'installazione di estensioni, oltre che lo strumento per gli sviluppatori per la gestione del software da loro realizzato.
Università degli Studi di Brescia

Pa gi na 5 8

3.6 Este nsio ni

Extension Repository (TER): un direttorio on-line centralizzato

che permette alle estensioni di essere inserite e scaricate, raggiungibile tramite web browser all'indirizzo typo3.org/extensions/.

Ogni estensione è composta da un numero di file all'interno di un direttorio. Ognuna di esse può essere installata importandola direttamente dal TER oppure utilizzando dei file in formato .t3x che contengono la definizione dell'estensione e i file in essa contenuti. Ogni estensione all'interno del TER è identificata univocamente dalla propria extension key, che costituisce anche il nome dell'estensione stessa. Tutti i file e le funzioni del pacchetto sono quindi referenziati tramite la key dell'estensione, per evitare conflitti all'interno del sistema. Riporto di seguito l'esempio di una (semplice) estensione riguardante la struttura dei file all'interno del direttorio di installazione di Template Auto Parser (la cui key è automaketemplate), utilizzata in questo progetto per la realizzazione del template.

automaketemplate/ ext_emconf.php ext_icon.gif ext_localconf.php ext_php_api.dat doc/ TODO.txt manual.sxw class.tx_automaketemplate_pi1.php

pi1/

In particolare sono comuni a tutte le estensioni i seguenti componenti:

Il file ext_emconf.php contiene tutte le informazioni generali e

metadata dell'estensione.

Il file ext_localconf.php viene incluso nel front-end e nel back-

end a ogni request e può contenere tutte le variabili di configurazione
Università degli Studi di Brescia

3.6 E stensi o ni

Pag ina 5 9

($TYPO3_CONF_VARS)

e

quelle

che

si

trovano

all'interno

di

typo3conf/localconf.php.

Il direttorio doc/ deve sempre essere presente e contenere il file

relativo alla documentazione, scritto in formato OpenOffice 1.x (.sxw).

Il direttorio pi1/ contiene gli script e i dati del plug-in.

Per estensioni più complesse esiste anche la possibilità di specificare e configurare codice TypoScript tramite i file ext_typoscript_constants.txt e
ext_typoscript_setup.txt

che equivalgono appunto ai campi Constants e

Setup del template.

In base alla loro posizione nell'architettura di TYPO3, le estensioni sono classificate secondo il seguente criterio:

Estensioni di back-end, che espandono le funzionalità del back-

end ma non compaiono come moduli separati.

Moduli del back-end, ovvero moduli principali (come Web,

Tools), moduli (Web | List) oppure sotto-moduli (Web | Functions | Import).

Estensioni front-end, che contengono piccole applicazioni per

funzionalità o configurazioni del front-end.

Plug-in del front-end, che possono essere applicazioni vere e

proprie (funzioni di login degli utenti, aggiornamento news, ecc.) oppure espansioni delle funzionalità del front-end (elementi di contenuto, menu, ecc.).

Varie, contenenti per esempio tabelle statiche del database o

librerie di programmazione.

Università degli Studi di Brescia

Pa gi na 6 0

3.6 Este nsio ni

Le estensioni utilizzate sono generalmente locali, ovvero proprie del singolo sito web e non del sistema. La struttura dell'installazione di TYPO3 all'interno del server web prevede, infatti, la presenza dei direttori Core del sistema e di uno (o più) direttori corrispondenti ai percorsi dei singoli siti web, tutti facenti riferimento all'unico Core. Così ogni singolo sito presente sul server ha la possibilità di installare e gestire le proprie estensioni separatamente dagli altri. La versatilità e la potenza del manager delle estensioni di TYPO3 rappresenta, per certi versi, il suo punto debole. Il fatto che TYPO3 metta a disposizione un tool (chiamato Extension Kickstarter) che fornisce un framework per i programmatori, se da un lato uniforma le estensioni e permette una gestione razionale e organizzata (tramite il TER), dall'altro favorisce il proliferare di una miriade di estensioni in stato di alpha, beta e unstable, realizzate come progetti poi abbandonati o come semplici esperimenti, che si confondono all'interno della grande quantità di estensioni presenti nel repository. Talvolta, al contrario, applicazioni stabili e pronte all'uso (spesso realizzate dagli stessi sviluppatori del Core di TYPO3) vengono classificate come versioni beta, aumentando ulteriormente la confusione. Il fatto che esistano più estensioni che forniscono (potenzialmente) le stesse funzionalità rappresenta più un ostacolo che un pregio per l'utente che abbia la necessità di scegliere il sistema migliore. Esiste naturalmente un sistema di rating (valutazione) delle estensioni da parte degli utenti e i conteggio del numero dei download, fattori che forniscono ottimi indizi per sapere su quale applicazione puntare nel momento della decisione, tuttavia non sono strumenti sufficienti a dipanare completamente i dubbi. Il TER, inoltre, non dispone di un motore di ricerca sufficientemente raffinato. Quello che potrebbe realmente fare la differenza sarebbe la creazione di una serie di estensioni, ampiamente testate e consolidate, che vadano a fornire una base per le applicazioni fondamentali all'interno di un portale web (gestione degli utenti, moduli delle news, guestbook, shop system tanto per citarne alcuni).
Università degli Studi di Brescia

3.7 Ut ent i T Y PO 3

Pag ina 6 1

3.7 Utenti TYPO3
Gli utenti del sistema TYPO3 sono di due categorie: utenti back-end e utenti front-end.[17]

3.7.1 Utenti back-end
Gli utenti back-end costituiscono gli addetti all'amministrazione e alla gestione dei contenuti all'interno del CMS. L'utente Admin è il primo utente che viene creato al momento dell'installazione e ha completo controllo del sistema. Tramite di esso è possibile creare nuovi utenti, gestire gruppi di utenti e assegnare i privilegi desiderati a livello di applicazioni e di contenuti. La gestione degli utenti avviene tramite il componente “User Admin”, che mette a disposizione form per impostare i nomi e le proprietà degli utenti, la loro assegnazione a gruppi di lavoro, le cartelle di database e sistema a cui essi hanno accesso (DB e User mounts) e i permessi di accesso alle estensioni. In base a questa configurazione è possibile quindi creare utenti deputati alla sola realizzazione di nuove pagine, i quali avranno accesso solo ad alcuni direttori e al modulo Pagina del sistema, e/o utenti che si occupano dell'invio di newsletter tramite l'apposita estensione (Direct Mail) e quindi avranno accesso solo al modulo Direct Mail e/o utenti, come nel caso di questa installazione, che si occuperanno delle gestione degli ordini.

3.7.2 Utenti front-end
La seconda categoria di utenti TYPO3 è costituita dagli utenti front-end. I record corrispondenti a questo tipo di utente sono contenuti in un diversa tabella del database (in realtà in una pagina di tipo SysFolder) e quindi non corrispondono agli utenti visti in precedenza. Gli utenti front-end (FEUser) sono visitatori del sito web che ottengono privilegi e autorizzazioni particolari registrandosi (o tramite creazione dell'account da parte degli amministratori). Ad esempio possono essere
Università degli Studi di Brescia

Pa gi na 6 2

3.7.2 Ut ent i f ro nt- end

autorizzati all'accesso ad aree riservate o all'utilizzo di funzioni non disponibile agli utenti non registrati. L'accesso da parte di un utente permette di mostrargli solo le informazioni desiderate, in modo mirato e dedicato. Ad esempio, nel sistema di inter..esse per lo Stage, è possibile mostrare promozioni disponibili solo per quel particolare cliente, comunicazioni personali, etc. I FEUser possono essere combinati in gruppi ai quali vengono poi assegnate diversi permessi a livello di pagina; diversamente dagli utenti back-end, i permessi hanno una granularità più elevata e non è possibile fornire accesso solo ad alcuni elementi di un pagina ma solo alla pagina intera. Il sistema di utenti front-end fornisce le basi per l'assegnazione di permessi di accesso e, se necessario per la modifica dei permessi anche per gli utenti che hanno effettuato accesso al sito correttamente. TYPO3 fornisce una serie di plug-in di front-end per rendere possibili queste modifiche. La pagina del sistema contenente i record degli utenti viene creata come cartella SysFolder all'interno dell'albero delle pagine, selezionando l'estensione Website Users nel menu Contains Plug-in. Nel corrente lavoro di Stage, alla pagina è stato dato il nome Utenti. Una volta salvata, è possibile creare al suo interno nuovi record del tipo User Group, specificando in questo modo i gruppi di utenti front-end che si vogliono creare. La creazione degli utenti può avvenire sia da parte degli amministratori (manualmente) oppure dando agli utenti non registrati la possibilità di registrarsi all'interno del sito. Per fare questo mi sono avvalso di alcuni plug-in creati appositamente per la gestione degli utenti front-end.

Università degli Studi di Brescia

4 Svolgimento dell'attività
Installazione di TYPO3, analisi del sito web statico precedente e creazione di un template in TypoScript.

Pa gi na 6 4

4 .1 Insta ll az io ne di TY PO3

4.1 Installazione di TYPO3
4.1.1 Requisiti di sistema
I requisiti di sistema per l'installazione del CMS TYPO3 dal punto di vista software (dei quali non tratterò l'installazione) comprendono:
● ●

Server web (preferibilmente Apache, oppure Microsoft IIS). PHP versione 4.3.0 (minima richiesta) con incluse le librerie GD

per la manipolazione di immagini.

MySQL .

Componenti opzionali:
● ● ●

ImageMagick, librerie per la gestione delle immagini. PHP cache, PHP-accelerator o Zend Optimizer. zlib (compilato in PHP), per rendere più veloci le connessioni

comprimendo i dati trasmessi.
● ●

Estensioni di Apache mod_zip e mod_rewrite. phpMyAdmin, un tool in PHP per la gestione dei database

MySQL (è possibile anche installarlo come estensione di TYPO3).

Curl, se il server si trova dietro un server proxy. Non era questo il

caso del mio progetto.

Dal punto di vista hardware, i requisiti minimi dipendono dalle prestazioni che si desidera ottenere e dall'utilizzo previsto, e in particolare sono da considerare i seguenti fattori:
Università degli Studi di Brescia

4 .1.1 Requi sit i d i si ste ma

Pag ina 6 5

● ●

Quanti utenti in linea avremo contemporaneamente? Quanto dovrebbe essere veloce (in secondi) il server nel mostrare

le pagine?
● ●

Quante pagine per ora saranno mostrate? Qual è il traffico di dati che ci si aspetta mensilmente?

In base alla documentazione ufficiale[17], l'offerta che generalmente viene fornita anche da provider economici può essere sufficiente per gestire un massimo di 10 utenti contemporaneamente collegati nelle pagine di amministrazione e 50 utenti collegati nella parte di presentazione del sistema, un tempo di accesso alle pagine di 1,5 secondi e non più di 100 pagine per ora. Nel complesso, ci si aspetta un traffico dati di 5 GB mensili. Naturalmente, è necessario assicurarsi che il provider metta a disposizione i requisiti minimi indicati sopra e almeno 100MB di spazio web. In questo progetto, il software è stato installato in locale, quindi i tempi di latenza per l'accesso alle pagine sono stati ridotti al minimo. Non solo, sia il server web che il database erano installati sulla stessa macchina, rendendo ancora migliori le prestazioni. Non soffrendo di alcuna limitazione nelle impostazioni (il controllo su ogni dettaglio della configurazione era completo), l'ambiente era perfetto per l'utilizzo del CMS.

4.1.2 Processo di installazione
Presenterò ora l'installazione[37] del software sul server web. Il sito ufficiale dedicato agli sviluppatori (typo3.org) fornisce vari pacchetti software per l'installazione: per il progetto di Stage ho usato quello con minori personalizzazioni possibili, che mette a disposizione il sistema con la configurazione minima e le sole estensioni indispensabili al funzionamento ed è privo di stili grafici predefiniti per la presentazione del sito web.
Università degli Studi di Brescia

Pa gi na 6 6

4 .1.2 Pro c esso di insta ll az io ne

I file di installazione sono due:

l'archivio

source,

ovvero

typo3_src-4.1.1.tar.gz

(indispensabile)

l'archivio

dummy-4.1.1.tar.gz,

letteralmente

“fittizio”,

con

database vuoto e assenza di esempi e tutorial al suo interno Una volta decompressi gli archivi con il comando tar -xzpvf all'interno della directory del nostro web server, vanno impostati i permessi di accesso ai file e rinominate le directory in modo da accedere al sistema digitando l'indirizzo http://127.0.0.1/3services/typo3/index.php, si utilizza il tool di installazione (Figura 4.1) che, essendo il nostro il primo accesso al sistema, sarà abilitato di default (i passi per l'installazione sono spiegati in dettaglio nella documentazione compresa nell'archivio source o alla wiki[38] di TYPO3).

Figura 4.1.: Schermata conclusiva del processo di installazione.

Il tool di installazione è un programma in PHP che permette, in tre semplici passaggi, di creare un nuovo database dove importare uno schema di default all'interno della nostra installazione (al momento è ancora completamente vuota).
Università degli Studi di Brescia

4 .1.2 Pro c esso di insta ll az io ne

Pa gi na 6 7

Al termine del processo di installazione, se si prova ad accedere alle pagine di “rootlevel”, ci verrà mostrato un errore, rappresentato nella Figura 4.2 seguente. É perfettamente normale, in quanto si tratta ora di creare le pagine all'interno del sito web.

Figura 4.2.: Messaggio di errore dovuto all'assenza di pagine.

Cartella t3lib/ typo3/ (condivisa tra tutti i siti web dell'installazione corrente)

Contenuto Librerie TYPO3 e setup del database core (t3lib/stddb/) Codice sorgente del back-end di amministrazione di TYPO3. Può essere collegata con un symlink a typo3_src. La maggior parte delle cartelle sono protette da scrittura, eccetto quelle presentate in Tabella 4.

typo3conf/ Direttorio locale contenente configurazione e estensioni locali. Può (specifica per ogni sito essere usata per motivi decisi a piacimento dall'utente. Deve essere web) possibile l'accesso in scrittura per PHP. Al suo interno si trova il file localconf.php, che contiene la configurazione dell'installazione TYPO3 locale, nome utente e password del database, la password del tool di installazione, ecc. I file temp_CACHED_xxxxxx_ext_localconf.php e temp_CACHED_xxxxxx_ext_tables.php sono generati automaticamente da parte delle estensioni caricate di ext_localconf.php e ext_tables.php. Possono essere cancellati in qualunque momento dato che saranno riscritti all'utilizzo successivo. typo3temp/ Contiene i file temporanei. (specifica per ogni sito web) uploads/ Contiene i file allegati a record del database gestiti da TCE. Viene (specifica per ogni sito usata di default per le immagini inserite nell'editor di testo RTE ed web) è necessaria solo se configurata in $TCA.

Tabella 3: Cartelle principali dell'installazione di TYPO3.

Università degli Studi di Brescia

Pa gi na 6 8

4 .1.2 Pro c esso di insta ll az io ne

La Tabella 3 contiene i direttori principali dell'installazione di TYPO3 sul server web, la Tabella 4 elenca alcune cartelle contenute in typo3/.[39]
Cartella ext/ sysext/ Contenuto Contengono estensioni. ext/ viene utilizzata dalle estensioni “globali” e sysext/ dalle le estensioni di sistema. Entrambi i tipi sono disponibili per tutte le installazioni che condividono lo stesso codice sorgente. La differenza sta nel fatto che le estensioni globali possono essere assenti dal codice sorgente distribuito (possono essere aggiornate da Extension Manager) mentre le estensioni di sistema sono “permanenti” e saranno sempre parte del codice sorgente che viene distribuito. Non è possibile modificare le estensioni di sistema, a meno che questa opzione non sia impostata in TYPO3_CONF_VARS. Elementi grafici. Contiene lo script di inizializzazione del tool di installazione. Contiene moduli del back-end. Riflette il concetto di moduli e sotto-moduli prima dell'avvento delle estensioni ed è usata essenzialmente per compatibilità e per Extension Manager (mod/tools/em/).

gfx/ install/ mod/

Tabella 4: Contenuto di typo3/.

4.1.3 Interfaccia di amministrazione (backend)
Terminato il processo di installazione, è possibile accedere tramite il proprio browser web all'interfaccia di amministrazione del sistema semplicemente aggiungendo /typo3 all'indirizzo del sito web. Inserendo nome utente e password, inviate in forma crittografata al server, ci si trova nel Back End del sistema. Dal punto di vista grafico, il back-end è suddiviso in frame contenenti le informazioni in modo gerarchico. Dal punto di vista concettuale, la suddivisione avviene in moduli, ognuno dei quali fornisce funzionalità all'ambiente di amministrazione.

Università degli Studi di Brescia

4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd)

Pa gi na 6 9

Possiamo suddividere l'interfaccia utente in tre aree principali (Figura 4.3), di cui riporto anche il nome originale inglese a cui poi farò riferimento in seguito:

1. La barra dei moduli (Module Bar) 2. L'area di navigazione (Navigation Bar) 3. La visualizzazione dei dettagli (Details View)

Nella colonna sinistra (Module Bar, indicata in verde in Figura 4.3) è possibile vedere la lista di moduli e sotto-moduli a disposizione, mentre nel frame principale vengono visualizzate le informazioni specifiche relative al sotto-modulo selezionato. Esistono quindi dei moduli principali che non possono essere modificati e che sono a disposizione dell'utenza fin dal primo utilizzo, e cioè:
● ● ● ● ●

Web. File. Doc. Tools. Admin Functions (disponibile solo per gli amministratori).

L'area del modulo Web è quella più utilizzata dagli utenti con responsabilità di redattori del sito. I contenuti sono salvati sotto forma di pagine e possono essere qui modificati. É possibile selezionare il sotto-modulo Page per la creazione e la modifica di pagine all'interno del sito, oppure visualizzare come si presenteranno al visitatore, elencare tutti gli elementi del sito web o della singola pagina con la funzione List, ottenere informazioni, impostare le credenziali di accesso, gestire i template o le varie versioni di una singola pagina.
Università degli Studi di Brescia

Pa gi na 70

4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd)

Figura 4.3.Interfaccia utente del back-end TYPO3.

Il

modulo File

permette

di accedere

a

un

direttorio

all'interno

dell'installazione del CMS che viene usato come server FTP, a cui cioè è possibile accedere per inserire documenti e immagini a cui fare poi riferimento dalle pagine del sito. Il nome di questo direttorio è fileadmin/, e all'interno di esso è possibile stabilire la granularità di accesso dei singoli utenti. Il modulo Doc permette di visualizzare i documenti correntemente aperti in fase di modifica, molto utile per gestire la modifica contemporanea di più pagine. Il modulo User viene usato per gestire i Task (ovvero i compiti) all'interno di un'organizzazione multi-utente che richiede coordinamento tra i membri del gruppo di lavoro, oltre che per la gestione dello spazio di lavoro. Nel caso dell'installazione effettuata per il progetto di Stage, il modulo User serve per

Università degli Studi di Brescia

4 .1.3 Inte rfa cci a d i a mm ini stra zio ne (ba ck -e nd)

Pag ina 71

gestire gli ordini on-line effettuati attraverso il sistema di shop on-line fornito dall'apposita estensione. Il modulo Help contiene un collegamento a una documentazione inclusa nella distribuzione (meno dettagliata rispetto ai documenti reperibili on-line) e alcune informazioni sul prodotto in uso. Le funzioni di amministrazione sono disponibili solo per gli utenti con determinate credenziali di accesso, stabiliti dall'Amministratore di Sistema. Consentono di azzerare la cache del CMS, procedura utile in seguito a modifiche sostanziali delle pagine. Dato che il sistema permette l'accesso con diverse credenziali,

l'amministratore può stabilire attraverso pannello per la configurazione degli utenti un intuitivo e potente, quali sono i permessi relativi a ogni collaboratore dell'ambiente back-end del sistema. É quindi possibile[37] rendere effettiva la suddivisione degli utenti come semplici redattori, come gestori dei file, come gestori degli ordini effettuati nel negozio on-line del sistema, oppure garantire ad alcuni di essi funzioni di amministrazione del sistema in varia misura.

4.2 Sito web HTML preesistente
L'azienda 3Services S.r.l. disponeva già di un sito web realizzato in HTML con l'utilizzo di fogli di stile (CSS). In quanto realizzato ad-hoc da un web designer, il sito era stato progettato espressamente per l'azienda in questione, la grafica rispecchiava i colori del logo della società, tuttavia non era sorta, all'epoca, l'esigenza di avere un aggiornamento dinamico dei contenuti. Si trattava quindi di un sito informativo, dedicato alla presentazione dell'azienda e ai servizi offerti al cliente, contenente le necessarie informazioni

Università degli Studi di Brescia

Pa gi na 72

4 .2 Sito we b HT ML pre esi ste nte

di contatto (email, numero di telefono, ecc.) ma erano richiesti strumenti esterni al sito per i contatti (cioè un client di posta, un apparecchio telefonico, ecc.). Ponendosi nell'ottica di un'azienda che possiede già un sito web di questo tipo realizzato su misura da un grafico professionista, lo scopo che ci si è posti è stato quello di non modificare l'aspetto grafico durante la trasformazione del sito web da sito informativo a sito dispositivo, o sito a valore aggiunto, tramite l'utilizzo del CMS TYPO3. L'aspetto del sito web prima dello svolgimento dell'attività si presentava come in Figura 4.4, relativa a una pagina interna del sito, in cui è possibile

Figura 4.4.: Pagina del sito HTML di 3Services.

vedere come vengono gestiti i contenuti delle pagine e i menu di secondo livello, cioè quelli relativi alle sotto-sezioni e contenuti nella colonna di sinistra.
Università degli Studi di Brescia

4 .2 Sito we b HT ML pre esi ste nte

Pag ina 73

4.3 Installazione delle estensioni
La tecnica di realizzazione dei template scelta in questo progetto di Stage si avvale dell'estensione Template Auto-Parser, di cui ho parlato in precedenza e di cui illustro ora il setup. Le estensioni necessarie per utilizzare questo metodo in TYPO3 sono le seguenti:
● ●

Template Auto-Parser (automaketemplate) CSS styled content (CSS_styled_content)

Per importare[37] le estensioni all'interno dell'applicazione è necessario innanzi tutto accedere al sistema tramite l'inserimento di login e password. Dal menu dei moduli si seleziona Extension Manager, ovvero l'applicazione per la gestione delle estensioni (Figura 4.5).

Figura 4.5.: Extension manager nel menu di TYPO3.

La pagina mostra le estensioni caricate dal sistema al momento: trattandosi di un'immagine presa in un'installazione appena eseguita, essa contiene solo le estensioni di base (le estensioni di sistema non sono mostrate). CSS styled content è già installata, come è possibile notare in Figura 4.6.
Università degli Studi di Brescia

Pa gi na 74

4 .3 Insta ll az io ne de ll e e ste nsio ni

Figura 4.6.: Extension Manager.

Da questa pagina è possibile accedere al tool per l'importazione delle estensioni nel sistema, ovvero il comando Import Extensions. Il tool per l'importazione delle estensioni fornisce un campo per la ricerca secondo parola chiave, oppure la possibilità di importare un'estensione direttamente da un file in formato .T3X, ovvero un archivio di file TYPO3, scaricato dal sito web typo3.org oppure direttamente dal sito degli sviluppatori dell'estensione. La ricerca viene effettuata collegandosi all'extension repository di TYPO3, ovvero al database (mantenuto dagli amministratori di typo3.org) contenente tutte le estensioni pubblicate dagli sviluppatori. Ogni utente può rendere pubblica la propria estensione tramite un'apposita applicazione contenuta all'interno del CMS, chiamata Extension Kickstarter. Questo significa che all'interno del database delle estensioni è possibile trovare sia versioni stabili e testate sia versioni in stato di testing, alpha o beta.

Università degli Studi di Brescia

4 .3 Insta ll az io ne de ll e e ste nsio ni

Pa gi na 75

Il fatto di poter accedere con tanta semplicità al database delle estensioni da parte degli sviluppatori è sicuramente un punto a favore della diffusione delle estensioni di TYPO3, tuttavia confonde chi si trova a dovere installare un'estensione, dato che può capitare che esistano più estensioni (con nomi diversi) dedicate a una certa funzione, sviluppata da vari collaboratori, e ci si trova nella situazione di dover cercare quella più stabile o più recente. Di default, Extension Manager permette la ricerca solo all'interno di estensioni che sono state revisionate prima di essere pubblicate, ma più di una volta mi sono trovato nella situazione di dover usare versioni alpha o beta di alcune applicazioni che risultavano in realtà stabili, tuttavia non erano state pubblicate come tali. Nel caso esemplificato il nome dell'estensione da utilizzare è noto, quindi, dopo aver aggiornato il database con il comando Retrieve/Update, è sufficiente inserire il nome all'interno del campo “List or look up reviewed extensions”. Viene restituito il risultato della ricerca e l'estensione viene visualizzata e messa a disposizione per l'importazione. Una volta importata con il comando Import, caratterizzato dall'icona possibile procedere all'installazione, usando il comando “installa” . è

L'installazione deve effettuare alcuni aggiornamenti delle tabelle del database prima di rendere disponibile l'estensione per l'utilizzo. Una volta completato il processo, l'estensione compare correttamente all'interno della lista delle Installed Extensions.

Università degli Studi di Brescia

Pa gi na 76

4 .4 Mo di fic a d el sit o we b pree sist ent e

4.4 Modifica del sito web preesistente
Per utilizzare correttamente le estensioni appena installate, è necessario mettere a disposizione di TypoScript un file HTML da utilizzare come template HTML. I file accessibili a TYPO3 devono essere inseriti all'interno del direttorio
fileadmin/,

per il quale TYPO3 mette a disposizione un apposito modulo di

gestione dei file, con tutte le caratteristiche di un client FTP (Figura 4.7). I file possono essere inseriti nella directory tramite il comando Upload, che permette di scegliere dei file dal disco e caricarli nel sistema. La gestione è semplificata tramite l'utilizzo del menu contestuale cliccando sull'icona del file.

Figura 4.7.: Interfaccia di Fileadmin.

All'interno della pagina modello1.html sono stati introdotte delle modifiche ai tag HTML che permettono al Template Auto-Parser di riconoscere all'interno del file alcune parti rilevanti e, in seguito, di introdurre all'interno di queste parti il contenuto del template TypoScript.
Università degli Studi di Brescia

4 .4 Mo di fic a d el sit o we b pree sist ent e

Pag ina 77

Il codice del file HTML è praticamente identico al precedente, anche perché è stata utilizzata una pagina del sito web, e non è nemmeno necessario rimuovere i contenuti della pagina precedente dato che TypoScript li ignorerà nel momento in cui lavorerà sui tag modificati. Sono stati aggiunti ai tag <td> e <table> le proprietà di tipo id=“ ... ” in modo che i nomi degli ID siano poi referenziati all'interno del TypoScript Template.[40]

[...] <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="sfondodestra"> <TABLE id="languageMenu">&nbsp;</TABLE> <table width="100%" height="121" border="0" cellpadding="0" cellspacing="0"> [...] <td height="52" colspan="4" valign="top"> <!-- TABELLA DEL MENU --> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="topmenu1"> [...] <!--DWLayoutTable--> <tr id="topmenu2"> <td width="150" height="21"><img src="images/3services-3sgiu.gif" width="150" height="21"></td> [...] <td colspan="2" valign="top"> <table width="629" cellspacing="0" cellpadding="0" id="content"> <tr> [...] <td height="48">&nbsp;</td> <td id="menu_bottom1" ><div align="center"><ul class="menu_bottom1"> <font color="#FF0000"><img src="images/crocetta.jpg" width="10" height="10"></font> [...]

Università degli Studi di Brescia

Pa gi na 78

4 .5 Scrit tu ra d el te mp la te T ypo Scri pt

4.5 Scrittura del template TypoScript
In questa fase della realizzazione del template, viene creata una nuova pagina di rootlevel all'interno del modulo Web|Page, che è stata chiamata rootpage proprio per evidenziarne la caratteristica. Scegliendo New dal menu contestuale selezionando l'icona del globo terrestre accanto al nome “New TYPO3 Site” (che in seguito verrà modificato), è possibile scegliere quale record creare. Selezionando New Page, viene caricato il modulo per la creazione di una nuova pagina, ed è possibile avere mostrati tutti i concetti espressi fino a ora (Figura 4.8):

La pagina viene creata come “hidden” (nascosta) di default e

saremo noi a doverla rendere visibile.

La prima pagina creata ha un PID = 0 (del resto, non esiste

pagina di livello superiore a questa nella gerarchia).
● ●

Il tipo di pagina viene selezionato come Standard. Il titolo della pagina viene impostato a rootpage.

4.5.1 Creazione di un template radice
Selezionando il modulo Web|Template rimanendo all'interno della pagina
rootpage,

il sistema avvisa che non esiste alcun template impostato per tale

pagina. Inoltre, se si sceglie di visualizzare la pagina nel browser con il comando View Page, TYPO3 restituisce un errore di “Template non trovato” (Figura 4.9).

Università degli Studi di Brescia

4 .5.1 Creaz io ne di un t emp l at e ra dic e

Pa gi na 79

Figura 4.8.: Interfaccia per la creazione di una pagina.

Selezionando quindi il comando di creazione di un nuovo template, viene creato un template con il nome NEW SITE con campi Setup e Constant vuoti.

Università degli Studi di Brescia

Pa gi na 8 0

Figura 4.9.: Messaggio di errore di template non trovato.

Il template da me realizzato per il sito web del progetto di Stage segue i principi di programmazione definiti nella documentazione come Modern Template Building, ovvero l'adozione non solo del concetto di template HTML e estensione Template Auto-Parser, ma la creazione di una pagina contenitore contenente dei template inseriti come Extension Template, ovvero Template Estensioni, per garantire massima modularità. Il template appena creato chiamato NEW SITE, quindi, è vuoto tranne per le seguenti opzioni:
● ● ●

Il flag rootlevel è impostato, in quanto è un template di root. Include Static (from extensions) contiene CSS_styled_content. Include Basis Template contiene quello che è stato da me

chiamato ext: BASE TEMPLATE, cioè il codice TypoScript vero e proprio.

Le modifiche al campo Setup e Constants del template NEW SITE avverranno in seguito, quando si tratterà di creare degli utenti di front-end per l'accesso ad aree private.

Università degli Studi di Brescia

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Pag ina 8 1

4.5.2 Template ext:BASE TEMPLATE
Il template ext:BASE TEMPLATE contiene codice all'interno del campo Setup, che ora vado ad analizzare in ogni sua parte (il listato completo è fornito in appendice). Campo Setup:
# Configuring the Auto-Parser for main template: plugin.tx_automaketemplate_pi1 { # Read the template file: content = FILE content.file = fileadmin/template1/main/modello1.html # Here we define which elements in the HTML that # should be wrapped in subpart-comments: elements { BODY.all = 1 BODY.all.subpartMarker = DOCUMENT_BODY HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT_HEADER HEAD.rmTagSections = title TD.all = 1 TABLE.all = 1 div.all=1 } # Prefix all relative paths with this value: relPathPrefix = fileadmin/template1/main/ }

La parte iniziale configura[40] l'estensione Template Auto-Parser, leggendo il file di template HTML e, con l'utilizzo della proprietà elements, viene istruita l'estensione in modo che tutti i tag selezionati vengano avvolti (wrapped) con le subparts definite nel codice TypoScript successivamente.
relPathPrefix

permette di mantenere le relazioni tra il template HTML e i immagini contenute in esso. Sostituirà il prefisso a tutti i riferimenti alle immagini all'interno del

riferimenti file HTML.

alle

fileadmin/template1/main/

###Bottom Menu cObject ### lib.splitmenu = COA lib.splitmenu { 10 = HMENU Università degli Studi di Brescia

Pa gi na 8 2

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

10.special = directory 10.special.value = 1 10.1 = TMENU 10.1 { wrap = <ul class="menu_bottom1-no"> | </ul> NO { stdWrap.cObject = COA stdWrap.cObject { 10 = TEXT 10.field = title if.value.data = register:count_HMENU_MENUOBJ if.negate = 1 if.isLessThan.prioriCalc=1 if.isLessThan.cObject=TEXT if.isLessThan.cObject.insertData=1 if.isLessThan.cObject.value = ({register:count_menuItems}+1)/2 wrap = <li>|</li> } } } 20 < .10 20.1.wrap = <ul class="menu_bottom2-no"> | </ul> 20.1.NO.stdWrap.cObject.if.negate >

} ###END of Bottom Menu cObject

All'interno del codice, il primo menu che è stato inserito è quello definito
menu_bottom,

cioè quello che si occupa di generare, in di ogni pagina, un menu

in basso con il link a tutte le pagine di primo livello[41]. Il fatto che sia il primo elemento nel listato non influisce sull'ordine degli elementi nella pagina: questo sarà definito in seguito, gestendo la gerarchia dei cObject. Siccome nella versione originale il menu era diviso in due righe caratterizzate da diverso colore nei link, il precedente listato svolge la stessa funzione creando un menu dinamico prelevando le pagine dal tree del sito web e inserendole all'interno di un oggetto HMENU (un menu gerarchico) suddiviso in due righe. Siccome le pagine del sito possono essere modificate, ad esempio cambiando l'ordine, aggiungendone di nuove o modificando quelle esistenti, il menu viene generato automaticamente e non è necessaria alcuna modifica al codice nel caso di variazioni nella struttura del sito. Tutte le definizioni riguardanti colore e immagine a lato, inoltre, sono contenute nel CSS, avvalorando quanto detto finora riguardo alla separazione dei compiti tra programmatore e designer.

Università degli Studi di Brescia

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Pa gi na 8 3

In particolare, per realizzare questo menu è stato creato un cObject
lib.splitmenu

avente al suo interno un HMENU (un cObject) in seguito definito

con la proprietà TMENU (cioè menu testuale, indicando che non sarebbe stato costituito da immagini) . La funzione stdWrap (standard wrap) che è stata qui usata gioca un ruolo centrale all'interno di TypoScript. Essa viene usata per specificare le proprietà dei vari oggetti TypoScript, suddivise in tre aree[42][17]:

Get Data: proprietà per rendere disponibili o per leggere dati. carica il

Quella utilizzata in questo caso, cioè stdWrap.cObject, contenuto di un content object.

Override/Conditions: proprietà di questa area sono utilizzate per

implementare metodi della classe superiore oppure inizializzare delle condizioni.

Parse Data: proprietà utilizzate per elaborare i dati.

####LEFT MENU temp.tmenu= HMENU temp.tmenu.entryLevel=1 temp.tmenu { # second level 1 = TMENU 1{ NO{ linkWrap = <p>|</p> } ACT=1 ACT{ linkWrap = <p class="menu_left_active">|</p> } #CUR=1 #CUR{ # wrapItemAndSub = <li class="menu_left_current-active">|</li> #} #IFSUB=1 #IFSUB{ # wrapItemAndSub = <li class="menu-level2-with-subpage">|</li> #} } } lib.menu_left < temp.tmenu ###########LEFT MENU END

Università degli Studi di Brescia

Pa gi na 8 4

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Il LEFT MENU è contenuto nella tabella a sinistra del layout HTML, non è presente in tutte le pagine in quanto contiene pagine di secondo livello, non presenti in tutte le sezioni del sito (ad esempio non ci sono nella pagina iniziale). Per specificare che il livello di questo menu non è la radice del page tree, si utilizza entryLevel=1. In questo menu, anche se le ultime righe sono state commentate in quanto non utilizzate, vengono usate proprietà[17] utili per la gestione di menu in formato testo, di cui riporto un elenco:

NO (obbligatorio) indica le proprietà dell'oggetto nella sua

condizione “standard”, cioè al momento del caricamento della pagina.

RO indica come deve comportarsi il menu in caso di “mouseover”

(notare come non sia necessario utilizzare codice Javascript per creare simili effetti).

ACT è lo stato di un oggetto qualora questo sia presente nella

rootline della pagina corrente.

CUR indica come deve essere formattato il testo nel caso la

pagina del menu sia quella correntemente visualizzata.

IFSUB indica la formattazione del menu nel caso esistano delle

sottopagine rispetto a quella contenuta nel menu.

###START of GMENU Top PARTE 1 (topmenu1)### lib.topmenu1 = HMENU lib.topmenu1 { 1=GMENU 1.maxItems=5 1 { wrap ( <td width="150" height="52"><img src="fileadmin/template1/main/images/3services-3s-su.gif" width="150" height="52"></td> | <td><img src="fileadmin/template1/main/images/3services_12.gif" width="84" height="52"></td> <td><img src="fileadmin/template1/main/images/3services_13.gif" width="224" height="52"></td> Università degli Studi di Brescia

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Pag ina 8 5

) NO { allWrap= <td> | </td> XY= 48,52 || 90,52 || 72,52 || 45,52 || 64,52 5=IMAGE 5.file=fileadmin/template1/main/images/3s-home.gif || fileadmin/template1/main/images/3s-dove.gif || fileadmin/template1/main/images/3s-contatti.gif || fileadmin/template1/main/images/3s-news.jpg || fileadmin/template1/main/images/3s-offerte.jpg 10=TEXT 10 { text.field=title offset=12,46 fontColor=#FFFFFF fontFile=fileadmin/fonts/RoSSEB28.PFB fontSize=10px align=bottom, center shadow { offset=0,0 color=#000000 opacity=25 blur=50 niceText=1 } } } RO < .NO RO=1 #RO.transparentBackground = 1 RO.10.fontColor= #000000 ACT < .RO ACT=1 } } #page.200 < temp.topmenu1 #####END of GMENU Top parte 1###

Il menu principale del sito web, ovvero quello presente nella parte superiore della pagina contenente tutte le sezioni del sito, è stato suddiviso in due parti per motivi legati alle immagini utilizzate di sfondo. Dato che la prima riga è costituita da elementi aventi sfondo azzurro e la seconda rosso, la prima parte viene creata tramite un GMENU (cioè un menu grafico, costituito da immagini) contenente solo le prime pagine del sito web (specificate con .maxItems=5), le altre saranno contenute nella seconda parte del menu e ulteriori pagine eventualmente aggiunte andranno a posizionarsi lateralmente rispetto alla seconda parte del topmenu.
Università degli Studi di Brescia

Pa gi na 8 6

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Per esigenze di impaginazione, è stato necessario avvolgere il menu all'interno di alcuni tag HTML con riferimenti a immagini in formato .gif, necessità dettata dalle pagine HTML realizzate precedentemente che utilizzavano alcune immagini come “placeholder” per allineare correttamente il menu. Inoltre, dato che l'effetto della parte superiore del menu consiste nell'avere inserito i link all'interno di un'immagine di sfondo creando un'illusione di testo sovrapposto a un'immagine (in realtà si tratta di più immagini affiancate), è stato necessario utilizzare più immagini in formato .gif, ognuna come sfondo del testo del menu. Se fossero state disponibili le le immagini da cui il designer del sito web era partito, sarebbe stato possibile avere un'unica immagine di sfondo sulla quale inserire un menu in formato testo (TMENU) e lavorare su quello. In questo modo vengono create da TypoScript varie immagini formate dall'immagine iniziale come sfondo e da un elemento testo (10=TEXT) sovrapposto a ciascuna di esse. Il campo di testo ha parecchie proprietà necessarie alla corretta formattazione: offset, colore, tipo di font utilizzato, dimensione e allineamento. Ha inoltre associata un'ombra, anch'essa costituita da più proprietà specificate come colore, opacità, blur (sfocatura) e niceText, che garantisce l'applicazione di filtri per smussare i bordi dei caratteri.[37][40]

#####START of GMENU Top PARTE 2 (topmenu2)### lib.topmenu2 = HMENU lib.topmenu2 { 1=GMENU # 1.maxItems=5 1.begin=6 1 { wrap ( <td width="150" height="21"><img src="fileadmin/template1/main/images/3services-3s-giu.gif" width="150" height="21"></td> | <td width="122" valign="top"><img src="fileadmin/template1/main/images/spacer.gif" width="123" height="21"></td> ) NO { allWrap= <td> | </td> Università degli Studi di Brescia

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Pa gi na 8 7

XY= [10.w]+10,21 5=IMAGE 5.file=fileadmin/template1/main/images/3s-topmenu2_sfondo.gif 10=TEXT 10 { text.field=title offset=3,15 fontColor=#FFFFFF fontFile=fileadmin/fonts/RoSSEB28.PFB fontSize=11px align=left shadow { offset=0,0 color=#000000 opacity=25 blur=50 niceText=1 } #chiude la shadow } } RO < .NO RO=1 #RO.transparentBackground = 1 RO.10.fontColor= #1BCEFB ACT < .RO ACT=1 } }

#page.201 < temp.topmenu2 ###END of GMENU TOP parte 2 (topmenu2)###

La seconda parte del menu risulta decisamente meno complessa e più ordinata, in quanto non è stato necessario specificare diverse immagini di sfondo durante la creazione dei tasti del menu. Una sola immagine (ovvero 3stopmenu2_sfondo.gif)

permette di creare più file che saranno contenuti nella

cache di TYPO3 e accessibili tramite link interni al sistema.

# Main TEMPLATE cObject for the BODY temp.mainTemplate = TEMPLATE temp.mainTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <body>-tags workOnSubpart = DOCUMENT_BODY Università degli Studi di Brescia

Pa gi na 8 8

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

# Substitute the ###menu_1### subpart with dynamic menu: subparts.menu_bottom1 < lib.splitmenu # Substitute the ###content### subpart with some example content: #subparts.content < styles.content.get # Substitute the ###topmenu1### subpart with GMENU TOP Part 1: subparts.topmenu1 < lib.topmenu1 # Substitute the ###topmenu2### subpart with GMENU TOP Part 2: subparts.topmenu2 < lib.topmenu2 # Substitute the ###menu_left### subpart with Menu Left: subparts.menu_left < lib.menu_left # Substitute the ###content### subpart with content: subparts.content < styles.content.get # Substitute the ###languageMenu### subpart with languageMenu : subparts.languageMenu < temp.languageMenu } # Main TEMPLATE cObject for the HEAD temp.headTemplate = TEMPLATE temp.headTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <head>-tags workOnSubpart = DOCUMENT_HEADER }

Avendo creato tutti gli elementi della pagina e avendo a disposizione, tramite Template Auto Parser, le varie parti del documento HTML all'interno delle quali sostituirli tramite l'operatore di copia “<”, il listato qui presentato crea un oggetto TEMPLATE in cui viene inserito, tramite referenziazione ( =< ), l'output di Template Auto Parser e vengono copiati nelle sottoparti tutti gli elementi temporanei o di libreria creati in precedenza.

# Default PAGE object: page = PAGE page.typeNum = 0 # Copying the content from TEMPLATE for <body>-section: page.10 < temp.mainTemplate # Copying the content from TEMPLATE for <head>-section: page.headerData.10 < temp.headTemplate

Infine, viene creato l'oggetto pagina, in cui vengono copiati i dati che costituiranno <body> e <head> del codice HTML che sarà generato all'accesso dei browser web al sito.[40]

Università degli Studi di Brescia

4 .5.2 T e mp la te ex t:B ASE T EMP LAT E

Pa gi na 8 9

In appendice riporto il listato del file CSS contenente le impostazioni di stile e l'intero codice del template TypoScript,in cui compaiono anche parti riguardanti l'impostazione del plug-in per la gestione delle lingue aggiuntive.

4.6 Creare e modificare contenuti
Finora ho illustrato la realizzazione di un template avente tutti gli elementi della pagina posizionati secondo il layout desiderato, pronto per ospitare al suo interno dei contenuti. Il form per l'inserimento e modifica di contenuti è molto simile a quello per la creazione delle pagine. Nel modulo Web|Page va selezionata la pagina in cui si vuole inserire il contenuto e, in seguito, la voce Create New Content dal sottomodulo che si apre nella parte principale dell'interfaccia. All'interno della pagina è possibile creare elementi di testo semplice, testo con immagine, immagini, codice HTML oppure inserire una serie di funzionalità fornite dall'installazione dei vari plug-in (quale, ad esempio, News). Illustro ora la realizzazione della pagina iniziale del sito web, a scopo esemplificativo. Visto che non serve alcuna funzione particolare e l'inserimento di un elemento di testo è sufficiente, l'opzione selezionata sarà Regular Text Element. Il form per l'inserimento dei dati del nuovo elemento di contenuto ha al suo interno un rich text editor fornito, nell'installazione di default, dall'estensione htmlArea RTE, mentre per il progetto di Stage ho scelto di utilizzare l'estensione TinyRTE[43] che offre le stesse funzionalità e una compatibilità migliorata con la versione di Mozilla Firefox prescelta (Figura 4.10).
Università degli Studi di Brescia

Pa gi na 9 0

4 .6 Cre are e mo di fi ca re co nt enu ti

Figura 4.10.: TinyRTE, un Rich Text Editor per TYPO3.

Oltre a tutte le funzioni che ci si può aspettare da un editor avanzato di testo quali la possibilità di impostare lo stile del carattere e del paragrafo, inserire collegamenti ipertestuali, tabelle, eccetera, TinyRTE integra un menu drop down box che permette di scegliere gli stili del file .css utilizzato nel template TypoScript. In questo modo, dato che sono stati utilizzati parte degli stili dal CSS del sito web preesistente, sono conservati tutti gli stili di caratteri e le combinazioni di colori per titoli, sottotitoli e testo. Una volta inserito e formattato il testo, è possibile chiudere il form di modifica con il comando Save And Close, identificato dall'icona Show Page ( . Il tasto

) permette a questo punto di aprire la pagina del front-end nel

browser e visualizzare il risultato (Figura 4.11).

Università degli Studi di Brescia

4 .6 Cre are e mo di fi ca re co nt enu ti

Pag ina 9 1

Figura 4.11.:Pagina web realizzata con TYPO3.

4.7 Area privata clienti
TYPO3 nella sua installazione di base mette a disposizione plug-in per la realizzazione di una pagina di accesso a un'area riservata. Tuttavia, tali plug-in non soddisfacevano i requisiti di questo progetto di Stage. Per questo motivo la registrazione degli utenti è stata gestita tramite il plugin front-end User Registration (sr_user_register) mentre per il login degli utenti ho scelto di utilizzare Newloginbox (newloginbox), che costituisce essenzialmente un miglioramento del sistema di login fornito con l'installazione.

Università degli Studi di Brescia

Pa gi na 9 2

4 .7 Are a pri va ta c lie nti

L'estensione sr_user_register permette la creazione di una pagina contenente i campi per la registrazione con successivo invio del messaggio email di conferma all'indirizzo specificato dall'utente per verificarne la validità. Tra le caratteristiche di questa estensione desidero evidenziare:
● ● ● ● ●

Possibilità di localizzazione internazionale. Spedizione di email HTML. Compatibilità con Direct Mail (modulo per la gestione delle newsletter). Invio di invito di registrazione. Possibilità da parte degli amministratori di visualizzare e in seguito

approvare le richieste di registrazione.
● ●

Password protette con algoritmo MD5 (con l'estensione kb_md5fepw). Possibilità per l'utente di modifica di tutte le informazioni inserite,

cancellazione dell'account.

Una volta installata l'estensione sr_user_register, il primo passo per eseguire la configurazione è impostare all'interno del template del sito le variabili di configurazione, per lo meno quelle minime per garantirne il funzionamento. É infatti necessario creare alcune pagine che conterranno al loro interno i campi per il login degli utenti, la registrazione, la modifica delle impostazioni e la pagina per la conferma delle informazioni inserite. Dato che ogni pagina è contraddistinta da un ID univoco, il plug-in dovrà fare riferimento a tale ID per mostrare i campi all'interno della pagina desiderata. Per fare riferimento alle variabili all'interno del plug-in, il codice standard è il seguente:
plugin.NOMEPLUGIN_pi1.VARIABILE = VALORE

Università degli Studi di Brescia

4 .7 Area priv at a cli ent i

Pa gi na 9 3

Inserendo il codice nel campo Constants all'interno del root template del sito web, l'assegnazione avviene nel modo indicato di seguito:

# --- folder where FE users are contained --plugin.tx_srfeuserregister_pi1.pid = 26 # --- different groups: unprivileged users --plugin.tx_srfeuserregister_pi1.userGroupUponRegistration = 4 # --- different groups: privileged users --plugin.tx_srfeuserregister_pi1.userGroupAfterConfirmation = 5 # --- page ID of page with login box and FE registration #(Login) plugin.tx_srfeuserregister_pi1.loginPID = 29 # --- page ID of second page with FE registration (Second Page) plugin.tx_srfeuserregister_pi1.registerPID = 39 # --- page ID of third page with FE registration (Third Page) plugin.tx_srfeuserregister_pi1.editPID = 40 # --- page ID of fourth page with FE registration (Fourth Page) plugin.tx_srfeuserregister_pi1.confirmPID = 41 plugin.tx_srfeuserregister_pi1.enableEmailConfirmation = 0

Relativamente al codice, la variabile .pid assume il valore dell'ID della pagina contenente gli utenti di front-end, ovvero la SysFolder Utenti creata in precedenza.
enableEmailConfirmation

attiva o disattiva l'invio di un messaggio di posta

elettronica all'indirizzo inserito dall'utente, notificando l'avvenuta registrazione e richiedendo una conferma dei dati inseriti. Per l'invio del messaggio email, il file php.ini deve contenere la riga
sendmail_path = /usr/sbin/sendmail

La procedura di registrazione si compone dei seguenti passi[44]:

Sotto il form di login viene presentato al visitatore un

collegamento al form di registrazione o, se l'utente è già identificato, un link al form per la modifica del profilo.
Università degli Studi di Brescia

Pa gi na 9 4

4 .7 Are a pri va ta c lie nti

La prima volta che l'utente completa il form di registrazione e

clicca sul tasto “Invia”, viene mostrata un'anteprima dei dati che verranno inviati, in modo da verificare le informazioni di registrazione prima di creare l'account. In seguito all'invio delle informazioni controllate, il nuovo utente viene informato che una email sarà spedita all'indirizzo fornito per completare il processo di registrazione e il suo utente viene aggiunto a un gruppo senza privilegi.

Il

messaggio

email

viene

spedito.

Esso

contiene

due

collegamenti: il primo permette all'utente di confermare la registrazione, il secondo annulla la registrazione (nel caso qualcuno abbia utilizzato impropriamente l'indirizzo email).

Cliccando su uno qualsiasi dei due collegamenti, il visitatore

carica una pagina nel suo browser. Se ha confermato la registrazione, viene mostrata la finestra di login e può accedere al sito. Quando l'utente conferma la sua registrazione, il suo account viene assegnato a un gruppo che gli consente l'accesso a pagine riservate.

Una volta effettuato l'accesso, l'utente può modificare le proprie

informazioni o cancellare il proprio account.

A ogni evento (registrazione, conferma, aggiornamento o

cancellazione) può essere associato l'invio di un messaggio email all'utente per la conferma dell'avvenuta azione. Una notifica via email può essere anche spedita all'amministrazione del sito. Il messaggio email all'utente può essere nei formati plain text o HTML (che includerà comunque sempre una versione plain text).

Per l'accesso agli utenti, è stata creata una pagina chiamata Login; essendo una pagina presente nel ramo principale dell'albero delle pagine, essa è stata automaticamente inclusa all'interno dei menu. Il campo login e alcune funzionalità avanzate (quali ad esempio la possibilità di recuperare la password e la conferma dell'avvenuto login) vengono messe a disposizione dall'estensione

Università degli Studi di Brescia

4 .7 Area priv at a cli ent i

Pag ina 9 5

newloginbox,

sviluppata appositamente per sostituire le funzionalità di login

basilari di TYPO3. All'interno del ramo avente come radice la pagina di login sono state create pagine riservate agli utenti autenticati nel sistema. Le impostazioni di sicurezza delle pagine vengono modificate all'interno del modulo Edit Page, selezionando le proprietà della pagina e lavorando sul campo Access. In particolare, nel sistema realizzato durante lo Stage, le pagine sono rese accessibili al gruppo userGroupAfterConfirmation, creato dall'estensione
sr_user_register

al momento della conferma dell'utente. Le pagine riservate

agli utenti registrati nella presente applicazione sono, oltre alle pagine per la gestione dell'account utente, le pagine dell'estensione per la gestione degli acquisti.

4.8 Gestione preventivi
Lo scopo finale dell'applicazione web realizzata è quello di fornire agli utenti registrati presso il sito aziendale la possibilità di richiedere preventivi on-line dei servizi offerti dalla ditta. La scelta per questo genere di funzioni è stata quella di associare alla creazione del preventivo on-line il concetto di “carrello della spesa”[45]. Questa scelta risponde perfettamente alle necessità di creare un sistema usabile in base ai principi dell'Ingegneria del Software Interattivo: se gli utenti che accedono al sistema nella sezione di back-end hanno sufficienti conoscenze informatiche, il sistema per la gestione dei preventivi deve essere rivolto a un più ampio bacino d'utenza, non necessariamente esperto. Il concetto applicato prevede quindi di trattare i servizi offerti come singoli prodotti di un sistema di vendita on-line, associando a essi prezzo e quantità (se

Università degli Studi di Brescia

Pa gi na 9 6

4 .8 Ge sti o ne pre ve nti vi

si dovesse trattare, ad esempio, di assistenza informatica caratterizzata da un costo orario).

TYPO3 mette a disposizione svariate estensioni per la creazione di un “negozio on-line”, la più diffusa delle quali è sicuramente Shop System (tt_products), fornita di numerosi plug-in per l'aggiunta di ulteriori funzionalità. Il vero problema di tt_products è la sua smisurata mole e la sua curva di apprendimento molto ripida, decisamente inadatta al tipo di lavoro previsto per questo progetto di Stage. Secondo le specifiche del progetto, infatti, non si cercava un sistema che operasse una di gestione dei prodotti particolarmente complessa. Ha superato le mie più rosee aspettative stata la scoperta di un'estensione prodotta da un'azienda italiana specializzata nella realizzazione di sistemi web basati su TYPO3, la Webformat S.r.l., il cui referente, Mauro Lorenzutti, scrive sulla newsletter italiana di typo3.org. Semplice da installare e configurare, Webformat Shop System (extendedshop) è un sistema di e-commerce leggero e completo, che si è rivelato una preziosa soluzione al problema in questione; è stato possibile contattare direttamente lo sviluppatore per richiedere dei chiarimenti, cosa non da poco dato che in genere la maggior parte delle risposte alle richieste di informazioni vengono date da altri utilizzatori di TYPO3 che, per quanto esperti, non hanno la conoscenza sufficiente a risolvere tutti i problemi come invece può fare chi ha scritto il codice dell'applicazione software. Webformat Shop System è un'estensione per un sistema di negozio on-line con caratteristiche di presentazione di prodotti e gestione degli ordini. Tra le caratteristiche presenti, vengono evidenziate[46]:
● ● ● ● ●

Gestione dei prezzi di offerta e degli sconti. Gestione avanzata degli ordini. Registrazione degli utenti. Indirizzo statico e titolo della pagina per i prodotti. Supporto ai siti multi-lingua.
Università degli Studi di Brescia

4 .8 G est io ne prev ent iv i

Pa gi na 9 7

Tracciabilità dell'ordine.

Il sistema integra il supporto per due diversi metodi di pagamento: PayPal, il noto gateway per il pagamento on-line e Banca Sella (con l'utilizzo di one-time password). L'installazione del plug-in crea un nuovo modulo chiamato Orders Management all'interno del frame contenente il menu principale di back-end di TYPO3. In questo modulo è possibile, per gli utenti di back-end autorizzati, gestire gli ordini effettuati nel front-end dai clienti. Al suo interno è possibile selezionare tre sotto-moduli:

Statistiche, che consente di tenere traccia delle informazioni

riguardanti gli ordini effettuati, non di interesse per il presente utilizzo.

Ordini, dove vengono elencati gli ordini confermati dai clienti,

ma non ancora evasi.

Ordini completati (evasi), dove vengono archiviati gli ordini una

volta gestiti dall'utente di back-end. Dal punto di vista delle pagine front-end, invece, Webformat Shop System va inserito al loro interno sotto forma di plug-in dal nome Advanced Shop System come un normale contenuto di pagina; è quindi possibile selezionare il tipo di visualizzazione tra le quattro disponibili:
● ●

LIST: per mostrare l'elenco dei prodotti inseriti. OFFER: per mostrare solo gli oggetti in offerta (non utilizzato in

questo sistema).
● ●

SEARCH: mostra un form di ricerca. BASKET: fornisce il vero e proprio “carrello” a cui l'utente può

aggiungere e da cui può eventualmente rimuovere i prodotti presenti nella lista. É possibile, per tutte le pagine, specificare un diverso punto di partenza come mount point della lista di prodotti e un livello di ricorsività per la ricerca.

Università degli Studi di Brescia

Pa gi na 9 8

4 .8 Ge sti o ne pre ve nti vi

Sempre all'interno dell'albero delle pagine, vanno create due SysFolder; nella prima saranno salvati gli ordini effettuati e nell'altra gli indirizzi di spedizione. Quando un nuovo utente acquista un prodotto, verrà salvato nella pagina “Basket” come un nuovo record di tipo tt_address. Viene inviato un messaggio email all'utente utilizzando le informazioni contenute nella SysFolder degli utenti creata per le estensioni sr_user_register e newloginbox, con cui
extendedshop si può interfacciare.

Gli ordini vengono salvati nella SysFolder citata in precedenza sotto forma di nuovo oggetto pagina contenente nuovi record per l'ordine e per ogni prodotto acquistato. Nell'ambito del progetto di Stage per contenere i prodotti è stata creata una SysFolder chiamata, appunto, Prodotti, all'interno della quale sono stati inseriti i record di tipo “Webformatshop Product”, categoria che si rende disponibile all'interno del sistema in seguito all'installazione di TYPO3. Questa organizzazione, sebbene logicamente corretta, non è ufficialmente supportata[47] da Webformat e quindi anticipa le opzioni che saranno presenti in una futura versione dello Shop System. Ogni prodotto è assegnato a una categoria (Webformatshop Category), che in questo caso è stata creata sempre all'interno della SysFolder Prodotti. I campi a disposizione per l'oggetto Categoria sono:
● ● ● ● ●

Codice. Titolo. Sommario (breve descrizione). Descrizione. Immagine (può essere associata un'immagine alla categoria di

prodotti, oltre che al singolo prodotto). Ogni singolo prodotto dispone invece dei seguenti campi:
● ●

Numero oggetto. Titolo.
Università degli Studi di Brescia

4 .8 G est io ne prev ent iv i

Pa gi na 9 9

● ●

Sommario (breve descrizione). Descrizione (con possibilità di usare il Rich Text Editor per

inserirla).
● ● ● ● ●

Immagine. Prezzo (con e senza tasse). Quantità disponibile. Categoria. Una serie di caratteristiche utili ai fini della spedizione, quali le

dimensioni e il peso.
● ●

Taglie e colori (utilizzato nel caso di un vero e proprio negozio). Prodotti correlati (fornisce un campo a scelta multipla per cui è

possibile, per ogni prodotto, mostrare prodotti a esso correlati quando il cliente seleziona la visualizzazione la descrizione dettagliata partendo dall'elenco oggetti).

Come in tutte le estensioni, una volta create le pagine (e le SysFolder) è necessario completare la configurazione specificando gli ID delle pagine in cui si possono trovare i record del database per i vari elementi. Le variabili di configurazione messe a disposizione dallo Shop System non sono in numero eccessivo e nel contempo permettono di tenere sotto controllo molti aspetti del sistema, soprattutto nel presente caso alcune opzioni potevano essere ignorate senza problemi (quelle relative alla spedizione e ad alcuni metodi di pagamento, ad esempio). All'interno del campo Constants è quindi utile configurare le linee seguenti, che specificano dove trovare i file per la definizione dello stile dell'output, e lasciare le rimanenti alle impostazioni di default. Le scelte sono due: è possibile modificare i file shop.html e stileShop.css originali per adattarli alle proprie
Università degli Studi di Brescia

Pa gi na 100

4 .8 Ge sti o ne pre ve nti vi

esigenze, oppure (per mantenere la coerenza nel sistema) modificare le variabili e specificare due file contenuti all'interno del direttorio fileadmin/ di TYPO3. Codice rilevante nel campo Constants[46]:

# Template file plugin.tx_extendedshop_pi1.file.templateFile = EXT:extendedshop/pi1/shop.html # CSS file plugin.tx_extendedshop_pi1.file.cssFile = EXT:extendedshop/pi1/stileShop.css Le rimanenti opzioni possono essere lasciate nelle impostazioni di default senza particolari problemi: # Number of decimals plugin.tx_extendedshop_pi1.priceDec = 2 # Decimal separator plugin.tx_extendedshop_pi1.priceDecPoint = , # Thousand separator plugin.tx_extendedshop_pi1.priceThousandPoint = . # Set to 1 if you want to open a popup when the user clicks #over the image in the list mode. If 0 the image is a link to #the detail of the product plugin.tx_extendedshop_pi1.clickEnlarge_list = 0 # Set to 1 if you want to open a popup when the user clicks #over the image in the detail mode. plugin.tx_extendedshop_pi1.clickEnlarge = 1

Il campo Setup[46] contiene al suo interno, tra le altre, le variabili per la configurazione degli ID delle pagine contenenti i dati relativi a prodotti, ordini e indirizzi degli utenti:

# cat=Webformat Shop System/config/13; type=int; label= Pid #basket plugin.tx_extendedshop_pi1.pidBasket = 53 # cat=Webformat Shop System/config/14; type=int; label= Pid #orders plugin.tx_extendedshop_pi1.pidOrders = 55 # cat=Webformat Shop System/config/15; type=int; label= Pid #delivery plugin.tx_extendedshop_pi1.pidDelivery = 25 # cat=Webformat Shop System/config/15; type=int; label= Pid #users plugin.tx_extendedshop_pi1.pidUsers = 56

Università degli Studi di Brescia

4 .8 G est io ne prev ent iv i

Pag ina 10 1

Le rimanenti impostazioni impostate in seguito, benché non indispensabili in un sistema di test, permettono di definire nome del negozio e email a cui gli utenti potranno rispondere quando ricevono le email dal sistema.

# cat=Webformat Shop System/shop/18; type=string; label= Shop #Email: order email from. plugin.tx_extendedshop_pi1.fromEmail = myShop@mySite.com # cat=Webformat Shop System/shop/19; type=string; label= Shop #Name: order name from. plugin.tx_extendedshop_pi1.fromName = TEST SHOP # cat=Webformat Shop System/shop/20; type=string; label= Shop #BCC Email: Receiver of the order confiration email (in the bcc #field). plugin.tx_extendedshop_pi1.bccEmail = myShop@mySite.com

Le potenzialità di extendedshop non si riducono a quanto qui elencato: una lunga parte del file di configurazione è composto da linee per la gestione del pagamento e delle varie forme di pagamento accettate (PayPal, Contrassegno, pagamento on-line tramite Banca Sella, ecc.) Le specifiche del sistema realizzato durante lo Stage prevedono che un cliente non possa effettuare alcun tipo di acquisto se l'ordine non è stato prima visionato da un utente di back-end. In particolare un addetto del settore commerciale tratterà l'ordine del cliente come una richiesta di acquisto, che verrà poi formulata sotto forma di contratto di fornitura di servizi dall'azienda 3Services S.r.l. al cliente (sia esso un privato o il rappresentante di un'azienda). A riguardo di quanto appena detto, i campi che il cliente dovrà completare comprendono Partita IVA dell'azienda oppure Codice Fiscale della persona oltre che dati personali. In particolare, all'interno di extendedshop è possibile scegliere quali saranno i campi ritenuti obbligatori e come dovranno essere segnalati all'utente (in questo caso con un asterisco).

# Required fields in the personal info page plugin.tx_extendedshop_pi1.requiredFields=name,address,city,zip,stat e,phone,email,authorization,conditions plugin.tx_extendedshop_pi1.requiredFieldsSymbol = *

Università degli Studi di Brescia

Pa gi na 102

4 .8 Ge sti o ne pre ve nti vi

La procedura di acquisto dei prodotti sul sito di 3Services S.r.l. si avvale del Webformat Shop System secondo i seguenti passi:

Il cliente, dopo essersi registrato al sistema, accede all'area

riservata.

Al cliente che seleziona la visualizzazione dei servizi offerti, lo

shop system presenta l'elenco dei prodotti contenuti nel database, con la possibilità di visualizzare la descrizione e, se disponibile per il tipo di prodotto, di scegliere la quantità.

Una volta selezionati e aggiunti al preventivo tutti i prodotti

desiderati, il sistema mostra un form contenente le informazioni inserite dal cliente al momento della registrazione; se necessario sarà richiesto di integrarle.

Premendo il tasto di conferma, il sistema notifica al cliente via

email l'avvenuto invio della richiesta e al responsabile dell'azienda della presenza di un ordine inevaso.

Il responsabile delle vendite dell'azienda può accedere al back-

end del sito web e selezionare il modulo “Orders Management” per visualizzare gli ordini inseriti dai clienti. Da lì in poi il contatto avverrà tramite altri mezzi (email, telefono, fax) facendo riferimento al numero di preventivo inserito dal cliente.

Una volta contattato il cliente, l'ordine verrà gestito come

“spedito”, per divenire “completato” una volta conclusa la trattativa con il cliente.

Alcune immagini di Webformat Extendedshop sono mostrate in Figura 4.12 e Figura 4.13.

Università degli Studi di Brescia

4 .8 G est io ne prev ent iv i

Pag ina 10 3

Figura 4.12.: Vista articoli con Webformat Extendedshop

Figura 4.13.: Procedura di acquisto di Webformat Extendedshop

Università degli Studi di Brescia

5 Approfondimento: gestione documenti online
Sistemi operativi basati sul web, sistema operativo eyeOS, installazione e personalizzazione.

Pa gi na 106

5 .1 Sist emi o perat iv i ba sat i su l we b

5.1 Sistemi operativi basati sul web
La realizzazione di un sistema per la gestione on-line di documenti elettronici ha un duplice scopo: avere all'interno dell'azienda la possibilità sia di archiviare e condividere file tra gruppi di utenti, sia di accedere all'esterno della rete locale utilizzando un'interfaccia web e, su richiesta, fornire tale servizio anche ai propri clienti. La tecnologia utilizzata per sistema realizzato è quella dei WebOS o Webbased OS (sistemi operativi basati sul web) ma, in particolare e per evitare ambiguità, è più corretto utilizzare il termine Web Desktop (o Webtop secondo una terminologia coniata di recente). I termini WebOS e Web Operating System descrivono, per definizione[48], servizi per l'elaborazione distribuita su larga scala, come nel caso del WebOS Project dell'Università di Berkeley o il progetto WOS. Il termine WebOS è tuttavia spesso utilizzato per indicare una collezione di servizi offerti sul web inteso come “Web HTTP”, quindi indipendente dal concetto di sistema operativo del singolo computer. Nel caso di questo progetto di Stage ci si è riferiti a quelli che sono più correttamente denominati Web Desktop o Webtop, ovvero sistemi che trasformano il desktop in un servizio accessibile tramite il browser. I Web Desktop sono delle applicazioni di desktop virtuale per l'integrazione di applicazioni web in uno spazio di lavoro in rete. L'ambiente di lavoro per l'utente è reso il più familiare possibile a sistemi operativi come Windows, Mac OS X o Linux e il vantaggio principale è la possibilità di salvare documenti online e potervi accedere da qualunque computer collegato a internet.

Università degli Studi di Brescia

5 .1 Si ste mi o pe ra ti vi basa ti sul w eb

Pag ina 10 7

In realtà, se si pensa ad applicazioni on-line volte a sostituire o affiancare il normale utilizzo di strumenti quali client di email, word processor e simili, non si può non pensare a Google[49] e ai suoi servizi quali Google Docs, Gmail, Google Reader, ecc. A Google si sta contrapponendo un numero sempre maggiore di nomi

importanti dell'Information Technology quali Microsoft (con Office Live[50]) e OpenOffice.org (con Ulteo[51]), tutti impegnati nell'offrire agli utenti una serie di Rich Internet application, ovvero applicazioni web che hanno caratteristiche e funzionalità delle tradizionali applicazioni desktop ma che sono accessibili tramite browser. Quello che manca in simili progetti non è l'integrazione o l'interoperabilità (garantita, ad esempio nel caso dei servizi Google, dalla possibilità di scambiare file tra le applicazioni) ma piuttosto la “visione d'insieme” e un'interfaccia utente unificata che possa colmare la sensazione di gap tra utilizzo di una pagina web e di un'applicazione desktop. In questo contesto si inseriscono i Webtop: la scelta è ampia e più strade sono state intraprese, sia dal punto di vista della tecnologia utilizzata come core del sistema operativo che da quello della licenza d'uso e del rilascio del codice. La quasi totalità degli sviluppatori impegnata nella produzione di sistemi operativi basati sul web non permette l'installazione e l'esecuzione su server di altrui proprietà: per quanto la creazione di un proprio account utente sia nella maggior parte dei casi gratuita, non è possibile l'installazione del sistema operativo sul proprio server. Tra tutti, eyeOS è l'unico che unisce la presenza di una serie di applicazioni mature e la possibilità di accesso al codice sorgente per l'installazione e la personalizzazione (sebbene una versione “Live” sia accessibile all'indirizzo http://eyeos.info). Prima di procedere, è bene specificare quello che non è possibile ottenere con un simile approccio: nonostante l'entusiasmo talvolta generato dalla trattazione del tema dei Webtop, non si tratta di un modo per minare l'esistenza degli attuali sistemi operativi, di contrastare l'egemonia di alcune produttori di software o di lanciare la sfida ai colossi dei servizi on-line; si tratta piuttosto di
Università degli Studi di Brescia

Pa gi na 108

5 .1 Sist emi o perat iv i ba sat i su l we b

effettuare esperimenti per cambiare il rapporto tra gli utenti e gli strumenti software di utilizzo ormai quotidiano per fornire accesso sempre e ovunque. In una parola di tratta di compiere esperimenti di centralizzazione.

5.2 Sistema operativo eyeOS
eyeOS è una piattaforma Open Source progettata per supportare una serie di applicazioni web al suo interno. É possibile utilizzare una versione “Live” dal sito del produttore, oppure accedere ai vari tipi di servizi disponibili per le diverse utenze:

eyeOS Professional Services (eyeos.com) offre la possibilità di

ricevere supporto, richiedere lo sviluppo di applicazioni specifiche, installazione e corsi di formazione per l'utilizzo del sofware.

eyeOS Open Source Platform (eyeos.org) si rivolge invece a

sviluppatori e amministratori di sistema che vogliono collaborare allo sviluppo o utilizzare il software sui loro server.

Il concetto alla base di eyeOS viene presentato in modo esauriente in Figura 5.1[52], che mostra come una piccola organizzazione possa trarre beneficio dall'installazione di un sistema operativo web-based all'interno della propria rete. Il team di eyeOS prevede[53] il rilascio di una nuova versione di eyeOS ogni due mesi, seguendo uno schema di numerazione del tipo 1.X.Y.Z, dove:

X indica una “major release”.

Università degli Studi di Brescia

5 .2 Sist ema o pera ti vo e yeO S

Pa gi na 109

● ●

Y indica una versione con cambiamenti notevoli per l'utente. Z indica la presenza di correzioni minori o bugfix della versione

corrente.

Figura 5.1.: Diagramma di rete di eyeOS per le PMI.

L'attuale versione di eyeOS disponibile è la 1.5. Il pacchetto di installazione di eyeOS comprende il kernel del sistema operativo e una serie di applicazioni chiamate Base Applications, che comprendono:
Università degli Studi di Brescia

Pa gi na 110

5 .2 Sist ema o pera ti vo e yeO S

● ● ● ● ● ●

editLink, una utility per modificare i link di sistema. eyeCalc, un programma con funzioni di calcolatrice. eyeCalendar, fornisce funzioni di agenda. eyeChess, gioco degli scacchi. eyeContacts, applicazione per la gestione di contatti. eyeDocs, word processor con possibilità di salvare file in formato

compatibile con Microsoft Office e OpenOffice.

eyeFiles, tool per la gestione dei file. Rappresenta il file explorer

del sistema operativo e fornisce operazioni di base sui file, quali Upload (dal computer dell'utente a eyeOS), Download (da eyeOS al computer), gestione degli archivi compressi e funzioni di Cut & Paste.
● ●

eyeGroups, per la gestione di gruppi di utenti. eyeInstaller, applicazione per installare nuovi programmi nel

formato eyePackage.

eyeMessages, messaggistica interna tra gli utenti connessi allo

stesso server di eyeOS.
● ● ● ●

eyeMp3, lettore di file musicali. eyeNav, un web browser integrato. eyeNotes, un editor di testo. eyeProcess, applicazione per la gestione dei processi in uso dal

sistema.
● ● ● ●

eyeRSS, lettore di feed RSS. eyeSoft, per l'installazione di software da repository on-line. eyeTrash, per la gestione del “Cestino” del sistema operativo. eyeZip, per la gestione dei file compressi all'interno di eyeOS.

Università degli Studi di Brescia

5 .2 Sist ema o pera ti vo e yeO S

Pa gi na 111

eyeOS consiste per la maggior parte di codice PHP inserito all'interno di file con estensione .eyecode. A partire dalla versione 1.0, eyeOS è un sistema operativo moderno basato su microkernel[54], che si occupa del caricamento di servizi, librerie, widget (elementi dell'interfaccia di eyeOS) e, in cima a tutto questo, di applicazioni.

5.3 Installazione e personalizzazione
L'installazione del software viene gestita da un “eyepackage” (il tipo di pacchetto comune a tutte le installazione delle applicazioni di eyeOS), chiamato dal file install.php una volta che viene creata un direttorio all'interno del server web (avendo precedentemente cambiato le impostazioni di accesso in modo che il server web abbia diritto di lettura, scrittura ed esecuzione all'interno del direttorio). L'installer crea un direttorio con un nome casuale (per maggiore sicurezza) all'interno del quale verranno estratti tutti i file del sistema, inizializzando poi una variabile globale per l'accesso (salvata nel file settings.php). Il primo ed unico utente creato inizialmente è l'utente root, l'unico con diritto di gestione degli utenti all'interno del sistema. Tra le opzioni presenti, è possibile permettere o negare la registrazione degli utenti al sistema: qualora non fosse permesso di creare nuovi utenti, solo gli amministratori potranno creare o eliminare gli account del sistema. Questa è proprio la scelta che è stata fatta nel progetto di Stage. Che si tratti di un sistema utilizzato all'interno della ditta o di un servizio offerto ai clienti, la creazione di nuovi account sarà effettuata solo se autorizzata dalla direzione, in modo da garantire il totale controllo. Il direttorio root di eyeOS contiene i file index.php e settings.php, i direttori img (contenente le immagini della finestra di login) e quello il cui nome
Università degli Studi di Brescia

Pa gi na 112

5 .3 Insta ll az io ne e pe rso nal iz za zio ne

è stato creato al momento dell'installazione il quale, nel caso specifico del progetto di Stage, è eyeOS9a9e09efb8. Il path di installazione contiene le seguenti cartelle:

account,

dove vengono salvati gli account esistenti nel sistema (il

nome della directory è generato automaticamente, ad esempio l'utente root è salvato in rt4) i cui parametri sono registrati in un file XML.
● ●

apps contiene le cartelle delle applicazioni. extern

contiene, per ogni applicazione, le immagini, le icone e i

temi associati.

groups

specifica le cartelle riservate ai gruppi presenti nel

sistema.

log

salva al suo interno di file di log, suddivisi per categoria di

applicazioni.
● ●

system contiene i file del kernel e le librerie di sistema. users

è la cartella contenente i dati degli utenti (la loro home

folder).

Il tree del percorso di installazione è riportato di seguito:
eyeOS/ |-- eyeOS9a9e09efb8 | |-- accounts | | |-- mx6 | | `-- rt4 | |-- apps | | |-- HelloWorld | | |-- downZip | | |-- editLink | | |-- emptyTrash | | |-- exit | | |-- eyeAdmin | | |-- eyeApps | | |-- eyeBar | | |-- eyeBoard | | |-- eyeCalc | | |-- eyeCalendar | | |-- eyeChess Università degli Studi di Brescia

5 .3 Inst al la zi o ne e perso na li zz azi o ne

Pa gi na 113

| | |-- eyeContacts | | |-- eyeControl | | |-- eyeCopy | | |-- eyeDelete | | |-- eyeDesk | | |-- eyeDesk_extras | | |-- eyeDialog | | |-- eyeDock | | |-- eyeDocs | | |-- eyeDownload | | |-- eyeFiles | | |-- eyeGroups | | |-- eyeImages | | |-- eyeInfo | | |-- eyeInstaller | | |-- eyeLaunch | | |-- eyeLogin | | |-- eyeMkDir | | |-- eyeMp3 | | |-- eyeNav | | |-- eyeNotes | | |-- eyePaste | | |-- eyeProcess | | |-- eyeProperties | | |-- eyeRSS | | |-- eyeRename | | |-- eyeSoft | | |-- eyeTrash | | |-- eyeUpload | | |-- eyeX | | |-- eyeZip | | |-- propertyTrash | | |-- restoreTrash | | `-- share | |-- extern | | |-- apps | | `-- libs | |-- groups | | |-- gruppo1 | | |-- gruppo2 | | `-- public | |-- log | | |-- all | | |-- proc | | |-- sec | | |-- um | | `-- vfs | |-- system | | |-- conf | | |-- kernel | | |-- lib | | `-- services | `-- users | |-- mx6 | `-- rt4 `-- img 73 directories Università degli Studi di Brescia

Pa gi na 114

5 .3 Insta ll az io ne e pe rso nal iz za zio ne

eyeOS.org mette a disposizione una wiki con una reference[55] per lo sviluppo di Widget, Kernel Function, Service e Library. La versione 1.5 di eyeOS integra al suo interno un gestore degli utenti e delle loro autorizzazioni; per il progetto di Stage è stato utilizzata una versione precedente allora in stadio di “beta release”, che tuttavia forniva le operazioni di base sugli utenti e sui gruppi.
eyeAdmin[56],

questo il nome del package, ha fornito le basi[57] per l'attuale

versione inclusa nell'ultima release (le cui funzionalità sono state integrate in eyeControl). Una volta che l'amministratore ha creato gli utenti, basandosi sul database di TYPO3, ognuno di essi può accedere al proprio account tramite la pagina di login di eyeOS. Tramite uno script[58] rilasciato da Edouard Daubin è inoltre possibile effettuare il login automatico. Con questa configurazione è possibile creare all'interno di TYPO3 un link del tipo:
autoLogin.php?user=YOURUSERNAME&password=YOURPASSWORD

che fornisce il login automatico al sistema, effettuando il passaggio da TYPO3 a eyeOS in modo invisibile all'utente, senza la necessità di reinserire nome utente e password.

In uno scenario più generale, tuttavia, all'utente sarebbe presentata la finestra di login, presentata in Figura 5.2. L'interfaccia del sistema operativo virtuale è OS X –like, dal punto di vista sia delle icone sia dello sfondo di default del desktop, con un menu per le applicazioni posizionato in alto avente la funzione di dock; in basso al centro è possibile accedere a un menu simile allo Start dei sistemi Windows. Un'immagine del desktop di eyeOS è mostrata in Figura 5.3, mentre Figura 5.4 mostra il menu Start. Gli effetti grafici di eyeOS sono gestiti tramite AJAX e Javascript, entrambi linguaggi di scripting utilizzati per la creazione di applicazioni web interattive.

Università degli Studi di Brescia

5 .3 Inst al la zi o ne e perso na li zz azi o ne

Pa gi na 115

In particolare, AJAX ha il vantaggio di poter caricare in background i dati aggiuntivi richiesti al server senza interferire con quanto visualizzato a schermo, mentre Javascript è il linguaggio utilizzato per le chiamate delle funzioni AJAX.

Figura 5.2.: Pagina di login di eyeOS.

Questo permette di avere effetti quali trasparenze nei menu e notifiche di sistema tramite finestre pop-up realizzate in modo non intrusivo e con poco carico sia per il client che per il server. La versione installata ha una traduzione (parziale e talvolta “zoppicante”) in lingua italiana, favorita dallo sviluppo di una community italiana legata a eyeOS (raggiungibile al sito eyeos.it) che tuttavia non costituisce, al momento attuale, una fonte aggiornata di informazioni. Per questo motivo sarà necessario procedere alla traduzione dell'attuale versione di eyeOS in italiano, dato che le traduzioni e language pack delle versioni precedenti non sono compatibili.

Università degli Studi di Brescia

Pa gi na 116

5 .3 Insta ll az io ne e pe rso nal iz za zio ne

Figura 5.3.: Desktop di eyeOS.

Figura 5.4.: Menu “Start” di eyeOS.

Il modulo di interesse nel corrente progetto e per cui è stato scelto eyeOS è principalmente eyeFiles, del quale mostro il menu di avvio in Figura 5.5. Esso rappresenta l'equivalente dell'applicazione Finder di Mac OS X oppure di Esplora Risorse dei sistemi operativi Windows.

Università degli Studi di Brescia

5 .3 Inst al la zi o ne e perso na li zz azi o ne

Pag ina 117

Figura 5.5.: Menu di avvio di eyeFiles.

Aprendo l'applicazione dal dock, la finestra che viene presentata offre all'utente la possibilità di eseguire varie funzioni sulle cartelle. Il tasto destro del mouse non è utilizzato, per questo motivo nel menu laterale esistono comandi che solitamente vengono eseguiti con l'utilizzo di un menu contestuale. Di seguito esamino le opzioni disponibili nella visualizzazione delle cartelle di eyeNav, di cui è possibile vedere una schermata in Figura 5.6.

Carica file: presenta all'utente alcuni campi tramite i quali

scegliere dei file presenti sul computer per trasferirli all'interno di eyeOS.

Scarica e Scarica come zip: permettono l'operazione opposta,

ovvero ricevere i file selezionati da eyeOS al calcolatore che l'utente sta utilizzando.

Crea nuova cartella, Cancella, Rinomina, Copia e Incolla:

offrono le medesime funzioni presenti in qualunque interfaccia dei sistemi operativi moderni.
● ●

Proprietà: visualizza le proprietà del file o cartella selezionato. Menu Cartelle: permette di accedere, tramite shortcut, ad

alcune cartelle utili del sistema quali Home, Desktop, Documenti e Musica.

Università degli Studi di Brescia

Pa gi na 118

5 .3 Insta ll az io ne e pe rso nal iz za zio ne

L'unica differenza degna di nota per l'utente sarà il fatto che è necessario selezionare prima il comando da eseguire ed in seguito cliccare sul file selezionato, non il viceversa come si è soliti fare. Nella parte inferiore dello schermo, le applicazioni aperte vengono affiancate allo stesso modo della taskbar dei sistemi Windows e ogni finestra può essere ridotta a icona, ingrandita o chiusa. In alto vengono visualizzati il comando “Su di un livello” per salire di un livello nell'albero dei direttori e una barra di navigazione che mostra l'attuale direttorio in cui si sta lavorando. A questo proposito, alcune critiche sono state mosse a eyeOS circa l'organizzazione delle cartelle all'interno del file system: visualizzando la cartella Home di un utente, il percorso mostrato corrisponde alla root del sistema in ambiente Unix, e la cartella Public viene mostrata nella barra di navigazione come una sottocartella del direttorio Home dell'utente, cosa che va contro la strutturazione logica dei dati. In realtà, come visibile nell'albero dei direttori mostrato in precedenza, la separazione tra le cartelle a livello di file system del server è ben chiara e il sistema tratta le cartelle pubbliche e le cartelle private come due mount point distinti, in quanto gestiti da due diverse applicazioni (eyeNav ed eyeGroups). Per l'utente è possibile quindi navigare all'interno delle sue cartelle, spostare i file sia all'interno di eyeOS che tra eyeOS e il client che sta utilizzando; per la condivisione dei file tra gli utenti di eyeOS, è possibile spostarli all'interno della directory Public per renderli visibili a tutti gli account del sistema, oppure spostarli all'interno della directory del gruppo di appartenenza per condividerli solo tra utenti selezionati. Tramite la configurazione delle impostazioni di accesso alle cartelle dei gruppi è possibile stabilire svariate combinazioni di accesso per ciascun gruppo e utente.

Università degli Studi di Brescia

5 .3 Inst al la zi o ne e perso na li zz azi o ne

Pag ina 119

Figura 5.6.: eyeNav, gestore file di eyeOS.

Università degli Studi di Brescia

6 Conclusioni
Ricapitolazione, prospettive future, valutazione complessiva.

Pa gi na 122

6 .1 Ri ca pit o la zio ne

6.1 Ricapitolazione
Al termine di questo lavoro di Stage, l'obiettivo prefissato si può considerare raggiunto, sebbene in un modo diverso rispetto a quanto preventivato inizialmente. L'idea di utilizzare un CMS, in contrapposizione alla realizzazione di una nuova applicazione software, ha attualizzato il progetto inserendolo in un contesto di sviluppo moderno di siti web. Questo progetto di Stage ha rappresentato per l'azienda una dimostrazione delle potenzialità delle tecnologie Open Source odierne, non solo nella realizzazione del singolo sito web ma anche nell'ottica della creazione di una suite volta a offrire agli utenti (interni o esterni all'azienda) l'accesso a informazioni aziendali da qualunque client connesso a internet, tramite l'integrazione di un CMS e un sistema operativo basato sul web.

6.2 Prospettive future
La soluzione adottata offre la possibilità di espansioni future. É prevista infatti l'integrazione del sistema con altri tipi di piattaforme: piattaforme di groupware (ad esempio Zimbra Collaboration Suite) per la fornitura di ulteriori servizi on-line e altre di supporto al lavoro collaborativo on-line. L'applicazione web-based così ottenuta sarebbe installabile su sistemi operativi free e Open Source, garantendo la possibilità di sostituire nelle intranet locali sistemi ben più costosi rivolti alle PMI.

Università degli Studi di Brescia

6 .3 V al ut azi o ne c o mp le ssiv a

Pa gi na 12 3

6.3 Valutazione complessiva
La valutazione complessiva di questo progetto di Stage è positiva sotto vari aspetti ma innanzi tutto dal punto di vista della mia formazione personale dall'introduzione al mondo del lavoro. In secondo luogo, mi è stato possibile studiare e implementare una soluzione software basata su uno dei CMS più completi nell'offerta Open Source. Durante il periodo di studio di TYPO3, mi sono reso conto della scarsità della documentazione in lingua italiana presente per questo CMS. Ciò non ha rappresentato un problema ai fini di questo progetto di Stage, anzi è stato uno sprone per rendere questa trattazione un possibile riferimento per chi volesse intraprendere lo sviluppo di siti web con TYPO3.

Università degli Studi di Brescia

Riferimenti bibliografici, Appendice
Riferimenti bibliografia e fonti web, listati e tabelle.

Pa gi na 12 6

Ri fe ri me nt i bi bli og ra fi ci, Append ice

Bibliografia e fonti web
1: typo3forum.com, TextWrangler/BBedit plugin for TypoScript highlighting., http://www.typo3forum.net/forum/tools-tipps/16599-typoscipt-syntaxhilighting-bbedit-mac.html 2: PHP Group, PHP License Official Page, http://www.php.net/license/ 3: Wikipedia, Wikipedia page about PHP, http://en.wikipedia.org/wiki/Php 4: Converse T, Park J, Morgan C, PHP and MySQL Bible 5: The Open Group, The Open Group Guidelines, http://www.opengroup.org/tm-guidelines.htm 6: The Open Group, Mac OS X Version 10.5 Leopard on Intel-based Macintosh computers certification, 7: OnLamp.com, PHP5 ImprovementsOver PHP4, http://www.onlamp.com/pub/a/php/2004/07/15/UpgradePHP5.html 8: Apache Software Foundation, Apache Server Project Main Page, http://httpd.apache.org/ 9: Netcraft, December 2007 Web Server Survey, 10: MySQL AB, MySQL Reference Manual 5.1 11: Wikipedia, Wikipedia article about Web Browser, http://en.wikipedia.org/wiki/Web_browser 12: Upsdell.com, Browser News: Usage Statistics, http://upsdell.com/BrowserNews/stat.htm 13: Costa D, Vamosi S, Cnet Editors Review, http://reviews.cnet.com/45059241_7-31117280.html?tag=nav

Università degli Studi di Brescia

B ibli o g r af ia e fo nt i w eb

Pa gi na 12 7

14: O'Reilly T, Web 2.0 Definition: Trying Again, http://radar.oreilly.com/archives/2006/12/web_20_compact.html 15: Wikipedia, Wikipedia page on LAMP (Software Bundle), http://en.wikipedia.org/wiki/LAMP_(software_bundle) 16: Kofler M, The Definitive Guide to MySQL5 17: Altmann W, Fritz R, Hinderink D, TYPO3 - Enterprise Content Management 18: Fivecube, Why CMS | Make Web Editing a Breeze, http://www.fivecube.com/company/inside_fivecube/approach/cms/ 19: Calvin C. Sov, How do I decide what is the best CMS for me? 20: Reisinger P, Evaluation of Content Management Systems 21: University of California, UC Davis Web CMS Initiative, http://pubcomm29.ucdavis.edu/cmssurvey/ 22: Wikipedia, List of CMS, http://en.wikipedia.org/wiki/List_of_content_management_systems 23: Opensourcecms, Opensourcecms.com, http://www.opensourcecms.com 24: CMSMatrix, CMSMatrix - The Content Management Comparison Tool, http://www.cmsmatrix.org/ 25: Weitzman L,Lewis-Bowen A, Evanchik S, Using open source software to design, develop and deploy a collaborative Web site, http://www128.ibm.com/developerworks/ibm/library/i-osource1/index.html?ca=drs26: Wikipedia, Wikipedia article on Joomla!, http://it.wikipedia.org/wiki/Joomla! 27: Michelinakis D, Open Source Content Management Systems: An Argumentative Approach 28: typo3.org, TYPO3 Developer Resource, 29: typo3.it, Risorsa italiana per TYPO3, http://typo3.it

Università degli Studi di Brescia

Pa gi na 12 8

B iblio g ra fia e f o nti we b

30: Skårhøj K, Inside TYPO3 (doc_core_inside) 31: Kindstrom P, Introduction to TYPO3, http://wiki.typo3.org/index.php/Introduction/Petr_Kindström_Introductio n 32: typo3.it, TYPO3 Italia, http://typo3.it 33: Free Software Foundation, The GNU General Public License, http://www.gnu.org/copyleft/gpl.html 34: Skårhøj K, TypoScript Syntax and In-depth Study (doc_core_ts) 35: Skårhøj K, TypoScript Templates doc_core_tstemplates 36: Skårhøj K, Templates, TypoScript and Beyond 37: Skårhøj K, Getting Started (doc_tut_quickstart) 38: TYPO3 Wiki, Getting Started, http://wiki.typo3.org/index.php/Getting_started 39: Skårhøj K, TYPO3 Reference Manual TSRef (doc_tut_tsref) 40: Skårhøj K, Modern Template Building Part1 (doc_tut_templselect) 41: Typo3Wizard, Dynamically split a menu in two parts, http://www.typo3wizard.com/en/snippets/menus/dynamically-split-amenu-in-2-parts.html 42: Skårhøj K, TypoScript by Example (doc_core_tsbyex) 43: TYPO3 Wiki, TYPO3 Wiki - TinyRTE, http://wiki.typo3.org/index.php/TinyRTE 44: Rolland S, Holzinger F, User Guide for the Front-end User Registration Extension, http://typo3.org/documentation/document-library/extensionmanuals/sr_feuser_register/current/ 45: Chiodi L, Maggini G, Pari B, Analisi di Usabilità del sito webAnalisi di Usabilità del sito web www.cenacolovinciano.orgwww.cenacolovinciano.org

Università degli Studi di Brescia

B ibli o g r af ia e fo nt i w eb

Pag ina 12 9

46: Lorenzutti M, User Guide for the Webformat Extendedshop extension, http://typo3.org/documentation/document-library/extensionmanuals/extendedshop/2.0.7/view/ 47: AA VV, TYPO3-UG-italy Digest, Vol 40, Issue 6, TYPO3-UG-italy Digest, Vol 40, Issue 6http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ugitaly 48: Wikipedia, Wikipedia page on Web operating system, http://en.wikipedia.org/wiki/WebOS 49: Google, Google Products, http://www.google.com/intl/en/options/ 50: Microsoft, Microsoft Office Live, http://officelive.microsoft.com/ 51: Ulteo.com, Ulteo.com: My digital life made simple, http://www.ulteo.com/ 52: eyeOS.com, eyeOS Professional Services for small companies, http://www.eyeos.com/?section=ForSmallCompanies 53: eyeOS.org, eyeOS Wiki - Releases, http://wiki.eyeos.org/Releases 54: eyeOS Blog, What's coming in eyeOS1.0, http://blog.eyeos.org/2007/04/04/whats-coming/ 55: eyeOS Wiki, eyeOS Reference, http://wiki.eyeos.org/Developers_Reference_Index 56: eyeos-apps.org, eyeAdmin page at eyeos-apps.org, http://www.eyeosapps.org/content/show.php/eyeAdmin?content=69757 57: eyeOS Forums, eyeAdmin development stopped, http://forums.eyeos.org/index.php?topic=2300.0 58: Daubin E, eyeOS Autologin at OpenDesktop.org, http://www.opendesktop.org/content/show.php/eyeOS+Autologin?content= 70330&PHPSESSID=f452d5065ee4d4a2ba4fef56023543fc

Università degli Studi di Brescia

Pa gi na 130

F i le mo d el lo .ht ml

File modello.html
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//IT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>3Services >>> Hardware e software. Soluzioni, servizi e assistenza.</title> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1"> <link href="res/3services.css" rel="stylesheet" type="text/css" /> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="sfondodestra"> <TABLE id="languageMenu">&nbsp;</TABLE> <table width="100%" height="121" border="0" cellpadding="0" cellspacing="0">

<!--DWLayoutTable--> <tr> <td width="778" height="100" valign="top" background="images/3sgessato.gif"> <table width="778" height="100" border="0" align="left" cellpadding="0" cellspacing="0"> <!--DWLayoutTable --> <tr> <td width="360" height="48"><img src="images/3services_01.gif" width="150" height="48"><img src="images/3services-logo.gif" width="210" height="48" border="0"></td> <td width="109" valign="top"><img Università degli Studi di Brescia

F i le mo d el lo .ht ml

Pa gi na 131

src="images/3services_03.gif" width="109" height="48"></td> <td width="84" valign="top"><img src="images/3services_04.gif" width="84" height="48"></td> <td width="224" valign="top"><img src="images/3services_05.gif" width="224" height="48"></td> <td width="1"></td> </tr> <tr> <td height="52" colspan="4" valign="top"> <!-- TABELLA DEL MENU --> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="topmenu1"> <tr> <td width="150" height="52"><img src="images/3services-3s-su.gif" width="150" height="52"></td> <td class="menu1-level1-no"><a href="homepage.htm" ><img src="images/3s-home.gif" alt="homepage" name="homepage" width="48" height="52" border="0"></a></td> <td class="menu1-level1-no"><a href="dovesiamo.htm" ><img src="images/3s-dove.gif" alt="dove siamo" name="dovesiamo" width="90" height="52" border="0"></a></td> <td class="menu1-level1-no"><a href="contatti.htm" ><img src="images/3s-contatti.gif" alt="contatti" name="contatti" width="72" height="52" border="0"></a></td> <td class="menu1-level1-no"><a href="news.htm" ><img src="images/3s-news.jpg" alt="news" name="news" width="45" height="52" border="0"></a></td> <td class="menu1-level1-no"><a href="offerte.htm" ><img src="images/3s-offerte.jpg" alt="offerte" name="offerte" width="64" height="52" border="0"></a></td> <td width="43"><img src="images/3services_12.gif" width="84" height="52"></td> <td width="265"><img src="images/3services_13.gif" width="224" height="52"></td> </tr> </table></td> <td></td> </tr>

Università degli Studi di Brescia

Pa gi na 132

F i le mo d el lo .ht ml

</table></td> <td width="100%" class="sfondo"><!--DWLayoutEmptyCell->&nbsp;</td> </tr> <tr> <td height="21" valign="top"> <table width="779" cellpadding="0" cellspacing="0" id="topmenu2"> <!-- la width era 779 pixel --> <!--DWLayoutTable--> <tr id="topmenu2"> <td width="150" height="21"><img src="images/3services-3sgiu.gif" width="150" height="21"></td> <td width="73"><a href="software.htm" ><img src="images/3s-software.gif" alt="software" name="software" width="73" height="21" border="0"></a></td> <td width="77"><img src="images/3s-hardware-in.gif" alt="hardware" name="hardware" width="77" height="21" border="0"></td> <td width="121"><a href="supporto.htm" ><img src="images/3s-supporto.gif" alt="supporto tecnico" name="supporto" width="121" height="21" border="0"></a></td> <td width="132"><a href="soluzioni.htm" ><img src="images/3s-soluzioni.gif" alt="soluzioni e servizi" name="soluzioni" width="132" height="21" border="0"></a></td> <td width="100"><a href="partner.htm" ><img src="images/3s-partner.gif" alt="partner" name="partner" width="100" height="21" border="0"></a></td> <td width="122" valign="top"><img src="images/spacer.gif" width="123" height="21"></td> </tr> </table></td> <td class="sfondogiallorosso"></td> </tr> </table> <table width="100%" height="1056" cellpadding="0" cellspacing="0"> <tr> <td width="100" height="142" valign="top"> <table width="100" cellspacing="0" cellpadding="0" NOWRAP> <tr>

Università degli Studi di Brescia

F i le mo d el lo .ht ml

Pag ina 133

<td><img src="images/3services-tasti.gif" width="150" height="60"></td> </tr> <tr> <td class="menu_left"> <p><a href="modulare.htm"><br>Menu a sinistra </a></p><p><a href="modulare.htm"><br>Menu a sinistra </a></p><p><a href="modulare.htm"><br>Menu a sinistra </a></p><p><a href="modulare.htm"><br>Menu a sinistra </a></p> </td> </tr> <tr> <td><img src="images/sotto-tasti.gif" width="150" height="20"></td> </tr> </table>

</td> <td colspan="2" valign="top"> <table width="629" cellspacing="0" cellpadding="0" id="content"> <tr> <td height="2" colspan="2"><img src="images/spacer.gif" width="570" height="10"></td> </tr> <tr> <td colspan="2" class="titolo">Hardware</td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr>

Università degli Studi di Brescia

Pa gi na 134

F i le mo d el lo .ht ml

<tr> <td width="25" height="25"><img src="images/spacer.gif" width="25" height="25"></td> <td width="602" class="sottotitolo"><p>Progettazione soluzioni HardWare <br> </p></td> </tr> <tr> <td>&nbsp;</td> <td class="testo"><strong> 3Services Srl</strong> &egrave; in grado di offrirvi i materiali informatici delle migliori case produttrici. Vanta inoltre una spiccata attitudine ad effettuare un&#8217;analisi integrata, basata sulle reali esigenze hardware e software del Cliente. Le soluzioni proposte garantiscono affidabilit&agrave;, sicurezza e scalabilit&agrave;, nel rispetto delle esigenze di budget. <p><strong> P</strong>rogettazione, installazione ed integrazione di soluzioni hardware e software volte a garantire la sicurezza dei dati e delle transazioni: </p> <p>� identificazione dei bisogni di Sicurezza e creazione di politiche rivolte alla protezione dei dati <br> � progettazione ed implementazione di soluzioni rivolte all'autenticazione degli utenti e all'autorizzazione degli accessi <br> � soluzioni di backup <br> � soluzioni per la protezione dai virus <br> � sistemi Firewall <br> � applicazioni di sistemi di crittografia avanzata per la trasmissione dei dati <br> � analisi e valutazione di prodotti software rivolti alla sicurezza. </p> <p><strong> 3Services srl </strong> assiste il cliente in tutte le fasi necessarie all'informatizzazione del flusso di lavoro: </p> <p>� Attraverso un'attenta analisi delle esigenze dei propri clienti vengono costruite soluzioni personalizzate in base alle reali necessit&agrave; esistenti in termini di prestazioni, alla tipologia di applicazioni utilizzate, alle pi&ugrave; attuali offerte del mercato informatico. </p> <p>� fornisce Personal Computer assemblati con rigidi criteri di scelta della migliore componentistica in commercio, garantisce il pi&ugrave; elevato standard qualitativo possibile e gli apparati di rete attivi e passivi (router, switch). </p> <p>� implementa l'infrastruttura di rete logica Università degli Studi di Brescia

F i le mo d el lo .ht ml

Pa gi na 135

(indirizzamenti IP, segmentazione di reti multiple, routing, etc.) </p> <p>� progetta i servizi necessari al migliore funzionamento del flusso di lavoro: gestione documentale, messaggistica e scambio dati, sistemi di sicurezza e protezione, etc. <br> � installa e configura i sistemi nel rispetto dei tempi e delle esigenze logistiche del cliente <br> � collauda e verifica il corretto funzionamento di tutto il sistema </p> <br> </td> </tr>

<tr> <td>&nbsp;</td> </tr> <tr> <td class="sottotitolo"><font color="#990000">Referenze</font></td> </tr> <tr> <td height="46"> <div align="center"><img src="images/mail-to.gif" width="19" height="22" border="0"></a></div></td> <td class="testo">Denis Moras,<br> <br> <font color="#999999">Scrivetemi, ho una risposta per ogni vostra esigenza.</font></td> </tr> <tr> <td colspan="2" class="righetta-bluCopia">&nbsp;</td> </tr> </table> <table> <tr> <td height="48">&nbsp;</td> <td id="menu_bottom1" ><div align="center"><ul class="menu_bottom1"> Università degli Studi di Brescia

Pa gi na 136

F i le mo d el lo .ht ml

<font color="#FF0000"><img src="images/crocetta.jpg" width="10" height="10"></font> <a href="homepage.htm" title="homepage"> homepage</a> <font color="#FF0000"><img src="images/crocetta.jpg" width="10" height="10"> </font><a href="dovesiamo.htm" title="dovesiamo"> dove siamo</a> <font color="#FF0000"><img src="images/crocetta.jpg" width="10" height="10"> </font><a href="contatti.htm" title="contatti"> contatti</a> <font color="#FF0000"><img src="images/crocetta.jpg" width="10" height="10"> </font><a href="news.htm" title="news e offerte"> news e offerte<br> </ul> <ul class="menu_bottom1b"> </a> <font color="#FF0000"><img src="images/crocettaarancio.jpg" width="10" height="10"> software</a> </font><a href="software.htm" title="software">

<font color="#FF0000"><img src="images/crocettaarancio.jpg" width="10" height="10"> </font><a href="" title="hardware"> hardware</a> <font color="#FF0000"><img src="images/crocettaarancio.jpg" width="10" height="10"> </font><a href="supporto.htm" title="supporto tecnico"> supporto tecnico</a> <font color="#FF0000"><img src="images/crocetta-arancio.jpg" width="10" height="10"> </font><a href="soluzioni.htm" title="soluzioni e servizi"> soluzioni e servizi</a> <font color="#FF0000"><img src="images/crocetta-arancio.jpg" width="10" height="10"> </font><a href="partner.htm" title="partner">partner</a><br> </ul></div></td> </tr>

Università degli Studi di Brescia

F i le mo d el lo .ht ml

Pag ina 137

<tr> <td height="19">&nbsp;</td> <td>&nbsp;</td> </tr> </table></td> <td width="332"> <div align="left"> <p>&nbsp;</p> </div></td> </tr> </table> </body> </html>

Campo Setup di ext:BASE TEMPLATE
# Configuring the Auto-Parser for main template: plugin.tx_automaketemplate_pi1 { # Read the template file: content = FILE content.file = fileadmin/template1/main/modello1.html # Here we define which elements in the HTML that # should be wrapped in subpart-comments: elements { BODY.all = 1 BODY.all.subpartMarker = DOCUMENT_BODY HEAD.all = 1 HEAD.all.subpartMarker = DOCUMENT_HEADER HEAD.rmTagSections = title TD.all = 1 TABLE.all = 1 div.all=1 } # Prefix all relative paths with this value: relPathPrefix = fileadmin/template1/main/ }

Università degli Studi di Brescia

Pa gi na 138

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

###Bottom Menu cObject lib.splitmenu = COA lib.splitmenu { 10 = HMENU 10.special = directory 10.special.value = 1 10.1 = TMENU 10.1 { wrap = <ul class="menu_bottom1-no"> | </ul> NO { stdWrap.cObject = COA stdWrap.cObject { 10 = TEXT 10.field = title if.value.data = register:count_HMENU_MENUOBJ if.negate = 1 if.isLessThan.prioriCalc=1 if.isLessThan.cObject=TEXT if.isLessThan.cObject.insertData=1 if.isLessThan.cObject.value = ({register:count_menuItems}+1)/2 wrap = <li>|</li> } } } 20 < .10 20.1.wrap = <ul class="menu_bottom2-no"> | </ul> 20.1.NO.stdWrap.cObject.if.negate > } #page.200 < lib.splitmenu ###END of Bottom Menu cObject ####LEFT MENU temp.tmenu= HMENU temp.tmenu.entryLevel=1 temp.tmenu { # second level 1 = TMENU #1.wrap = <ul class="menu_left">|</ul> 1{ NO{ linkWrap = <p>|</p> } ACT=1 ACT{ linkWrap = <p class="menu_left_active">|</p> } #CUR=1 #CUR{ # wrapItemAndSub = <li class="menu_left_current-active">|</li> Università degli Studi di Brescia

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

Pa gi na 139

} } lib.menu_left < temp.tmenu ###########LEFT MENU END

#} #IFSUB=1 #IFSUB{ # wrapItemAndSub = <li class="menu-level2-with-subpage">|</li> #}

###START of GMENU Top PARTE 1 (topmenu1)### lib.topmenu1 = HMENU lib.topmenu1 { 1=GMENU 1.maxItems=5 1 { wrap ( <td width="150" height="52"><img src="fileadmin/template1/main/images/3services-3s-su.gif" width="150" height="52"></td> | <td><img src="fileadmin/template1/main/images/3services_12.gif" width="84" height="52"></td> <td><img src="fileadmin/template1/main/images/3services_13.gif" width="224" height="52"></td> ) NO { allWrap= <td> | </td> XY= 48,52 || 90,52 || 72,52 || 45,52 || 64,52 5=IMAGE 5.file=fileadmin/template1/main/images/3s-home.gif || fileadmin/template1/main/images/3s-dove.gif || fileadmin/template1/main/images/3s-contatti.gif || fileadmin/template1/main/images/3s-news.jpg || fileadmin/template1/main/images/3s-offerte.jpg 10=TEXT 10 { text.field=title offset=12,46 fontColor=#FFFFFF fontFile=fileadmin/fonts/RoSSEB28.PFB fontSize=10px align=bottom, center shadow { offset=0,0 color=#000000 opacity=25 blur=50 niceText=1 } } Università degli Studi di Brescia

Pa gi na 140

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

} RO < .NO RO=1 #RO.transparentBackground = 1 RO.10.fontColor= #000000 ACT < .RO ACT=1 }

} #page.200 < temp.topmenu1 #####END of GMENU Top parte 1###

#####START of GMENU Top PARTE 2 (topmenu2)### lib.topmenu2 = HMENU lib.topmenu2 { 1=GMENU # 1.maxItems=5 1.begin=6 1 { wrap ( <td width="150" height="21"><img src="fileadmin/template1/main/images/3services-3s-giu.gif" width="150" height="21"></td> | <td width="122" valign="top"><img src="fileadmin/template1/main/images/spacer.gif" width="123" height="21"></td> ) NO { allWrap= <td> | </td> XY= [10.w]+10,21 5=IMAGE 5.file=fileadmin/template1/main/images/3s-topmenu2_sfondo.gif 10=TEXT 10 { text.field=title offset=3,15 fontColor=#FFFFFF fontFile=fileadmin/fonts/RoSSEB28.PFB fontSize=11px align=left shadow { offset=0,0 color=#000000 opacity=25 Università degli Studi di Brescia

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

Pag ina 14 1

blur=50 niceText=1 } # la shadow } } RO < .NO RO=1 #RO.transparentBackground = 1 RO.10.fontColor= #1BCEFB ACT < .RO ACT=1 } # GMENU 1

} #page.201 < temp.topmenu2 ###END of GMENU TOP parte 2 (topmenu2)###

###BEGIN languageMenu /* temp.languageMenu < plugin.tx_srlanguagemenu_pi1 temp.languageMenu.languagesUidsList = 0,1 temp.languageMenu.defaultLayout= 0 temp.languageMenu.defaultLanguageISOCode = IT #marks.LANGUAGE < plugin.tx_srlanguagemenu_pi1 */ temp.languageMenu = COA temp.languageMenu { 10 = RECORDS 10.tables = tt_content 10.source = 57 }

temp.languageMenu < plugin.tx_srlanguagemenu_pi1 temp.languageMenu.defaultLanguageISOCode = it

###END languageMenu

Università degli Studi di Brescia

Pa gi na 142

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

# Main TEMPLATE cObject for the BODY temp.mainTemplate = TEMPLATE temp.mainTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <body>-tags workOnSubpart = DOCUMENT_BODY # Substitute the ###menu_1### subpart with dynamic menu: subparts.menu_bottom1 < lib.splitmenu # Substitute the ###content### subpart with some example content: #subparts.content < styles.content.get # Substitute the ###topmenu1### subpart with GMENU TOP Part 1: subparts.topmenu1 < lib.topmenu1 # Substitute the ###topmenu2### subpart with GMENU TOP Part 2: subparts.topmenu2 < lib.topmenu2 # Substitute the ###menu_left### subpart with Menu Left: subparts.menu_left < lib.menu_left # Substitute the ###content### subpart with content: subparts.content < styles.content.get # Substitute the ###languageMenu### subpart with languageMenu : subparts.languageMenu < temp.languageMenu } # Main TEMPLATE cObject for the HEAD temp.headTemplate = TEMPLATE temp.headTemplate { # Feeding the content from the Auto-parser to the TEMPLATE cObject: template =< plugin.tx_automaketemplate_pi1 # Select only the content between the <head>-tags workOnSubpart = DOCUMENT_HEADER }

# Default PAGE object: page = PAGE page.typeNum = 0 # Copying the content from TEMPLATE for <body>-section: page.10 < temp.mainTemplate # Copying the content from TEMPLATE for <head>-section: page.headerData.10 < temp.headTemplate #debug #page.config.disableAllHeaderCode=1 ###BEGIN LANGUAGE SETUP config.linkVars = L config.typolinkLinkAccessRestrictedPages = NONE;

Università degli Studi di Brescia

Ca mp o Se tu p di ex t:B ASE T EMP LAT E

Pag ina 14 3

config.sys_language_uid = 0 config.language = it config.locale_all = italian page.config.htmlTag_langKey = it [globalVar = GP:L = 5] config.language = en config.locale_all = english config.sys_language_uid = 5 page.config.htmlTag_langKey = en [global] ###END LANGUAGE SETUP

Foglio di stile CSS
BODY { margin: 0px; background-image: url('../images/gessato-dx.gif'); background-repeat: repeat-y; background-position: right; background-color: #FFFFFF; } .testo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #003366; text-decoration: none; text-align: justify; padding: 5px 10px; white-space: normal; line-height: normal; display: compact; } .content { width: 629px; border: 0px; padding: 0px; } .sfondo { background-color: #FFFFCC; Università degli Studi di Brescia

Pa gi na 144

F o g lio d i st il e CSS

background-image: url('../images/3s-gessato.gif'); background-repeat: repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; } .niente { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8px; font-style: normal; margin: 1px; padding: 1px; height: auto; width: auto; } .credits { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: normal; color: #999999; text-decoration: none; text-align: center; padding: 2px;

} .sfondogiallorosso { background-image: url('../images/3s-giallorosso.gif'); background-repeat: repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; } .menu-sinistra { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url('../images/3s-gessatobianco.gif'); background-repeat: repeat-y; } .testoALLdestra { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 9px; text-align: right; } .titolo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: bold; color: #003399; text-decoration: none; text-align: justify; padding: 5px 10px; white-space: normal; Università degli Studi di Brescia

F o g li o di sti le CSS

Pag ina 14 5

line-height: normal; display: compact; background-image: url('../images/righetta-blu.gif'); background-repeat: repeat-x; background-position: bottom; } .sottotitolo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; color: #0099CC; text-decoration: none; text-align: justify; padding: 5px 10px; white-space: normal; line-height: normal; display: compact; background-image: url('../images/righetta-gialla.gif'); background-position: bottom; background-repeat: repeat-x; } .righetta-blu { background-image: url('../images/righetta-blu.gif'); background-repeat: repeat-x; cursor: crosshair; filter: BlendTrans(Duration=3); } .sfondodestra { background-image: url('../images/gessato-dx.gif'); background-repeat: repeat-y; background-position: right; background-color: #FFFFFF; } .righetta-bluCopia { background-image: url('../images/righetta-blu.gif)'; background-repeat: repeat-x; cursor: crosshair; filter: BlendTrans(Duration=3); background-position: center; } .menu_left { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url('../images/sfondo-tasti.gif'); background-repeat: repeat-y; font-size: 10px; font-weight: bold; color: #FFFFFF; font-variant: normal; text-decoration: underline; text-align: left; padding-left: 15px; vertical-align: text-top; Università degli Studi di Brescia

Pa gi na 146

F o g lio d i st il e CSS

} .menu_left UL.menu_left { list-style-type: none; } .menu_left UL.menu_left_active li { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #000000; font-variant: normal; text-decoration: none; } .menu_left_active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #000000; font-variant: normal; text-decoration: none; } .menu-sopra { font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url('../images/sfondo-tasti.gif'); background-repeat: repeat-y; font-size: 12px; font-weight: bold; color: #FFFFFF; font-variant: normal; text-decoration: underline; text-align: left;

}

Università degli Studi di Brescia

Ringraziamenti
Desidero porgere i miei ringraziamenti innanzi tutto alla Professoressa Marina Zanella, per la paziente attesa dimostrata nella consegna di questo lavoro, nonché per la disponibilità e l'attenzione dedicata alla correzione dello stesso. La medesima gratitudine va anche al Tutor aziendale Denis Moras e a tutta l'azienda 3Services S.r.l. per l'ottimo rapporto professionale e di amicizia che si è venuto a creare nel tempo e per avermi offerto la possibilità di vivere questa esperienza di Stage. Un grazie di cuore ai miei genitori, Paola e Tomaso, che da sempre mi sono vicini, rispettano le mie scelte e credono in me e nelle mie capacità. A tutti i miei amici, grazie! Infine, un ringraziamento speciale a Chiara, per essere entrata a far parte della mia vita. Senza di lei, probabilmente, queste pagine non sarebbero state scritte.

 Made on a Mac with NeoOffice. Questa opera è pubblicata sotto licenza Creative Commons “Attribuzione-Non commerciale-Condividi allo stesso modo” 2.5 Italia.

Questo documento consta di 160 pagine.