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.

Presentazione sul tema: "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."— Transcript della presentazione:

1 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

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

3 possibili protocolli httpipertesti HTML http://www.scuola.it/indice.html ftptrasferimento file remoti ftp://ftp.scuola.it/pub/indice.txt filefile locale file:///C|/office/word/testo.txt newsgruppi di interesse news:scuola.it mailtoposta elettronica mailto:memo@unive.it

4 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........

5 esempio di documento HTML SCUOLA sito didattico dedicato al mondo universitario autori Scuola sito didattico dedicato al mondo universitario autori

6 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

7 come funziona (1) lutente 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

8 come funziona (2) lutente controlla se è arrivata posta presso il suo server POP3 in caso affermativo i messaggi in arrivo presenti nella sua mail-box vengono trasferiti allutente

9 convenzioni mancando linterazione diretta con il destinatario, si usano le faccette (smileys o emoticons) che accompagnano il testo con unespressione: :-) sorriso ;-) occhiolino :-( scontento vedere www.eff.org/papers/eegtti/eeg_286.html per convenzione il testo in maiuscolo è URLATO ! gli americani usano spesso acronimi: AFAIKas far as I knowa quanto ne so BTWby the waya proposito FYIfor your informationper tua informazione vedere www.access.digex.net/~ikind/babel96a.html

10 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 delle-mail, cioè immediatezza, economicità e multimedialità

11 terminologia newsgroupuno specifico gruppo di interesse topico gerarchia, una classificazione per categoria threadun filone di discussione in un newsgroup flameun messaggio cattivo, diseducato o provocatorio spamun messaggio ripetuto inutilmente

12 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

13 Frame semplice verticale centro alto

14 Frame orizzontale e verticale centro alto sinistra

15 Esercizio con i Frame centro alto sinistra basso 80 50 100

16 Soluzione

17 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

18 Accesso ai vari frame Per inserire in un frame un link ad un altro frame della stessa pagina: allinterno del frame sn.htm si vuole creare un link alla pagina testo1.htm clicca Per richiamare una pagina a tutto schermo: clicca

19 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.

20 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,...).

21 come inserire uno script? Per inglobare uno script nelle pagine si usa il comando SCRIPT, normalmente all'interno del tag HEAD: // ma anche VBScript

22 esempio: accesso tramite password Scrivi qua la password: <INPUT TYPE="text" NAME="testoinput1" VALUE=" SIZE=15> <INPUT TYPE="button" NAME="button" Value="ENTRA" onClick=CalcolaPagina(this.form);> Per entrare nella pagina segreta devi immettere la password, avendo un browser che supporta javascript.

23 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

24 esempio in esecuzione La password immessa viene decodificata e poi utilizzata come nome della pagina HTML richiesta.

25 Esempio VBScript <!-- Sub Ciao_OnClick MsgBox Ciao,0,Come stai? End Sub --> Bottone che apre una finestra

26 Cascading Style Sheets I C.S.S. sono la base del DHTML, e ne sono la caratteristica più diffusa. Il termine a cascata deriva dallereditarietà dei caratteri dello stile, dal più generale allo specifico. Uno style è un insieme di attributi di visualizzazione e di posizionamento sullo schermo.

27 Estensione del nuovo stile in linea in un singola pagina inserire nello HEAD <!-- P { text-align: justify; text-indent: 12px } --> ed ora il comando funziona diversamente

28 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 funziona diversamente in tutte le pagine del sito

29 Esempio <!-- H3 { font-family:Comic Sans MS; font-style=normal; color=blue } CITE { font-family:Arial; font-style=italic; color=teal; word-spacing:-0.2em } -->

30 Esempio2 <!-- P { border-style: solid; border-width: thin; border-color:blue; } -->

31 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 devi studiare di più, Ricordatelo!

32 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.

33 organizzazioni degli ipertesti a pezzi (chunky hypertext) a flusso continuo (creamy hypertext)

34 struttura di un ipertesto La struttura di un ipertesto può essere: ad albero a rete a stella a lista

35 struttura di un ipertesto: ad albero va bene per riviste o spiegazioni rapida vista dassieme e possibili approfondimenti adegua la visita alle esigenze dellutente

36 struttura di un ipertesto: a rete ä va bene per musei, enciclopedie,... ä è facile saltare dove si vuole ä occorre inserire strumenti di navigazione ä lutente è libero di muoversi

37 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

38 struttura di un ipertesto: a lista ä va bene solo per libri riprodotti elettricamente ä è molto oneroso arrivare alla fine ä non è un ipertesto!

39 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