...

Nessun titolo diapositiva

by user

on
Category: Documents
28

views

Report

Comments

Transcript

Nessun titolo diapositiva
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
Fly UP