View
214
Download
0
Category
Preview:
Citation preview
il modello web
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
client
DNS server
12 3 4 56
server
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:
http://www.scuola.it/indice.html
protocollonome del sito
nome del documento
possibili protocolli• http ipertesti HTML
http://www.scuola.it/indice.html
• ftp trasferimento file remotiftp://ftp.scuola.it/pub/indice.txt
• file file localefile:///C|/office/word/testo.txt
• news gruppi di interessenews:scuola.it
• mailto posta elettronicamailto:memo@unive.it
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
SCUOLA
sito didattico dedicato al
mondo universitario
autori
<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>
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)
• 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
INT
ER
NE
T
T rasm issio n e d i u n m essag g io (outgoing m ail)
UT ENT E
messaggiotrasmesso
softw aredi posta
elettronica
SERVER SM T Pconfigurato client
PROVIDER
cassettepostali
SERVER SM T Pconfigurato server
PROVIDERdel destinatario
come funziona (2)
• 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
P rel iev o d i u n m essag g io (incom ing m ail)
UT ENT E
richiesta prelievo posta
softw aredi posta
elettronica
SERVER POP3configurato c lient
PROVIDER
cassettepostali
trasferimento posta ricevuta
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>
centro
alto
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></FRAMESET>
centro
alto
sinistra
Esercizio con i Frame
centro
alto
sinistra
basso
80
50
100
<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>
Soluzione
I comandi HTML per i FRAME
• Attributi di FRAMESET– FRAMEBORDER=“yes|no”– BORDER=xx– BORDERCOLOR=“#RRGGBB”
• Attributi di FRAME– SRC=“xxx.htm”– NAME=“yyy”– MARGINWIDTH=xx– MARGINHEIGHT=xx
– SCROLLING=“yes|no|auto”– FRAMEBORDER=“yes|no”– BORDERCOLOR=“#RRGGBB”– 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>
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";
}
funzione in JavaScript
esempio in esecuzione
La password immessa viene decodificata e poi utilizzatacome nome della pagina HTML richiesta.
Esempio VBScript
<HEAD> <SCRIPT language=“VBScript”> <!-- Sub Ciao_OnClick MsgBox “Ciao”,0,”Come stai?” End Sub --> </SCRIPT></HEAD><BODY> <FORM> <INPUT TYPE=button VALUE=Premimi NAME=Ciao> </FORM></BODY>
Bottone cheapre unafinestra
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 ipertestiorganizzazioni degli ipertesti
• a pezzi (chunky hypertext)
• a flusso continuo (creamy hypertext)
struttura di un ipertestostruttura di un ipertesto
La struttura di un ipertesto può essere:
• ad albero
• a rete
• a stella
• a lista
struttura di un ipertesto: ad alberostruttura 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 retestruttura di un ipertesto: a rete
va bene per musei, va bene per musei, enciclopedie, ...enciclopedie, ...
è facile saltare dove si è facile saltare dove si vuolevuole
occorre inserire strumenti occorre inserire strumenti di navigazionedi navigazione
l’utente è libero di l’utente è libero di muoversimuoversi
struttura di un ipertesto: a stellastruttura di un ipertesto: a stella
va bene per libri, va bene per libri, manuali, ...manuali, ...
tutte le pagine sono tutte le pagine sono raggiungibili con un raggiungibili con un solo saltosolo salto
il centro stella deve il centro stella deve essere “piccolo”essere “piccolo”
struttura di un ipertesto: a listastruttura di un ipertesto: a lista
va bene solo per libri va bene solo per libri riprodotti riprodotti elettricamenteelettricamente
è molto oneroso è molto oneroso arrivare alla finearrivare alla fine
non è un ipertesto!non è un ipertesto!
struttura di un ipertestostruttura 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
Recommended