Appunti completi Web Design and Technologies

SOMMARIO

INTERNET E LE SUE TECNOLOGIE ........................................................................................................................................ 1

TAPPE STORICHE DEL WORLD WIDE WEB ...................................................................................................................... 2

PRINCIPALI TIPOLOGIE DI RETI ........................................................................................................................................ 2

PROTOCOLLO TCP/IP ...................................................................................................................................................... 2

WORLD WILDE WEB ............................................................................................................................................................ 7

ELEMENTI E CARATTERISTICHE DEL WWW .................................................................................................................... 7

PROTOCOLLO HTTP ......................................................................................................................................................... 8

LINGUAGGIO HTML ............................................................................................................................................................ 8

CSS .................................................................................................................................................................................... 15

Cascading Style Sheets – livelli 1 e 2 ............................................................................................................................. 15

CSS3 .................................................................................................................................................................................. 20

IL METALINGUAGGIO XML ................................................................................................................................................ 23

IL WEB SEMANTICO .......................................................................................................................................................... 26

L’architettura del Web semantico ................................................................................................................................ 27

PRINCIPI DELLA PROGRAMMAZIONE ............................................................................................................................... 27

Programmazione: costrutti fondamentali .................................................................................................................... 28

Linguaggi complicati e linguaggi interpretati ................................................................................................................ 29

JAVASCRIPT ....................................................................................................................................................................... 30

WEB 2.0 ............................................................................................................................................................................ 32

SITI WEB INTERATTIVI ....................................................................................................................................................... 33

Rich Internet Applications ............................................................................................................................................ 33

GRAFICA, ANIMAZIONI E MULTIMEDIA PER IL WEB ......................................................................................................... 36

CONTENT MANAGEMENT SYSTEM ................................................................................................................................... 37

ELEMENTI DI INFORMATION ARCHITETURE ..................................................................................................................... 38

INTERAZIONI UOMO-MACCHINA (e usabilità) .................................................................................................................. 40

USABILITA' DEL WEB ......................................................................................................................................................... 41

ACCESSIBILITA' DEL WEB................................................................................................................................................... 42

ASPETTI AVANZATI DEL MULTIMEDIA SUL WEB ............................................................................................................... 44

INTERNET E LE SUE TECNOLOGIE

Cos'è Internet? È la più grande rete mondiale di dispositivi interconnessi, nasce negli USA nel 1969 ad opera

del Department of Defense Advanced Research Projects Agency NET (DARPANET). Internet è la rete che

collega diversi mezzi. 1

Famosa soprattutto per il Web, ma Internet è anche: FTP (File Transfer Protocol); Telnet (Terminal

emulation); News e altri servizi.

Quindi internet non è uguale a web -> web è solo uno dei mezzi dell'internet.

TAPPE STORICHE DEL WORLD WIDE WEB

I computer nascono come calcolatori per fare calcoli ed elaborare informazioni di diverso tipo, inizialmente

erano macchine molto complesse e spesso colpite da bug ed errori. È nel 1961, con Licklider, che si

introduce il concetto di rete e di computer interconnessi tra loro. Nel 1966 vengono gettate le basi della

rete ARPANET, rete creata negli Stati Uniti. Nel 1973 Khan e Cerf, per DARPANET, iniziano la definizione

della lingua di Internet, utilizzata ancora oggi, il protocollo TCP/IP, un protocollo che si utilizza per

comunicare qualsiasi cosa sull'internet, il protocollo si assicura che ciò che viene inviato arrivi

correttamente al destinatario.

Nel 1983 oltre alla DARPANET negli Usa esistono già diverse reti. Nel 1985 ci fu una novità, venne creata

NSFnet, una rete che collega tra loro le diverse università statunitensi utilizzando il protocollo TCP/IP. Nel

1990 al CERN di Ginevra, Berners-lee e Cailliau presentano la proposta di realizzazione di un sistema di

comunicazione basato su ipertesti -> alla fine degli anni 80 non esistevano dei software che codificassero i

