ACM ARIADNE CONTENT MANAGER MANUALE DI PRODUZIONE TEMPLATE

Transcript

1 ACM ARIADNE CONTENT MANAGER MANUALE DI PRODUZIONE TEMPLATE

2 SOMMARIO SOMMARIO INTRODUZIONE SCOPO DEL DOCUMENTO A CHI È RIVOLTO IMPOSTAZIONE CONCETTUALE ARCHITETTURA DELLA PRESENTAZIONE MODALITÀ OPERATIVE LINEE GUIDA DI PROGETTAZIONE TIPOLOGIE DI TEMPLATE Template di struttura Template di pagina Template di articolo COSTRUZIONE DI UN TEMPLATE XSL APPROCCIO OPERATIVO XML DI PARTENZA COMANDI XSL UTILI XSL:COPY-OF XSL:FOR-EACH XSL :IF MANUALE DI RIFERIMENTO INTRODUZIONE SCHEMA DELL XML DI ACM TEMPLATE DI STRUTTURA page-title installation-path navigation-path navigation TEMPLATE DI PAGINA article BOX DI IMPAGINAZIONE TEMPLATE DI ARTICOLO Card Document Movie GESTIONE DELLE IMMAGINI CONTENUTE NEI TEMPLATE ESEMPI DI TEMPLATE TEMPLATE DI STRUTTURA TEMPLATE DI PAGINA TEMPLATE DI ARTICOLO XSL PER BOX DI IMPAGINAZIONE TUTORIAL OPERATIVO: IL MIO PRIMO SITO CON ACM ACM E L XML I MIEI PRIMI TEMPLATES Dall idea all XHTML Dall XHTML all XSL Rendere dinamico l XSL...34 Rif.: Manuale_Produzione_Template.doc 2

3 1 INTRODUZIONE 1.1 Scopo del documento Il presente documento costituisce il manuale di riferimento per gli utenti sviluppatori di template che utilizzano Ariadne Content Manager. Si espongono dapprima i concetti e le linee guida da seguire per una produzione efficace dei template importati ed utilizzati in maniera automatica all interno di ACM; successivamente viene riportato il manuale di riferimento con l elenco dei TAG da utilizzare per la realizzazione dei template stessi. 1.2 A chi è rivolto La lettura del presente documento presuppone una conoscenza dello strumento ACM, alcune nozioni di base relative al funzionamento di Internet, la conoscenza di base di alcuni concetti legati alla tecnologia Java ed alla tecnologia XML, la conoscenza del linguaggio HTML. 2 IMPOSTAZIONE CONCETTUALE 2.1 Architettura della presentazione In Figura 0-1 è esposto lo schema architatturale della presentazione di ACM, elemento di riferimento di questo documento. Figura 0-1: Schema architetturale della presentazione di ACM. Un fruitore della presentazione di ACM si collega tramite browser, attraverso il modulo di risoluzione degli indirizzi, ad una JSP di ACM (tipicamente la home page del sito è contenuta in una index.jsp). Nella JSP è realizzata la logica per il controllo della navigazione, per la configurazione di base della presentazione e, soprattutto, per il reperimento delle informazioni e la presentazione delle stesse in formato XML. Le componenti principali di presentazione sono le seguenti: ACM Url Resolver: modulo che intercetta l url mnemonico (che riproduce l albero di navigazione definito da chi ha la respondabilità di configurazione del sito) immesso dall utente e consenti di invocare la JSP corretta. ACM JSP Page: JSP di presentazione che contengono la logica necessaria al corretto reperimento delle informazioni in ACM. Per la presentazione in HTML delle informazioni le JSP di ACM dipendono Rif.: Manuale_Produzione_Template.doc 3

4 dai fogli di stile XSL ad esse associate. A loro volta, i fogli di stile XSL fanno riferimento ad un foglio di stile CSS. ACM XSL: repository degli XSL che devono essere utilizzati in presentazione. Tale archivio è gestito in maniera automatizzata da parte della redazione di ACM per quanto riguarda la struttura ed il contenuto. Tag Libraries: librerie di tag in cui è incapsulata la logica per la generazione del contenuto delle pagine. ACM Classes: insieme di classi Java di utilità per la gestione di aspetti di carattere applicativo (ad esempio, le aree riservate). Dalla figura è esclusa la componente di caching dell html prodotto in quanto non influisce sul codice XML prodotto da ACM. Scopo di questo documento è quello di focalizzarsi sugli aspetti inerenti alla gestione automatizzata di fogli di stile XSL e CSS mediante ACM. In particolare, interessa comprendere come possono essere generati nuovi XSL funzionali alla gestione dinamica offerta dal prodotto. 2.2 Modalità operative La redazione di ACM (sezione di configurazione menù template) consente di eseguire le seguenti operazioni: inserimento di template (XSL e CSS) nell archivio del sistema; associazione dei template (XSL e CSS) alle pagine del sito per la determinazione dell aspetto grafico. preview dei template (XSL) di struttura, pagina ed articolo disponibili nell archivio (le tipologie di template saranno oggetto di approfondimento nel paragrafo 3.1); preview degli skin (CSS) disponibili nell archivio; Per modificare l aspetto estetico di un sito gestito tramite ACM è quindi necessario creare dei template XSL e CSS e successivamente caricarli nel sistema. In particolare, per la creazione dei template XSL sarà necessario conoscere l XML erogato delle JSP di ACM al fine di poterlo trasformare e vestire correttamente per erogarlo via HTTP sotto forma di HTML (o XHTML), ovvero in un linguaggio comprensibile ad un normale browser. 3 LINEE GUIDA DI PROGETTAZIONE 3.1 Tipologie di template ACM è uno strumento configurato per gestire contenuti sia di carattere Web sia di carattere documentale. La gestione dei template è relativa alla sola componente di gestione di contenuti Web. In particolare, sono gestiti in maniera automatica template relativi a due tipologie di oggetti in ACM: template di pagina; template di articolo. Un sito è visto in ACM come un insieme di pagine che possono essere navigate passando da una all altra sfruttando le voci di menù. Ciascuna pagina è poi costituita da un insieme di articoli; di ogni articolo sono pubblicate solo alcune componenti in base al tipo di template associato alla pagina (e quindi agli articoli in essa contenuti). Selezionando tipicamente il titolo di un articolo presente in una pagina si può accedere all articolo proposto in maniera completa in tutte le sue componenti. Ciascun file HTML di un sito gestito tramite ACM è caratterizzato da una struttura che, in linea di principio, contiene le seguenti componenti: intestazione; barra di navigazione; parte interna (corpo); piede di pagina. Tali componenti possono essere disposte in maniera differente, come proposto in Figura 0-2. In tale figura, tutto ciò che non è incluso nel corpo della pagina costituisce quella che è la struttura della pagina stessa (inclusa la griglia di colore rosso). Rif.: Manuale_Produzione_Template.doc 4

