La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6.

Presentazioni simili


Presentazione sul tema: "Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6."— Transcript della presentazione:

1 Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6

2 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 2 World Wide Web: la ragnatela globale WWW (detto web o ragnatela ) è la rete costituita dai server che forniscono accesso alle loro informazioni tramite il protocollo HTTP (HypertText Transfer Protocol) gli host si collegano ai server usando un programma client detto browser (colui che curiosa)

3 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 3 Storia del web 1980: Tim Berners-Lee (CERN) sviluppa il programma "Enquire-Within-Upon-Everything" che consentiva di effettuare link tra diversi computer connessi in rete 1989: Tim Berners-Lee diffonde due documenti per raccogliere opinioni sul suo lavoro presso il CERN 1990: Il CERN appoggia ufficialmente il progetto viene coniato il nome World-Wide Web 1991: Sviluppo dei primi client ed apertura del WWW server del CERN

4 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 4 Storia del web 1992: Sviluppo del client con interfaccia a finestre in ambiente Xwindow viene rilasciata la lista dei primi 26 server WWW 1993: Viene rilasciato il primo browser per Macintosh viene rilasciato X-Mosaic di Marc Andreessen (NCSA) i server HTTP sono circa : Viene fondata la Mosaic Corporation (oggi Netscape Corp.) i siti WWW sono si tiene il primo meeting del "W3Consortium" presso il MIT il CERN sospende il supporto del progetto WWW 2000: …Centinaia di milioni di pagine disponibili ?!?

5 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 5 Il successo del web I protocolli precedentemente usati per il trasferimento dei file (FTP) prevedevano che i documenti fossero copiati sulla macchina per essere consultati le fasi di download e consultazione erano distinte Tramite il web è possibile consultare direttamente dei documenti online il trasferimento dei documenti viene effettuato automaticamente, in modo trasparente allutente

6 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 6 Il successo del web Consente di accedere in modo uniforme a informazioni di varia natura immagini, animazioni, suoni, filmati... (multimedialità) Con lintroduzione di componenti attive (form, applet, javascript, php,…) è anche possibile utilizzare i browser web per trasmettere informazioni dallutente al server

7 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 7 Le basi tecnologiche Le tecnologie che hanno permesso lampia diffusione del web sono: gestione degli ipertesti e della multimedialità disponibilità di client multiprotocollo (i browser) efficaci convenzioni per lidentificazione delle risorse utilizzo di un protocollo nella connessione browser-server web particolarmente semplice

8 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 8 Il punto di forza: la struttura ipertestuale È possibile "navigare" tra le pagine di documenti che si trovano sul medesimo computer o su computer diversi, magari a migliaia di chilometri l'uno dall'altro i riferimenti ad altri documenti sono specificati tramite link È semplice da usare: mediante luso di interfacce grafiche (browser) con modalità di interazione point-and-click

9 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 9 Ipertesti L'ipertesto è un testo che può essere letto sequenzialmente oppure seguendo i "link (rimandi) associati alle sue diverse parti II lettore può scegliere il percorso di lettura che preferisce, assecondando liberamente i suoi interessi

10 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 10 Esempio

11 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 11 Ipertesti In ogni punto del documento può comparire un punto di ancoraggio (anchor) per relazioni (link) ad unaltra parte del medesimo documento (hyperlink) ad un altro documento il linea viene visualizzato dai browser in modo diverso dal testo (in genere sottolineato) la selezione (point-and-click) viene interpretata dal browser come una richiesta di visualizzare il documento specificato dalla relazione

12 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 12 esempio

13 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 13 Multimedialità Indica linsieme delle tecnologie finalizzate alla gestione integrata di informazioni basate su media differenti testi singole immagini immagini in movimento (animazioni, filmati) suoni programmi

14 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 14 Architettura del web

15 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 15 Come funziona il WWW Il funzionamento del World Wide Web non differisce molto da quello delle altre applicazioni Internet Anche in questo caso il sistema si basa su una interazione tra un computer client ed un server

