Capitolo 1 Tecnologie per applicazioni Web Parte prima: i protocolli di Internet e del Web

Presentazione del ciclo di lezioni Definizione e cronologia di Internet e del Web Protocolli base (TCP/IP, HTTP) HTML 3 e 4, client-side scripting XML e trasformazioni documentali Architetture per il Web Progettazione di siti Web data-intensive WebML (Web Modeling Language)

Internet: una definizione Sistema globale di informazione che: collegato da un unico spazio di indirizzi basato sul protocollo IP consente di comunicare mediante protocollo TCP/IP o sue estensioni rende accessibili, pubblicamente o privatamente, servizi basati sulla infrastruttura descritta Federal Networking Council, 24/10/1995

Prima di Internet: comunicazione punto a punto Nella comunicazione punto a punto esiste un canale fisico dedicato

L’era di Internet: la commutazione di pacchetto Nella commutazione di pacchetto il messaggio viene diviso in atomi “instradati” lungo una rete di nodi

Ipertesti multimediali Ipertesto multimediale: un documento a lettura non sequenziale con inserti multimediale

Definizione di WWW Web: un sistema client-server su Internet per l’accesso a ipertesti multimediali richiesta client risposta server

Il protocollo TCP/IP Transfer Control Protocol / Internet Protocol Insieme di protocolli (suite) strutturati in maniera gerarchica Ogni livello della gerarchia usa i servizi forniti dal livello inferiore e offre servizi al livello superiore

TCP e IP Internet Protocol si occupa della spedizione in rete di unita’ di informazione (datagram) definisce il meccanismo di indirizzamento dei nodi di Internet (IP address) Transfer Control Protocol converte il flusso dati proveniente dalla applicazione in pacchetti (segment) trasmissibili in rete verifica integrità e correttezza dei dati trasmessi (recupero pacchetti persi, rimozione duplicati ...)

Il protocollo HTTP HyperText Transfer Protocol Protocollo a livello di applicazione per lo scambio di ipertesti multimediali Prescrive il formato di nomi delle risorse (URL) domande risposte Versioni: HTTP/0.9, 1.0, 1.1 Riferimento: Tim Berners Lee, Request for Comment 1945, HTTP/1.0

Gli attori di HTTP cliente (browser): genera richieste di risorse (origin) server: depositario della risorsa richiesta

Gli attori di HTTP Scopi: proxy: nodo intermedio che può fungere sia da client che da server. Intercetta le richieste e verifica se può soddisfarle da solo, altrimenti le inoltra al server. Scopi: Migliorare le performance Filtrare le richieste

Gli attori di HTTP Scopi: $%##~^&^& $$=@@@ %4$$$-]] gateway: nodo intermedio che può agire solo da server. Intercetta le richieste, verifica se sono ammesse e le traduce Scopi: Traduzione tra protocolli Protezione

Uniform Resource Locator (URL) È una stringa strutturata, ad esempio: http://www.elet.polimi.it/people/fraterna.html Protocollo: http, ma anche ftp e gopher Indirizzo della macchina: simbolico: www.elet.polimi.it numerico (IP): 131.175.21.1 puo’ includere il numero di porta (es. :8080) Path: sequenza di direttori Nome risorsa: identificativo di un file se la risorsa e’ un file html, può includere un indirizzo interno(es. fraterna.html#curriculum)

Formato dei documenti I documenti risiedono sul server come file e vengono inviati al client usando il campo entity-body della risposta ES: Ipertesto = file ASCII scritto secondo la sintassi HyperText Markup Language (HTML) Estensioni tipiche del file: *.html *.htm Il documento puo’ contenere inserti multimediali (immagini, audio, video) il programma client carica e visualizza il testo poi richiede al server i file corrispondenti agli inserti multimediali (con richieste separate)

Il browser HTTP Applicazione in grado di: accedere alla rete secondo il protocollo HTTP richiedere risorse identificate da un URL a un server interpretare e rendere a video la risposta del server

Il browser HTTP I diversi prodotti differenziano per: La versione di HTML trattata La capacità di trattare estensioni non standard di HTML (ad es. JavaScript, VBscript) La capacità di eseguire programmi (es. Java)

Il server HTTP Funzioni base: Funzioni avanzate: accesso alla rete secondo il protocollo HTTP invio di risorse identificate da un URL a un client controllo degli accessi lancio di programmi in risposta a richieste registrazione degli accessi (logging) Funzioni avanzate: monitoraggio e amministrazione connessione a basi di dati esecuzione efficiente di applicazioni esterne

Server HTTP: architettura base WEB server client interfaccia di rete Risorse interfaccia file system interfaccia applicazioni Applicazioni

