XML, CSS, XSL, DTD

Transcript

XML, CSS, XSL, DTD

Università degli Studi di Modena e Reggio Emilia
Facoltà di Ingegneria – Reggio Emilia
CORSO DI
TECNOLOGIE E APPLICAZIONI WEB
XML
Ing. Marco Mamei
M. Mamei - Tecnologie e Applicazioni Web
1
Cos’e’ XML?
XML = eXtensible Markup Language
Non è una estensione di HTML.
E’ una versione semplificata di SGML.
Si può definire (come per SGML) un
Meta-Markup Language: Non un linguaggio di markup,
ma un linguaggio per definire linguaggi di markup.
Cosa vuol dire?:
- HTML definisce un set preciso e limitato di tags, e li
associa univocamente a specifici comportamenti del
browser
- XML non definisce alcun tags, ma permette di definire
nuovi set di tag per scopi specifici. I nuovi tag non
sono di per sé associati ad alcun comportamento di
default, ma si possono associare a documenti
speciali (“fogli di stile”) che permettono di associare
struttura e informazioni di visualizzazione ai tag.
- HTML era concepito esclusivamente per il Web
- XML è concepito in generale per la trattazione
general-purpose e aperta di documenti elettronici
- Incidentalmente, anche molto utile per il Web….
- Ancora incidentalmente, tutti i documenti elettronici
oggi sono necessariamente documenti Web…
2
Perchè XML?
HTML Ha dei grossi problemi e limitazioni:
1. limitato set di tag. Non adatto a tutte le applicazioni e
a tutti i documenti. Non si può pensare di aggiungere
continuamente nuovi tag alle nuove versioni di HTML
2. Comportamento rispetto ai TAG built-in nei browser.
Browser diversi si comportano in modo diverso
“What I see is not what You Get”
3. C’e’ la necessità non solo di visualizzare I
documenti, ma anche di elaborarli, farli analizzare da
programmi (p.e., documenti elettronici) in modo
automatico. Purtroppo, HTML non permette di fare
questo perché i tag permettono solo di inserire
informazioni di visualizzazione, non informazioni
collegate alla semantica dei contenuti.
3
Esempio: Limiti di HTML
<i>Franco Zambonelli</i>, <i>Pippo Caio
</i>,
<b><i><FONT=+1>Dispense
di
Web</FONT></i></b>, Reggio Emilia 2000,
1.
Sarebbe comodo estendere i tag per semplificare
la vita…e.g., il tag <bi_big> per scrivere in
grassetto italico e font grossi.
2.
Chi mi dice che ingrandire di 1 la dimensione del
font funzioni allo stesso modo su tutti i broswer?
3.
Come
fa
un
programma
ad
estrarre
automaticamente
da
quel
frammento
l’informazione su autori e titolo del libro? Pippo
Caio è il titolo o il secondo autore?? I tag non
contengono informazioni semantiche…
4
Soluzione:
Definire il proprio linguaggio di markup, inserendovi i tag
che interessano
Associare una chiara semantica ai tag
Definire separatamente le “operazioni” associate ai tag,
siano esse operazioni di visualizzazione, operazioni di
trasformazione (per trasformare il documento in un altro
documento), o genericamente di elaborazione
Questo è esattamente ciò che permette di fare XML
Esempio:
Definizone Set di TAG: <autore>, <titolo>, <casa
editrice>, <anno>, etc. etc. con eventualmente la
sintassi del testo nei tag (p.e., anno può includere solo
numeri). In pratica, si definisce uno specifico nuovo
“Markup Lanuage”
Definizione di un programma per il trattamento dei
tag (e.g., visualizzazione): <autore> Æ <i>
A cui può seguire una elaborazione del documento volta
a, e.g., visualizzazione Æ trasforma il XML in HTML
Oppure una generica elaborazione (p.e., un programma
che trova tutti gli autori che nel 1999 hanno pubblicato un
libro…)
5
Esempio:
CML (Chemical Markup Language)
Per descrivere composti chimici:
<xml version = “1.0”?>
<CML>
<MOL TITLE = “Acqua”>
<ATOMS>
<ARRAY BUILTIN=”ELSYM”>H
</ATOMS>
<ATOMS>
<BONDS>
<ARRAY BUILTIN=”at1d1”>1
</BONDS>
</ATOMS>
</MOL>
</CML>
O H</ARRAY>
2</ARRAY>
3</ARRAY>
1</ARRAY>
Esistono poi programmi sepcifici che permettono di:
analizzare questi file e disegnare le molecole o
analizzare le proprietà delle molecole a partire dalla
descrizione. (p.e., il browser Jumbo per CML).
Altri esempi di Linguaggi di Markup definiti usando XML
includono: MathML, MusicML, VoiceXML, etc. etc.
6
Struttura Documenti XML
Notiamo varie cose dall’esempio precedente:
Il tutto inizia con un tag che specifica il tipo di documento
(<xml version = “1.0”?>)
I tag, come in HTML, possono avere degli attributi
(“<MOL TITLE = “Acqua”>)
Un documento XML è formato da una serie di tag che
contengono informazioni. Ogni tag, poi, al suo interno,
può contenere altri tag, e cosi’ via, in modo ricorsivo. La
struttura che ne deriva è una struttura ad albero
(teniamolo presente, è importante e tornerà in seguito..)
BONDS
ATOMS
ARRAY
HOH
ARRAY
ARRAY
ARRAY
12
23
ARRAY
11
Al contrario di HTML, dove possono esistere tag che non
hanno il corrispondente tag di chiusura (p.e., <BR>) in
XML tutti i tag aperti devono essere anche ciusi
(“</TAG>”). Tutto deve essere in un programma
contenente. Si parla di documenti XML ben formati
Esistono programmi “XML Parser” che analizzano un
documento XML per vedere se è ben formato.
NOTA: HTML non richiede di essere ben formato!
7
Una Precisazione
È importante sottolineare che XML di suo non fa nulla! È
solo uno standard che necessita di applicazioni che lo
utilizzino.
L’esempio precedente sul CML sottintende che ci sia un
programma in grado di leggere CML e, ad esempio,
visualizzarlo in modo consono alle aspettative dell’utente.
È chiaro che l’importanza di uno standard stà nel fatto
che un applicazione scritta per trattare XML sarà molto
più rivendibile di un applicazione scritta per trattare un
linguaggio proprietario…
8
Come definire un nuovo linguaggio di
MarkUp tramite XML?
Per definire un nuovo linguaggio bisogna specificarne la
sintassi attraverso un DTD (“Document Type Definition”)
o un XMLSchema (Nuovo approccio, più moderno).
Un DTD (o un XMLSchema) dice:
- quali sono i tag ammissibili e i loro possibili attributi
- cosa puo’ esservi dentro ogni tag Æ e quindi in che
modo l’albero XML deve essere costruito e quali
possono essere i nodi di questo albero.
Esempio di frammento di DTD per gestire dati su libri,
autori e editori:
<!DOCTYPE biblio-entry
<!ELEMENT biblio-entry - - (author+, title, subtitle?, isbn)>
<!ATTLIST biblio-entry id CDATA #REQUIRED>
<!ELEMENT author - - (last-name, first-name)>
<!ELEMENT (last-name, first-name, subtitle, isbn) - - (#PCDATA)
]>
Una volta definito un DTD, si ha un nuovo linguaggio di
markup. E’ possibile, scrivendo un documento XML,
specificare a quale specifico DTD fa riferimento.
Esempio: nel caso dell’esempio CML avrei potuto
scrivere all’inizio:
<!DOCTYPE cml SYSTEM “cml.dtd”>
Per specificare quale era il file DTD che specificava il
linguaggio di markup usato. Si parla di documento XML
valido se il documento è scritto in accordo alla sintassi di
un certo DTD. Esistono programmi “validatori” per XML.
9
XHTML come applicazione XML
HTML, non è un particolare linguaggio XML. Infatti:
- non esiste il DTD. Esistono i TAG predefiniti che si
possono
usare,
ma
sono
“built-in”
nella
interpretazione dei browser. Non esistono documenti
che specificano il linguaggio e che per esempio un
browser possa usare per verificare la “validità” di un
documento.
- non richiede che i documenti siano ben formati.
Per esempio, è possibile aprire un paragrafo <p>
senza chiuderlo con il corrispondente </p>, è
possibile dare i nomi degli attributi con delle
“scorciatoie” <IMG SRC=pippo.jpg WIDTH=67>
invece che, come è più corretto <IMG
SRC=”pippo.jpg” WIDTH=”67”>
XHTML prende la ultima versione di HTML (4.01) e la
ridefinisce in termini di linguaggio XML, attraverso la
definizione di un opportuno DTD.
A questo punto, è
- necessario scrivere i documenti “ben formati”
- è possibile “validare” un documento HTML.
Oggi, un buon sito Web dovrebbe essere scritto in
XHTML….
NOTA: i tag senza chiusura come <BR> vanno
esplicitamente segnati come “aperti e immediatamente
chiusi attraverso la notazione <BR />. Questa notazione
si può sempre usare per anche per tag che non hanno
contenuto: p.e., <p/> equivale a <p></p>
10
DTD e XMLSchema: Utili Non
Necessari…
Anche senza avere definito un nuovo linguaggio di
markup, è possibile scrivere dei documenti XML
mettendoci i tag che ci pare.
Non importa che in qualche DTD sia scritto quali tag
possiamo usare e come.
Ciò che conta realmente è
- noi si sappia cosa che tag scriviamo e perché
- che il documento XML sia ben formato (i parser XML
possono verificare se un documento è ben formato
anche senza DTD)
- che esistano programmi o applicazioni per i quali i tag
che scriviamo abbiamo un senso (altrimenti, che
cosa scriviamo a fare?)
La validazione con DTD o XMLSchema è qualcosa in più,
che ci permette di stabilire uno schema standard di
scrittura documenti, e che ci permette di validare i
documenti.
Da un certo punto di vista, il paragone è come quello tra linguaggi orali (p.e., pellirossa) e linguaggi
scritti (p.e., tutti i linguaggi latini e anglossassoni). I primi permettono la comunicazione e la formazione
di frasi, anche se non esistono documenti che permettano di controllare la correttezza della
grammatica: l’importante è che le persone comunque si capiscano. I secondi permettono anche di
controllare se le frasi sono corrette dal punto di vista dello standard del linguaggio.
Noi lavoreremo principalmente senza DTD…ma teniamo
presente che ci sono e che sarebbe meglio, dal punto di
vista ingegneristico, usarli!
11
Esempi.
<CIAO>
<PIPPO PLUTO=”orca”>1 abc</PIPPO>
<ATOMS> ariciao
</CIAO>
<PIPPO> uffa uffa non chiuso
</MOL>
DOCUMENTO NON BEN FORMATO: CI SONO TAG CHE NON
SI CHIUDONO!
<CIAO>
<PIPPO PLUTO=”orca”>1 abc</PIPPO>
<ATOMS> ariciao </ATOMS>
</CIAO>
<PIPPO> uffa uffa </PIPPO>
</MOL>
DOCUMENTO BEN FORMATO: TUTTI I TAG CSI CHIUDONO!
MA HA UN SENSO??? ABBIAMO APPLICAZIONE CHE
DANNO UNA INTEPRETAZIONE SENSATA A QUESTI TAG??
DOCUMENTO SENZA DTD SPECIFICATO. NON HA SENSO
CHIEDERSI SE E’ VALIDO.
<!DOCTYPE cml SYSTEM “cml.dtd”>
<CML>
<ATOMS>
<PIPPO BUILTIN=”ELSYM”>H O H</ARRAY>
</ATOMS>
</MOL>
</CML>
DOCUMENTO BEN FORMATO MA NON VALIDO. IL TAG
PIPPO NON E’ DEFINITO NEL LINGUAGGIO CML
SPECIFICATO DAL DTD cml.dtd.
12
COSA CI FACCIAMO CON XML?
Idea base: rappresentare e pubblicare tutte le
informazioni Web in formato XML (non in formato
HTML). NOTA: I browser moderni supportano XML.
Quindi:
- Usare la tecnologia CSS (cascading style sheets)
per indicare al browser come i vari tag devono
essere visualizzati. Garantiamo stile uniforme alle
pagine Web, e permettiamo una più facile gestione
dei siti.
- Usare la tecnologia XSL (XML stylesheets) per
trasformare dinamicamente documenti XML in altri
documenti. Rendiamo fruibile in modo più
dinamico le informazioni in Internet. I documenti
possono essere dinamicamente riadattati e
riformattati. Molto più generale di CSS Æ è il futuro!
- Scrivere applicazioni Java (o altri linguaggi) per
analizzare dati in documenti XML. Facilitiamo il
trattamento automatico dell’informazione, anche
se non strutturata in Basi di Dati. I programmi infatti
possono sapere cosa certi dati all’interno di certi tag
rappresentano, e sono sicuri (se il documento XML è
ben formato) di sapere dove e quando trovare certa
informazione all’interno di un documento.
Inoltre:
- Sfruttare
XML per rappresentare anche servizi e
applicazioni Web (tecnologia SOAP)
13
CSS
“Cascading Style Sheet”
Servono per associare uno stile di visualizzazione ai
documenti XML, ad uso dei browser. In verità CSS sono
inizialmente nati per essere usati con HTML…
Sono dei file .css, contenuti in qualche URL, relativo o
assoluto, a cui un file XML fa riferimento.
Esempio:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="fs.css"?>
oppure:
<?xml-stylesheet
href="http:www.styles.it/a.css"?>
type="text/css"
Sono “cascading” perché possono essere definiti “in
cascata”, l’uno dentro l’altro o, meglio, l’uno che completa
gli altri…in livelli di raffinamento successivo (prima di
definiscono alcune caratteristiche di stile generali, poi le
si integrano in cascata con altri css che le specificano piu’
in particolare
Dentro un file CSS ci sono le indicazioni per come
visualizzare i vari TAG
Esempio:
title
{font-size: 32pt; font-weight: bold}
14
ESEMPIO CSS (1)
File XML (per le poesie…)
<?xml-stylesheet type="text/css" href="fs.css"?>
<poem>
<title> Il Passero Solitario </title>
<poet> Giacomo Leopardi </poet>
<verse> D'in su la vetta de la torre antica </verse>
<verse> Passero solitario alla campagna </verse>
<verse> Cantando vai, finche' non muore il giorno.
</verse>
</poem>
File CSS:
poem
{display:block}
title
{display:block; font-size: 32pt; font-weight: bold}
poet
{display:block; font-size: 14pt}
verse
{display:block; font-size: 14pt; font-style: italic}
Risultato:
15
ESEMPIO CSS (2)
Per Cambiare visualizzazione, su tutti i file che
adottano lo stesso linguaggio XML, basta cambiare il
css per cambiare la visualizzazione ovunque
Esempio nuovo CSS:
poem
{display:block}
title
{display:block; font-size: 64pt; font-weight: bold;
font-style: italic}
poet
verse
Nuovo Risultato, su tutti I file del nostro XML di
“poesie”
16
ESEMPIO CSS PER HTML (e XHTML)
In un HTML, se facciamo riferimento a un CSS in cui si
associano stili ai TAG standard dell’HTML, possiamo
cambiare la visualizzazione….
File HTML con riferimento a fs_html.css
<HTML>
<head>
<link HREF="fs_html.css" REL="stylesheet"
TYPE="text/css" MEDIA="screen">
</head>
<!—si deve racchiudere il HREF nell’HEAD -->
<BODY>
<H1> A Zacinto </H1>
<H2> Ugo Foscolo </H2>
<p> Ne' piu' mai tocchero' le sacre sponde </p>
<p> Ove il mio corpo fanciulletto giacque </p>
<p> Zacinto mia, che te specchi ne l'onde </p>
<p> Del Greco mar, over vergine nacque </p>
</BODY>
</HTML>
FILE fs_html.css
BODY {display:block}
H1 {display:block; font-size: 32pt; font-weight: bold}
H2 {display:block; font-size: 14pt}
P {display:block; font-size: 14pt; font-style: italic}
Risultato con CSS:
Senza CSS:
17
Sintassi CSS (1)
In generale, serie di espressioni del tipo
selector {property: value; property2: value3, etc etc..}
dove selector e’ il tag
Esempio:
H1
{display:block; font-size: 32pt; font-weight: bold}
Ma anche:
H1, H2
{font-size: 32pt; font-weight: bold}
Nello Specifico, per le proprietà:
color: black
font-family: “sans-serif”
text-align: center; color: red
a:link {color: #FF0000}
/* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF}
/* mouse over link */
a:active {color: #0000FF}
/* selected link */
E anche le classi:
p.right {text-align: right}
p.center {text-align: center}
Selezionando la classe come attributo
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
18
Sintassi CSS (2)
Classi generali:
.center {text-align: center}
E quindi, per qualsiasi tag si può fare:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Applicare gli style sheet a HTML
Definizione esterna:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Definizione Interna:
<head>
<style type="text/css">
<!-hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
19
Sintassi CSS (3)
L’attributo screen: permette di differenziare il trattamento a
seconda dei media (p.e., stampante piuttosto che schermo)
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media
{
p.test
}
@media
{
p.test
}
print
{font-family:times,serif; font-size:10px}
screen,print
{font-weight:bold}
Molto utile per permettere accessi differenziati a pagine
Web.
Esempio: @media handheld permette di gestire accesso
a pagine Web da parte di telefonini con Wap.
Tipicamente, si fa in modo che su media di questo tipo
spariscano le immagini e le informazioni grafiche non
essenziali.
ATTENZIONE: non supportato da tutti i browser!!!
20
Sintassi CSS (4)
Multiple Stylesheets:
Se in uno stylesheet esterno abbiamo
h3
{color: red; text-align: left; font-size: 8pt }
E in altro interno abbiamo:
h3
{text-align: center; font-size: 14pt }
Il rlsultato sarà:
h3
{color: red; text-align: center; font-size: 14pt }
Cioè composti in cascata…l’interno domina l’esterno
per le caratteristiche in conflitto
Nel caso di più CSS esterni domina l’ultimo riferito.
21
CSS e Layout
Una delle caratteristiche più importanti dei CSS è
quella di permettere di controllare il layout di un sito.
Questo evita il problema di dover ricorrere a tabelle
HTML per organizzare i contenuti.
#top {
margin: 10px;
padding: 10px;
background: #ccc;
height: 100px;
}
.left {
position: absolute;
left: 10px;
width: 200px;
}
.center {
background: #ccc;
margin-top: 10px;
margin-left: 220px;
margin-right: 220px;
}
.right {
position: absolute;
right: 10px;
top: 160px;
width: 200px;
}
22
CSS e Layout
<html>
<head>
<link href="holy.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top">
Mega-Titolo
</div>
<div class="left">
Ciao
</div>
<div class="center">
Ciao
</div>
<div class="center">
Ciao
</div>
<div class="right">
Ciao
</div>
Questo schema di layout (tre colonne con titolo) si è
dimostrato così flessibile e comodo da prendere il
titolo di “holy grail” per la gestione di contenuti Web.
23
XSL
CSS è stato concepito esplicitamente per essere
applicato su HTML, non su XML (anche se funziona
benino lo stesso)
La visualizzazione e il trattamento di documenti XML è
concepita per essere tratta attraverso gli stylesheet XML,
cioè gli strumenti XSL.
XSL comprende un insieme di strumenti:
• XSLT: un linguaggio per trasformare documenti XML
in altri documenti (p.e., per trasformare un XML in un
HTML o in un XML di un altro DTD)
• Xpath: un linguaggio per riferire e definire parti di un
documento XML (p.e., il contenuto del terzo tag
<verse> all’interno di <poem>)
• XSL FO: un formattatore per descrivere lo style di
visualizzazione e stampa di un documento XML
(simile a CSS)
Nota: XSL FO non è supportato dai browser, esistono
solo pochi strumenti che oggi lo sfruttano (p.e., esiste uno
strumento che è in grado di trasformare dei file XML in
PDF, sulla base della specifica XSL-FO).
Ci si aspetta che in un breve futuro sia supportato da
browser direttamente…
24
XSL: Funzionamento generale
L’idea e’ quella di partire da un documento (“albero”)
sorgente XML e trasformarlo in un differente documento
(“albero”) destinazione XML. A Questo scopo:
• XSLT sono le regole che dicono come i vari pezzi
devono essere trasformati
• Xpath sono le indicazioni che dicono a quali pezzi gli
XSLT devono fare riferimento
Nota: un XSL è a tutti gli effetti un linguaggio di XML….
Alla base vi è il concetto di “match” (“corrispondenza”) su
“template” (“stampo”):
- XSLT dice quali sono i modelli “stampo” su cui
effettuare la trasformazione, i modelli stampo si
esprimono con la notazione Xpath.
- Quelli per cui vi è corrispondenza nel documento
sorgente vengono trasformati nel documento
destinazione
NOTA: Dove usare XSL:
IE 6 funziona, Netscape 6.2 e oltre funzionano.
25
XSL: Esempio di uso
La prima linea deve essere:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Usiamo poi un esempio per spiegare:
supponiamo di volere trasformare un documento che
descrive CD:
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Buon Compleanno Elvis</title>
<artist>Ligabue</artist>
<country>Italy</country>
<company>EMI</company>
<price>12.00</price>
<year>1997</year>
</cd>
</catalog>
26
Continua Esempio
Ecco il XSL che lo può trasformare:
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
La prima linea dice che è sempre HTML
La seconda linea, che DEVE essere come sotto, dice che
si tratta si un XML
Il resto lo spieghiamo a breve.
27
Continua Esempio
Come per i CSS, bisogna che il nostro XML specifici che gli
si applica uno stile XML:
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
<cd>
<title>Buon Compleanno Elvis </title>
<artist>Ligabue</artist>
…
E a questo punto il nostro XSL riesce a trasformare il
nostro documento in un normale documento HTML
visualizzabile perfettamente in un browser….
(basta dire come al solito al browser di caricare il file
XML)
28
Spieghiamo l’esempio e XSL (1)…
<xsl:template match = “qualcosa”>
è il tag che dice quali regole applicare quando un certo
“match” si verifica.
Nell’esempio
<xsl:template match = “/”>
si intende di fare il match con la radice del documento.
La indicazione “/” è una indicazione Xpath: con notazioni
di questo genere si indicano le varie parti di documento.
In pratica, si sfrutta la struttura ad albero per indicare li
elementi come in un file system si indicano i file
Tutto quello che segue il tag di template indica che cosa
andare a sostituire al posto delle cose che fanno match.
Nell’esempio, il match è indicato su tutto il documento:
l’idea è di sostituire completamente il documento con:
<html> <body>
<table border="1">
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd"> NOTARE XPATH!!!
<tr>
</tr>
</xsl:for-each>
</table>
</body>
</html>
Ed è abbastanza chiaro, si vede, che il documento XML
viene traformato in toto in un documento HTML.
29
Spieghiamo l’esempio (2)…
Vediamo che si sostituisce l’XML con un HTML in cui vi è
un’header “My CS Collection” e poi una tabella la cui
prima riga contiene le scritte “Title” ed “Artist”.
Per le righe successive, notiamo la riga:
che in pratica significa: ciò che segue, lo applichiamo per
tutto ciò che fa match con “catalog/cd”, e quindi per tutti
gli elementi XML che descrivono un CD (di nuovo, questa
è la notazione XPATH per indicare parti del documento).
Quindi notiamo:
che significa: dentro alla tabella (nei tag TD) ci andiamo a
mettere il valore di ciò che è contenuto dentro al tag che
matcha “title”, e poi la stessa cosa per “artist”.
30
Spieghiamo l’esempio (3)…
Se avessimo usato il seguente file XSL
(togliendo la riga con for-each):
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td><xsl:value-of select="catalog/cd/title"/></td>
<td><xsl:value-of select="catalog/cd/artist"/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Avremmo ottenuto il match solo con il primo elemento
CD, e quindi avremmo visualizzato:
31
Estendiamo l’esempio (4)…
Notiamo che possiamo anche ordinare i dati:
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:sort select="artist"/>
<tr>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
32
Possiamo anche applicare delle CONDIZIONI per
decidere cosa visualizzare (o più in generale, che cosa
trasformare Æ teniamo sempre presente che stiamo
parlando di trasformare i file XML in altri file, il fatto che il
nostro esempi sia relativo alla trasformazione in HTML è
incidentale, mentre il concetto è più generale!
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:if test="price>10">
<tr>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Così non li stiamo selezionando tutti, ma solo quelli che
hanno un prezzo maggiore (gt, greater than) di 10 euro.
Solo quelli che verificano questa condizione entreranno a
fare parte del file trasformato.
33
Possiamo anche applicare delle CONDIZIONI in alternativa
(WHEN condizione OTHERWISE)
<html>
<body>
<table border="1">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<xsl:choose>
<xsl:when test="price>'10'">
<td bgcolor="#ff00ff">
<xsl:value-of select="artist"/></td>
</xsl:when>
<xsl:otherwise>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
Trasforma in colore di background diverso il colore
dell’artista se il prezzo eccede 10 Euro, altrimenti lo
visualizza normale…
34
I Link in XML
Finora abbiamo visto come:
- sia possibile applicare dei fogli di stile CSS ai
documenti XML
- sia possibile trasformare documenti XML in altri
documenti attraverso XSL e Xpath.
Problema: come fare collegamenti ipertestuali in XML??
Come fare in modo che un broswer che legge un
documento XML capisca che ci debbono essere dei link
in giro?
(finora, in tutti gli esempi che abbiamo visto in XML, non
vi erano link!!)
Soluzioni:
1. (quella utilizzata oggi) non utilizzare genericamente
XML ma bensì documenti XHTML, dove sono
definiti i TAG per i link <A HREF….> etc. etc.
2. (meglio della 1, ma non ancora ideale) trasformare il
documento XML in XHTML attraverso XSL, e
definire dei link in XHTML
3. (non ancora supportata dai browser) usare un
linguaggio specifico di XML, XLINK, per definire link!
35
XML ADDENDUM
Vediamo un esempio di come realizzare i link attraverso
un foglio di stile XSL.
<?xml-stylesheet type="text/xsl" href="prova1.xsl"?>
<main>
<name>
Università
</name>
<link>
http://www.google.it
</link>
</main>
<?xml version="1.0" ?>
<html>
<body>
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="main/link"/>
</xsl:attribute>
<xsl:value-of select="main/name"/>
</xsl:element>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Da notare che lo stesso meccanismo permette di inserire
delle immagini, impostando il valore dell’attributo src.
Infine nell’esempio, si noti come tilizzando l’encoding sia
possibile usare le lettere accentate.
36
XML - DOM
Utilizzando Javascript è possibile manipolare
visualizzare il DOM associato a un documento XML.
e
Per effettuare questa operazione sono necessarie due
azioni fondamentali:
1. Caricare il DOM di un documento XML in memoria
2. Utilizzare Javascript per intervenire sul DOM
IE e gli altri browser offrono vari meccanismi per caricare
dati XML in memoria
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("prova3.xml")
La variabile ‘xml’ contiene un oggetto assimilabile
all’elemento ‘document’ di una pagina html. La variabile
rappresenta cioè la radice del DOM del documento
caricato
37
XML-DOM
Una volta ottenuto un riferimento alla radice del DOM del
documento, le operazioni di manipolazione sono simili a
quelle viste per il DOM html
function printBook(xmlbook) {
var title = xmlbook.getElementsByTagName('title')[0].text;
var author = xmlbook.getElementsByTagName('author')[0].text;
return title+", "+author+"<br/>";
}
// Load XML
xml.async = false
xmlnodes = xml.getElementsByTagName('book');
for(var i=0; i<xmlnodes.length; i++) {
document.write(printBook(xmlnodes[i]));
}
DOM – XSL
Tramite le operazioni sul DOM è poi possibile applicare
un foglio di stile XSL a un documento XML senza che in
quest’ultimo vi sia un riferimento esplicito al foglio di stile.
// Load XML
xml.async = false
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("prova3.xsl")
document.write(xml.transformNode(xsl))
38
XLINK
Definisce dei TAG e dei modelli di collegamento che sono
molto più potenti del semplice <A HREF> di HTML. Per
esempio:
- collegamenti “inline”: invece che cambiare pagina per
andare al nuovo documento, si inserisce nel
documento corrente il nuovo documento (una sorta
di espansione)
- collegamenti bidirezionali, che tengono traccia di
“dove si va” e di “da dove si proviene”.
- Link multidirezionali: collegano direttamente a un
insieme di risorse
- Collegamenti a porzioni specifiche di documenti
facendo uso di Xpath
- Collegamentii a note in calce, etc. etc.
Esempi:
<my_link xmlns:xlink="http://www.w3.org/1999/xlink"> ..</my_link>
così funziona come il normale <A HREF..>
Link multidirezionali:
<item xlink:type="extended">
<link xlink:type="resource" xlink:label="overview"
xlink:title="Information on Sinatra">Frank Sinatra</link>

xlink:show="replace" xlink:actuate="onRequest" />
39
Xlink: Troppo Nuovo!
La WWW organization non ha ancora stabilito in modo
completo quale dovrà essere la sintazzi di Xlink.
La tecnologia è ancora troppo nuova per poter essere
utilizzata, e di conseguenza nessun software
commerciale (e nessun broswer), ad oggi, è in grado di
interpretare e supportare i collegamenti Xlink.
Per questo motivo, ad oggi, per fare collegamenti bisogna
ancora affidarsi agli HREF di XHTML.
Non è ancora possibile scrivere siti Web direttamente in
XML. Bisogna comunque passare attraverso HTML
- o scrivendo direttamente le pagine in XHTML, e poi
applicando degli stili
- o scrivendo pagine XML che siano poi trasformate in
HTML attraverso XSL
Ma attenzione: XLINK è il futuro, XHTML andrà a
scomparire!!!
40
XML Formatting Objects (1)
Dopo la applicazione di un XSL, un documento XML si
trasforma in un altro documento, per esempio un
documento HTML. XSL è molto generale, e permette di
applicare qualsiasi trasoformazione e elaborazione di un
documento.
Una delle possibili trasformazioni, è quella di trasformarlo in
un documento “formattato”, cioè contenente precise
indicazione di stile per la visualizzazione o la stampa del
documento.
XSL FO è un particolare linguaggio XML che si ispira e CSS
e serve per indicare lo stile delle parti di un documento
XML.
Un documento trasformato in XML FO ha questo aspetto:
<fo:table-and-caption caption-side="bottom">
<fo:table-caption>
<fo:block font-weight="bold"
font-family="Helvetica, Arial, sans"
font-size="12pt">
Table 19-1: HTML Tables vs. XSL Formatting Object Tables
</fo:block>
</fo:table-caption>
<fo:table>

</fo:table>
</fo:table-and-caption>
Notiamo la forte similarità delle indicazioni di formattazione
non quelle di CSS Æ l’idea è che nel futuro diventino
identiche!
41
XML FormattingObjects (2)
Per traformare un documento in un documento formattato si
può usare un opportuno stylesheet:
<xsl:template match="ATOM">
<fo:block font-size="20pt" font-family="serif"
line-height="30pt">
<xsl:value-of select="NAME"/>
</fo:block>
</xsl:template>
Purtroppo:
Allo stato attuale I browser non supportano XML FO (nè
XML FO è stabile nelle sue specifiche).
Esistono solo alcuni programmi che possono prendere dei
XML FO e traformarli in PDF.
In Futuro: ci si aspetta che i broswer vadano a gestire
direttamente XML FO.
Questo farà perdere la necessità di CSS, si applicherà
direttamente XSL per trasformare il documento e
selezionarne gli elementi a piacere, e poi si applicherà
anche XSL per aggiungere le informazioni di /formattazione
visualizzazione.
XSL, più che CSS, è sicuramente la strada da
percorrere per il futuro!!
42
Ulteriore Componenti del Mondo XML:
XML-NameSpaces
NameSpaces:
Può essere utile mischiare in un documento più linguaggi
XML, ognuno dei quali serve a scopi diversi. Per esempio,
in un documento di può usare il linguaggio MusicXML per
descrivere della musica, e poi il linguaggio delle bibliografie
per descrivere gli autori….
Ma allora:
il tag <TITLE> potrebbe assumere due significati diversi
nello stesso documento: titolo del brano, con riferimento a
MusicXML, titolo professionale dell’autore (Prof. Ing. o
Dott.) se riferito al riferimento bibliografico. Per fare
chiarezza in documenti che mischiano linguaggi XML
diversi si usa XML-NameSpaces. Prima di iniziare a usare
un linguaggio, si dichiara il nome, in termini di un URL, del
linguaggio che si usa.
Esempio:
<bk:book xmlns:bk='urn:loc.gov:books'
xmlns:isbn='urn:ISBN:0-395-36341-6'>
<bk:book xmlns:bk='urn:loc.gov:books'
xmlns:hre='url:http://www.w3c.org/XMLNS/2001/titles.xml'>
<bk:title>Dispense di Web</bk:title>
<bk:author>Franco Zambonelli</bk:author>
<tt:title xmlns:hre='url:http://www.w3c.org/XMLNS/2001/titles.xml'
>
<tt:title>Professore Associato</tt:title>
</bk:book>
43
Ulteriore Componente del Mondo XML:
RDF
RDF: Resource Description Framework
Uno specifico linguaggio XML per descrive le “risorse” che
si possono trovare sul WEB (documenti, immagini, etc.).
Serve per caratterizzare le risorse e facilitare la
catalogazione e la ricerca della risorse.
Si descrive una risorsa in termini di una tripletta:
- URL risorsa
- Proprietà ad essa associata
- Valore della proprietà
Dove poi ovviamente una risorsa può avere più triplette
associate per descriverne più proprietà, e dove il valore di
una risorsa può anche essere un URL a sua volta.
Esempio:
<RDF:Description href='http://www.unimo.it/FZ/XML.pdf'>
<Author>Franco Zambonelli</Author>
</RDF:Description>
<RDF:Description href='http://www.unimo.it/FZ/XML.pdf'>
<Component-of><RDF:href='http://www.unimo.it/FZ' />
</Component-of>
</RDF:Description>
RDF avrà nel futuro importanza fondamentale
permettere la ricerca di informazioni sul Web.
per
44
RIASSUMENDO…
Oggi:
i siti Web si realizzano facendo uso di XHTML+CSS
Nel Futuro immediatamente prossimo (e già oggi
per alcuni siti pionieristici), Si realizzeranno siti
Web prendendo:
- dati da documenti XML
- componendoli e inserendoli con XSL all’interno di
documenti XHTML
- visualizzandoli tramite broswer con XHTML+CSS
- per alcuni insiemi di dati che non richiedono
funzionalità
ipertestuali,
si
può
visualizzare
direttamente XML+CSS
Fino a che, un po’ più in là nel tempo:
- si prederanno dati da documenti XML
- componendoli e inserendoli con XSL all’interno di altri
documenti XML
- inserendo collegamenti ipertestuali tramite il linguaggio
XLINK
- formattandoli opportunamente con FO
- facendoli infine visualizzare a browser che supportano
XML.XLINK,XSL FO
- Tutti i documenti saranno caratterizzati da un loro
spazio di nomi, e da una descrizione RDF
RIASSUMENDO: La formattazione e la
presentazione dei documenti Web
45
HTML+CSS Æ oggi
XML+CSS & (XML+XSLT=HTML)+CSS Æ domani
XML+XSLT=XSL-FO Æ dopo domani
46
Alcuni Link Interessanti
http://www.w3c.org/XML
http://www.xml.org
http://www.ibiblio.org/xml/slides/
http://www.ibiblio.org/xml/books/bible2/chapters/ch17.html
http://www.w3schools.com
47

XML, CSS, XSL, DTD

Transcript

Documenti analoghi

CURRICULUM VITAE Ai sensi della Legge 675/96

Esercitazione 6 - Scienze Politiche

Piano Strategico ICT sanità

Fattura Elettronica - AZIENDE

Implementazione di MVC con le principali tecnologie

Esercizi di codifica XML

I linguaggi di marcatura e XML per la codifica dei dati d`archivio

Standard xml unico per scambio dati tra software e Regioni

MODA-ML: • Esempi di XSL (Extensible Stylesheet Language