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

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 fadesFor ever and for ever when I move.

Alfred Lord Tennyson, Ulysses

I

Indice1 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 FigureFigura 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 TabelleConfronto tra CMS..............................................................................18

Array myObject.......................................................... .........................36

Cartelle principali dell'installazione di TYPO3...................................67

Contenuto di typo3/............................................................................68

1 1 IntroduzioneIntroduzione

Ente ospitante, presentazione del lavoro svolto, strumenti.

Pagina 2 1.1 Ente Ospitante

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.

U n i v e r s i t à d e g l i S t u d i d i B r e s c i a

1.2 Presentazione del lavoro svolto Pagina 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.


Pagina 4 1.2 Presentazione del lavoro svolto

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


1.3.1 PHP Pagina 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 PHP-

GTK).[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.


Pagina 6 1.3.2 Apache

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à.


1.3.3 My SQL Pagina 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.


Pagina 8 1.3.4 Browser web

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


1.3.4 Browser web Pagina 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,


Pagina 10 1.3.5 Sistemi 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 risultano spesso invasive, difficilmente

personalizzabili, talvolta contenenti componenti aggiuntivi inutili allo

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.


2 2 ContentContent Management SystemManagement System

Sistemi CMS, comparazione, criteri di scelta, CMS adottato.

Pagina 12 2 Content Ma nageme nt System

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.


2.1 Perché adottare un CMS Pagina 13

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;


Figura 2.1: Ciclo di vita dei contenuti.

Pagina 14 2.1 Perché adottare un 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


2.1 Perché adottare un CMS Pagina 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/


Pagina 16 2.1 Perché adottare un 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.


2.2 Come scegliere un CMS Pagina 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.


Pagina 18 2.2 Come scegliere un 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 Drupal 5.3 Joomla! 1.0.7 TYPO3 4.1.1Last Updated 11/22/2007 4/25/2006 4/20/2007System Requirements Drupal Joomla! TYPO3

Application Server PHP 4.3.3+

Apache recommended, any server that supports PHP and MySQL

PHP 4.3.0+

Approximate Cost Free $0 Free


2.3 Analisi di CMS Pagina 19

DatabaseMySQL, Postgres

MySQLMySQL, PostGreSQL, Oracle, MSSQL

License GNU GPL GNU GPL GNU GPLOperating System Any Any AnyProgramming Language PHP PHP PHPRoot Access No No NoShell Access No No NoWeb Server Apache, IIS Apache Apache, IISSecurity Drupal Joomla! TYPO3Audit Trail Yes No YesCaptcha Free Add On Yes Free Add OnContent Approval Yes Yes YesEmail Verification Yes Yes YesGranular Privileges Yes No YesKerberos Authentication No No Free Add OnLDAP Authentication Free Add On Free Add On Free Add OnLogin History Yes Yes YesNIS Authentication No No Free Add OnNTLM Authentication Free Add On No Free Add OnPluggable Authentication Yes No Free Add OnProblem Notification No No YesSandbox No No YesSession Management Yes Yes YesSMB Authentication No No Free Add OnSSL Compatible Yes No YesSSL Logins No No YesSSL Pages No No Free Add OnVersioning Yes Yes YesSupport Drupal Joomla! TYPO3Certification Program No No NoCode Skeletons Yes No Free Add OnCommercial Manuals Yes Yes YesCommercial Support Yes Yes YesCommercial Training Yes Yes YesDeveloper Community Yes Yes YesOn-line Help Yes Yes YesPluggable API Yes Yes YesProfessional Hosting Yes Yes YesProfessional Services Yes Yes YesPublic Forum Yes Yes YesPublic Mailing List Yes No YesTest Framework Free Add On No Free Add OnThird-Party Developers Yes Yes YesUsers Conference Yes Yes YesEase of Use Drupal Joomla! TYPO3Drag-N-Drop Content Free Add On No Free Add OnEmail To Discussion Free Add On Free Add On Free Add OnFriendly URLs Yes Yes YesImage Resizing Free Add On Yes YesMacro Language Free Add On Yes YesMass Upload Free Add On No Free Add OnPrototyping Limited Yes Free Add OnServer Page Language Yes Yes YesSite Setup Wizard LimitedSpell Checker Free Add On No YesStyle Wizard Limited No YesSubscriptions Free Add On No Free Add On


Pagina 20 2.3 Analisi di CMS

Template Language Limited Yes YesUI Levels No No YesUndo Limited No YesWYSIWYG Editor Free Add On Yes YesZip Archives No No Free Add OnManagement Drupal Joomla! TYPO3Advertising Management Free Add On Yes Free Add OnAsset Management Yes Yes YesClipboard No No YesContent Scheduling Free Add On Yes YesContent Staging Free Add On No Free Add OnInline Administration Yes Yes YesOn-line Administration Yes Yes YesPackage Deployment No No YesSub-sites / Roots Yes Yes YesThemes / Skins Yes Yes YesTrash No Yes Free Add OnWeb Statistics Yes Yes Free Add OnWeb-based Style/Template Management

Yes Yes Yes

Web-based Translation Management

Yes Free Add On Yes

Workflow Engine Limited No 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.


2.3.1 Drupal Pagina 21

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 è scaricabile ed

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.

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


Pagina 22 2.3.2 Ma mb o e Jooml 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.


2.3.3 TYPO3 Pagina 23

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


Pagina 24 2.3.3 TYPO3

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


2.4.1 Ragioni della scelta Pagina 25

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.


Pagina 26 2.4.1 Ragioni della scelta

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.

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.


Figura 2.2.: Logo ufficiale di TYPO3.

2.4.2 Struttura Pagina 27

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.


Pagina 28 2.4.3 Ruoli degl i utenti

● 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


Figura 2.3.:Diagramma della struttura di TYPO3.

2.4.3 Ruoli degli utenti Pagina 29

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


Pagina 30 2.4.4 Comm unity

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]