Capitolo 1 Tecnologie per applicazioni Web Parte seconda: HTML e linguaggi client-side

Sommario Definizione di markup Breve storia di HTML HTML 3 Tag di formattazione del testo Tag di formattazione del paragrafo e del layout Ipertestualità e multimedialità Revisione critica di HTML 3 HTML 4 e CSS Scripting e componenti client-side

HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard General Markup Language) Marcatura: + marcatura <HTML> <Title> </Title> <Body> </HTML> = risultato finale contenuto Home Page di Piero Fraternali

Concetti generali di HTML La marcatura prevede l’uso di etichette, dette TAGS I tag viaggiano (quasi) sempre in coppia <tag> testo </tag> Il significato di un tag può essere modificato tramite attributi <tag attributo=valore> testo </tag>

Struttura del documento File ASCII, struttura generale: <html> intestazione + corpo </html> Intestazione: <head> .. </head> contiene informazioni sul documento: titolo <title> .. </title> Corpo: <body> .. </body> contiene il testo del documento e i tag per la resa visiva

Formattazione del testo grassetto <b> prova </b> corsivo <i> prova </i> sottolineato <u> prova </u> Prova prova

Formattazione del testo Dimensioni: <font size=+3> prova</font> <font size=9> prova</font> Colore: <font color=“FF0000”> prova</font> prova

Titolo di livello1 Titoli titolo 1 <h1>Titolo livello 1</h1> titolo 2 <h2>Titolo livello 2 </h2> titolo 3 <h3>Titolo livello 3 </h3> Titolo di livello1 Titolo di livello2 Titolo di livello 3

Paragrafi, allineamenti paragrafi: <p>testo</p>vai a capo testo formattato: <pre>prova prova</pre> testo vai a capo prova

Collegamenti ipertestuali Esempio di collegamento : Visita la <a href = http://www.elet.polimi.it/fraterna.html> pagina di Piero </a> Visita la pagina di Piero

Collegamenti ipertestuali Uso della posta: Scrivi a<a href = mailto:fraterna@elet.polimi.it> Piero Fraternali</a> Scrivi a Piero Fraternali

Immagini <p align=center >Ecco la mia foto: </p> <img src = “piero.gif” width=200 height=400 alt=“Foto di Piero”> Ecco la mia foto Foto di Piero

Tabelle <table border="1" width=”50%" bgcolor="#C0C0C0"> <td width=”50%" bgcolor="#00FF00"> cella 1</td> <td width=”50%> cella 2</td> <td width=”50%">cella 3</td> <td width=”50%">cella 4</td> <tr> </tr> <tr "bgcolor="#0000FF"> cella 1 cella 2 cella 3 cella 4

Revisione critica Situazione Obiettivi Due linee evolutive: Tag predefiniti insufficienti per le necessità grafiche e di strutturazione dei documenti Introduzione di nuove caratteristiche richiede lunga standardizzazione Obiettivi Rendere HTML estensibile in modo consistente Produrre documenti autodescrittivi Due linee evolutive: HTML: CSSL, HTML 4.0 XML: XSL, XLL, RDF, ....

HTML 4 Una “major revision” del linguaggio Separa aspetti gli grafici dal markup “strutturale” Probabilmente è l’ultima versione di HTML Il concetto nuovo: Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) http://w3c.org/Style Specifica della presentazione separata dal contenuto Style Sheet: specifica testuale di regole di formattazione da applicare al testo Regola: when <pattern> do <action> Pattern: configurazione di elementi del testo Azione: produzione di sezioni di testo contenenti oggetti grafici (control flow obj.s) Migliora la resa dei documenti grazie alla presenza di oltre 60 proprietà grafiche

L’elemento <style> Un elemento per descrivere regole di stile nei documenti Esempio (nella parte head del documento): <style type="text/css"> body { color: black; background: white; } </style> Significato: una regola di formattazione: quando trovi body -> metti colore=nero e sfondo=bianco Effetto: determina l’apparenza dell’intero documento

File di stile esterni: uso di <link> Le regole di stile possono essere applicate a più documenti Conviene definire un file separato che le contenga Tale file deve essere referenziato dal file HTML, come segue: <link rel="stylesheet" href="style.css"> (Sempre nella parte head del documento)

Esempi di proprietà definibili Margini, rientri: <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } </style> <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; } </style> NB: il secondo esempio ha 3 regole

Attributo class Consente di classificare più finemente i tag HTML per applicare formati in modo selettivo Esempio di testo HTML: <h2 class="subsection">Getting started</h2> Regola di stile applicata solo alle occorrenze di h2 con class=subsection: h2.subsection { margin-top: 8em; margin-bottom: 3em; }

