1 / 36

Sistemi tecnologici e informazione online

Università di Roma "La Sapienza". Sistemi tecnologici e informazione online. Dott. Domenico Ventriglia 2010 (HTML). <form>. HTML permette di creare form per l’inserimento di dati per interagire con il sito , ma non di elaborare dati

asher-maynard
Download Presentation

Sistemi tecnologici e informazione online

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. Università di Roma "La Sapienza" Sistemi tecnologici e informazione online Dott. Domenico Ventriglia 2010 (HTML)

  2. <form> • HTML permette di creare form per l’inserimento di dati per interagire con il sito, ma non di elaborare dati • Le informazioni inserite nelle form vengono inviate a programmi che le elaborano e creano opportune risposte

  3. form: attributi • <form name=“datiUtenti" • method=”GET” enctype="text/plain“ • target="_blank" action=”/cgi-bin/esempio.cgi"> • elementi di input • </form> • method: protocollo usato per passare i parametri al programma: • get (default) la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi. • post invece l'invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi.

  4. form: attributi • enctype: Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati dal browser in modo da non poter dare adito ad errori(ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottinteso l'invio di semplice testo. • A volte però, come quando è necessario inviare un'immagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. <formname="datiUtenti" action="paginaRisposta.php“ enctype="text/plain"> <formname="datiUtenti" action="paginaRisposta.php"method="post" enctype="multipart/form-data">

  5. form: Input di testo • All'interno della form è possibile specificare le caratteristiche dell'azione che si vuole compiere • In particolare possiamo inserire dati testuali utilizzando l'attributo • <input …. type="text"> • e specificare la lunghezza prefissata • <input …..size=20> • e di una lunghezza massima del testo • <input …. maxlength=18>

  6. form: input radio • Possiamo inserire dati in modalità "radio buttons" utilizzando l'attributo • <input …. type=RADIO> • e specificare il nome e il valore dei vari campi • <input …..name="name1" value="valore1"> Valore 1 Valore 2

  7. FORM:input vari • Inserendo nel tag TYPE il valore "password" non vengono visualizzati i caratteri ma gli asterischi <input …. type="password"> **** • Altri tipi di TYPE possibili sono: <input type="image" name=“smile“ src=“smile.gif"> <input type="hidden" name="segreto">

  8. FORM: input pulsanti • Possiamo inoltre definire i pulsanti per la cancellazione o l'invio dei dati <input type="submit" value="Invia"> Invia <input type="reset" value="Cancella"> Cancella < inputtype="button“ value=“Generico"> Generico

  9. Esempio: FORM <html> <head><title> ... </title></head> <body> <center> <h1>BIBLIOTECA DEI SOGNI</h1> <h2>Modulo invio dati</h2><hr> <formaction=http://somewhere.com/scripts/biblio.cgi > <p> Autore: <inputtype="text" name="autore" maxlength="64"> <br/> <br/> Titolo:<input type="text" NAME="titolo" maxlength ="64"> <br/> <br/> Password<inputtype ="password" name="autore" maxlength ="64"> </p> < input type ="submit"> < input type ="reset"> </ form> <hr> </body> </html>

  10. Esercizi html realizzare una pagina html dal titolo “Sistemi tecnologici" con lo sfondo interamente di colore giallo realizzare una pagina html dal titolo Sistemi tecnologici con una immagine dal nome esercizio2.jpg. Tale immagine di dimensioni 504x72 avrà come attributo title (Sistemi informatici) e alt (logo Sistemi informatici). Commentare ogni istruzione. realizzare un pagina html dal titolo "Esercizio sui link" nella quale, dopo un titolo in h1 e un piccolo paragrafo descrittivo, siano presenti due menù rispettivamente posizionati nella parte sinistra il primo e nella parte destra il secondo. Inoltre a fondo pagina vogliamo inserire un'immagine linkata che porti alla home. realizzare una pagina html dal titolo "Esercizio sulle liste" all'interno della quale, dopo un testo introduttivo allineato a centro pagina, rappresentare due liste rispettivamente ordinate e non ordinate. realizzare una tabella html usando gli attributi width, bgcolor e i tag come th e caption che abbia tre righe e due colonne, la larghezza della tabella a 800 pixel e i bordi della tabella pari a un pixel.

  11. Soluzione Esercizio n.1 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">      <title>Sistemi tecnologici</title> </head> <body bgcolor="#FFFF00"> </body> </html>

  12. Soluzione Esercizio n.2 <!DOCTYPE html > <html> <head>      <meta http-equiv="Content-Type" content="text/html; >      <title>Sistemi tecnologici</title> <!--questo è il titolo-->  </head> <body bgcolor ="#FFFF00 " > <!-- colore giallo-> <img src="/esercizio2.jpg" title"Sistemi tecnologici" alt="logo Sistemi tecnologici" width="504" height="72"> <!-- carico l'immagine esercizio2.jpg--> </body> </html>

  13. Soluzione Esercizio n.3 • <!DOCTYPE html > • <html> • <head> • <title>Esercizio sui link</title> • </head> • <body> • <h1 align="center">Esercizio sui link </h1> • <p align="center">In questo esercizio HTML utilizzeremo i link e vedremo • come linkare le immagini.</p> • <b><p align="left">Questo è un menù</p> • <b><p align="left"><a href="/">Home</a></p></b> • <b><p align="left"><a href="/esercizio1.html">Guida HTML</a></p></b> • <b><p align="left"><a href="/esercizio2.html">Esercizi HTML</a></p></b> • <b><p align="right">Questo è un altro menù</p></b> • <b><p align="right"><a href=“www.repubblica.it">Primo link esterno</a></p></b> • <b><p align="right"><a href=“www.google.it">Secondo link esterno</a></p></b> • <br> • <br> • <div align="center"><a href="/"><img src="/esercizio3.jpg" alt="home page" title="Home"> • </div> • </body> • </html>

  14. Soluzione Esercizio n.4 • <html> • <head> • <title>Esercizio sulle liste in HTML</title> • </head> • <body> • <h1 align="center">Esercizio sulle liste</h1> • <p align="center">Questo è un esercizio sulle liste, • con una lista ordinata e una non ordinata. </p> • <div align="left"><ol> • <li>Pippo • <li>Pluto • <li>Topolino • </ol></div> • <div align="left"><ul> • <li>Pippo • <li>Pluto • <li>Topolino • </ul></div> • </body> • </html>

  15. Soluzione Esercizio n.5 <html> <head>     <title>Esercizi sulle tabelle in html</title> </head> <body bgcolor ="#008000">      <div align="center"><table border="1" bgcolor="#ffff00" width="800">        <caption><p><b>Si vuole realizzare una tabella con tre righe (più una per il titolo) e due colonne. Vengono utilizzati diversi attributi.</b></p></br></caption>           <tr ><th>Esercizio sulle tabelle</th></tr>           <tr>              <td>Menù</td>              <td>Esercizio sulle tabelle</td>           </tr>           <tr>              <td>Prima riga</td>              <td>Usate i diversi attributi per personalizzare la tabella.</td>           </tr>           <tr>              <td>Seconda riga</td>              <td>Questa è una tabella</td>           </tr>         </table></div>  </body> </html>

  16. Magie del web … Cosa succede quando clicco su un link oppure quando scrivo www.google.it nel mio borwser? Quale magia consente la visualizzazione di una pagina web sul mio schermo ?

  17. Architettura del WEB Architettura software di tipo client-server, nella quale sono previste due tipologie di componenti software: il client e il server, ciascuno con compiti ben definiti.

  18. Il Client:browser (sul vostro pc) E’ un software che fa le richieste al server Permette l'accesso e la navigazione nell'ipertesto del Web. - trasmette al server le richieste di pagine web; - riceve dal server le informazioni; - visualizza la pagina Web richiesta; - consente operazioni locali sulle informazioni ricevute (salvarle su disco, stamparle,...). • I browser più noti sono: • Microsoft Internet Explorer (circa il 50% del mercato) • Mozilla Firefox (circa il 23% del mercato) • Safari (2/3 %) • Chrome (6 %)

  19. Il web server E’ un software che soddisfa le richieste fatte dal client Rimane in ascolto di richieste del client (ie pagine html) • Cerca di soddisfare ogni richiesta che arriva: • se possibile, consegna al risorsa (ie documento) richiesto; • altrimenti, spedisce un messaggio di notifica di errore (documento non esistente, documento protetto, ecc…). Il web server più famoso (open sourse) è apache web server (www.apache.org)

  20. Elementi base del web Uniform Resource Locator (URL): sistema per far riferimento alle risorse indirizzabili nel Web (es.http://www.uniroma1.it/default.htm); Protocollo HTTP (HyperText Transfer Protocol): è il protocollo (sono le regole) di comunicazione tra client e server. Linguaggio HTML (HyperText Markup Language): linguaggio per definire pagine Web; Supponente che io (client) mando un corriere (http) dal fruttivendolo (il server). Ogni prodotto ha una etichetta univoca (url), e in particolare gli chiedo delle mele e degli aranci. Se disponibili lui me li mette in una busta con una descrizione delle cose comprate (html+css) e poi me le manda a casa con lo stesso corriere (http). La strada è la rete internet

  21. URL (geniale) È il meccanismo che consente ad un client di richiedere ad un particolare server una risorsa (indipendente dalle tecnologie) protocollo://server:porta/pathname/risorsa? <parameter 1>..&<parameter n> • protocollo: indica il tipo di protocollo utilizzato • server: rappresenta l’indirizzo IP (numerico o simbolico) del computer a cui si vuole accedere • porta: identifica la porta a cui il protocollo fa riferimento • pathname: indica il percorso completo del file cercato • risorsa: indica l’oggetto del desiderio • lista di parametri: informazioni aggiuntive passate al server http://www.corriere.it/Primo_Piano/Cronache/2006/10_Ottobre/11/americana.shtml

  22. Protocolli Web Le regole per lo scambio di informazioni (protocollo) sono diverse in funzioni del tipo di comunicazione desiderata (voglio navigare su web, mandare delle email, scaricare dei grossi file….) • httpprotocollo nativo del Web • https per lo scambio sicuro di informazioni su web • ftpfile transfer protocol • newsprotocollo per l'accesso ai gruppi di discussione • mailtousato per spedire posta • telnetprotocollo di terminale virtuale, per effettuare login remoti • Fileaccesso a documenti locali • e tanti tanti altri …

  23. Che ci facciamo … Supponiamo di voler inserire dei grafici sul nostro sito… come fare ? Cerchiamo il solito strumento web 2.0… http://code.google.com/intl/it-IT/apis/chart/

  24. Che ci facciamo … In generale: http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n> • Proviamo • http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World • Dove: • chs=250x100 is the chart's size in pixels. • chd=t:60,40 is the chart's data. • cht=p3 is the chart's type. • chl=Hello|World is the chart's label. Adattiamo alle nostre esigenze: http://chart.apis.google.com/chart?cht=p3&chd=t:70,20,10&chs=250x100&chl=Furti|Rapine|incendi&chco=FF0000,00FF00,0000FF

  25. Protocollo HTTP • Sovraintende al dialogo fra un client e un server web, è il linguaggio nativo del Web. • HTTP è un protocollo ASCII:i messaggi fra client e server sono sequenze di caratteri • Per messaggio intendiamo la richiesta del cliente oppure la risposta del server;i dati che vengono restituiti dal server non sono necessariamente ASCII (esempi di dati binari: immagini, filmati, suoni, codice eseguibile).

  26. Protocollo HTTP • Il protocollo prevede che l’ interazione fra client e server si svolga secondo il seguente schema: • apertura di una connessione di rete fra client e server • invio di una richiesta da parte del client, che specifica la URL desiderata; • invio di una risposta da parte del server e dei dati di cui alla URL richiesta; • chiusura della connessione.

  27. 1: invio dati ( form) Client (Browser) Server Web (HTTP) 5: invio risultati( html) 4: risultati( html) 2: passaggio dati ( form) Applicazione Web (fornitore di servizi) Altre risorse 3: interagisce Protocollo HTTP Centra qualcosa con le form che abbiamo visto? Il campo action?

  28. HTTP: la richiesta del client • Quando un client effettua una richiesta invia diverse informazioni: • il metodo (cioè il comando) che si chiede al server di eseguire (GET,POST, PUT); • il numero di versione del protocollo HTTP in uso; • l'indicazione dell'oggetto al quale applicare il comando; • varie altre informazioni, fra cui: • il tipo di client; • i tipi di dati che il client può accettare (filmati, testo, immagini,...)

  29. HTTP:La risposta del server • Il server deve informare il client sulla natura dei dati che gli arriveranno prima di iniziare a spedirglieli. Per questo motivo la risposta consiste di 3 parti: • una riga di stato, che indica quale esito ha avuto la richiesta (tutto ok, errore, ecc.); • delle metainformazioni che descrivono la natura delle informazioni che seguono (testo,immagini,ecc); • le informazioni vere e proprie (ossia, l'oggetto richiesto). • La riga di stato, a sua volta, consiste di tre parti: • Versione del protocollo http; • Codice numerico di stato; • Specifica testuale dello stato.

  30. Codici di stato

  31. Type/Subtype Estensione Tipologia delle informazioni text/plain .txt, .java testo text/html .html, .htm pagine html image/gif .gif immagini gif image/jpeg .jpeg, .jpg immagini jpeg audio/basic .au suoni video/mpeg .mpeg filmati application/octet-stream .class, .cla, .exe programmi eseguibili application/postscript .ps documenti Postscript x-world/x-vrml .vrml, .wrl scenari 3D Tipi MIME Un tipo MIME è specificato da una coppia MIME type/MIME subtype

  32. Esempio di comunicazione Richiesta del client: GET /products/toasters/index.html HTTP/1.1 User-agent: Mozilla/3.0 ecc. Risposta del server: HTTP/1.0 200 OK Server: NCSA/1.4 Date: Tue, july 4, 1996 19:17:05 GMT Content-type: text/html Content-length: 6528 Content-language: en Last-modified: Mon, july 3, 1996 15:05:35 GMT <----- notare la riga vuota <HTML> <HEAD> …

  33. Ma sarà vero? Prendiamo uno strumento per vedere la comunicazione client server Ad esempio live httpheaders (plugin di firefox)

  34. HTTP:Cache e Connessione persistente Nella versione HTTP/0.9 and 1.0, la connessione era chiusa dopo ogni singola richiesta (la stessa pagina poteva richiedere decine di richieste). Dalla versione HTTP 1.1 è possibile gestire più richieste sulla stessa connessione (non bisogna ogni volta aprire e chiudere) La sessione persistente unita con la cache consente di velocizzare il caricamento delle pagine e ottimizzare le risorse di rete La cache web memorizza documenti o singoli pezzettini che vengono caricati nel caso in cui si verificano alcune condizioni decise a priori. I contenuti memorizzati vengono riusati le volte successive (ie la seconda volta la pagina non viene ricaricata interamente ma solo i pezzi non memorizzati in cashe).

  35. Richieste http Il browser inizia a leggere il codice html. Per ogni risorsa trovata viene effettuata una richiesta http al server (ogni immagine, css, file javascript,…). Il server risponde mandando i vari pezzettini che compongono la pagina e il browser la compone. Ogni richiesta comporta un tempo pertanto si cerca di minimizzarle Vediamo cosa significa http://www.webpagetest.org/video/view.php? id=100215_32300728796ba2d6d1742ed126175cf9cdb1fc20

  36. Ma sarà vero? (2) Usiamo questa volta YSlow (plugin firefox https://addons.mozilla.org/it/firefox/addon/1843) Risposte http e tempi di caricamento hp di rep è composta da circa 30 richieste http Alcuni pezzettini vengono presi dalla cashe

More Related