DNS server il modello web server client 2 1 3 4 6 5 1: il browser del client chiede al Domain Name Server l'indirizzo numerico corrispondente al nome simbolico www.scuola.it 2: il DNS risponde al client l'indirizzo relativo 183.207.116.201 3: il browser del client instaura una connessione al port 80 dell'indirizzo 183.207.116.201 4: il browser del client invia il comando GET /indice.html 5: il server invia al browser del client il file indice.html 6: il browser del client rilascia la connessione e poi memorizza, interpreta i comandi HTML e visualizza il documento indirizzamento URL • Uniform Resource Locator 1. come devo interpretare il documento? 2. dove è contenuto il documento? 3. quale è il documento desiderato? • un indirizzo è composto da tre elementi: nome del documento protocollo nome del sito http://www.scuola.it/indice.html possibili protocolli • http ipertesti HTML http://www.scuola.it/indice.html • ftp trasferimento file remoti ftp://ftp.scuola.it/pub/indice.txt • file file locale file:///C|/office/word/testo.txt • news gruppi di interesse news:scuola.it • mailto posta elettronica mailto:[email protected] HTML • Non si può trasferire un documento, ma si comunica la sua descrizione e le caratteristiche dei suoi contenuti • HyperText Markup Language • i comandi sono racchiusi tra parentesi angolari <> • normalmente i comandi operano a coppie <B>....</B> <BODY>....</BODY> esempio di documento HTML <HTML> <HEAD> </HEAD> <BODY> <H2 ALIGN=center>Scuola</H2> <P ALIGN=center> sito didattico dedicato al mondo universitario</P> <IMG ALIGN=center SRC=logo.gif> <A HREF=nomi.html>autori</A> </BODY> </HTML> SCUOLA sito didattico dedicato al mondo universitario autori i principali motori di ricerca • • • • • • • • • • [ altavista.telia.com/it ] www.altavista.com www.yahho.com www.lycos.com www.virgilio.it www2.csr4.it:8080/search.html ricerca.multisoft.it www.shiny.it/seek/ ragno.ats.it iltrovatore.webzone.it come funziona (1) Trasm issione di un m essaggio (outgoing mail) SERVER SMTP configurato server SERVER SMTP configurato client INTERNET software di posta elettronica messaggio trasmesso UTENTE cassette postali PROVIDER PROVIDER del destinatario • l’utente scrive il messaggio da trasmettere e lo spedisce • il messaggio arriva al server SMTP del provider che si configura come client .. • .. e utilizzando il protocollo SMTP (Simple Mail Transfer Protocol) lo spedisce al server SMTP del dstinatario e lo deposita nella sua mail-box come funziona (2) Prelievo di un m essaggio (incoming mail) SERVER POP3 configurato client software di posta elettronica richiesta prelievo posta trasferimento posta ricevuta cassette postali UTENTE PROVIDER • l’utente controlla se è arrivata posta presso il suo server POP3 • in caso affermativo i messaggi in arrivo presenti nella sua mail-box vengono trasferiti all’utente convenzioni • mancando l’interazione diretta con il destinatario, si usano le faccette (smileys o emoticons) che accompagnano il testo con un’espressione: :-) sorriso ;-) occhiolino :-( scontento vedere www.eff.org/papers/eegtti/eeg_286.html • per convenzione il testo in maiuscolo è URLATO ! • gli americani usano spesso acronimi: AFAIK as far as I know a quanto ne so BTW by the way a proposito FYI for your information per tua informazione vedere www.access.digex.net/~ikind/babel96a.html cosa sono le news ? • Sono un sistema per lo scambio di messaggi email tra utenti che condividono lo stesso interesse • E’ possibile inviare messaggi a tutti gli iscritti e riceverne da tutti • Sono divise per argomenti, circa 10.000 gruppi, per più di 7.000.000 di utenti nel mondo • Hanno le stesse caratteristiche dell’e-mail, cioè immediatezza, economicità e multimedialità terminologia newsgroup uno specifico gruppo di interesse topic o gerarchia, una classificazione per categoria thread un filone di discussione in un newsgroup flame un messaggio cattivo, diseducato o provocatorio spam un messaggio ripetuto inutilmente Frame • Suddividono lo schermo in tante finestre autonome, ciascuna descritta da un file html • permettono di evitare di caricare più volte le stesse cose, ma frazionano ulteriormente lo spazio limitato dello schermo • conviene creare una versione a frame ed una senza Frame semplice verticale <FRAMESET rows=“50,*”> <FRAME NAME=“alto” SRC=“alto.htm”> <FRAME NAME=“centro” SRC=“centro.htm”> </FRAMESET> alto centro Frame orizzontale e verticale <FRAMESET rows=“50,*”> <FRAME NAME=“alto” SRC=“alto.htm”> <FRAMESET cols=“80,*”> <FRAME NAME=“sinistra” SRC=“sn.htm”> <FRAME NAME=“centro” SRC=“centro.htm”> </FRAMESET> alto </FRAMESET> sinistra centro Esercizio con i Frame 80 alto sinistra centro basso 100 50 Soluzione <FRAMESET rows=“80,*”> <FRAME NAME=“alto” SRC=“alto.htm”> <FRAMESET cols=“100,*”> <FRAME NAME=“sinistra” SRC=“sn.htm”> <FRAMESET rows=“*,50”> <FRAME NAME=“centro” SRC=“centro.htm”> <FRAME NAME=“basso” SRC=“basso.htm”> </FRAMESET> </FRAMESET> </FRAMESET> I comandi HTML per i FRAME • Attributi di FRAMESET – FRAMEBORDER=“yes|no” – BORDER=xx – BORDERCOLOR=“#RRGGBB” • Attributi di FRAME – SCROLLING=“yes|no|auto” – SRC=“xxx.htm” – FRAMEBORDER=“yes|no” – NAME=“yyy” – BORDERCOLOR=“#RRGGBB” – MARGINWIDTH=xx – MARGINHEIGHT=xx – NORESIZE Accesso ai vari frame • Per inserire in un frame un link ad un altro frame della stessa pagina: all’interno del frame sn.htm si vuole creare un link alla pagina testo1.htm <A HREF=“testo1.htm”>clicca</A> <A HREF=“testo1.htm” TARGET=“centro”>clicca</A> • Per richiamare una pagina a tutto schermo: <A HREF=“nuova.htm” TARGET=“_parent”>clicca</A> JavaScript Come la sceneggiatura di un film specifica le varie azioni degli attori sul set, così JavaScript è in grado di coordinare ed impostare le varie funzioni degli elementi che compongono le pagine HTML, cioè il testo, le immagini, le finestre, chiamati genericamente oggetti. che cos’è JavaScript? Il concetto base è quello di creare un linguaggio per scrivere semplici script (o gruppi di comandi da eseguire in un secondo momento) e includere questi script nelle pagine HTML. I principali linguaggi sono JavaScript e VBScript, entrambi orientati alla programmazione ad oggetti. VBScript deriva dal Visual Basic contenuto nelle principali applicazioni Office (Word, Excel, Access, ...). come inserire uno script? Per inglobare uno script nelle pagine si usa il comando SCRIPT, normalmente all'interno del tag HEAD: <SCRIPT language= "JavaScript"> // ma anche VBScript <!-- il codice JAVASCRIPT va inserito qui --> </SCRIPT> esempio: accesso tramite password <BODY> <FORM NAME="testform" onSubmit=false;> Scrivi qua la password:<BR> <INPUT TYPE="text" NAME="testoinput1" VALUE="” SIZE=15> <INPUT TYPE="button" NAME="button" Value="ENTRA" onClick=CalcolaPagina(this.form);><BR> </FORM> <BR>Per entrare nella pagina segreta devi immettere la password, avendo un browser che supporta javascript. </BODY> funzione in JavaScript function CalcolaPagina(form) { StringaImmessa = form.testoinput1.value; var Decodif=""; TabCaratteri="0123456789abcdefghijklmnopqrstuvwxyz._ ~ABCDEFGHIJKLMNOPQRSTUVWXYZ"; for(posiz=0; posiz < StringaImmessa.length; posiz++) { var QuestoChar = StringaImmessa.substring(posiz, posiz+1); var NuovaPos = TabCaratteri.indexOf(QuestoChar)^15; Decodif += TabCaratteri.substring(NuovaPos, NuovaPos+1); } location = Decodif + ".htm"; } esempio in esecuzione La password immessa viene decodificata e poi utilizzata come nome della pagina HTML richiesta. Esempio VBScript <HEAD> <SCRIPT language=“VBScript”> <!-Sub Ciao_OnClick Bottone che MsgBox “Ciao”,0,”Come stai?” apre una End Sub finestra --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=button VALUE=Premimi NAME=Ciao> </FORM> </BODY> Cascading Style Sheets • I C.S.S. sono la base del DHTML, e ne sono la caratteristica più diffusa. • Il termine a cascata deriva dall’ereditarietà dei caratteri dello stile, dal più generale allo specifico. • Uno style è un insieme di attributi di visualizzazione e di posizionamento sullo schermo. Estensione del nuovo stile • in linea <P STYLE=“text-align: justify; text-indent: 12px”> • in un singola pagina inserire nello HEAD <STYLE TYPE=“text/css”> <!-P { text-align: justify; text-indent: 12px } --> </STYLE> ed ora il comando <P> funziona diversamente Estensione dello stile ad un sito • in un insieme di pagine creare un file di nome NomeFoglio.css P{ text-align: justify; text-indent: 12px; } nel campo HEAD di tutte le pagine del sito: <LINK REL=StyleSheet HREF=“NomeFoglio.css” TYPE=“text/css”> ed ora il comando <P> funziona diversamente in tutte le pagine del sito Esempio <STYLE TYPE=“text/css”> <!-H3 { font-family:”Comic Sans MS”; font-style=normal; color=blue } CITE { font-family:Arial; font-style=italic; color=teal; word-spacing:-0.2em } --> </STYLE> Esempio2 <STYLE TYPE=“text/css”> <!-P { border-style: solid; border-width: thin; border-color:blue; } --> </STYLE> Senza utilizzare un comando Introdurre la seguente definizione di stile: .Attenzione { POSITION:relative; COLOR:beige; border:4pt; lightgreen dotted; background:black; text-align:center; height:50pt; width:220pt; font-size:20pt; font-weight:bold } e poi ricorrere al comando specifico SPAN <P>devi studiare di più, <SPAN CLASS=Attenzione>”Ricordatelo!”</SPAN> Suddividere in più livelli • Più oggetti di uno schermo possono essere situati nello stesso posto, creando una pila di oggetti, il cui attributo z-index vale 1 per la prima (bottom), 2 per quella sopra, … • ogni oggetto mantiene le proprie caratteristiche di trasparenza. organizzazioni degli ipertesti • a pezzi (chunky hypertext) • a flusso continuo (creamy hypertext) struttura di un ipertesto La struttura di un ipertesto può essere: • ad albero • a rete • a stella • a lista struttura di un ipertesto: ad albero • va bene per riviste o spiegazioni • rapida vista d’assieme e possibili approfondimenti • adegua la visita alle esigenze dell’utente struttura di un ipertesto: a rete va bene per musei, enciclopedie, ... è facile saltare dove si vuole occorre inserire strumenti di navigazione l’utente è libero di muoversi struttura di un ipertesto: a stella va bene per libri, manuali, ... tutte le pagine sono raggiungibili con un solo salto il centro stella deve essere “piccolo” struttura di un ipertesto: a lista va bene solo per libri riprodotti elettricamente è molto oneroso arrivare alla fine non è un ipertesto! struttura di un ipertesto Quale è la struttura migliore ? Stabilito che non esiste una struttura valida in assoluto, in pratica si adotta • quasi sempre una struttura mista o ... • diverse strutture in parti diverse dello stesso ipertesto
Scarica
