Introduzione al Web Concetti Fondamentali Dott. Chiara Braghin [email protected] Corso IFTS...

Introduzione al WebConcetti Fondamentali

Introduzione al WebConcetti Fondamentali

Dott. Chiara Braghin [email protected]

Dott. Chiara Braghin [email protected]

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

C. Braghin - Introduzione al Web 2

Obiettivi del corsoObiettivi del corso

Obiettivi del corso: fornire un’introduzione al Web come strumento di comunicazione, in particolare dare agli studenti le conoscenze di base per impostare e costruire un sito web ben strutturato.

Sondaggio: Quanti di voi utilizzano Internet per lavoro? Quanti di voi sanno cos’è un browser? Quanti di voi hanno una pagina Web e/o un blog? Quanti di voi hanno una connessione Internet a casa? Quanti di voi utilizzanto quotidianamente il PC per lavoro?

Quali applicazioni utilizzate? Cosa vi aspettate da questo corso?

Obiettivi del corso: fornire un’introduzione al Web come strumento di comunicazione, in particolare dare agli studenti le conoscenze di base per impostare e costruire un sito web ben strutturato.

Sondaggio: Quanti di voi utilizzano Internet per lavoro? Quanti di voi sanno cos’è un browser? Quanti di voi hanno una pagina Web e/o un blog? Quanti di voi hanno una connessione Internet a casa? Quanti di voi utilizzanto quotidianamente il PC per lavoro?

Quali applicazioni utilizzate? Cosa vi aspettate da questo corso?


Reti di computerReti di computer

Intranet


Collegamento di reti di computerCollegamento di reti di computer

Router

Intranet

Intranet


Internet: una rete di reti

a

b

c

d

e

f


Internet: Indirizzo IP

a

b

c

d

e

f

Ogni elaboratore connesso a Internet è univocamente individuato da un numero unico, detto indirizzo IP (IP=Internet Protocol) fatto di 4 interi fra 0 e 255.

157.138.13.1

157.138.13.2

163.13.13.3


Protocollo IPProtocollo IP

Indica le regole che governano la trasmissione di messaggi su Internet:

• Ogni comunicazione viene spezzettata in pacchetti di informazioni

• Ogni pacchetto viene corredato di informazioni per la sua trasmissione, fra cui indirizzo IP di mittente e destinatario

• Ogni pacchetto viene inviato singolarmente

• Ogni singolo pacchetto può seguire strade diverse

Indica le regole che governano la trasmissione di messaggi su Internet:

• Ogni comunicazione viene spezzettata in pacchetti di informazioni

• Ogni pacchetto viene corredato di informazioni per la sua trasmissione, fra cui indirizzo IP di mittente e destinatario

• Ogni pacchetto viene inviato singolarmente

• Ogni singolo pacchetto può seguire strade diverse


Protocollo IP: instradamento

a

b

c

d

e

f


Domain Name System (DNS)Domain Name System (DNS)

Un insieme di convenzioni per dare a ogni computer connesso a Internet un nome mnemonico associato ad un indirizzo IP

Un insieme di convenzioni per dare a ogni computer connesso a Internet un nome mnemonico associato ad un indirizzo IP

Esempio:

venus.disco.unimib.itnome del dominio

(a più livelli)nome del computer


Il World Wide WebIl World Wide Web

Una particolare applicazione di Internet, un mezzo di comunicazione globale, interattivo, multimediale e ipertestuale che ha cambiato radicalmente il modo di comunicare e lavorare.

L’idea di base: archiviare pagine di ipertesto su computer collegati tra loro tramite

Internet permettendo di linkarle fra loro, (indipendendentemente dalla loro

collocazione fisica) permettendone l’accesso da qualunque computer in Internet specificandone soltanto un nome simbolico, detto URL (Uniform

Resource Locator)

Su quali tecnologie ed applicazioni si basa: Internet e il protocollo HTTP Il concetto di ipertesto Il linguaggio HTML Il browser

Una particolare applicazione di Internet, un mezzo di comunicazione globale, interattivo, multimediale e ipertestuale che ha cambiato radicalmente il modo di comunicare e lavorare.

L’idea di base: archiviare pagine di ipertesto su computer collegati tra loro tramite