documenti, quindi molto spesso il ricevente non aveva lo stesso programma utilizzato da colui che inviava il

documento -> nel 1991 viene creato il primo server web al di fuori del CERN di Ginevra -> primo sito web

del mondo. Nel 1992 il CERN rende disponibile al mondo il browser che permette di navigare sul web in

modo gratuito, permettendo a vari laboratori di ricerca nel mondo di entrare in rete. Dal 1993 si creano

centinaia di server web nel mondo. Nel 1994 nasce la Mosaic Communications Corporation (poi diventata

Netscape), un browser mondiale che precede Internet explorer. Nel 1995 la Microsoft rilascia Windows 95,

sistema operativo a 32 bit e Internet e il Web incominciano a entrare nelle case della gente comune.

PRINCIPALI TIPOLOGIE DI RET I

Principi guida che hanno portato allo sviluppo di internet: sviluppare metodi che permettano una

comunicazione affidabile (nata principalmente per scopi militari durante la WW2), che avvenisse anche in

casi di intoppi ed interruzioni della rete. -> due computer per comunicare non devono necessariamente

essere uguali (eterogeneità).

Differenze tra tipologie di reti:

▪ Reti LAN: reti locali, con una estensione limitata, che permettono cioè la condivisione di dati e

periferiche all'interno di un'area limitata (es. un edificio).

▪ Reti WAN: reti geografiche che si estendono su centinaia di chilometri, rete che connette reti

piccole e permette loro di comunicare, collegano tra loro computer anche molto lontani

▪ Internet: la rete delle reti, connette tra loro le varie reti WAN

PROTOCOLLO TCP/IP 2

Sono in realtà due protocolli separati che vanno però utilizzati insieme, è il linguaggio che permette a reti

diverse di comunicare tra loro, è indipendente dalle tecnologie (qualsiasi dispositivo collegato alla rete) ed

è open standard, ovvero non è proprietà di nessuno, il che ne ha favorito la diffusione.

Si basa su un modello "a quattro strati", ovvero livelli concettuali ai quali la rete lavora, (ISO-OSI

semplificato):

§ Livello delle applicazioni: gestisce i servizi per l’utente, i bit escono dal mio browser e vanno al livello delle

applicazioni

§ Livello di trasporto: gestisce l’organizzazione dei dati ai fini della trasmissione, decide come i bit che

arrivano al livello delle applicazioni arrivano al server, ovvero il livello di trasporto decide come i bit

vengono impacchettati e distribuiti

§ Livello di rete: gestisce l’indirizzamento e l’instradamento dei dati (bit)

§ Livello fisico: gestisce l’uso dei cavi o della rete wireless e l’invio di segnali fisici

-> Commutazione di circuito e di pacchetto: reti a commutazione di circuito, reti in cui la "linea" è di uso

esclusivo di chi sta comunicando (es. linea telefonica e collegamento di periferiche al computer) -> i

comunicatori hanno un collegamento diretto.

Reti a commutazione di pacchetto (TCP/IP):

§ i dati non sono inviati in blocco, ma suddivisi in “pacchetti” (di dimensione 1500 byte).

§ ogni pacchetto contiene le informazioni necessarie per l’identificazione della sua destinazione ed è

numerato.

§ pacchetti diversi possono seguire percorsi diversi (ed essere ricevuti in ordine diverso da quello di invio).

§ la stessa linea può essere occupata da molti.

§ se una sessione di invio si interrompe, può essere ripresa in seguito (efficienza e affidabilità).

I pacchetti inviati devono “sapere” dove andare, ogni dispositivo collegato alla rete deve avere un indirizzo

IP che lo distingue dal resto del mondo (formato da 4 byte (0-255) separati da un punto;

es. 213.45.152.218).

Ci sono tre classi di indirizzi:

▪ reti di classe A: 1° byte (1-127) = rete; 2°, 3° e 4° byte = nodi è 127 reti, ciascuna con 16.777.214

macchine (max)

▪ reti di classe B: 1° (128-191) e 2° byte = rete; 3° e 4° byte = nodi è 16.384 reti, ognuna con 65.534