2.5 GNU General Public License Pagina 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.


3 3 ProgrammazioneProgrammazione TYPO3TYPO3

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

Pagina 34 3.1 TypoScript

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.


3.1 TypoScript Pagina 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


Pagina 36 3.1 TypoScript

(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.

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:


Figura 3.1.: Registro di configurazione di Microsoft Windows.

3.1 TypoScript Pagina 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.

myObject

property1 value_x

property2 value_y

property2. 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).


Pagina 38 3.2 Struttura, albero delle pagine e contenuti

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


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

3.2 Struttura, a lbero del le pagine e contenuti Pagina 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


Pagina 40 3.2 Struttura, albero delle pagine e contenuti

É 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


3.3 Front-end Pagina 41

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.


Pagina 42 3.3.1 Processo di rendering

● 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)

sono mostrati e inseriti nell'output: PHP_SCRIPT_INT, USER_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.


3.3.2 API Pagina 43

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


Pagina 44 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


3.3.3 TSFE Pagina 45

$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.


Pagina 46 3.3.3 TSFE

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


3.3.4 Oggetti contenuto Pagina 47

verrà creato l'oggetto TEXT chiamato 10, il quale avrà un valore assegnato,

cioè “oggetto di testo”.

10 = TEXT10.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 = IMAGE20.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.


Pagina 48 3.3.4 Oggetti contenuto

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


3.4 Temp late Pagina 49

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


Pagina 50 3.4 Temp late

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.

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 sotto-

modulo 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


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


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



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



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}



}

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}



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.


Pagina 56 3.5 Layout

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

topMenu, leftMenu, rightMenu, bottomMenu 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”.


3.6 Estensioni Pagina 57

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.


Pagina 58 3.6 Estensioni

● 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.phpext_icon.gifext_localconf.phpext_php_api.dat

doc/TODO.txtmanual.sxw

pi1/class.tx_automaketemplate_pi1.php

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


3.6 Estensioni Pagina 59

($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.


Pagina 60 3.6 Estensioni

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).


3.7 Utenti TYPO3 Pagina 61

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