5 Intestazione e piè di pagina Barra di navigazione Corpo Figura 0-2: Esempi di differenti layout di pagina. Nella gestione dei template di ACM sono gestite in maniera separata la struttura della pagina ed il contenuto del corpo. Siccome il corpo può contenere o un articolo oppure una pagina di ACM, in ACM sono definite tre tipologie di template: template di struttura, template di pagina, template di articolo. Sostanzialmente, nella definizione di un sito che deve essere gestito in maniera automatizzata mediante ACM occorre impostare dapprima una griglia e quindi posizionare internamente a questa i vari componenti. La definizione di tale griglia è tuttavia opzionale (come sarà più chiaro in seguito quando saranno descritte le modalità di specifica degli oggetti), anche se fortemente consigliata, in quanto la gestione di un sito in maniera dinamica richiede la presenza di una infrastruttura solida al fine di evitare di incorrere in effetti collaterali causati dalla presenza di articoli incompleti o parziali. La realizzazione di tale griglia di fatto può avvenire, ad esempio, sfruttando una normale tabella o una struttura a DIV (consigliata). Occorre precisare che il corpo può contenere anche qualche cosa di differente rispetto ad un articolo oppure ad un insieme di articoli; ad esempio, ci sono delle componenti di presentazione di ACM relative ad elenchi di file, oppure maschere di ricerca, oppure ancora archivi di filmati, galleria di immagini, ecc. Tali tipologie di pagine esulano da questa trattazione in quanto per queste non è prevista una gestione automatizzata della scelta dei template. Il sito gestito tramite ACM può però essere progettato in modo tale per cui un cambiamento di struttura (ad esempio, introduzione del piè di pagina) si rifletta anche su queste pagine Template di struttura I template di struttura di fatto definiscono la struttura di layout comune a tutto un sito gestito tramite ACM (o ad una serie di pagine). Nel template di struttura è quindi descritta la predisposizione spaziale di tutti i componenti che costituiscono una generica pagina di ACM. Chi progetta un template di struttura deve quindi tenere in considerazione che dovrebbero essere presenti barra di navigazione, corpo del testo, intestazione di pagina, piè di pagina; per tali componenti occorre prevedere uno spazio opportuno. Figura 0-3: Enfatizzazione di alcuni elementi relativi alla struttura di un sito gestito tramite ACM. Rif.: Manuale_Produzione_Template.doc 5

