1 / 125

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

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

Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related