Pagina 62 3.7.2 Utenti front-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.


4 4 SvolgimentoSvolgimento dell'attivitàdell'attività

Installazione di TYPO3, analisi del sito web statico precedente e creazione di un template in TypoScript.

Pagina 64 4.1 Installazione di TYPO3

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:


4.1.1 Requisit i di sistema Pagina 65

● 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.


Pagina 66 4.1.2 Processo di installazione

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).

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).


Figura 4.1.: Schermata conclusiva del processo di installazione.

4.1.2 Processo di installazione Pagina 67

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.

Cartella Contenutot3lib/ Librerie TYPO3 e setup del database core (t3lib/stddb/)

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

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/ (specifica per ogni sito web)

Direttorio locale contenente configurazione e estensioni locali. Può essere usata per motivi decisi a piacimento dall'utente. Deve essere 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/ (specifica per ogni sito web)

Contiene i file temporanei.

uploads/(specifica per ogni sito web)

Contiene i file allegati a record del database gestiti da TCE. Viene usata di default per le immagini inserite nell'editor di testo RTE ed è necessaria solo se configurata in $TCA.

Tabella 3: Cartelle principali dell'installazione di TYPO3.


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

Pagina 68 4.1.2 Processo di installazione

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 Contenutoext/sysext/

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.

gfx/ Elementi grafici.

install/ Contiene lo script di inizializzazione del tool di installazione.

mod/ 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/).

Tabella 4: Contenuto di typo3/.

4.1.3 Interfaccia di amministrazione (back-end)

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.


4.1.3 Interfaccia di amm inistrazione (back-end) Pagina 69

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.


Pagina 70 4.1.3 Interfaccia di amm inistrazione (back-end)

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


Figura 4.3.Interfaccia utente del back-end TYPO3.

4.1.3 Interfaccia di amm inistrazione (back-end) Pagina 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


Pagina 72 4.2 Sito web HT ML preesistente

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

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.


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

4.2 Sito web HT ML preesistente Pagina 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).

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.


Figura 4.5.: Extension manager nel menu di TYPO3.

Pagina 74 4.3 Installazione delle estensioni

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.


Figura 4.6.: Extension Manager.

4.3 Installazione delle estensioni Pagina 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.


Pagina 76 4.4 Mo difica del sito web preesistente

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.

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.


Figura 4.7.: Interfaccia di Fileadmin.

4.4 Mo difica del sito web preesistente Pagina 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"> </TABLE><table width="100%" height="121" border="0" cellpadding="0" cellspacing="0">

[...]

<td height="52" colspan="4" valign="top">  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="topmenu1">

[...]

 <tr id="topmenu2"> <td width="150" height="21"><img src="images/3services-3s-giu.gif" width="150" height="21"></td>

[...]

<td colspan="2" valign="top"> <table width="629" cellspacing="0" cellpadding="0" id="content"> <tr>

[...]

<td height="48"> </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>

[...]

Pagina 78 4.5 Scrit tura del temp late TypoScript

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).


4.5.1 Creazione di un temp late radice Pagina 79

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.


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

Pagina 80

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.


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

4.5.2 Temp late ext:BASE TEMP LATE Pagina 81

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

riferimenti alle immagini contenute in esso. Sostituirà il prefisso

fileadmin/template1/main/ a tutti i riferimenti alle immagini all'interno del

file HTML.

###Bottom Menu cObject ###lib.splitmenu = COAlib.splitmenu { 10 = HMENU


Pagina 82 4.5.2 Temp late ext:BASE TEMP LATE

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.



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.

Quella utilizzata in questo caso, cioè stdWrap.cObject, carica il

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=1temp.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



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 = HMENUlib.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 } } } 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.



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 = HMENUlib.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 blur=50 niceText=1 } #chiude la shadow } } RO < .NO RO=1 #RO.transparentBackground = 1 RO.10.fontColor= #1BCEFB ACT < .RO ACT=1 } }


###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 3s-

topmenu2_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



# 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]



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 sotto-

modulo 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).