macchine (max)

▪ reti di classe C: 1° (192-223), 2° e 3° byte = rete; 4° byte = nodi è 2.097.152 reti, ognuna con 254

macchine (max)

[ad oggi sono disponibili sono indirizzi di classe c].

Indirizzi privati (trucco per permettere di collegare sotto un unico IP diversi dispositivi):

 ognuna delle tre classi (A, B e C) ha degli indirizzi “speciali” utilizzabili solo nella rete locale: in

pratica, a più dispositivi corrisponde lo stesso indirizzo pubblico, visibile all’esterno (vantaggio: i

dispositivi collegabili a Internet diventano molti di più).

 classe A: 10.x.x.x

 classe B: 172.16.x.x

 classe C: 192.168.x.x

Gli indirizzi IP standard (IPv4) non bastano più, per questo si sta passando al protocollo IPv6 che utilizza 128

bit anziché 32. 3

-> Gateaway (o Router): la rete domestica. Quando il protocollo IP riceve i dati da inviare ad un certo

indirizzo, controlla la rete:

 se è la rete locale, invia i dati alla macchina specificata

 se è una rete esterna (come di solito accade), invia i dati a un computer speciale (della rete locale)

detto gateway o router -> il router ha un elenco di indirizzi di altri router per le reti che “conosce”,

più un indirizzo per quelle che non conosce -> i dati vengono inviati al router competente, e da

questo (eventualmente attraverso altri router), al computer di destinazione. L’assegnazione degli

indirizzi di rete dipende dall’Internet Assigned Number Authority (IANA), un organismo

internazionale che delega la gestione degli indirizzi nei vari paesi a organismi locali (es. la

Registration Authority italiana, che dipende dal CNR).

Ci sono poi i collegamenti geografici nazionali (le Wan nazionali), chiamate dorsali (backbone) -> la rete

italiana della ricerca è la rete GARR = Gruppo di Armonizzazione Reti Ricerca (www.garr.it) collegata al

CERN di Ginevra e da qui alle altre dorsali europee e americane (con collegamenti transoceanici).

Alla rete della ricerca si affianca la rete commerciale (Interbusiness): • affitta collegamenti • "bassa"

velocità da e verso la rete GARR.

Esistono dei servizi per rilevare gli indirizzi IP e la loro localizzazione.

Connessione alla rete: collegamento diretto -> attraverso linee dedicate (costose, riguardano aziende ed

enti). Se non esiste già una rete collegata a Internet, ne deve essere creata una nuova:

§ affitto banda da fornitori di connettività (provider)

§ affitto o acquisto del cavo fisico (es. T1 in fibra ottica) per il collegamento

§ uso di un proprio gateway/router per l’interfacciamento con il router della rete del fornitore.

-> Accesso PPP: Il Point-to-Point Protocol (PPP) implementa un collegamento punto-punto

 permette ad una macchina (es. PC dell’utente) di collegarsi ad un host (es. server del provider) già

connesso a Internet; la macchina entra di fatto a far parte della rete locale del computer host.

 il computer chiamante diventa a tutti gli effetti un nodo della rete (visibile al “mondo”, con un

indirizzo IP di solito assegnato dinamicamente).

->Connessione tramite modem "tradizionale" (vecchia) = modulator/demodulator, linea telefonica

analogica (traduzione del segnale digitale che esce dal pc e il segnale analogico che viaggia sulla linea

telefonica tradizionale).

->Connessione ISDN (utilizzata più in passato, velocità doppia) = Integrated Services Digital Network, linea

telefonica digitale (da 64 a 128 Kbps) -> poteva essere usata sia per i dati che per la voce

contemporaneamente.

->Connessione ADSL = Asymmetric Digital Subscriber Line, forte diseguaglianza tra velocità in upload e

velocità in download (dipende dal provider, dalla linea, dalla distanza dalla centrale, dal tipo di

abbonamento).

