Internet – WWW - HTML

1. Internet – WWW - HTML • Cristina Gena • cgena@di.unito.it • http://www.di.unito.it/˜cgena/ cristina gena - [internet web html]

2. Tecnologie informaTiche e comunicazione • Cosa intendiamo? • Tecnologia dei computer + tecnologia delle comunicazioni • Tecnologie che combinano elaborazionedell’informazione (dati) e comunicazioni ad alta velocità per la trasmissionedell’informazione • ICT: Information & Communication Technology cristina gena - [internet web html]

3. ICT • Da una visione del computer come sistema di calcolo "stand alone": i calcolatori sono isolati l'uno dall'altro e possono essere utilizzati solo da chi ha accesso diretto ad essi. Interazione uomo-macchina • Ad una visione del computer come sistema di elaborazione di informazioni in grado trasmettere e ricevere informazioni da altri computer a cui è collegato tramite reti di comunicazione cristina gena - [internet web html]

4. ICT • interazione uomo-calcolatore remoto • interazione fra utenti mediata da calcolatori cristina gena - [internet web html]

5. Comunicazioni • Rete: sistema di comunicazione che connette due o più computer -> creazione di un cyberspazio in cui i nuovi utenti di computer possono interagire per vari motivi: • accedere a informazioni collocate su computer diversi dal proprio • accedere a servizi offerti da computer diversi dal proprio • scambio di messaggi (e-mail) • videoconferenze…etc. cristina gena - [internet web html]

6. Internet & www • Cyberspazio: isoliamo 2 aspetti importanti • Internet, rete globale che unisce reti più piccole che si trovano in diversi paesi/continenti; supporta diversi servizi, tra cui: • World Wide Web (o WWW/ W3): servizio supportato da Internet: consiste in un insieme di documenti localizzati su computerdiversi fra loro connessi dalla rete, in cui l’informazione viene presentata in formato multimediale (testo + immagini + suoni + video…); cristina gena - [internet web html]

7. Internet • anni 1960 Guerra fredda • '65-'69 Progetto ArpanetARPA (Advanced Research Projects Agency) • 1. indipendenza da ogni nodo o tratta • 2. reinstradamento automatico • 3. efficienza e affidabilità • 1969 Nasce Arpanet: primi quattro nodi • 1974 Definizione TCP/IP (integrato poi in in UNIX) • 1981 RFC 791, 792, 793,.. cristina gena - [internet web html]

8. Internet 1983 Milnet, la parte per scopi militari, viene scorporata da Arpanet 1984. Introduzione del DNS 1986 NSFNET (National Science Foundation):rete accademica parallela per università basata su TCP/IP.  Collegamento con Arpanet 1989 circa 100.000 hosts  integrazione nuove reti 1990 si dissolve Arpanet | 1990 Nascita del WWW cristina gena - [internet web html]

9. Internet 1992 Internet Society (ISOC): respons. di guidare sviluppi di Internet 1993 Internic: gestore dei domini su internet Es .com, .org, .net, ecc. 1998 Prima dorsale per Internet 2 NGI (Next Generation Internet), IPv6 oggi oltre 10.000.000 host cristina gena - [internet web html]

10. www • WWW: tutti i documenti sono accessibili dall’utente del singolo PC tramite programmi di navigazione detti browser; • i vari documenti contengono dei collegamenti (link) • link: suggeriscono di saltare da un documento a un altro che eventualmente si trova su un altro computer della rete cristina gena - [internet web html]

11. www • -> lettura ipertestuale dei miliardi di documenti interconnessi che costituiscono il WWW. • Lettura ipertestuale versus lettura lineare di un libro cristina gena - [internet web html]

12. cristina gena - [internet web html]