Formattazione di sezioni Il tag HTML <div> può essere usato per delimitare sezioni di testo La sezione può essere classificata con l’attributo class Si può così scrivere una regola che si applica solo alle sezioni volute div.box { border: solid; border-width: thin; } Si applica ad esempio a: <div class="box"> testo da contornare con un bordo fine </div> MORALE: ognuno può definirsi il proprio HTML!

Client-side scripting Obiettivo: rendere le pagine più interattive Soluzione: inserire nella pagina HTML piccoli programmi detti script Uno script reagisce a un evento prodotto dall’utente e modifica il documento Due principali linguaggi di scripting client-side VBScript (Microsoft) Jscript (Netscape) NB: E’ Il browser che interpreta le istruzioni Capacità non standard fonte di incompatibilità

Esempio VBscript <HTML> <HEAD><TITLE>Esempio VBscript</TITLE></HEAD> <BODY> <P> Textbox <INPUT type=textbox name=TextBox1 language=“VBS” size=20> <P> Bottone <INPUT type=button value=”Ciao!" language=“VBS” name="HelloButton" onClick="OnClick_Button"> </BODY> </HTML> <SCRIPT language="VBS"> <!-- Sub OnClick_Button TextBox1.Value=”Ciao a tutti" End Sub --> </SCRIPT>

Esempio JavaScript <script language="JavaScript"> <HTML> <HEAD> <TITLE>Esempio JavaScript</TITLE> <script language="JavaScript"> function pushS() { alert("Ciao!"); } </script> </HEAD> <BODY> <!-- oggi = new Date() document.write("L'ora attuale è:“ , oggi.getHours(),":",oggi.getMinutes(), ". ") document.write("<br>La data di oggi è: ", oggi.getDate(),"/",oggi.getMonth() + 1,"/",oggi.getYear());// --> <form> <input type="button" name=“S” value=“Saluti!” onclick="pushS()"> </form> </BODY> </HTML>

Esempio JavaScript

Componenti Client-side Ulteriori capacità sono ottenute inserendo nella pagina oggetti invece che semplici procedure (contenuti tra tag <object></object>) Vari formati di componenti ActiveX (Microsoft) Applets e JavaBeans (Sun) Il supporto varia di browser in browser

Capitolo 1 Tecnologie per applicazioni Web Parte terza: XML, DTD, XSD

XML: eXtensible Markup Language Formato di file proposto dal W3C per distribuire documenti elettronici sul World Wide Web Evoluzione: 1986: Standard Generalized Markup Language (SGML) ISO 8879-1986 Agosto 1997: XML Working Draft Dicembre 1997: XML 1.0 Proposed Recommendation Febbraio 1998: Standard

XML vs HTML XML non rimpiazza HTML! HTML: insieme fisso di tag XML: standard per creare linguaggi di markup con tag personalizzati (erede di SGML); possono essere usati in qualunque dominio XML e HTML sono nati con scopi diversi: XML progettato per descrivere DATI  cosa sono i dati HTML progettato per visualizzare i dati  come appaiono i dati

Uso di XML Separare i dati dal modo con cui vengono visualizzati Scambiare i dati tra sistemi incompatibili Scambiare informazioni in sistemi B2B Condividere dati Memorizzare dati Creare nuovi linguaggi (WML, MathML…) Accessibilità: Supporto nei moderni browsers per Visualizzazione, validazione, Embedding in documenti HTML,Trasformazione con XSL, Visualizzazione con CSS è un documento di testo  il software che tratta documenti testuali tratta anche XML

Esempio di documento XML <?xml version="1.0"?> <elenco> <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> <prodotto codice=“432”> <descrizione> Frigo </descrizione> </elenco> Attributi Tag con contenuti

Sintassi XML Tutti gli elementi hanno un tag di chiusura I tag sono “case sensitive” I tag devono essere annidati correttamente Un documento XML deve avere un tag radice

Elementi <prodotto codice=“123kl14”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> Si possono estendere Hanno relazioni (padre-figlio) Hanno contenuto

Attributi <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> Gli elementi possono avere degli attributi I valori vanno racchiusi tra “ ” Differiscono dagli elementi perchè non possono contenere elementi figli

Namespace Metodo per evitare conflitti di nome <table> <tr>...</tr> </table> <product>...</product> Si introduce un prefisso <h:table> <h:tr>...</h:tr> </h:table> <my:table> <my:product>... </my:product> </my:table> Un XML namespace è una collezione di nomi (attributi, elementi,…), identificata da un URI URL HTML diventa URI (Uniform Resource Identifier) XML un documento XML può far riferimento ad oggetti diversi (DTD, documenti XML, etc.) è più importante identificare un oggetto che localizzarlo

Tipi di marcature Elementi: <prodotto> Entità: < (sta per <), ℞ (Unicode) Commenti: <!- - qualsiasi testo - - > Istruzioni: <? Nome-istruzione dati ?> Sezioni CDATA (character data) <![CDATA[ *p = &q; b = (i <= 3); ]]>

Document Type Definition (DTD) Detta il tipo di un documento, cioè: i tag ammessi le regole di annidamento dei tag Scopi: Accordarsi su formato/struttura dei documenti Validare documenti XML secondo certe regole Esempio di dichiarazione di un elemento: <!ELEMENT PRODOTTO (DESCRIZIONE, PREZZO)> L’elemento prodotto contiene al suo interno un elemento descrizione seguito da un elemento prezzo

Validazione di un documento XML Un documento XML la cui sintassi è corretta(cioè soddisfa le regole di scrittura di documenti XML) è detto “well-formed” (ben formato) Un documento validato rispetto ad un DTD è detto “valid” (valido)

Modello di contenuto Elementi contenenti elementi figli <!ELEMENT PRODOTTO (DESCRIZIONE))> <prodotto> <descrizione>…</descrizione></prodotto> Elementi con PCDATA (parsed character data = brano di testo qualunque) <!ELEMENT DESCRIZIONE #PCDATA)> <descrizione> testo </descrizione> Elementi vuoti <!ELEMENT ARTICOLO EMPTY)> <articolo/>