6 Questi elementi sono oggetto di una gestione di carattere dinamico; per un utilizzo di tali oggetti evitando nell ambito di ACM si può tener presente dei seguenti aspetti: 1) Con ACM ogni voce di menù può essere fatta comparire nelle diverse zone del sito (intestazione - HEADER, menù e path di NAVIGAZIONE, piè di pagina - FOOTER). Nell ideazione della grafica si può tener conto di questa possibilità per distribuire le voci dell albero nelle diverse zone del sito (ogni voce del menu può comparire in più zone di navigazione). 2) Le voci di menu devono essere in formato testo. Non è quindi possibile applicare gli effetti grafici come ANTIALIAS, OMBRE e simili. 3) I menu di navigazione possono essere arricchiti da immagini (come le freccie verdi su sfondo giallo nel menù di navigazione di Figura 0-3) o da effetti grafici (quelli ottenibili con HTML e CSS: per esempio lo sfondo arancione di Figura 0-3). Ogni voce di menù di uno stesso livello deve però avere lo stesso stile grafico (banalmente non posso associare un colore o una immagine diversa per ogni voce di menu). Si può però decidere uno stile grafico a seconda del livello della voce di menu. Nella realizzazione della grafica statica del sito, bisogna tener presente dell esistenza di due zone logiche: template di struttura: la parte comune a tutto il sito; corpo del testo: la parte che cambia durante la navigazione (soggetta ad un template di pagina o ad un template di articolo nel caso di gestione automatizzata; soggetta ad altri template specifici nel caso di pagine particolari. L unica regola che bisogna rispettare è che le due zone (rappresentate dai colori rosso e verde in Figura 0-4) non si intersechino. Per esempio bisogna evitare che una immagine del template di struttura sconfini nel template di pagina. Figura 0-4: Suddivisione logica tra template di struttura e corpo del testo. Rif.: Manuale_Produzione_Template.doc 6

7 3.1.2 Template di pagina Un template di pagina di fatto definisce quanti articoli devono essere presentati in una pagina di ACM; la disposizione spaziale di questi e le componenti (attributi valorizzati) da mostrare per ciascun singolo articolo. Ad esempio, una home page potrebbe essere costituita da due righe con un articolo sulla prima riga e due articoli sulla seconda. Sulla prima riga l articolo ha una foto in formato 3, è presente il titolo ed il sommario. Sulla seconda riga i tre articoli hanno la foto in formato 5 ed è presente solo il titolo. Ad ogni template di pagina corrisponde un template di impaginazione in cui è specificata la struttura della pagina. Tale template di impaginazione è utilizzato per costruire in maniera opportuna le pagine della sezione impagina di ACM Template di articolo Un template di articolo di fatto definisce la presenza e la disposizione degli elementi che costituiscono un articolo (immagine, titolo, sommario, testo, link, riferimenti a schede, ecc.) quando questo è presentato nella sua interezza (cioè non impaginato con altri in una pagina). Tale template deve essere progettato coerentemente con il tipo articolo cui sarà associato: se si progetta un template per un articolo con tre foto, non avrà senso associarlo ad un tipo articolo che prevede solo una foto. Rif.: Manuale_Produzione_Template.doc 7

8 4 COSTRUZIONE DI UN TEMPLATE XSL 4.1 Approccio operativo Nella costruzione di un template XSL occorre operare come se nell HTML siano presenti sia parti di carattere statico (nel senso che non variano nel tempo) che parti dinamiche, variabili nel tempo in quanto attinte da una sorgente informativa. Le parti statiche sono presenti nel foglio di stile XSL sotto forma di XHTML così com è in quanto scaricato dal browser per la costruzione della pagina. Le parti dinamiche sono invece reperite mediante comandi XSL che vanno a ricercare le giuste informazioni nella sorgente di riferimento. La sorgente informativa è costituita da un documento XML generato da una JSP cui la pagina richiamata fa riferimento. 4.2 XML di partenza A seconda che si interroghi un nodo oppure una foglia dell albero di ACM viene erogato un differente XML che comunque risponde alle specifiche di un XML Schema specifico di ACM. I tag di XML che possono essere sfruttati per attingere informazioni da inserire nell HTML finale sono specificati nel capitolo Comandi XSL utili In questo paragrafo è riportato un elenco di alcuni comandi XSL che possono essere sfruttati per andare a navigare l albero XML generato dalle JSP di ACM. Si può far riferimento ad un qualsiasi manuale XSL per approfondire la conoscenza in merito a tali comandi. Quelli ivi riportati sono i più comunemente utilizzati, nonché contestualizzati all uso per ACM XSL:COPY-OF Una istruzione di questo tipo: <xsl:copy-of select= nodo/articolo/titolo /> serve per copiare informazioni dal documento XML. Nel caso specifico, l esempio copia un informazione XML del tipo: <nodo> <articolo> <titolo>vincere omani</titolo> </articolo> </nodo> Nel caso in cui si voglia copiare una serie di tag come nel caso del bodytext: <nodo> <articolo> <bodytext><strong>vincere domani</strong><hr/><br/></bodytext> </articolo> </nodo> l istruzione da utilizzare sarà: <xsl:copy-of select= nodo/articolo/bodytext/node() /> XSL:FOR-EACH Una istruzione di questo tipo: <xsl:for-each select= articolo >A</xsl:for-each> viene utilizzata per compiere dei cicli sui nodi dell albero. Nel caso specifico, l XML di partenza ha la seguente struttura: <nodo> <articolo> <titolo>vincere domani</titolo> </articolo> <articolo> <titolo>vincere ieri</titolo> Rif.: Manuale_Produzione_Template.doc 8

9 </articolo> <articolo> <titolo>perdere</titolo> </articolo> <articolo> <titolo>abbiamo perso</titolo> </articolo> </nodo> Per stampare tutti i titoli degli articoli l istruzione è: <xsl:for-each select= nodo/articolo > <xsl:value-of select= titolo /><br /> </xsl:for-each> In questo caso, l output sarà: Vincere domani <br /> Vincere Ieri <br /> Perdere <br /> Abbiamo perso <br /> XSL :IF Una istruzione di questo tipo: <xsl:if test= nodo/articolo/@id= 2 >A</xsl:if> serve per eseguire dei controlli. Ad esempio, facendo riferimento al seguente XML: <nodo> <articolo id= 1 > <titolo>vincere domani</titolo> </articolo> <articolo id= 2 > <titolo>vincere ieri</titolo> </articolo> <articolo id= 3 > <titolo>perdere</titolo> </articolo> <articolo id= 4 > <titolo>abbiamo perso</titolo> </articolo> </nodo> se si desidera stampare solo un determinato articolo ci sono due possibilità: <xsl:for-each select= nodo/articolo > <xsl:if 2 > <xsl:copy-of select= titolo /> </xsl:if> </xsl:for-each> oppure: <xsl:copy-of select= nodo/articolo[@id= 2 ] /> Rif.: Manuale_Produzione_Template.doc 9

10 5 MANUALE DI RIFERIMENTO 5.1 Introduzione Nel presente capitolo sono esposti gli elenchi dei tag XML di ACM che possono essere utilizzati nella definizione dei template XSL. 5.2 Schema dell XML di ACM L XML di ACM cui occorre far riferimento nella definzione dei fogli di stile XSL ha una struttura di questo tipo: Il nodo radice dell XML è costituito dall elemento <content>; al secondo livello dell albero gerarchico sono invece presenti degli elementi <component> ciascuno caratterizzato da un proprio specifico tipo. A seconda del tipo, sono presenti dei teg di terzo livello differenti. Nell esempio riportato è presente il terzo livello <navigation> per il componente di tipo navigation. 5.3 Template di struttura In questo paragrafo sono dettagliati alcuni elementi XML utili per l impostazione del template di struttura page-title Il sottoalbero XML è il seguente: Tale sottoalbero può essere navigato con le funzioni XSL opportune al fine di reperire il titolo della pagina HTML installation-path Il sottoalbero XML è il seguente: Rif.: Manuale_Produzione_Template.doc 10

11 Tale sottoalbero può essere navigato con le funzioni XSL opportune al fine di reperire: il nome dell istanza cui si sta facendo riferimento; la descrizione dell istanza; la web application di presentazione (online-path); la web application di ACM navigation-path Il sottoalbero XML è il seguente: Tale sottoalbero può essere navigato con le funzioni XSL opportune al fine di reperire: il link della home page; il link della pagina che stiamo visualizzando (<node-path>); il link della home page (<home-path>) navigation Questo componente contiene tutte le informazioni relative alla gestione della navigazione tra le pagine di ACM. E a questo componente che occorre far riferimento per la costruzione di intestazione, piè di pagina, menù di navigazione, percorso di navigazione. Il sottoalbero XML di primo livello è il seguente: I livelli contengono le seguenti informazioni: position: posizione attuale nell albero di navigazione; path: sequenza di nodi dell albero di navigazione che portano al nodo corrente; static: primo livello dell albero di navigazione (nodi figli del nodo padre Home); child: esposizione dei figli del nodo corrente; tree: esposizione completa dell albero di navigazione. Segue il dettaglio relativo ai vari livelli position instance: identificativo dell istanza di riferimento. page: descrizione della pagina attuale. o id: codice identificativo ACM della pagina. Utile parametro per la costruzione dei link tra le pagine di ACM. Rif.: Manuale_Produzione_Template.doc 11

12 o label: nome della pagina. o href: link della pagina. o meta-description: utile per la costruzione dell header. o meta-keywords: utile per la costruzione dell header. o visible-menu: specifica se la pagina deve essere visualizzata nel menù di navigazione. o visible-header: specifica se la pagina deve essere visualizzata nella intestazione. o title: titolo della pagina. o accesskey: specifica il tasto di accesso rapido alla pagina. o visible-footer: specifica se la pagina deve essere visualizzata nel piè di pagina path page: descrizione della pagina attuale. o o o o o o o o o o static id: codice identificativo ACM della pagina. Utile parametro per la costruzione dei link tra le pagine di ACM. href: link della pagina. meta-description: utile per la costruzione dell header. meta-keywords: utile per la costruzione dell header. visible-menu: specifica se la pagina deve essere visualizzata nel menù di navigazione. visible-map: specifica se la pagina deve essere visualizzata nella mappa del sito. visible-header: specifica se la pagina deve essere visualizzata nella intestazione. title: titolo della pagina. accesskey: specifica il tasto di accesso rapido alla pagina. visible-footer: specifica se la pagina deve essere visualizzata nel piè di pagina. Sono presenti una serie di tag <page> con attributi il cui significato è già stato esposto nei paragrafi precedenti child Sono presenti una serie di tag <page> con attributi il cui significato è già stato esposto nei paragrafi precedenti. Rif.: Manuale_Produzione_Template.doc 12

13 tree Sono presenti una serie di tag <page> con attributi il cui significato è già stato esposto nei paragrafi precedenti. I tag sono però organizzati in maniera gerarchica rispecchiando la struttura dell albero di navigazione del sito. 5.4 Template di pagina In questo paragrafo sono dettagliati alcuni elementi XML utili per l impostazione del template di pagina. Il sottoalbero XML (<component content= acm >) è il seguente: Tale sottoalbero può essere navigato con le funzioni XSL opportune al fine di reperire le informazioni relative a ciascun articolo. In particolare, a ciascun tag corrisponde un articolo di cui sono specificate le seguenti informazioni: id: codice identificativo dell articolo; level: codice identificativo della categoria di classificazione dell articolo order: numero d ordine dell articolo nella pagina; href: link dell articolo. Rif.: Manuale_Produzione_Template.doc 13

14 5.4.1 article Esplodendo in tag <article> sono presenti una serie di ulteriori tag di livello inferiore contenenti le informazioni che dovranno essere fornite all utente che guarda il sito title Contiene il titolo dell articolo subject Contiene il soggetto cui l articolo fa riferimento bodytext Contiene il testo dell articolo abstract Contiene il sommario dell articolo photo Possono essere presenti diversi tag <photo>, a seconda del numero di foto associate all articolo. Gli attributi del tag sono i seguenti: id: codice identificativo della foto; format: codice identificativo del formato; number: numero progressivo della foto all interno dell articolo order: ordine di presentazione della foto. Sono poi presenti una serie di elementi figli: <file-name>: nome del file associato alla foto; <alternate-text>: tasto da inserire nell alt; <title>: titolo della foto, utile per una didascalia; <subject>: soggetto della foto. 5.5 Box di impaginazione Ad ogni template di pagina di ACM corrispondono due fogli di stile: il template di pagina; il template relativo al box di impaginazione. Rif.: Manuale_Produzione_Template.doc 14

15 In questo paragrafo vi sono descritti gli aspetti relativi alla definizione del foglio di stile relativo ai box di impaginazione. Nel materiale fornito con ACM è presente una directory box acm che contiene i file box di impaginazione utilizzati in una versione base di ACM. In tale directory occorre far riferimento al file FORMATO_BOX_12_ARTICOLI.xsl che può essere utilizzato come punto di partenza per la creazione di un box di formattazione customizzato. La parte a cui bisogna prestare attenzione nel file è la seguente: <xsl:apply-templates select="form/row[@name='ordernumber1']"/> <xsl:apply-templates select="form/row[@name='idarticle1']"/> <xsl:apply-templates select="form/row[@name='titlearticle1']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle1']"/> Per ogni articolo che dovrà essere impaginato occorre inserire all interno del template queste quattro righe modificate in modo che il numero identificativo a termine del valore dell attributo name sia progressivo. Se per esempio il mio template di pagina contiene 3 articoli dovrò inserire <xsl:apply-templates select="form/row[@name='ordernumber1']"/> <xsl:apply-templates select="form/row[@name='idarticle1']"/> <xsl:apply-templates select="form/row[@name='titlearticle1']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle1']"/> <xsl:apply-templates select="form/row[@name='ordernumber2']"/> <xsl:apply-templates select="form/row[@name='idarticle2']"/> <xsl:apply-templates select="form/row[@name='titlearticle2']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle2']"/> <xsl:apply-templates select="form/row[@name='ordernumber3']"/> <xsl:apply-templates select="form/row[@name='idarticle3']"/> <xsl:apply-templates select="form/row[@name='titlearticle3']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle3']"/> I vari blocchi possono essere quindi formattati in maniera da ricreare la struttura della pagina finale. Ad esempio, si possono utilizzare le tabelle per ricreare il layout: <tr> <td> <xsl:apply-templates select="form/row[@name='ordernumber1']"/> <xsl:apply-templates select="form/row[@name='idarticle1']"/> <xsl:apply-templates select="form/row[@name='titlearticle1']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle1']"/> <td> <xsl:apply-templates select="form/row[@name='ordernumber2']"/> <xsl:apply-templates select="form/row[@name='idarticle2']"/> <xsl:apply-templates select="form/row[@name='titlearticle2']"/> <xsl:apply-templates select="form/row[@name='buttonchangearticle2']"/> <tr> <td> <xsl:apply-templates select="form/row[@name='ordernumber3']"/> Rif.: Manuale_Produzione_Template.doc 15

16 <xsl:apply-templates <xsl:apply-templates <xsl:apply-templates Un codice HTML di questo tipo inserito nell XSL relativo ai box di impaginazione consente di ottenere nella pagina di impaginazione di ACM (menù pubblica impagina selezione della pagina) un risultato simile a quanto esposto in Figura 0-5. Figura 0-5: Esempio di risultato di appliczione di un template box di impaginazione. 5.6 Template di articolo L XML relativo al template di articolo contiene un insieme di tag simile al template di pagina. La parte di interesse è comunque costituita dal tag seguente: Il significato dei tag ai vari livelli e dei corrispondenti attributi è già stato esposto nel paragrafo Occorre specificare che l elenco dei tag di secondo sottolivello può variare in relazione al tipo articolo. In particolare, possono essere presenti anche i seguenti tag: <card> (se all articolo è stata allegata una scheda); <document> (se all articolo è stato allegato un documento); <movie> (se all articolo è stato allegato un filmato); Segue un esempio dei singoli tag Card Gli attributi del tag sono i seguenti: order: posizionamento della scheda nell ambito dell articolo id: identificativo della scheda href: link alla scheda vera e propria L elemento figlio <title> rappresenta il titolo della scheda. Rif.: Manuale_Produzione_Template.doc 16

17 5.6.2 Document Gli attributi del tag document sono i seguenti: format: identificativo del formato di documento order: posizionamento del documento nell ambito dell articolo id: identificativo del documento href: link alla pagina jsp che permette il download del documento Gli elementi figli hanno il seguente significato: <file-name>: il nome del file, senza estensione <extension>: l estensione del file <title>: il titolo del documento Movie Gli attributi del tag sono i seguenti: format: identificatore del formato del filmato order: posizionamento del filmato nell ambito dell articolo id: identificativo del filmato href: link alla jsp che permette di scaricare il filmato L elemento figlio <file-name> rappresenta il nome fisico del file. 5.7 Gestione delle immagini contenute nei template Attualmente, non è prevista una gestione dell upload delle immagini relative ai template in maniera automatizzata con il caricamento del template del sistema. Per la gestione quindi di immagini che di fatto devono essere contenute nel template di struttura è possibile legare le immagini al template in maniera relativa e quindi procedere all upload delle immagini su server con un processo separato, o tramite interfaccia di ACM (Configurazione Template Risorse Statiche Importa Immagine) o tramite FTP. La directory per il posizionamento delle immagini è definita in fase di installazione. (instancex/images/) In entrambi i casi, le persone delegate alla gestione dei template dovranno avere cura di verificare i nomi delle immagini al fine di evitare situazioni di conflitto. Rif.: Manuale_Produzione_Template.doc 17

18 6 ESEMPI DI TEMPLATE 6.1 Template di struttura <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="html" doctype-system=" doctype-public="-//w3c//dtd XHTML 1.0 Transitional//EN" indent="no"/> <xsl:template match="/content"> <xsl:variable name="primo" <xsl:variable name="secondo" <xsl:variable name="terzo" <html> <head> <!-- IL TITLE DELLA PAGINA VIENE FUORI IN AUTOMATICO --> <title> <xsl:value-of </title> <link rel="stylesheet" type="text/css"/> <script language="javascript" <script language="javascript" </head> <body topmargin="0" marginheight="0" leftmargin="0"> <table border="0" bordercolor="red" width="100%" cellspacing="0" cellpadding="0"> <!-- PRIMA RIGA DI NAVIGAZIONE --> <tr style="background-color: #ccc;"> <!-- LOGO A SINISTRA --> <td class="bianco" align="center" width="158"> <a title="{component[@type='navigation']/navigation[@type='tree']/page/@title}" href="{component[@type='navigation']/navigation[@type='tree']/page/@href}"> <img width="138" height="50" </a> src="{//component[@type='installation-path']/online-path}/images/logoacm.gif" border="0"/> <!-- ELENCO PRIMI LIVELLI --> <td style="background-color: #ccc;" align="left"> <a title="{component[@type='navigation']/navigation[@type='tree']/page/@title}" href="{component[@type='navigation']/navigation[@type='tree']/page/@href}"> <!-- <xsl:if test="component[@type='navigation']/navigation[@type='tree']/page/@accesskey"> <xsl:attribute name="accesskey"><xsl:value-of select="component[@type='navigation']/navigation[@type='tree']/page/@accesskey" /></xsl:attribute> Rif.: Manuale_Produzione_Template.doc 18

19 </xsl:if> --> <xsl:choose> <xsl:when test="not($secondo)"> <xsl:attribute name="class">primolivelloselezionato</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="class">primolivello</xsl:attribute> </xsl:otherwise> </xsl:choose> <!-- <xsl:if </sup> <sup>[<xsl:value-of />] </xsl:if> --> <xsl:value-of </a> <xsl:for-each <a <!-- <xsl:if <xsl:attribute name="accesskey"><xsl:value-of /></xsl:attribute> </xsl:if> --> <xsl:choose> <xsl:when = $secondo"> <xsl:attribute name="class">primolivelloselezionato</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="class">primolivello</xsl:attribute> </xsl:otherwise> </xsl:choose> <!-- <xsl:if ^{[<xsl:value-of />]} </xsl:if> --> <xsl:value-of </a> <xsl:if <img border="0" </xsl:if> </xsl:for-each> Rif.: Manuale_Produzione_Template.doc 19

20 <xsl:variable name="senzaslash"> <xsl:value-of '/')"/> </xsl:variable> <xsl:variable name="sinistra"> <xsl:value-of select="substring-before($senzaslash, '/')"/> </xsl:variable> <a <img border="0" class="margine-piccolo" alt="versione in italiano" src="{//online-path}/images/flagita.gif"></img> </a> <a <img border="0" class="margine-piccolo" alt="english version" src="{//online-path}/images/flaguk.gif"></img> </a> <!-- CELLA DEL CERCA --> <td style="background-color: #ccc;" width="200" align="center"> <form method="get"> <input align="center" class="cerca" type="text" value="cerca nel sito" name="q"/> <input type="hidden" name="oe" value=""/> <input type="hidden" name="qor" value=""/> <input type="hidden" value="1" name="instance"/> <input class="cerca" type="submit" value="vai"/> </form> <!-- SECONDA RIGA CHE CONTIENE IL MENU DI SECONDO LIVELLO --> <tr> <td height="25" class="cellsecondlevel"> <td class="cellsecondlevel"> <xsl:for-each <a <!-- <xsl:if <xsl:attribute name="accesskey"> <xsl:value-of /> </xsl:attribute> </xsl:if> --> <xsl:choose> <xsl:when = $terzo"> Rif.: Manuale_Produzione_Template.doc 20

21 <xsl:attribute name="class">si</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="class">no</xsl:attribute> </xsl:otherwise> </xsl:choose> <!-- <xsl:if ^{[<xsl:value-of />]} </xsl:if> --> <xsl:value-of </a> <xsl:if <img border="0" </xsl:if> </xsl:for-each> <td align="right" class="cellsecondlevel"> <xsl:if <span class="login"> <xsl:copy-of </span> <br/> </xsl:if> <a class="login" <xsl:copy-of </a> <span style="color: white">-</span> <a class="login" <xsl:copy-of </a> <!-- SPACER e WELCOME --> <!-- <tr> <td colspan="2"> <td colspan="1" align="left" class="userprivate"> Rif.: Manuale_Produzione_Template.doc 21

22 --> <tr> <td style="background-color: #ccc; padding: 8px;" valign="top"> <xsl:variable name="mese-corrente"> <xsl:value-of </xsl:variable> <xsl:variable name="anno-selezionato"> <xsl:value-of </xsl:variable> <table> <tr> <td style="background-color: #ccc;" class="cellthirdlevel" valign="top"> <xsl:for-each visible-menu='true']"> <a <!-- <xsl:if ^{[<xsl:value-of />]} </xsl:if> --> <xsl:value-of </a> <br/> </xsl:for-each> <br/> <table summary="calendario degli eventi" cellspacing="0" cellpadding="1" align="center" class="calendar"> <caption class="titolo-calendario">calendario Eventi</caption> <tr id="title"> <th class="mese" align="center" colspan="7"> <xsl:value-of <xsl:value-of </th> <tr id="days"> <xsl:for-each <th valign="middle" align="center" class="giorno"> <xsl:value-of </th> </xsl:for-each> Rif.: Manuale_Produzione_Template.doc 22