Pagina 90 4.6 Creare e mo dificare contenuti

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 . Il tasto

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

browser e visualizzare il risultato (Figura 4.11).


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

4.6 Creare e mo dificare contenuti Pagina 91

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 plug-

in 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.


Figura 4.11.:Pagina web realizzata con TYPO3.

Pagina 92 4.7 Area privata c lienti

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


4.7 Area privata clienti Pagina 93

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.


Pagina 94 4.7 Area privata c lienti

● 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


4.7 Area privata clienti Pagina 95

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


Pagina 96 4.8 Gestione preventivi

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.


4.8 Gestione preventivi Pagina 97

● 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.



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.



● 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



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 fileplugin.tx_extendedshop_pi1.file.templateFile = EXT:extendedshop/pi1/shop.html# CSS fileplugin.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 decimalsplugin.tx_extendedshop_pi1.priceDec = 2# Decimal separatorplugin.tx_extendedshop_pi1.priceDecPoint = ,# Thousand separatorplugin.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 productplugin.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 #basketplugin.tx_extendedshop_pi1.pidBasket = 53

# cat=Webformat Shop System/config/14; type=int; label= Pid #ordersplugin.tx_extendedshop_pi1.pidOrders = 55

# cat=Webformat Shop System/config/15; type=int; label= Pid #deliveryplugin.tx_extendedshop_pi1.pidDelivery = 25

# cat=Webformat Shop System/config/15; type=int; label= Pid #usersplugin.tx_extendedshop_pi1.pidUsers = 56



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 = [email protected]

# 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 = [email protected]

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 pageplugin.tx_extendedshop_pi1.requiredFields=name,address,city,zip,state,phone,email,authorization,conditionsplugin.tx_extendedshop_pi1.requiredFieldsSymbol = *



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.




Figura 4.12.: Vista articoli con Webformat Extendedshop

Figura 4.13.: Procedura di acquisto di Webformat Extendedshop

5 5 Approfondimento:Approfondimento: gestione documenti on-gestione documenti on-lineline

Sistemi operativi basati sul web, sistema operativo eyeOS, installazione e personalizzazione.

Pagina 106 5.1 Sistemi operativi basati sul web

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 Web-

based 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 on-

line e potervi accedere da qualunque computer collegato a internet.


5.1 Sistemi operativi basati sul web Pagina 107

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


Pagina 108 5.1 Sistemi operativi basati sul web

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”.


5.2 Sistema operativo eyeOS Pagina 109

● Y indica una versione con cambiamenti notevoli per l'utente.

● Z indica la presenza di correzioni minori o bugfix della versione

corrente.

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:


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

Pagina 110 5.2 Sistema operativo eyeOS

● 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.


5.2 Sistema operativo eyeOS Pagina 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


Pagina 112 5.3 Installazione e personalizzazione

è 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



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.



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.

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.


Figura 5.2.: Pagina di login 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.


Figura 5.4.: Menu “Start” di eyeOS.

Figura 5.3.: Desktop di eyeOS.


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.


Figura 5.5.: Menu di avvio di eyeFiles.


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.




Figura 5.6.: eyeNav, gestore file di eyeOS.

6 6 ConclusioniConclusioni

Ricapitolazione, prospettive future, valutazione complessiva.

Pagina 122 6.1 Ricapitolazione

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.


6.3 Valutazione comp lessiva Pagina 123

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.


RiferimentiRiferimenti bibliografici,bibliografici, AppendiceAppendice

Riferimenti bibliografia e fonti web, listati e tabelle.

Pagina 126 Riferime nti bibliografici , Appendice

Bibliografia e fonti web

1: typo3forum.com, TextWrangler/BBedit plugin for TypoScript highlighting.,

http://www.typo3forum.net/forum/tools-tipps/16599-typoscipt-syntax-

hilighting-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/4505-

9241_7-31117280.html?tag=nav


Bibliograf ia e fonti web Pagina 127

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://pubcomm-

29.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://www-

128.ibm.com/developerworks/ibm/library/i-osource1/index.html?ca=drs-

26: 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