Modello di contenuto Contenuto misto Qualsiasi contenuto <!ELEMENT ARTICOLO (#PCDATA | PRODOTTO)> <articolo> testo </articolo> <articolo><prodotto>..</prodotto><articolo> Qualsiasi contenuto <!ELEMENT PARTE ANY)> <parte><sottoparte></sottoparte><parte> <parte><prodotto></prodotto></parte>

Occorrenze di un elemento 1 volta <!ELEMENT PRODOTTO (DESCRIZIONE))> 1 o più volte <!ELEMENT LISTA (PRODOTTO+))> 0 o più volte <!ELEMENT LISTA (PRODOTTO*))> 0 o 1 volta <!ELEMENT PRODOTTO (DESCRIZIONE?))>

NOTA: un DTD NON è un documento XML Esempio di DTD <!ELEMENT ELENCO (PRODOTTO+)> <!ELEMENT PRODOTTO (DESCRIZIONE, PREZZO?)> <!ELEMENT DESCRIZIONE #PCDATA> <!ELEMENT PREZZO #PCDATA> <elenco> <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> <prodotto codice=“432”> <descrizione> Frigo </descrizione> </elenco> NOTA: un DTD NON è un documento XML

Dichiarazioni di attributi Per ogni elemento dice: quali attributi può avere il tag che valori può assumere ciascun attributo qual è il valore di default Esempio di dichiarazione di attributo: <!ATTLIST PRODOTTO codice ID #REQUIRED label CDATA #IMPLIED status (disponibile | terminato) ‘disponibile’> Il tag PRODOTTO può contenere 3 attributi

Documenti con DTD <?XML version="1.0" standalone="no"?> <!DOCTYPE capitolo SYSTEM ”libro.dtd" [ <!ENTITY %ulink.module "IGNORE"> <!ELEMENT ulink (#PCDATA)*> <!ATTLIST ulink xml:link CDATA #FIXED "SIMPLE" xml-attributes CDATA #FIXED "HREF URL" URL CDATA #REQUIRED> ]> <capitolo>...</capitolo> DTD esterno DTD interno

XML Schema Storia: - inizialmente proposto da Microsoft - divenuto W3C recommendation (maggio ‘01) Scopo: definire gli elementi e la composizione di un documento XML Un XML Schema definisce regole riguardanti: Elementi Attributi Gerarchia degli elementi Sequenza di elementi figli Cardinalità di elementi figli Tipi di dati per elementi e attributi Valori di default per elementi e attributi

Vantaggi di XML Schema rispetto a DTD XML Schema (noti anche come XSchema o XSD= XML Schema Definition): Sono estendibili (per future aggiunte) Sono anch’essi files XML Sono più ricchi e completi di DTD Supportano tipi di dati Gestiscono namespaces

Esempio: documento XML <?xml version="1.0"?> <note xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "http://www.lol-si.com/Xschema/note.xsd"> <to> Tove </to> <from> Jani </from> <head> Reminder </head> <body> this weekend! </body> </note> Note: 1° attributo: URI che dichiara che si vuole la validazione del documento attraverso XSD 2° attributo: dichiara dove reperire il file XSD (sempre attraverso URI)

Esempio: XML Schema <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:element name="to" type="xs:string"/> <xs:element name="from" type="xs:string"/> <xs:element name="head" type="xs:string"/> <xs:element name="body" type="xs:string"/> </xs:sequence> </xs:complexType> </xs:element> </xs:schema> xs: namespace per XSchema (contiene tutti i tag XSD)