23 <xsl:for-each <tr class="settimana"> <xsl:for-each select="day"> <xsl:choose> <xsl:when <td class="settimana" align="center"> <span class="giorno-old"> <xsl:value-of </span> </xsl:when> <xsl:otherwise> <td class="settimana" align="center"> <xsl:choose> <xsl:when = 'true'"> <a {@day-number}/{@month-number}" class="giorno-in" +1}.{$anno-selezionato}.html"> <xsl:value-of </a> </xsl:when> <xsl:otherwise> <xsl:value-of </xsl:otherwise> </xsl:choose> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:for-each> </table> <tr style="background-color: #ccc;"> <td> <!-- <div class="info-utente"> <xsl:if <xsl:copy-of /><br /> </xsl:if> <a class="nero" select="//component[@type='user']/label2" /></a> - Rif.: Manuale_Produzione_Template.doc 23

24 <a class="nero" /></a> </div> --> </table> <td valign="top"> <xsl:copy-of <xsl:copy-of <td valign="top"> <!-- <xsl:if <xsl:attribute name="class">sinistra</xsl:attribute> </xsl:if> <xsl:copy-of /> --> <tr> <td class="general-footer" colspan="1"> <td class="general-footer" colspan="1"> <a class="footer-link" eventi</a> <xsl:for-each <a class="footer-link" <!-- <xsl:if <xsl:attribute name="accesskey"><xsl:value-of </xsl:if> --> <!-- <xsl:if <sup>[<xsl:value-of </xsl:if> --> <xsl:value-of </a> </xsl:for-each> <!-- CREDITS <a class="footer-link" href="#" Rif.: Manuale_Produzione_Template.doc 24

25 --> <td class="general-footer" colspan="1"> </table> </body> </html> </xsl:template> </xsl:stylesheet> 6.2 Template di pagina <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="xml" encoding="iso "/> <!-- QUESTA TRASFORMATA NON FA NIENT'ALTRO CHE COPIARE TUTTO IL CONTENUTO TRANNE ACM--> <xsl:template match="/content"> <content> <xsl:apply-templates/> </content> </xsl:template> <!-- QUESTO TEMPLATE SI OCCUPA DI MODIFICARE IL CONTENUTO DI "CONTENT ACM" --> <xsl:template <xsl:variable name="online-path"> <xsl:value-of </xsl:variable> <xsl:variable name="acm-path"> <xsl:value-of </xsl:variable> <component type="content" content="acm"> <table border="0" cellspacing="10" cellpadding="0"> <tr> <td> <!-- PRIMO ARTICOLO --> <xsl:for-each select="article[1]"> <xsl:if <img width="236" height="140" hspace="10" vspace="4" align="left" </xsl:if> <a <xsl:value-of select="title"/> </a> <br/> Rif.: Manuale_Produzione_Template.doc 25

26 <br/> <xsl:copy-of select="abstract/node()"/> <br/> <a class="continua" title="{subject}">continua</a> <img border="0" src="{$online-path}/images/freccia_continua.gif"/> <br/> <br/> <br clear="all"/> </xsl:for-each> <tr> <td> <table border="0" cellspacing="0" cellpadding="10"> <tr> <xsl:for-each > 1 and position() < 5]"> <td class="bordo" valign="top"> <xsl:choose> <xsl:when test="photo/@format = '1'"> <img width="55" height="55" hspace="6" vspace="2" align="left" src="{$acmpath}/files/photo/{photo[@format='1']/file-name}"/> </xsl:when> <xsl:otherwise/> </xsl:choose> <a href="{@href}"> <xsl:value-of select="title"/> </a> <br/> <br/> <xsl:copy-of select="abstract/node()"/> <br/> <a href="{@href}" class="continua" title="{subject}">continua</a> <img border="0" src="{$online-path}/images/freccia_continua.gif"/> </xsl:for-each> </table> </table> </component> </xsl:template> <!-- QUESTO E' il TEMPLATE DI DEFAULT CHE COPIA TUTTI I DATI --> <xsl:template match="component[@type]" priority="-1"> <xsl:copy-of select="."/> </xsl:template> Rif.: Manuale_Produzione_Template.doc 26