16 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 16 Architettura client-server In unarchitettura client-server ci sono due calcolatori connessi alla rete: un client che sottopone richieste al server un server in grado di rispondere alle richieste formulate da un client Ovviamente la comunicazione fra client e server può avvenire solo se i due hanno stabilito un protocollo comune di comunicazione

17 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 17 Il protocollo Il protocollo di comunicazione usato dal web e che regola la trasmissione dei documenti ipertestuali si chiama HyperText Transfer Protocol (HTTP) Si basa sul protocollo TCP/IP I documenti devono però essere in uno specifico formato: HyperText Markup Language (HTML)

18 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 18 Web: client-server Un web-server è un server su cui è in esecuzione un programma in grado di scambiare messaggi con un client-web tramite il protocollo HTTP Un client-web è un programma (browser) in grado di dialogare con un web-server (usando il protocollo HTTP)

19 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 19 Connessione diretta ad Internet Per visitare un sito Web con un browser, si deve specificarne lindirizzo (esplicitamente o selezionando un link) Il client invia la richiesta di connessione, formulata nel modo specificato da HTTP Ricevuta la richiesta, il server Web trasmette le informazioni al computer e il browser provvede a visualizzarle

20 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 20 Collegamento via modem Se siete collegati tramite un modem, allora le informazioni fra client e server passano attraverso il provider

21 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 21 Connessione browser-server web La connessione si realizza in cinque fasi: lutente utilizza il browser per preparare una richiesta il browser invia la richiesta (request) il server riceve la richiesta e opera per soddisfarla recupera il documento richiesto il server invia una risposta (response) il browser riceve la risposta, la interpreta e la presenta

22 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 22 Lo stato della richiesta Lo stato della richiesta corrente è visualizzato nella barra di stato del browser Se lindirizzo è sbagliato il browser segnalerà un messaggio di errore

23 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 23 I browser Tutti i browser implementano il protocollo HTTP, ma in genere sono multiprotocollo, sono in grado cioè di comunicare con altri tipi di server In genere fungono anche da client: gopher SMTP/POP/IMAP FTP, telnet NNTP

24 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 24 Lidentificazione delle risorse Per poter essere utilizzate le varie risorse disponibili sulla rete (i documenti sui server) devono essere identificabili in modo univoco I browser identificano le risorse tramite indirizzi detti URL (Uniform Resource Locator) Un indirizzo URL è così composto: protocollo://server:porta_TCP:/file_path_completo

25 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 25 Esempio di indirizzo URL Dato che la porta associata al protocollo HTTP è la 80 per default non è necessario specificarla Il nome dei file index.html è implicito se non viene specificato il nome del file completo, viene automaticamente cercato un file dal nome index.html

26 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 26 Terminologia utile Utilizzando e configurando i browser ci si imbatte spesso in alcuni termini che sono importanti per un uso corretto del web proxy motore di ricerca cookie applet javascript

27 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 27 I proxy Un proxy è un server (computer + programma) che svolge la funzione di "agente" per gli utenti di altri computer Configurando il proprio browser in modo che usi un proxy, le richieste di un documento non saranno fatte dal proprio computer direttamente al sito remoto, ma dal proxy server, che si preoccupa poi di fornirci il documento

28 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 28 Funzione dei proxy Il proxy dispone di una propria "cache", nella quale memorizza tutti i documenti recuperati negli ultimi tempi se un utente richiede di caricare un documento che è già presente nella cache, il proxy provvede a spedirglielo direttamente senza contattare il sito remoto, e quindi in tempi più brevi se il documento non è presente nella cache, il proxy contatta il sito remoto, recupera il documento, lo gira allutente e lo memorizza nella cache

29 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 29 I motori di ricerca Un motore di ricerca è un server che fornisce un servizio di ricerca sulla rete per parole chiave Il motore di ricerca periodicamente guarda i documenti sulla rete e li indicizza in base ad delle parole chiave Lutente specifica delle parole chiave, e in risposta il motore di ricerca gli fornisce una lista di link ai documenti contenenti quella parola chiave

30 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 30 I motori di ricerca I motori di ricerca più famosi:

31 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 31 Esempio

32 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 32 Una maschera di ricerca