Elementi semplici (Simple elements) Possono contenere solo testo (no elem. o attributi) Definizione di elementi semplici: <xs:element name="nome" type="tipo"/> <xs:element name="nome" type=“tipo” default=“xyz” /> <xs:element name="nome" type=“tipo” fixed=“xyz” /> Esempi di definizione di elementi semplici in XSD <xs:element name=“età” type=“xs:integer”/> <xs:element name=“cognome” type=“xs:string”/> Esempi di elementi semplici XML <età> 65 </età> <cognome> Rossi </cognome>

Attributi in XSD <lastname lang=“it”> qwerty </lastname> Definizione di attributi <xs:attribute name="name" type="type"/> <xs:attribute … default|fixed=“xyz” use=“required|optional”/> Esempio di definizione di attribute <xs:attribute name=“lang” type=“xs:string”/> Esempio di attributo <lastname lang=“it”> qwerty </lastname> Valore di default o fisso Obbligatorio o opzionale

Elementi complessi (Complex elements) 4 tipi di elementi complessi: Vuoti (empty) Contenenti solo altri elementi Contenenti solo testo Contenenti testo e/o altri elementi Sintassi di elementi complessi: <xs:element name="name"> <xs:complexType> . . element content . . </xs:complexType> </xs:element>

Indicatori (Indicators) Restrizioni Restrizioni sui valori(min&max) Sull’enumerazione di insiemi (set) Su lunghezza, numero di spazi, ecc: lenght, blanks, … Indicatori (Indicators) Ordinamento: Any, All, Choice, Sequence Numero di occorrenze: maxOccurs, minOccurs Se non specificati: 1 e 1 sola occorrenza Raggruppamento: Per definire gruppi di elementi, tra loro correlati

Capitolo 1 Tecnologie per applicazioni Web Parte quarta: Interrogare e trasformare documenti XML

XQuery Proposta W3C: 15 Febbraio 2001 Interrogazioni: Path expressions Sintassi abbreviata di XPath Espressioni FLWR Clausole FOR, LET, WHERE, RETURN

Path expressions . Nodo corrente .. Nodo padre del nodo corrente / nodo radice, o figlio del nodo corrente // discendente del nodo corrente @ attributo del nodo corrente * qualsiasi nodo [ ] predicato [n] posizione

Esempi di path expressions Una path expression può iniziare con document(stringa_documento) Restituisce la radice del documento specificato A partire dalla radice del documento si possono specificare delle espressioni per estrarre il contenuto desiderato Esempio: document(“libri.xml”)/Elenco/Libro Restituisce l’insieme di tutti i libri contenuti nell’elenco che si trovano nel documento libri.xml

Esempi di path expressions Esempio: document(“libri.xml”)/Elenco/Libro[Editore=‘Bompiani’ AND @disponibilità=‘S’]/Titolo Restituisce l’insieme di tutti i titoli dei libri dell’editore Bompiani che sono disponibili e che si trovano nel documento libri.xml <Titolo>Il Signore degli Anelli</Titolo>

Espressioni FLWR FOR per l’iterazione LET per collegare variabili WHERE per esprimere predicati RETURN per generare il risultato

Espressioni FOR Esempio: FOR $l IN document(“libri.xml”)//Libro RETURN $l La clausola FOR valuta l’espressione sulla destra (//Libro) che è un insieme, e itera all’interno di questo set assegnando il nodo di turno alla variabile $l L’interrogazione restituisce l’insieme di tutti i libri che si trovano nel documento libri.xml Le espressioni FOR possono essere annidate

Espressioni LET Esempio: LET $l := document(“libri.xml”)//Libro RETURN $l La clausola LET valuta l’espressione (//Libro) e assegna l’intero insieme di libri trovati alla variabile $l Il risultato di una clausola LET produce un singolo binding per la variabile: l’intero set viene assegnato alla variabile

Clausola WHERE La clausola WHERE esprime una condizione: solamente le tuple che soddisfano tale condizione vengono utilizzate per invocare la clausola RETURN Le condizioni nella clausola WHERE possono contenere diversi predicati connessi da AND, OR, NOT Esempio: FOR $l IN document(“libri.xml”)//Libro WHERE $l/Editore=“Bompiani” AND $l/@disponibilità=“S” RETURN $l Restituisce tutti i libri pubblicati da Bompiani che sono disponibili

Clausola RETURN Genera l’output di un’espressione FLWR che può essere: Un nodo Un foresta ordinata di nodi Un valore Può contenere dei costruttori di elementi, riferimenti a variabili definite nelle parti FOR e LET ed espressioni annidate <Autore>F. Dürrenmatt</Autore> <Autore>J.R.R. Tolkien</Autore> <Autore>Umberto Eco</Autore> <Autore>F. Dürrenmatt</Autore> F. Dürrenmatt