27 </xsl:stylesheet> 6.3 Template di articolo <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="xml" encoding="iso "/> <!-- QUESTA TRASFORMATA NON FA NIENT'ALTRO CHE COPIARE TUTTO IL CONTENUTO TRANNE ACM--> <xsl:template match="/content"> <content> <xsl:apply-templates/> </content> </xsl:template> <!-- QUESTO TEMPLATE SI OCCUPA DI MODIFICARE IL CONTENUTO DI "CONTENT ACM" --> <xsl:template <xsl:variable name="online-path"> <xsl:value-of </xsl:variable> <xsl:variable name="acm-path"> <xsl:value-of </xsl:variable> <component type="content" content="acm"> <table border="0" cellspacing="10" cellpadding="0"> <tr> <xsl:for-each select="article[1]"> <td width="50%" valign="top"> <xsl:choose> <xsl:when = '3'"> <img hspace="6" vspace="2" border="1" width="236" height="140" align="left" </xsl:when> <xsl:otherwise/> </xsl:choose> <span class="titolo"> <xsl:value-of select="title"/> </span> <br/> <br/> <xsl:copy-of select="bodytext/node()"/> <br/> <br/> Rif.: Manuale_Produzione_Template.doc 27

28 «<a href="javascript:history.back(1)">indietro</a> </xsl:for-each> </table> </component> </xsl:template> <xsl:template <component type="history" content="acm"> <br/> <span class="titolo">articoli CORRELATI:</span> <br/> <br/> <xsl:for-each <strong> <xsl:value-of select="title"/> </strong> <br/> <xsl:copy-of select="abstract/node()"/> <hr/> </xsl:for-each> </component> </xsl:template> <!-- QUESTO E' il TEMPLATE DI DEFAULT CHE COPIA TUTTI I DATI --> <xsl:template match="component[@type]" priority="-1"> <xsl:copy-of select="."/> </xsl:template> </xsl:stylesheet> 6.4 XSL per BOX di impaginazione <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="xml" omit-xml-declaration="yes"/> <xsl:template match="/index"> <main> <table width="589" cellspacing="0" cellpadding="2"> <tr> <td width="5"><img src="{path}/images/spacer.gif" width="1" height="20" border="0"/> <td class="barraverde" width="579"><xsl:value-of select="title"/> <td class="barraverderight"> <a href="{help}"><img src="{path}/images/help.gif" border="0"/></a> Rif.: Manuale_Produzione_Template.doc 28

