1 / 125

Tecnologie per applicazioni Web

Tecnologie per applicazioni Web. Tecnologie per applicazioni Web Parte I: i protocolli di Internet e del Web. Internet: una definizione. Sistema globale di informazione che:. collegato da un unico spazio di indirizzi basato sul protocollo IP

Download Presentation

Tecnologie per applicazioni 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. Tecnologie per applicazioni Web Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  2. Tecnologie per applicazioni WebParte I: i protocolli di Internet e del Web Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  4. Prima di Internet: comunicazione punto a punto Nella comunicazione punto a punto esiste un canale fisico dedicato Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  6. Ipertesti multimediali Ipertesto multimediale: un documento a lettura non sequenziale con inserti multimediale Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  7. richiesta risposta Definizione di WWW Web: un sistema client-server su Internet per l’accesso a ipertesti multimediali client server Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 ...) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  11. cliente (browser):genera richieste di risorse • (origin) server:depositario della risorsa richiesta Gli attori di HTTP Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  19. Risorse Server HTTP: architettura base WEB server client interfaccia di rete interfaccia file system interfaccia applicazioni Applicazioni Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  20. Tecnologie per applicazioni WebParte II : HTML e linguaggi client-side Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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: Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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> Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  25. Formattazione del testo • grassetto<b> prova </b> • corsivo <i> prova </i> • sottolineato<u> prova</u> Prova prova prova Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  26. Formattazione del testo • Dimensioni:<font size=+3> prova</font><font size=9> prova</font> • Colore:<font color=“FF0000”> prova</font> prova prova prova Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  28. Paragrafi, allineamenti • paragrafi: <p>testo</p>vai a capo • testo formattato: <pre>prova • prova</pre> testo vai a capo prova prova Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  30. Uso della posta:Scrivi a<a href = mailto:fraterna@elet.polimi.it>Piero Fraternali</a> Scrivi a Piero Fraternali Collegamenti ipertestuali Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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> Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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, .... Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  34. HTML 4 • Una “major revision” del linguaggio • Separa gli aspetti grafici dal markup “strutturale” • Probabilmente è l’ultima versione di HTML • Il concetto nuovo: Cascading Style Sheet (CSS) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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) Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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; } Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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! Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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à Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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> Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  44. Esempio JavaScript Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  46. Tecnologie per applicazioni WebParte III: XML, DTD, XSD Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

  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 Ceri et alii: Dati ed Applicazioni per il Web Mc Graw Hill

More Related