CORSO DI TECNOLOGIE E APPLICAZIONI WEB - UNIMORE - …marco/MAIN/didattica/OLD/TECN_APP_WEB/... ·...

M. Mamei - Tecnologie e Applicazioni Web 1

Università degli Studi di Modena e Reggio Emilia

Facoltà di Ingegneria – Reggio Emilia

CORSO DI TECNOLOGIE E APPLICAZIONI WEB

XML

Ing. Marco Mamei


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…


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.


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…


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


Esempio: CML (Chemical Markup Language) Per descrivere composti chimici: <xml version = “1.0”?> <CML> <MOL TITLE = “Acqua”> <ATOMS> <ARRAY BUILTIN=”ELSYM”>H O H</ARRAY> </ATOMS> <ATOMS> <BONDS> <ARRAY BUILTIN=”at1d1”>1 2</ARRAY> <ARRAY BUILTIN=”at1d1”>2 3</ARRAY> <ARRAY BUILTIN=”at1d1”>1 1</ARRAY> </BONDS> </ATOMS> </MOL> </CML> 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.


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 ARRAY

ARRAY ARRAY ARRAY

1 2 2 3 1 1

H O H

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!


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…


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.


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>


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!


Esempi. <xml version = “1.0”?> <MOL TITLE = “Acqua”> <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! <xml version = “1.0”?> <MOL TITLE = “Acqua”> <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. <xml version = “1.0”?> <!DOCTYPE cml SYSTEM “cml.dtd”> <CML> <MOL TITLE = “Acqua”> <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.


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)


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 version="1.0"?> <?xml-stylesheet type="text/css" href="http:www.styles.it/a.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}


ESEMPIO CSS (1) File XML (per le poesie…) <?xml version="1.0"?> <?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:


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 {display:block; font-size: 32pt} verse {display:block; font-size: 18pt}

Nuovo Risultato, su tutti I file del nostro XML di “poesie”


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:


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>

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">  </style> </head>


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 print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {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!!!


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.


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


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.


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…


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.


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>


Continua Esempio Ecco il XSL che lo può trasformare:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <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 <?xml version="1.0" encoding="ISO-8859-1"?> La seconda linea, che DEVE essere come sotto, dice che si tratta si un XML <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Il resto lo spieghiamo a breve.


Continua Esempio Come per i CSS, bisogna che il nostro XML specifici che gli si applica uno stile XML: <?xml version="1.0" encoding="ISO-8859-1"?> <?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)


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> <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"> NOTARE XPATH!!! <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> Ed è abbastanza chiaro, si vede, che il documento XML viene traformato in toto in un documento HTML.


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: <xsl:for-each select="catalog/cd"> 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: <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> 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”.


Spieghiamo l’esempio (3)… Se avessimo usato il seguente file XSL (togliendo la riga con for-each): <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <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:


Estendiamo l’esempio (4)… Notiamo che possiamo anche ordinare i dati: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <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>


Estendiamo l’esempio (5)… 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! <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price>10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </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.


Estendiamo l’esempio (6)… Possiamo anche applicare delle CONDIZIONI in alternativa (WHEN condizione OTHERWISE) <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <xsl:choose> <xsl:when test="price>'10'"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td> </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…


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!


XML ADDENDUM

Vediamo un esempio di come realizzare i link attraverso un foglio di stile XSL. <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="prova1.xsl"?> <main> <name> Università </name> <link> http://www.google.it </link> </main> <?xml version="1.0" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <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.


XML - DOM

Utilizzando Javascript è possibile manipolare e visualizzare il DOM associato a un documento XML. 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


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 var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("prova3.xml") 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 var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("prova3.xml") // Load the XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("prova3.xsl") document.write(xml.transformNode(xsl))

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


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

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!


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


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: <?xml version="1.0"?> <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>


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 per permettere la ricerca di informazioni sul Web.


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


HTML+CSS oggi XML+CSS & (XML+XSLT=HTML)+CSS domani XML+XSLT=XSL-FO dopo domani


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

CORSO DI TECNOLOGIE E APPLICAZIONI WEB - UNIMORE - …marco/MAIN/didattica/OLD/TECN_APP_WEB/... ·...

Documents

Transcript of CORSO DI TECNOLOGIE E APPLICAZIONI WEB - UNIMORE - …marco/MAIN/didattica/OLD/TECN_APP_WEB/... ·...