29 <tr> <td colspan="3"><img src="{path}/images/spacer.gif" width="1" height="2"/> <tr> <td width="5"> <td colspan="2" class="toolbar" align="left"> <table border="0" width="100%" cellspacing="0" cellpadding="5"> <tr> <td> <form <table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#cccccc"> <tr> <td height="260" align="center"> <xsl:apply-templates <xsl:apply-templates <xsl:apply-templates <xsl:apply-templates </table> <table border="0" cellpadding="3" cellspacing="0" width="100%"> <tr> <td align="right"><br/> <input type="reset" value="annulla Modifiche"/> <input type="submit" value="salva"/> </table> </form> </table> </table> </main> </xsl:template> <xsl:template match="form/row"> <xsl:choose> <xsl:when <input type="hidden" </xsl:when> <xsl:when Rif.: Manuale_Produzione_Template.doc 29

30 <input type="text" onfocus="this.blur()"/> </xsl:when> <xsl:when <br/><input type="button" value="cambia Articolo" </xsl:when> <xsl:otherwise> altro </xsl:otherwise> </xsl:choose> </xsl:template> </xsl:stylesheet> Rif.: Manuale_Produzione_Template.doc 30

31 7 TUTORIAL OPERATIVO: IL MIO PRIMO SITO CON ACM 7.1 ACM e l XML Quando guardate una pagina di un sito gestito con ACM, una JSP fornisce una serie di dati dinamici in formato XML. Sono questi dati XML che vengono utilizzati nella presentazione del sito per rendere le pagine dinamiche. La maniera più semplice per visualizzare questi dati è aggiungere all indirizzo (URL) della pagina il parametro xml=1 Per esempio, state guardando la pagina e volete visualizzare i dati XML relativi. Dovrete allora chiamare la pagina Se state utilizzando Internet Explorer, apparirà qualcosa del genere (Figura 1): Figura 6 - XML in Internet Explorer Questa è la sorgente dei dati su cui lavoreremo per rendere le pagine dinamiche (ovvero popolate nei contenuti in maniera automatica). Il documento XML che abbiamo visto subisce due trasformazioni per diventare HTML (o XHTML). La prima trasformazione è quella del template di Pagina/Articolo, la seconda è quella del template di Struttura. Fatte queste premesse possiamo iniziare a costruire la nostra prima pagina con ACM. 7.2 I miei primi templates Dall idea all XHTML Ipotizzando che siate già in possesso del layout grafico fornito dal grafico, dall art director oppure da voi stessi, il primo passo è trasformare l idea grafica in XHTML. Vediamo come fare. Immaginiamo che il vostro layout sia simile a quello rappresentato in figura 2 (ho scelto un layout semplice per non complicare il codice e mantenere maggiore visibilità sulle azioni da compiere questo non toglie che è possibile implementare con ACM qualunque layout grafico sviluppabile con HTML). Rif.: Manuale_Produzione_Template.doc 31