13. Internet & www • Internet e WWW sono la stessa cosa? • NO, anche se il grande successo del WWW ha comportato che nell’uso quotidiano queste parole vengano usate come sinonimi • La rete vera e propria, che supporta la navigazione da un documento all’altro del WWW è Internet -> www servizio fornito da Internet • Internet fornisce anche molti altri servizi oltre al Web: es. posta elettronica (email), il trasferimento di dati fra computer connessi (ftp), l’accesso in remoto ad altri computer collegati (telnet) cristina gena - [internet web html]

14. Client e Server • Ci si riferisce non tanto a tipi diversi di computer ma a un particolare modo di utilizzare computer connessi, a un modello di interazione -> modello client/server • Server: fornitore di servizi • computer centrale • contiene insiemi di dati (database) e programmi per i client • Client: fruitore di servizi • connessi tramite una rete cablata o senza filo (wireless) • PC, workstation, … cristina gena - [internet web html]

15. Client Server cristina gena - [internet web html]

16. Cos'è internet? • Milioni di dispositivi di calcolo • tra loro interconnessi: host o • end-systems • Pc, workstation, server • eseguono applicazioni • Canali di comunicazione • fibra, rame, radio, satellite • Router:instradano • pacchetti di dati attraverso • la rete cristina gena - [internet web html]

17. Accesso a Internet • Accesso istituzionale: aziende università (collegati attraverso una LAN, Local Area Network) • E’ possibile essere in Internet, anche in modo • temporaneo, chiamando un fornitore di servizi • Internet mediante un modem a 56 Kb, oppure essere sempre connessi tramite un modem ADSL o la fibra ottica • -> Si parla di Internet Service • Provider (ISP): es. Tiscali, • Libero, FastWeb… cristina gena - [internet web html]

18. unito google tiscali cristina gena - [internet web html]

19. Internet e protocolli • la comunicazione delle macchine in Internet è governata da un insieme di protocolli di rete: • una macchina in Internet • usa la famiglia di protocolli TCP/IP • In informatica i protocolli definiscono delle regole comuni per lo scambio delle informazioni cristina gena - [internet web html]

20. request Server client response Come funziona il Web • Architettura client-server • Un server è programma “in ascolto” su una porta TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al client. • Un client è un programma che si connette ad un server, fa una richiesta ed aspetta una risposta. • Un server, generalmente, può servire più client contemporaneamente. cristina gena - [internet web html]

21. Come funziona il Web • Ipertesto • Un ipertesto è un documento (o un insieme di documenti) costituito da un insieme di nodi e da un insieme di archi che collegano i vari nodi. Un ipertesto può essere visto come una rete, dentro la quale si può navigare, passando da un nodo all’altro percorrendo gli archi. • HTTP • HTTP (HyperText Transfer Protocol) è il protocollo di comunicazione utilizzato da un client (browser) e da un server (HTTP Server) per trasferire ipertesti (file che contengono ipertesti). cristina gena - [internet web html]

22. Come funziona il Web • World Wide Web • Il WWW è un gigantesco ipertesto. I nodi (pagine Web) risiedono su macchine sparse in tutto il mondo e collegate tra loro tramite Internet. • Percorrere un arco (hyperlink - collegamento ipertestuale) significa attivare una connessione tra un client (browser) e un server. Questa connessione utilizza il protocollo HTTP e corrisponde alla richiesta di una pagina Web che viene inviata dal server e visualizzata dal client. • Il WWW è un ipertesto “aperto” perché la sua strutttura non è definita a priori, ma chiunque può inserire nuovi nodi (pagine Web) e nuovi archi (collegamenti). cristina gena - [internet web html]

23. Come funziona il Web • Brevissima storia del World Wide Web • Il WWW nasce nel 1990 al CERN (European Particle Physics Laboratory) di Ginevra, come mezzo per facilitare la collaborazione scientifica tra centri di ricerca di fisica delle particelle. Il suo ideatore è il fisico Tim Berners-Lee. • La prima interfaccia grafica per il WWW (il browser Mosaic) uscì all’inizio del 1993, per opera di Marc Andreessen, che un anno dopo fondò la Netscape Communication Corp. • Nel 1994, CERN e MIT stipularono un accordo per costituire il Consorzio WWW (W3C), dedicato alla standardizzazione e allo sviluppo di protocolli e linguaggi per il Web. Al W3C hanno in seguito aderito centinaia di altri enti e resta il principale punto di riferimento per tutto ciò che riguarda il Web (www.w3.org) cristina gena - [internet web html]