Internet permettendo di linkarle fra loro, (indipendendentemente dalla loro

collocazione fisica) permettendone l’accesso da qualunque computer in Internet specificandone soltanto un nome simbolico, detto URL (Uniform

Resource Locator)

Su quali tecnologie ed applicazioni si basa: Internet e il protocollo HTTP Il concetto di ipertesto Il linguaggio HTML Il browser


Il concetto di ipertesto (1)Il concetto di ipertesto (1)

Un ipertesto è una struttura informativa formata da un insieme di documenti, collegati tra loro tramite riferimenti ipertestuali, denominati hyperlink o link.

Questi documenti possono essere costituiti da testo, immagini, suoni, ecc.

A differenza del normale testo, che deve essere letto sequenzialmente, i link permettono a chi naviga l’ipertesto di accedere alle sue componenti in un ordine non rigido, ma seguendo un percorso a piacere tra quelli possibili al suo interno.

Un ipertesto è una struttura informativa formata da un insieme di documenti, collegati tra loro tramite riferimenti ipertestuali, denominati hyperlink o link.

Questi documenti possono essere costituiti da testo, immagini, suoni, ecc.

A differenza del normale testo, che deve essere letto sequenzialmente, i link permettono a chi naviga l’ipertesto di accedere alle sue componenti in un ordine non rigido, ma seguendo un percorso a piacere tra quelli possibili al suo interno.


Il concetto di ipertesto (2)Il concetto di ipertesto (2)

Anche se i documenti che si trovano sul web hanno una natura ipertestuale, l’uso di questo termine non è necessariamente collegato all’accessibilità di un documento sul web.

Il linguaggio HTML permette di scrivere gli ipertesti per il web. Si tratta di documenti memorizzati sui server web che vengono visualizzati dai client web, ovvero dai browser (Netscape Navigator, Microsoft Internet Explorer, Opera, ...).

Anche se i documenti che si trovano sul web hanno una natura ipertestuale, l’uso di questo termine non è necessariamente collegato all’accessibilità di un documento sul web.

Il linguaggio HTML permette di scrivere gli ipertesti per il web. Si tratta di documenti memorizzati sui server web che vengono visualizzati dai client web, ovvero dai browser (Netscape Navigator, Microsoft Internet Explorer, Opera, ...).


lettura sequenziale

pag1 pag2 pag3

pag4

pag7pag5pag6

Organizzazione di un testoOrganizzazione di un testo


Esempio di ipertestoEsempio di ipertesto

pagina html

link

lettura non sequenziale seguendo legami associativi


Testo attivo

Immagine attiva

BottoneTab


Client-serverClient-server

Il WWW usa il modello client-server per lo scambio di informazioni il client (browser), programma applicativo che “gira”

sull’elaboratore dell’utente il server, programma applicativo che “gira” sull’elaboratore del

fornitore di informazioni (provider) la rete

Funzionamento della comunicazione tra browser e provider: ogni utente può richiedere informazioni attraverso il suo programma

client la richiesta “viaggia” attraverso la rete fino a raggiungere

l’elaboratore server il server interpreta la richiesta e restituisce all’elaboratore client un

file HTML contenente le informazioni desiderate

Il WWW usa il modello client-server per lo scambio di informazioni il client (browser), programma applicativo che “gira”

sull’elaboratore dell’utente il server, programma applicativo che “gira” sull’elaboratore del

fornitore di informazioni (provider) la rete

Funzionamento della comunicazione tra browser e provider: ogni utente può richiedere informazioni attraverso il suo programma

client la richiesta “viaggia” attraverso la rete fino a raggiungere

l’elaboratore server il server interpreta la richiesta e restituisce all’elaboratore client un

file HTML contenente le informazioni desiderate


Internet e il World Wide Web

INTERNET

Pagina (file)Link


Uniform Resource Locator (URL)Uniform Resource Locator (URL)

Ogni pagina web viene identificata specificandone il “contenitore”, cioè:

- il nome del computer che la contiene

- il nome del file all’interno di tale computer

Esempio:

http://www.repubblica.it/index.html

Ogni pagina web viene identificata specificandone il “contenitore”, cioè:

- il nome del computer che la contiene

- il nome del file all’interno di tale computer

Esempio:

http://www.repubblica.it/index.html

nome del dominio nome del file


Il protocollo HTTPIl protocollo HTTP

Il protocollo HTTP “HyperText Transfer Protocol” definisce le regole che governano il trasferimento di pagine web dal computer che le archivia (“server”) al computer che le richiede (“client”)

Browser Il programma che sta sul computer “client”, in grado di

richiedere pagine HTML (via HTTP) formattarle come prescritto (via HTML)

I browser più noti sono Firefox e Explorer (Opera, Mozilla, etc.)

Il protocollo HTTP “HyperText Transfer Protocol” definisce le regole che governano il trasferimento di pagine web dal computer che le archivia (“server”) al computer che le richiede (“client”)

Browser Il programma che sta sul computer “client”, in grado di

richiedere pagine HTML (via HTTP) formattarle come prescritto (via HTML)

I browser più noti sono Firefox e Explorer (Opera, Mozilla, etc.)


I linguaggi di MarkupI linguaggi di Markup

In un documento il markup si trova il codice che contiene le informazioni per la sua formattazione

Il testo è costituito da due parti: il contenuto vero e proprio le “istruzioni” o “meta-informazioni” (spesso chiamate tag) che

specificano come il contenuto deve essere rappresentato

Gli ipertesti del web sono scritti usando il linguaggio HypeText Markup Language (HTML) HTML non è un linguaggio di programmazione I documenti HTML sono dei file in formato testo con

l’estensione .html o .htm I browser leggono i documenti HTML e li visualizzano interpretando

le specifiche di formattazione in modo sequenziale

In un documento il markup si trova il codice che contiene le informazioni per la sua formattazione

Il testo è costituito da due parti: il contenuto vero e proprio le “istruzioni” o “meta-informazioni” (spesso chiamate tag) che

specificano come il contenuto deve essere rappresentato

Gli ipertesti del web sono scritti usando il linguaggio HypeText Markup Language (HTML) HTML non è un linguaggio di programmazione I documenti HTML sono dei file in formato testo con

l’estensione .html o .htm I browser leggono i documenti HTML e li visualizzano interpretando

le specifiche di formattazione in modo sequenziale


Il world wide web: sintesi

Internet

Client

Server web server

File HTML

browser

il protocollo: HTTP

URL


Terminologia per gli ipertesti su WebTerminologia per gli ipertesti su Web

Page (pagina): singolo “foglio” di un ipertesto Home-page: “punto di ingresso” di un sito web Sito web (o sito internet, anche abbreviato in sito se è chiaro

il contesto informatico): un insieme di pagine web, ovvero una struttura ipertestuale di documenti accessibili con un browser tramite World Wide Web su rete Internet

Portale: sito web che offre risorse e servizi; è il punto di ingresso verso altri siti

Hotspot, hotword: porzione di pagina che, se selezionata, permette di raggiungere un altro punto dell’ipertesto o una nuova risorsa

Motore di ricerca: sito web che permette di “districarsi” nel deposito caotico di dati presenti nella rete

Page (pagina): singolo “foglio” di un ipertesto Home-page: “punto di ingresso” di un sito web Sito web (o sito internet, anche abbreviato in sito se è chiaro

il contesto informatico): un insieme di pagine web, ovvero una struttura ipertestuale di documenti accessibili con un browser tramite World Wide Web su rete Internet

Portale: sito web che offre risorse e servizi; è il punto di ingresso verso altri siti

Hotspot, hotword: porzione di pagina che, se selezionata, permette di raggiungere un altro punto dell’ipertesto o una nuova risorsa

Motore di ricerca: sito web che permette di “districarsi” nel deposito caotico di dati presenti nella rete


Tipologia di siti WebTipologia di siti Web

Siti statici presentano contenuti recuperati da una pagina web; solitamente vengono aggiornati con una bassa frequenza e

sono mantenuti da una o più persone che agiscono direttamente sul codice della pagina (tramite appositi editor web).

Siti dinamici contenuti redatti dinamicamente (per esempio grazie al

collegamento con un database) e forniscono contenuti che possono variare in base a più fattori.