32 Intestazione Barra di navigazione Corpo della pagina Figura 0: Layout grafico scelto per il nostro sito. Una volta deciso come sarà strutturata la pagina, scriviamo il codice XHTML relativo (si può utilizzare qualunque editor di testo notepad, blocco note, ultraedit, jedit oppure un editor visuale di HTML Dreamweaver o simili. Se l editor lo permette conviene impostare la creazione di codice XHTML piuttosto che HTML). Avremo bisogno di 3 blocchi HTML per delimitare le tre sezioni informative del sito (Intestazione, Navigazione, Corpo della pagina): <div id= intestazione > INTESTAZIONE </div> <div id= navigazione > NAVIGAZIONE ELENCO DEI LINKS </div> <div id= contenuto > CONTENUTO DELLA PAGINA - ARTICOLI </div> Per questo tutorial ho scelto di utilizzare i DIV per contenere e separare le sezioni. Avrei potuto utilizzare anche una struttura tabellare (<table><tr><td>..) per ottenere lo stesso effetto, anche se in maniera meno elegante e corretta dal punto di vista degli standard HTML del W3C. Facciamo un passo successivo: riempiamo i blocchi con del contenuto verosimile: <div id= intestazione > <h1>portale INFORMATIVO COSTRUITO CON ACM</h1> <a href= # >Home</a> - <a href= # >Chi siamo</a> - <a href= # >Le nostre sedi</a> </div> <div id= navigazione > <a href= # >Prodotti</a> - <a href= # >Servizi</a> - <a href= # >Catalogo online</a> </div> <div id= contenuto > <h2>titolo dell articolo numero 1</h2> <p>testo introduttivo dell articolo, bla bla bla</p> <a href= # ><img src= freccina.gif /></a> <h2>titolo dell articolo numero 2</h2> <p>testo introduttivo dell articolo, bla bla bla</p> <a href= # ><img width= 5 height= 5 src= freccina.gif /></a> </div> Abbiamo creato un intestazione che contiene il nome del sito e una serie di link che conterranno alcune informazioni di carattere generale. Abbiamo inserito alcuni link nella sezione di navigazione e riempito il DIV del contenuto con 2 articoli fittizi (titolo, testo e link che ci porta ad una pagina di dettaglio dell articolo). Per ora la nostra pagina contiene solo dati informativi e non informazioni grafiche su come gli elementi devono essere disegnati nel nostro browser. Per decidere colori, grandezze dei font, bordi e altri dettagli grafici utilizzeremo un foglio di stile CSS. Vediamone un esempio. <style> * { font-family: verdana; color: black; margin: 0px; padding: 0px; font-size: 12px; } #intestazione { background-color: #FFFF99; padding: 20px; } #navigazione { background-color: #99CCFF; padding: 6px; text-align: right; } #contenuto { background-color: #CCFFCC; padding: 6px; } h1 { font-size: 18px; font-weight: bold; } Rif.: Manuale_Produzione_Template.doc 32

