il modello web 1:il browser del client chiede al domain name server l'indirizzo numerico...

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:[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

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



</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”>  </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”>  </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”></STYLE>

Esempio2

<STYLE TYPE=“text/css”></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

il modello web 1:il browser del client chiede al domain name server l'indirizzo numerico...

Documents