33 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 33 Cookie È un meccanismo per la conservazione del valore di alcuni parametri durante la navigazione è possibile utilizzare i cookie per fare in modo che, ogni volta che il browser carica qualcosa da un sito, spedisca un cookie con le vostre preferenze in questo modo, il sito remoto potrà spedire delle pagine personalizzate

34 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 34 Uso dei cookie Facendo shopping in un sito di vendita via Internet, potete inserire i prodotti che vi interessano nel "carrello della spesa il server spedirà al vostro browser un cookie,che conterrà l'indicazione della vostra scelta d'ora in poi, ogni volta che voi richiamate una pagina dello stesso sito, il vostro browser segnalerà al server che voi avete già selezionato tale oggetto, rispedendogli il "cookie"

35 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 35 Applet, JavaScript Consentono di inserire dei programmi allinterno di page web applet: sono programmi eseguibili scritti in Java che possono essere eseguiti direttamente allinterno di un browser mediante linterprete Java che si interfaccia con il browser JavaScript: è un linguaggio di scripting, il codice del programma è contenuto direttamente nella pagina web e viene interpretato ed eseguito dal browser al momento del caricamento del documento

36 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 36 Il linguaggio di markup HTML

37 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 37 Generalità Un documento HTML è un file di testo ASCII dotato di opportuni tag che svolgono diverse funzioni formattazione dello stile del testo rimandi (link) ad altre risorse disponibili sul WWW definizione di maschere di inserimento dati inclusione di altri oggetti complessi

38 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 38 I tag I tag HTML sono racchiusi tra i simboli di maggiore e minore: alcuni tag prevedono un identificatore di inizio ( ) e di fine marcatura ( ) altri sono dei tag singoli (es.:, ). Esistono delle codifiche per rappresentare in modo universale ed indipendente dalla piattaforma i caratteri ASCII non standard (es.: lettere accentate)

39 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 39 I tag È il browser utilizzato dall'utente ad occuparsi di tradurre correttamente i tag HTML visualizzando una pagina leggibile ed includendo eventuali oggetti complessi immagini animazioni suoni

40 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 40 Un semplice esempio La mia pagina Benvenuti! Questa è la mia pagina. Visita il sito del DSI.

41 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 41 Alcuni tag Tag per la formattazione titoli:...,...,...,... paragrafo:... fine riga: linea: testo a spaziatura fissa preformattato:... Caratteri speciali lettere accentate : à= à ; è= è ; é= é ; ì= ì ; ò= ò ; ù= ù ; simboli : >= > ; <= & lt; &= & ;

42 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 42 I tag Tag per i caratteri tipo caratteri:... stile del testo: bold:... italic:... typewriter:... enfatizzato:... sottolineato:... ingrandimento... e riduzione... della dimensione del carattere apici:... e pedici...

43 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 43 Liste ed elenchi Primo elemento Secondo elemento Terzo elemento Primo elemento Secondo elemento Terzo elemento

44 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 44 Immagini È possibile includere nella pagina delle immagini È necessario indicare il nome del file informato GIF o JPEG specificandone la collocazione mediante una URL: testo alternativo

45 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 45 esempio Questa è una immagine visualizzata alla destra del testo...

46 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 46 Collegamenti ipertestuali Definizione di una hotword con collegamento ad una URL hotword Definizione di un'ancora da utilizzare per un link ad un punto specifico all'interno del documento corrente testo

47 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 47 Collegamenti ipertestuali Collegamento ipertestuale ad un'ancora definita all'interno di un documento hotword Definizione di un link ad un indirizzo di posta elettronica per l'invio di una Nominativo

48 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 48 Form È possibile costruire delle maschere (form) di input di dati da passare come parametri a procedure CGI (Common Gateway Interface) appositamente predisposte sul server web che acquisiscono i dati e li elaborano

49 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 49 Form Form Your Name: Your Address: Message:

50 AA 2005/06 © Alberti, Bruschi, RostiWorld Wide Web, ipertesti e HTML 50


Scaricare ppt "Modulo di Informatica World Wide Web, ipertesti e HTML Lezione 6."

Presentazioni simili


Annunci Google