24. Come funziona il Web • Pagina Web • Una pagina Web è un nodo dell’ipertesto WWW. Una pagina Web può contenere testo, immagini, filmati, suoni, ecc... • Sito Web • Un sito Web è un insieme di pagine Web, generalmente residenti sullo stesso server, gestite da un unico Web master e con un contenuto omogeneo. • Home page • Una home page è generalmente la pagina di accesso ad un sito Web. cristina gena - [internet web html]

25. Come funziona il Web Home page: esempio cristina gena - [internet web html]

26. Come funziona il Web • URL • Un URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una pagina Web. • Ha la seguente forma: • http://www.di.unito.it/~cgena/index.html protocollo nome dellacartella nome del file DNS del sito Web cristina gena - [internet web html]

27. Come funziona il Web • DNS • Il DNS (Domain Name System) è un sistema di denominazione gerarchico, ripartito in domini, sotto-domini, sotto-sotto-domini, ecc… • Un sito Web viene univocamente identificato dal suo DNS: • www.di.unito.it = sito Web del Dipartimento di Informatica dominio sotto-dominio server (host) sotto-sotto-dominio DNS Server: programma che conosce le corrispondenze tra DNS e indirizzi IP dato un DNS (www.di.unito.it) restituisce l’IP (130.192.239.1) necessario per la connessione cristina gena - [internet web html]

28. Come funziona il Web • I Web browser • Un Web browser è un programma, dotato di interfaccia grafica, che: • interagisce con un server, richiedendone i servizi (per es. pagine Web) • visualizza le pagine Web, mostrandone il contenuto e interpretando le indicazioni relative all’aspetto (colori, immagini, tipi di carattere, ecc…). cristina gena - [internet web html]

29. Come funziona il Web • I Web browser: Microsoft Internet Explorer cristina gena - [internet web html]

30. Come funziona il Web • I Web browser: Mozilla Firefox cristina gena - [internet web html]

31. Come funziona il Web • I Web browser: funzioni principali • Non descriviamo tutte le funzioni dei browser in dettaglio: l’interfaccia utente infatti è molto intuitiva ed è facile imparare ad usarla (anche senza manuale…) Vai al seguente indirizzo (URL) Torna alla pagina precedente/ Vai alla pagina successiva Lista di siti (URL) “interessanti” (archiviati dall’utente) cristina gena - [internet web html]

32. Come funziona il Web • Cosa vuol dire “navigare” sul Web • Quando un utente si connette ad un sito Web, per es. facendo click su un link, succedono le seguenti cose: • Il browser analizza l’URL • Chiede al DNS Server l’indirizzo IP corrispondente al DNS contenuto nell’URL • Effettua una connessione al server corrispondente all’IP ricevuto e gli invia una richiesta per il file indicato nell’URL • Il server risponde inviando il file richiesto • Il browser intepreta il file ricevuto, visualizzandolo secondo le specifiche in esso contenute cristina gena - [internet web html]