->Connessione in fibra ottica (pura o mista): FTTH (il cavo arriva a casa), FTTC (il cavo arriva all'armadio

stradale, cioè alla centralina e il collegamento fino alla casa è in rame). I cavi in fibra ottica sono tubi

trasparenti che traportano la luce (quindi molto più veloce e non c'è decadimento).

Ci sono anche connessioni ibride in cui c'è un collegamento radio da casa alla centralina radio e dalla

centralina radio alla centrale. 4

Domain Name Service (DNS): definisce un sistema di indirizzamento simbolico -> ad ogni nome simbolico

corrisponde un preciso indirizzo IP (es. www.unipv.it = 193.204.35.100). Il nome è suddiviso in domini e

sottodomini che rispecchiano la gerarchia nella struttura della rete -> il DNS è un meccanismo che permetta

di fare una traduzione dall'indirizzo simbolico all'indirizzo IP corrispondente.

Il DNS è un sistema di database distribuiti nella rete

§ i vari name server (in pratica, dei computer) sono collegati tra loro

§ esiste un name server per ogni livello del dominio.

L’indirizzo deve essere risolto attraverso l’interrogazione dei DNS -> la richiesta viene prima inviata al DNS

locale

• se nell’elenco dei suoi nomi simbolici non c’è l’indirizzo richiesto, chiede “aiuto” al name server di primo

livello (corrispondente ad esempio a it)

• se anche il name server di primo livello non trova l’indirizzo, chiede a sua volta aiuto al name server di

secondo livello (corrispondente ad esempio a unipv).

-> il DNS locale tiene traccia delle nuove associazioni trovate.

I nomi dei domini in Italia sono assegnati dalla Registration Authority:

 la stessa responsabile dell’assegnazione degli indirizzi (fa capo a CNR, quindi a un ente governativo)

 deve occuparsi anche di tenere aggiornato il DNS di primo livello

 negli USA la gestione dei domini è stata privatizzata e dipende da diverse società concessionarie.

Domini di primo livello “tradizionali” oltre a quelli nazionali:

▪ edu -> università e strutture di ricerca (americane)

▪ com -> enti commerciali, net è organizzazioni di supporto alla rete

▪ gov -> enti governativi (americani)

▪ mil -> organi militari (americani)

▪ org -> enti no profit, organizzazioni non governative (altri domini più recenti: eu, biz, info, name,

store, club)

-> Hub, switch, router, modem

Hub e switch:

▪ connettono due o più computer a una rete ethernet

(lo switch è più veloce perché più "intelligente")

Router e access point:

▪ i router (cablati o wireless) connettono tra loro computer e reti (es. con un router è possibile

condividere una singola connessione Internet tra più computer). Gli access point permettono di

connettere computer e dispositivi a una rete wireless

Modem per ADSL e fibra ottica:

▪ inviano e ricevono informazioni al/dal provider - tramite le linee telefoniche (rame) ['ADSL, tramite

rame e fibra I'FTTC e tramite fibra l'FTTH.

-> Principali servizi offerti da Internet:

• Posta elettronica • VOIP • Instant Messaging 5

• Ftp • Newsgroup

•Telnet • Videoconferenza

(ed altri…)

o Posta elettronica -> formato indirizzi: xxx@serverposta.

Protocolli di ricezione: § POP3 (Post Office Protocol, versione 3); § IMAP (Internet Message Access

Protocol).

Protocollo di invio: SMTP (Simple Mail Transfer Protocol).

Si basano su server di invio e di ricezione che possono anche coincidere; vanno impostati quando si

configura i programmi client (es. Microsoft Outlook o Mozilla Thunderbird).

o Ftp, Telnet e Newsgroup -> FTP (File Transfer Protocol): permette di trasferire file a e da server

remoti; Telnet (emulatore di terminale): permette di simulare la presenza (dal punto di vista

dell’interazione testuale) sulla macchina a cui si è connessi; Newsgroup: permette di

leggere/scrivere messaggi all’interno di gruppi di discussione.

o VOIP, videoconferenza e Instant Messaging -> VOIP (Voice Over IP): permette di effettuare

telefonate via Internet (ormai lo