Clausola RETURN Esempio: FOR $l IN document(“libri.xml”)//Libro Un costruttore di elemento consiste di un tag iniziale e di un tag finale racchiudenti una lista opzionale di espressioni che determinano il contenuto dell’elemento Esempio: FOR $l IN document(“libri.xml”)//Libro WHERE $l/Editore=“Bompiani” RETURN <Libro-Bompiani> $l/Titolo </Libro-Bompiani> nuovo elemento <Libro-Bompiani><Titolo>Il Signore degli Anelli</Titolo></Libro-Bompiani> <Libro-Bompiani><Titolo>Il nome della rosa</Titolo></Libro-Bompiani>

XSL Standard W3C: 16 novembre 1999 XSL = eXtensible Stylesheet Language Un foglio di stile è un file in cui sono condensate le specifiche e modalità di presentazione si può quindi separare (più o meno nettamente) la definizione dei contenuti dalla loro resa grafica

XSL Linguaggio per rappresentare l’output di XML formattato e per convertire un documento XML in un altro documento XML, HTML etc. Usa la notazione XML

XSLT XSL = XSLT + XSL FO XSLT (XSL Transformation) Trasforma un documento XML in un altro documento XML o altro tipo di documento (HTML, ecc.) Può: aggiungere nuovi elementi; rimuovere elementi presenti; riorganizzare gli elementi; decidere quali visualizzare, ecc. XSL FO (Formatting Object) contiene le istruzioni per formattare l’output di un documento XML

XSLT Trasforma un documento XML in un altro documento XML o altro tipo di documento (HTML, ecc.) Può aggiungere nuovi elementi, rimuovere elementi presenti; può riorganizzare gli elementi, decidere quali visualizzare, ecc.

XSLT Utilizza Xpath per definire le parti del documento sul quale effettuare le trasformazioni Per gli elementi sui quali devono essere applicate le trasformazioni vengono definiti dei template

Template Per assegnare uno stile ad un particolare elemento XML oppure per applicare delle trasformazioni si usa un template nel foglio di stile Il foglio di stile può essere eseguito da un processore XSLT che scandisce il documento XML sorgente, identifica gli elementi per i quali è stato definito un template nel foglio di stile, ed effettua le azioni specificate nel template.

Esempio di template <xsl:template match=paragrafo> <fo:blocco font-size="10pt" space-before="12pt"> <xsl:apply-templates/> </fo:block> </xsl:template> La clausola match definisce su quali elementi si applica il template Per ogni elemento si possono specificare più template (si applica il più specifico oppure si assegna una priorità per l’applicazione) Un template può specificare lo stile per più elementi All’interno del template si specifica come si devono processare gli elementi figli (xsl:apply-templates) Nell’esempio: gli elementi “paragrafo” diventano oggetti di formattazione “blocco” che vengono visualizzati con 10 punti e 12 punti di spazio dopo ogni blocco

Match Si possono specificare gli elementi figli da processare utilizzando i seguenti simboli: | operatore or . Elemento corrente // discendenti / figlio .. Padre @ identifica un attributo first-of-any(), first-of-type(), last-of-any(), last-of-type()

Struttura di un documento XSL xsl:stylesheet <?xml version=“1.0”?> <xsl:stylesheet> <xsl:template match=“/”> [azione] </xsl:template> <xsl:template match=“Elenco”> <xsl:template match=“Libro”> ... </xsl:stylesheet> template per il documento (template per un elemento figlio)* azione sul documento azione sull’elemento figlio

Creare un documento HTML <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Elenco libri</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> <xsl:template match=“Elenco"> <xsl:template match=“Libro"> … </xsl:stylesheet>

Trasformazione <?xml version="1.0"?> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘N’> <Titolo>Il nome della rosa</Titolo> <Autore>Umberto Eco</Autore> <Data>1987</Data> <ISBN>55-344-2345-1</ISBN> <Titolo>Il sospetto</Titolo> <Autore>F. Dürrenmatt</Autore> <Data>1990</Data> <ISBN>88-07-81133-2</ISBN> <Editore>Feltrinelli</Editore> </Elenco> <HTML> <HEAD> <TITLE>Book Catalogue</TITLE> </HEAD> <BODY> Il Signore degli Anelli J.R.R. Tolkien 2002 88-452-9005-0 Bompiani Il nome della rosa Umberto Eco 1987 55-344-2345-1 Bompiani Il sospetto F. Dürrenmatt 1990 88-07-81133-2 Feltrinelli </BODY> </HTML>