Pagina 128 Bibliografia e fonti web

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-a-

menu-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/extension-

manuals/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


Bibliograf ia e fonti web Pagina 129

46: Lorenzutti M, User Guide for the Webformat Extendedshop extension,

http://typo3.org/documentation/document-library/extension-

manuals/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-ug-

italy

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.eyeos-

apps.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


Pagina 130 File mo del lo.html

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=iso-8859-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"> </TABLE><table width="100%" height="121" border="0" cellpadding="0" cellspacing="0">



<tr>

<td width="778" height="100" valign="top" background="images/3s-gessato.gif"> <table width="778" height="100" border="0" align="left" cellpadding="0" cellspacing="0">



<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

File mo del lo.html Pagina 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">  <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>

Pagina 132 Fi le mo del lo.html

</table></td>

<td width="100%" class="sfondo"> </td>

</tr>

<tr>

<td height="21" valign="top"> <table width="779" cellpadding="0" cellspacing="0" id="topmenu2">

 

<tr id="topmenu2">

<td width="150" height="21"><img src="images/3services-3s-giu.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>


<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>

</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"> </td>

</tr>



<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> </td>

<td class="testo"><strong> 3Services Srl</strong> è in grado di offrirvi i materiali

informatici delle migliori case produttrici. Vanta inoltre una spiccata

attitudine ad effettuare un’analisi integrata, basata sulle

reali esigenze hardware e software del Cliente. Le soluzioni proposte garantiscono affidabilità, sicurezza e scalabilità, 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à esistenti in termini di prestazioni, alla tipologia di applicazioni utilizzate, alle più attuali offerte del mercato informatico. </p> <p>ï¿½ fornisce Personal Computer assemblati con rigidi criteri di scelta della migliore componentistica in commercio, garantisce il più elevato standard qualitativo possibile e gli apparati di rete attivi e passivi (router, switch). </p> <p>ï¿½ implementa l'infrastruttura di rete logica



(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> </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"> </td>

</tr> </table> <table>

<tr>

<td height="48"> </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> <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/crocetta-arancio.jpg" width="10" height="10">

</font><a href="software.htm" title="software"> software</a>

<font color="#FF0000"><img src="images/crocetta-arancio.jpg" width="10" height="10">

</font><a href="" title="hardware"> hardware</a>

<font color="#FF0000"><img src="images/crocetta-arancio.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>



<tr>

<td height="19"> </td>

<td> </td>

</tr>

</table></td>

<td width="332"> <div align="left">

<p> </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/ }


Pagina 138 Camp o Setup di ext:BASE TEMP LATE

###Bottom Menu cObject

lib.splitmenu = COAlib.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=1temp.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>


Camp o Setup di ext:BASE TEMP LATE Pagina 139

#} #IFSUB=1 #IFSUB{ # wrapItemAndSub = <li class="menu-level2-with-subpage">|</li> #} }}lib.menu_left < temp.tmenu###########LEFT MENU END

###START of GMENU Top PARTE 1 (topmenu1)###

lib.topmenu1 = HMENUlib.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 } }



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


#####END of GMENU Top parte 1###

#####START of GMENU Top PARTE 2 (topmenu2)###

lib.topmenu2 = HMENUlib.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



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


###END of GMENU TOP parte 2 (topmenu2)###

###BEGIN languageMenu

/*temp.languageMenu < plugin.tx_srlanguagemenu_pi1temp.languageMenu.languagesUidsList = 0,1temp.languageMenu.defaultLayout= 0temp.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_pi1temp.languageMenu.defaultLanguageISOCode = it

###END languageMenu



# 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;



config.sys_language_uid = 0config.language = itconfig.locale_all = italianpage.config.htmlTag_langKey = it

[globalVar = GP:L = 5]config.language = enconfig.locale_all = englishconfig.sys_language_uid = 5page.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;


Pagina 144 Foglio di st i le 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;


Foglio di sti le CSS Pagina 145

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;


Pagina 146 Foglio di st i le 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;

}


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.

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

Documents

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