Siti statici presentano contenuti recuperati da una pagina web; solitamente vengono aggiornati con una bassa frequenza e

sono mantenuti da una o più persone che agiscono direttamente sul codice della pagina (tramite appositi editor web).

Siti dinamici contenuti redatti dinamicamente (per esempio grazie al

collegamento con un database) e forniscono contenuti che possono variare in base a più fattori.


Il World Wide Web - StoriaIl World Wide Web - Storia

Il WWW nasce nel maggio del 1990, quando Tim Berners Lee, un ricercatore del CERN di Ginevra presenta una relazione intitolata "Information Management: a Proposal” Lo scopo iniziale era quello di mettere a disposizione dei fisici che

lavoravano nei Centri di ricerca sparsi per tutto il mondo un linguaggio comune per la condivisione dei documenti e dei risultati delle loro ricerche.

Nell'ottobre di quello stesso anno iniziano le prime sperimentazioni. Solo nell'anno 1993 il WWW riceve un impulso decisivo al suo sviluppo

dal National Center for Supercomputing Applications (NCSA) dell'Università dell'Illinois, dove Marc Andressen ed Eric Bina sviluppano un’interfaccia grafica multipiattaforma per l'accesso ai documenti presenti su World Wide Web.

Da quel momento la quantità di server Web nel mondo e' cresciuta in maniera incredibile. Nel 1993 esistevano solo 200 server in tutto il mondo, 5 anni dopo se ne contano a milioni.

Il WWW nasce nel maggio del 1990, quando Tim Berners Lee, un ricercatore del CERN di Ginevra presenta una relazione intitolata "Information Management: a Proposal” Lo scopo iniziale era quello di mettere a disposizione dei fisici che

lavoravano nei Centri di ricerca sparsi per tutto il mondo un linguaggio comune per la condivisione dei documenti e dei risultati delle loro ricerche.

Nell'ottobre di quello stesso anno iniziano le prime sperimentazioni. Solo nell'anno 1993 il WWW riceve un impulso decisivo al suo sviluppo

dal National Center for Supercomputing Applications (NCSA) dell'Università dell'Illinois, dove Marc Andressen ed Eric Bina sviluppano un’interfaccia grafica multipiattaforma per l'accesso ai documenti presenti su World Wide Web.

Da quel momento la quantità di server Web nel mondo e' cresciuta in maniera incredibile. Nel 1993 esistevano solo 200 server in tutto il mondo, 5 anni dopo se ne contano a milioni.


Il successo del World Wide WebIl successo del World Wide Web

Le caratteristiche che hanno fatto del World Wide Web una vera e propria rivoluzione nel mondo della telematica possono essere riassunte nei seguenti punti: la sua diffusione planetaria la facilità di utilizzazione delle interfacce la sua organizzazione ipertestuale la possibilità di trasmettere/ricevere informazioni multimediali le semplicità di gestione per i fornitori di informazione.

Le caratteristiche che hanno fatto del World Wide Web una vera e propria rivoluzione nel mondo della telematica possono essere riassunte nei seguenti punti: la sua diffusione planetaria la facilità di utilizzazione delle interfacce la sua organizzazione ipertestuale la possibilità di trasmettere/ricevere informazioni multimediali le semplicità di gestione per i fornitori di informazione.


Crescita del webCrescita del web


Utenti Internet, oggiUtenti Internet, oggi

Millions of users % of populationWorld Total 606 9,60%Africa 6Asia/Pacific 187Europe 191Italy 19 33%Middle East 5Canada & USA 183USA 166 59%Latin America 33

Source: www.nua.ie/surveys - Sept 2002


0

50

100

150

200

250

95 96 97 98 99 0 01 02 03 04 5

US Europe

0

50

100

150

200

250

95 96 97 98 99 0 01 02 03 04 5

US Europe

Internet Users (Millions)

Source: IDC Internet Commerce Market Model, V7.3, 2001

Introduzione al Web Concetti Fondamentali Dott. Chiara Braghin [email protected] Corso IFTS...

Documents

Transcript of Introduzione al Web Concetti Fondamentali Dott. Chiara Braghin [email protected] Corso IFTS...