33 h2 { font-size: 12px; font-weight: bold; } </style> Potete aprire la pagina 01 (link o attach) per visualizzarne il codice oppure per vedere come appare in un browser. ATTENZIONE!!: Il codice che producete deve essere XHTML, quindi deve seguire alcune semplici regole: Tutti i tag devono avere una chiusura (anche i BR, gli HR o le immagini), L ordine di apertura / chiusura dei tag deve essere corretta (deve seguire le regole XML) Per controllare di aver scritto correttamente codice XHTML, salvate la vostra pagina HTML con estensione.xhtml e caricatela in Internet Explorer (o in un validatore XML) Dall XHTML all XSL Una volta realizzata la pagina statica, bisogna scomporla nelle varie componenti: Il template di struttura: tutto il codice che rimane invariato in tutto il sito, Il template di pagina: il codice relativo al contenuto informativo della pagina, La skin CSS: il codice che descrive l aspetto grafico della pagina. La figura 3 mostra il codice XHTML e le diverse sezioni: la sezione che descrive l aspetto grafico del sito è evidenziata in ROSSO, la sezione di pagina in BLU. Tutto quello che rimane farà parte del template di struttura. Figura 7 - codice XHTML e SEZIONI Skin CSS Niente di più semplice. Basta creare un nuovo file con estensione.css ed copiarci la parte di codice tra <style> e </style>. A questo punto potete caricare all interno di ACM il foglio di stile (oppure se state lavorando tramite ACM Console dovrete copiare il file.css all interno del vostro repository locale). Una volta inserito il foglio di stile CSS all interno di ACM, questo deve essere associato al sito (Configurazione Template Associa Skin) Template di Pagina Lo scheletro del template di pagina è sempre lo stesso: Rif.: Manuale_Produzione_Template.doc 33