CORSO DI TECNOLOGIE E APPLICAZIONI WEB

Transcript

1 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

2 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 M. Mamei - Tecnologie e Applicazioni Web 2

3 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. M. Mamei - Tecnologie e Applicazioni Web 3

4 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 M. Mamei - Tecnologie e Applicazioni Web 4

5 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 ) M. Mamei - Tecnologie e Applicazioni Web 5

6 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. M. Mamei - Tecnologie e Applicazioni Web 6

7 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 H O H ARRAY ARRAY ARRAY 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! M. Mamei - Tecnologie e Applicazioni Web 7

8 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 M. Mamei - Tecnologie e Applicazioni Web 8

9 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. M. Mamei - Tecnologie e Applicazioni Web 9

10 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> M. Mamei - Tecnologie e Applicazioni Web 10

11 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! M. Mamei - Tecnologie e Applicazioni Web 11

12 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. M. Mamei - Tecnologie e Applicazioni Web 12

13 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) M. Mamei - Tecnologie e Applicazioni Web 13

14 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 href=" 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} M. Mamei - Tecnologie e Applicazioni Web 14

15 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: M. Mamei - Tecnologie e Applicazioni Web 15

16 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 M. Mamei - Tecnologie e Applicazioni Web 16

17 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: M. Mamei - Tecnologie e Applicazioni Web 17

18 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> M. Mamei - Tecnologie e Applicazioni Web 18

19 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> M. Mamei - Tecnologie e Applicazioni Web 19

20 Sintassi CSS (3) L attributo screen: permette di differenziare il trattamento a seconda dei media (p.e., stampante piuttosto che screen { p.test {font-family:verdana,sans-serif; font-size:14px} print { p.test {font-family:times,serif; font-size:10px} screen,print { p.test {font-weight:bold} } Molto utile per permettere accessi differenziati a pagine Web. 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!!! M. Mamei - Tecnologie e Applicazioni Web 20

21 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. M. Mamei - Tecnologie e Applicazioni Web 21

22 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; } M. Mamei - Tecnologie e Applicazioni Web 22

23 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. M. Mamei - Tecnologie e Applicazioni Web 23

24 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 M. Mamei - Tecnologie e Applicazioni Web 24

25 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. M. Mamei - Tecnologie e Applicazioni Web 25

26 XSL: Esempio di uso La prima linea deve essere: <xsl:stylesheet version="1.0" xmlns:xsl=" Usiamo poi un esempio per spiegare: supponiamo di volere trasformare un documento che descrive CD: <?xml version="1.0" encoding="iso "?> <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> M. Mamei - Tecnologie e Applicazioni Web 26

27 Continua Esempio Ecco il XSL che lo può trasformare: <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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 "?> La seconda linea, che DEVE essere come sotto, dice che si tratta si un XML <xsl:stylesheet version="1.0" xmlns:xsl=" Il resto lo spieghiamo a breve. M. Mamei - Tecnologie e Applicazioni Web 27

28 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 "?> <?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) M. Mamei - Tecnologie e Applicazioni Web 28

29 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. M. Mamei - Tecnologie e Applicazioni Web 29

30 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. M. Mamei - Tecnologie e Applicazioni Web 30

31 Spieghiamo l esempio (3) Se avessimo usato il seguente file XSL (togliendo la riga con for-each): <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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: M. Mamei - Tecnologie e Applicazioni Web 31

32 Estendiamo l esempio (4) Notiamo che possiamo anche ordinare i dati: <?xml version="1.0" encoding="iso "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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> M. Mamei - Tecnologie e Applicazioni Web 32

33 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 "?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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. M. Mamei - Tecnologie e Applicazioni Web 33

34 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 M. Mamei - Tecnologie e Applicazioni Web 34

35 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! M. Mamei - Tecnologie e Applicazioni Web 35

36 XML ADDENDUM Vediamo un esempio di come realizzare i link attraverso un foglio di stile XSL. <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/xsl" href="prova1.xsl"?> <main> <name> Università </name> <link> </link> </main> <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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. M. Mamei - Tecnologie e Applicazioni Web 36

37 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 M. Mamei - Tecnologie e Applicazioni Web 37

38 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)) M. Mamei - Tecnologie e Applicazioni Web 38

39 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=" 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> <!-- link definitions (remote) - Sinatra's biography, songs and articles --> xlink:show="replace" xlink:actuate="onrequest" /> M. Mamei - Tecnologie e Applicazioni Web 39

40 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!!! M. Mamei - Tecnologie e Applicazioni Web 40

41 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> <!-- table contents go here --> </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! M. Mamei - Tecnologie e Applicazioni Web 41

42 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!! M. Mamei - Tecnologie e Applicazioni Web 42

43 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: '> <bk:book xmlns:bk='urn:loc.gov:books' xmlns:hre='url: <bk:title>dispense di Web</bk:title> <bk:author>franco Zambonelli</bk:author> <tt:title xmlns:hre='url: > <tt:title>professore Associato</tt:title> </bk:book> M. Mamei - Tecnologie e Applicazioni Web 43

44 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=' <Author>Franco Zambonelli</Author> </RDF:Description> <RDF:Description href=' <Component-of><RDF:href=' /> </Component-of> </RDF:Description> RDF avrà nel futuro importanza fondamentale per permettere la ricerca di informazioni sul Web. M. Mamei - Tecnologie e Applicazioni Web 44

45 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 M. Mamei - Tecnologie e Applicazioni Web 45

46 HTML+CSS oggi XML+CSS & (XML+XSLT=HTML)+CSS domani XML+XSLT=XSL-FO dopo domani M. Mamei - Tecnologie e Applicazioni Web 46

47 Alcuni Link Interessanti M. Mamei - Tecnologie e Applicazioni Web 47