Trasformazione XML-XML <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <NuovoElenco> <xsl:for-each select=“Elenco/Libri"> <Libro> <Titolo><xsl:value-of select=“Titolo"/> </Titolo> <xsl:if test=“@disponibilità = ‘S’"> <Editore><xsl:value-of select=“Editore"/></Editore> </xsl:if> </Libro> </xsl:for-each> </NuovoElenco> </xsl:template>

Trasformazione XML-XML <?xml version="1.0"?> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘N’> <Titolo>Il nome della rosa</Titolo> <Autore>Umberto Eco</Autore> <Data>1987</Data> <ISBN>55-344-2345-1</ISBN> <Titolo>Il sospetto</Titolo> <Autore>F. Dürrenmatt</Autore> <Data>1990</Data> <ISBN>88-07-81133-2</ISBN> <Editore>Feltrinelli</Editore> </Elenco> <?xml version="1.0"?> <NuovoElenco> <Libro> <Titolo>Il Signore degli Anelli</Titolo> <Editore>Bompiani</Editore> </Libro> <Titolo>Il nome della rosa</Titolo> <Titolo>Il sospetto</Titolo> <Editore>Feltrinelli</Editore> </NuovoElenco> Il nuovo elenco per ogni libro contiene solo il loro titolo e, se questo è disponibile, anche la sua casa editrice.

Associare un foglio di stile ad un documento XML <?xml version="1.0"?> <?xml-stylesheet type=“text/xsl” href=“file://localhost/EsempiXML-XSL/libri.xsl”?> <!DOCTYPE Elenco SYSTEM "file://localhost/EsempiXML-XSL/libri.dtd"> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> … </Elenco>

Capitolo 1 Tecnologie per applicazioni Web Parte quinta: Architetture per la pubblicazione dinamica di contenuti

Motivazioni Produrre pagine “al volo” in base alle esigenze dell’utente e da contenuti strutturati (p.e. database) Scripting & componenti client-side non bastano Soluzioni: Architetture per produrre contenuti dinamici a lato-server

Common Gateway Interface Interfaccia che consente al Web Server di eseguire applicazioni esterne in grado di creare pagine dinamicamente ? ?

Caratteristiche di CGI Non è: un linguaggio di programmazione un protocollo di comunicazione Definisce solo un insieme di variabili di ambiente utili alla applicazione (ad es. parametri inviati dal client) %&£$$ pp*&£$

Invocazione Il cliente specifica nell’URL il nome del programma da eseguire Il programma deve stare in una posizione precisa (di solito il direttorio cgi-bin) ? http://mio.server.web/cgi-bin/xyz.exe root cgi-bin xyz.exe

Esecuzione 1. Il server riconosce dall’URl che la risorsa richiesta dal cliente e’ un eseguibile ? http://mio.server.web/cgi-bin/xyz.exe

Esecuzione 2. Il server decodifica i parametri inviati dal cliente e riempie le variabili d’ambiente es: request_method, query_string, content_length, content_type ? http://mio.server.web/cgi-bin/xyz.exe?#^@@ #^@@ P$&*£

Esecuzione 3. Il server lancia in esecuzione l’applicazione richiesta #^@@ P$&*£

Esecuzione 4. L’applicazione stampa la sua risposta sullo standard output

Esecuzione 5. Il server ridireziona lo standard output sulla rete e quindi verso il client

Invio di parametri a un programma CGI Il client può usare due metodi: GET POST GET: i parametri sono codificati nell’URL http://www.mioserver.it/cgi-bin/xyz?par=val POST : i parametri sono spediti al server separatamente, usando il body del messaggio di richiesta HTTP NB: il metodo POST richiede l’uso di un costrutto HTML chiamato FORM

Esempio: invio al server il nome dell’utente Form HTML Esempio: invio al server il nome dell’utente <form action=http://www.mysrvr.it/cgi-bin/xyz.exe method=post> <p>Dimmi il tuo nome: <input type=text name=“chisei” ></p> <input type=submit > </form>

Form HTML

Struttura di un programma CGI leggi le variabili d’ambiente stampa codice HTML elabora stampa intestazione MIME “Content-type: text/html”

Decodifica dei parametri leggi la variabile Request_method Valore? leggi la variabile Query_string GET leggi la variabile content_length leggi content_length caratteri da standard input POST

Revisione critica di HTTP HTTP non prevede metodi per identificare l’utente Ogni richiesta è trattata come un evento isolato: una nuova richiesta non ricorda nulla della precedente Non esiste il concetto di sessione interattiva dell’utente: impossibile fare applicazioni personalizzate Il web server genera un nuovo processo cgi ad ogni richiesta: viene terminato alla fine del computo della risposta: no sessione utente e condivisione risorse Altissimo sovraccarico di esecuzione per la creazione e distruzione di processi Revisione critica di CGI