33. request (url) Server client elaborazione ? Server client  pagina response (pagina) Server client Come funziona il Web • Nel caso più semplice l'URL contiene l'indirizzo di una pagina HTML(per es. http://www.di.unito.it/~cgena/dida.html): • il contenuto è fisso, definito nel momento in cui la pagina HTML viene scritta • Pagine Web "dinamiche" = pagine il cui contenuto viene generato (selezionato, composto) al momento della richiesta cristina gena - [internet web html]

34. Come funziona il Web Pagine Web dinamiche Client-side: JavaScript (e VBScript) Java Applet NB: Per ogni tecnologia è necessario che il Browser la supporti (sappia interpretarla)! Server-side: ASP (Active Server Pages) PHP JSP (Java Server Pages) Java Servlet + XML NB: Per ogni tecnologia è necessario che il Server la supporti (sappia interpretarla)! cristina gena - [internet web html]

35. Pagine Web dinamiche: esempi cristina gena - [internet web html]

36. Pagine Web dinamiche: esempi cristina gena - [internet web html]

37. Pagine Web dinamiche: esempi cristina gena - [internet web html]

38. L’informazione strutturata • L’informazione è strutturata quando è dotata di una precisa struttura che ne rende più semplice ed efficiente la ricerca e la consultazione • Si pensi ad esempio al catalogo di una biblioteca e a come potrebbero essere strutturati i dati cristina gena - [internet web html]

39. Questa informazione probabilmente risiede in una base dati cristina gena - [internet web html]

40. cristina gena - [internet web html]

41. XML (Extensible Markup Language ) • <?xml version="1.0" encoding="iso-8859-1"?> • <rubrica> • <!-- istanze dell'elemento contatto --> • <contatto> • <nome>Andrea</nome> • <cognome>Crevola</cognome> • <telefono>011-555-1234</telefono> • <email>andrea.crevola@3juice.com</email> • </contatto> • <contatto> • <nome>Mario</nome> • <cognome>Rossi</cognome> • <telefono>011-555-5678</telefono> • <email>mario.rossi@libero.it</email> • </contatto> • </rubrica> cristina gena - [internet web html]

42. HTMLHyperText Markup Language cristina gena - [internet web html]

43. HTMLHyperText Markup Language Linguaggio base per produrre documenti per World Wide Web (WWW o WEB, ragnatela mondiale di informazioni..) Documenti WEB pagine ipertestuali che contengono contenuti multimediali • testo • immagini • suoni • legami ipertestuali a - altre pagine - programmi - immagini, suoni, ...  Pagine localizzate su server web e visualizzate da un client (browser) cristina gena - [internet web html]

44. pagina papers: link3 home page: link1 link2 pagina di unito pagina del coreplink4 HTMLHyperText Markup Language L'Ipertesto è un insieme di testi o pagine leggibili con l'ausilio di un'interfaccia elettronica, in maniera non sequenziale, per tramite di particolari parole che si chiamano hyperlink (rimandi), che costituiscono un rete raggiata o variamente incrociata di informazioni organizzate secondo criteri paritetici o gerarchici.(http://it.wikipedia.org/wiki/Ipertesto ) cristina gena - [internet web html]

45. HTMLHyperText Markup Language Si parla di contenuti multimediali, specie in ambito informatico, quando per comunicare un'informazione riguardo a qualcosa ci si avvale di molti media, cioè mezzi di comunicazione diversi: immagini in movimento (video), immagini statiche (fotografie), musica e testo. (http://it.wikipedia.org/wiki/Multimedialit%C3%A0) cristina gena - [internet web html]

46. cristina gena - [internet web html]

47. HTML - HyperText Markup Language HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente dei comandi per • formattazione • strutturazione del layout • inserimento parti multimediali • link ipertestuali I comandi (TAG) hanno una forma sintattica particolare <nome-tag> informazioni </nome-tag>  I comandi (tag) generalmente hanno nomi mnemonici e significativi… cristina gena - [internet web html]

48. Specifiche HTML 4 http://www.w3.org/TR/html4/ cristina gena - [internet web html]

49. Pagina visualizzata nel browser Codice html della pagina Visualizza > HTML Visualizza > sorgente pagina cristina gena - [internet web html]

50. HTML Un documento HTML è costituito da due parti** <html> <head> descrizione delle caratteristiche del documento </head> <body> documento vero e proprio </body> </html> ** abituiamoci da subito a scrivere i tag minuscoli…(vedremo più avanti perché) cristina gena - [internet web html]