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

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

2. 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)

3. 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

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

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

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

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

8. 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

9. 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 ...)

10. 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

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

12. Gli attori di HTTP • proxy:nodo intermedioche 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

13. Gli attori di HTTP %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

14. 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)

15. 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)

16. 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

17. 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)

18. Il server HTTP • Funzioni base: • 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

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

20. Capitolo 1Tecnologie per applicazioni WebParte seconda: HTML e linguaggi client-side

21. 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

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

23. Concetti generali di HTML • La marcatura prevede l’uso di etichette, detteTAGS • 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>

24. 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

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

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

27. 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

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

29. 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

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

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

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

33. Revisione critica • Situazione • 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, ....

34. 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)

35. 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

36. 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

37. 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)

38. 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

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

40. 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 volutediv.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!

41. 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à

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

43. <HTML> <HEAD> <TITLE>Esempio JavaScript</TITLE> <script language="JavaScript"> function pushS() { alert("Ciao!"); } </script> </HEAD> <BODY> <script language="JavaScript"> <!-- 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());// --> </script> <form> <input type="button" name=“S” value=“Saluti!” onclick="pushS()"> </form> </BODY> </HTML> Esempio JavaScript

44. Esempio JavaScript

45. 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

46. Capitolo 1Tecnologie per applicazioni WebParte terza: XML, DTD, XSD

47. 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

48. 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

49. 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

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