Obiettivi delle architetture server side Migliori prestazioni: creare processi solo in fase di inizializzazione del sistema e riusare un pool di processi pronti Mantenimento dello stato: sfruttare la persistenza del processo per mantenere informazioni sulla sessione dell’utente (stateful application) Condivisione delle risorse: mantenere allocate le risorse condivise Scalabilità: aumentare il numero di processi applicativi all’aumentare del traffico

Architetture “application server” Applicazioni Base di dati App. Servers Client Web server Application server

Java Servlet http://java.sun.com/products/servlet/index.html Servlet container Applicazioni (servlets) JVM HTTP Request parametri Browser HTTP Response risposta Servlet container: un programma Java che fornisce un ambiente persistente di esecuzione per applicazioni Web ed espone le caratteristiche del Web server come oggetti Java Servlet: l’analogo di uno script CGI nel mondo Java

Valutazione Astrazione object-oriented delle proprietà di un server HTTP esteso (request, response, session ecc) Programmazione complessa perchè bisogna produrre sia il testo statico che i contenuti dinamici La presentazione HTML è mescolata al codice applicativo Esigenza: serve una soluzione più semplice per produrre pagine in modo dinamico a lato server

Server-side scripting Idea: inserire istruzioni per il calcolo dei contenuti dinamici all’interno della pagina HTML Il codice è interpretato dal server Il browser riceve HTML puro Web server + Esecutore script <HTML> …. </HTML> <%> …... </%> Template: testo+script da interpretare sul server <HTML> <BODY> …. </BODY> </HTML>

Java Server Pages (JSP) JSP è una architettura per server-side scripting proposta da Sun (come alternativa a ASP di Microsoft) Si fonda su tecnologia Java: linguaggio Java, Java Servlet, Java Beans Cronologia: Proposta presentata a JavaOne 98 Versione 0.92: revisione pubblica conclusa a Genn. 99 Versione 1.0 disponibile 1Q 99 Versione 1.1 disponibile 1Q 00 Versione 1.2 in uso da ottobre 2001

File JSP Un file .asp contiene una combinazione di: Testo Tag HTML Istruzioni di server-side scripting E’ necessario disporre di un ambiente di compilazione apposito (ad es. Tomcat di Apache Jakarta)

Procedure ed espressioni Scriptlets procedure racchiuse tra delimitatori (<%…….%>) scritte in Java Espressioni Un’espressione ha la forma: <%= variable%> La variabile viene valutata e il valore risultante, convertito in stringa, viene inserito nella pagina al posto dell’espressione

Direttive Direttive: <%@ variable=“value” %> il tipo di linguaggio da utilizzare all’interno del file JSP (<%@ language=”java”%>) il file .jsp o .html che viene ritornato al client se l’esecuzione della pagina JSP restituisce un errore (<%@ errorepage=”contactwebmaster.html”%>) i moduli (packages) importati dagli oggetti usati nella pagina (<%@ import=”java.io.*, java.util.Hashtable%>)

Esempio <HTML> <HEAD> <TITLE>Request Information Example</TITLE> </HEAD> <BODY> <H3>Request Information Example</H3> Method: <%= request.getMethod() %> <BR> Request URI: <%= request.getRequestURI() %> <BR> User Agent: <%= request.getHeader("User-Agent") %> </BODY> </HTML> Risultato: la stessa pagina computata dal servlet mostrato in precedenza

Compilazione Il file JSP viene prima tradotto in un servlet Il servlet viene compilato in bytecode La versione compilata viene tenuta in memoria per rendere più veloce una successiva richiesta della pagina NB: La versione originaria di Microsoft ASP (non ASP.NET) non compilava i template

Valutazione Indipendenza dal tipo di browser utilizzato Il browser vede solamente pagine HTML All’utente non sono necessari programmi proprietari o estensioni del browser Maggior facilità di apprendimento e utilizzo rispetto a servlet Oggetti di utilità Nasconde la presenza di programmi script agli utenti e ad eventuali hacker Resta però codice (anche se poco) frammisto a markup HTML

Tag eseguiti a lato server Obiettivo: togliere il codice dai template di pagina Soluzione: nascondere il codice “dietro” tag “magici”, eseguiti dal server <%@ taglib uri="http://www.myserver.com/mytaglib" prefix=“mytag" %> <HTML> <HEAD><TITLE>Esempio di tag iteratore</TITLE></HEAD> <BODY> <mytag:iteratore att1=“un” att2=“due” att3=“tre!”> <p><mytag:elemento></p> </mytag:iteratore> </BODY> </HTML>