Riassunto Tecnologie Web

Cenni storici su internet:

• 1957 Sputnik in orbita
• Nasce l’ARPA
• DOD commissiona il collegamento tra basi militari
• 1965 nasce l’ipertesto
• 1969 ARPANET
• Inizio ’70 avvio di DARPA (agenzia dei progetti per la ricerca avanzata sulla difesa)
• Inizio ’70  nasce SGML ()
• 1974 TCP,IP,UDP
• Inizio ’80 minitel in Francia

Internet nasce nel 1969 come risultato del progetto dell’ente governativo degli stati uniti, ARPA e per questo motivo il suo nome originario fu ARPANET.
Obiettivoo primario di questo progetto consisteva nel creare una rete che consentisse agli utenti dei computer utilizzati nei centri di ricerca universitari di connettersi hai computer dei ricercatori di altre università.
ARPANET si basava su un’architettura che offriva un vantaggio fondamentale: poiché i messaggi potevano essere indirizzati e reindirizzati su percorsi diversi per raggiungere il computer di destinazione la rete avrebbe potuto continuare a funzionare anche quando uno o più computer, costituenti nodi della stessa rete, fossero stati distrutti da un attacco militare o per qualsiasi altro evento catastrofico.
Oggi, Internet costituisce un’infrastruttura pubblica di comunicazione di tipo collaborativi, ed accessibile a milioni di persone nel mondo intero.
Cenni storici sul web:

• 1990 CERN- Tim Berners Lee mette a punto un sistema per la gestione delle informazioni basate sul concetto di ipertesto e sviluppa i primi componenti: Web Server, Web Client (World Wide Web), HTML, http
• 1993 NSCA-rilascio Mosaic
• 1994 W3C
• 1994 10.000 server istallati(2.000 commerciali) circa 10.000.000 di utenti

Che cosa è Internet: Insieme delle singole reti gestite da organizzazioni pubbliche, aziendali, di ricerca o private. Ogni rete locale si affaccia alla rete pubblica attraverso un dispositivo detto router il quale si occupa di smistare i pacchetti in uscita ed in entrata dalla rete locale. Al router in genere è associato un firewall il cui scopo è proteggere la rete interna da accessi indesiderati.
Internet è una rete geografica mondiale che collega le reti di diversi paesi. Viene definita pertanto rete delle reti.
Cosa serve per connettersi:

• Un computer
• Una connessione alla rete
1. mediante router
2. linea telefonica + modem + provider

• programmi che consentono di usufruire dei servizi di rete

Provider:

• il service provider è un server in grado, grazie ai molteplici pop, di distribuire la connessione ai client web che ne fanno richiesta.
• dispongono uno o più host collegati ad internet con linee dedicate attive 24h su 24.
• Gli host contengono informazioni che devono essere memorizzate su internet: essi sono dei veri e propri computer che “ospitano” le risorse software della rete.

Strumenti e servizi di internet:

• Telnet: accesso a macchine remote
• FTP: File Transfer Protocol viene utilizzato per il trasferimento di file sia in download che in upload.
• Talk/chat : conversazione in tempo reale
• Mailing List: liste di discussione
• News group: gruppi di discussione
• HTTP: HyperText Transfer Protocol è il protocollo applicativo di dati ipertestuali utilizzato dal server web e dal client web per comunicare.
• SMTP: Simple Mail Transfer Protocol precisa il formato del contenuto del messaggio.
• POP: Post Office Protocol  trasporta il messaggio fino al computer del destinatario.

WWW: il World Wide Web è spazio informativo( insieme di risorse hardware o software identificabili tramite indirizzo  è un insieme di strumenti utili alla loro gestione)  accessibile via rete per scopi di comunicazione.
Letteralmente significa ragnatela attorno al mondo ed è l’insieme delle pagine ipermediali di internet.
Differenze tra WWW ed Internet: la differenza sostanziale stà nel fatto che il WWW fa parte di internet e non viceversa.

Le risorse web: le risorse web possono essere hardware (pc, router, telefoni cellulari, ecc…) software (file di testo o di codice, immagini, ecc…). Le risorse possono essere create con strumenti hardware (scanner, microfoni, videocamere) o software (linguaggi di programmazione,rappresentazione, editor di testo o di grafica).
Documenti o pagine web sono insieme di risorse tra loro in relazione.
Sistemi web :  sono insiemi di unità HW e SW tra loro collegate e comunicanti che siano visibili come un tuttuno  e concorrono a realizzare obiettivi comuni. Ne sono esempi siti Web, sistemi per l’accesso ad archivi di dati, sistemi per il pagamento automatico.
Spazi web :

• esistono società che acquistano server e connettività e :

• affittano spazi (hosting)
• affittano server (housing)
• registrano domini
• offrono servizi (posta)

• esistono anche spazi gratuiti

Chi naviga sul web:

• gli utenti
• gli agenti artificiali:

• browser (FireFox, IE)
• player multimediale
• programmi server (IIS)
• Spider o web crawler o robot (si occupano di effettuare continue ricerche sul web per scovare nuovi siti ed inserirli negli archivi elettronici del motore di ricerca).

Principi fondamentali del WWW:
Tim Berners-Lee mise alla base dello sviluppo del WWW alcuni principi fondamentali. Ne osserviamo due in particolare:

• Accesso universale.

• Il WWW deve essere accessibile ed utilizzabile da parte di chiunque, dovunque, in qualsiasi momento e con qualsiasi modalità.
• Disciplina l’ accesso.

 Iniziative del W3C(World Wide Web Consortium)per fornire linee guida per realizzare il principio.

• WAI-chiunque
• WIA-dovunque
• WDIA-in qualsiasi momento, con qualsiasi modalità
• Semplicità/leggibilità – XML
• Universo aperto

Il WWW deve svilupparsi con continuità tramite l’ introduzione di nuove risorse, innovazioni tecnologiche, adeguamenti e personalizzazione richiesti localmente

• Interoperabilità
• Evolvibilità
• Linguaggi misti
• Strutture aperte.

Quali informazioni posso trovare su Internet

• Risorse e relazioni: lo spazio Web contiene una quantità enorme di oggetti che devono essere recuperati. Occorre quindi rappresentare (tramite codice e  descrizione ) e organizzare  le risorse. La descrizione di una risorsa avviene tramite metadati.
• Dati media e multimedia:
• Dati: forma più semplice di informazione costituita da sequenze di caratteri alfanumerici.
• Media : modalità e tecnologie impiegati per comunicare messaggi.
• Multimedia: integrazione e sincronizzazione di due o più media in un sistema che permette  l’ interazione dell’ utente.
• Codifica:insieme delle tecnologie per rappresentare risorse in modo che siano archiviate,trasmesse e riprodotte in modo efficiente. Ogni media avrà la sua codifica.
• Metadati : elementi del dato che lo descrivono attribuendogli significato, contesto ed organizzazione. Possono essere descrittivi  , strutturali e amministrativi. Per le risorse web il linguaggio XML è la soluzione.
• Relazioni : Le risorse web possono essere in relazione tra loro attraverso legami di riferimento. Le relazioni sono:
• sono direzionali
• a volte simmetriche
• ricchezza semantica(di significato) e non soltanto mediatica che arricchisce la comunicazione.
• Ipertesto :testo organizzato in modo non lineare. Nell’ accezione originale di Ted Nelson (1965) un’ enciclopedia con riferimento bibliografici o note o riferimenti ad altri testi è un ipertesto. Permette di navigare le informazioni in modo personalizzato. Le informazioni nell’ ipertesto sono costituite da testo.
• Ipermedia : insieme di oggetti multimediali, o parti di uno stesso documento collegate tra loro da legami di riferimento. L’ estensione del concetto di ipertesto al caso di documenti multimediali. Permettono percorsi di conoscenza personalizzati e sono specifici del web.

Come trovo le informazioni:

• Indirizzamento in internet: ogni computer connesso ad internet ha un indirizzo fisico con il quale il software che gestisce le comunicazioni in rete localizza e gestisce la comunicazione con quel computer. Per contattare un computer su Intenet occorre indicare  il suo indirizzo IP o il suo domain name; ogniqualvolta viene indicato l’ indirizzo simbolico, questo deve essere convertito nel corrispondente indirizzo IP.
• Indirizzi numerici e indirizzi simbolici:
• Gli indirizzi IP sono machine oriented
• E’ stato definito un sistema per passare da indirizzi numerici a indirizzi simbolici(nomi): il Domain Name System(DSN), il quale associa ad ogni indirizzo IP uno o più indirizzi simbolici. Inoltre gestisce la conversione tra indirizzi simbolici e indirizzi IP.
• Organizzato in maniera gerarchica(domini, sottodomini).

 
Domain Name System: gli indirizzi logici hanno forma : aaa.bbb.ccc.ddd e sono organizzati   in domini e sottodomini. I domini possono essere geografici(it, fr, ecc.) o di altro tipo(com,org,net,..). I domini corrispondono  a suddivisioni logiche di internet per facilitare la gestione dei nomi delle risorse. Internet è suddivisa in una moltitudine  di domini radice:

• domini nazionali
• domini generici

Un dominio radice include una collezione di host. All’ interno dei domini vi sono i sottodomini e così via  fino a raggiungere lo specifico computer della rete ad es: silsis.unimi.it è un sottodominio dell’ università di Milano.
Domini di primo livello:

• com : aziende                                                             

• edu:università americane
• gov:istituzioni governative
• net:fornitori di accesso
• org:organizzazioni  no-profit
• au-Australia, ch- Svizzera, fr- Francia, it-Italia, jp-Giappone, uk-Inghilterra

Il Domain  Name System:

• Ogni dominio è gestito da un computer che contiene l’ associazione tra nomi logici e indirizzi fisici di ogni suo sotto-dominio
• Ogni sottodominio è gestito da un computer che contiene l’ associazione tra nomi logici e indirizzi  fisici di ogni suo sotto-sotto-dominio
• In  questo modo possiamo localizzare ogni punto/nodo della rete usando solo nomi logici.

Identificare gli oggetti:

• Accesso universale =>regole formali
• Uniform Resource Locator: sequenza di simboli che identifica una risorsa web senza ambiguità per indirizzo.
• Nel web gli oggetti si identificano con URL che specificano:

• come si vuole accedere ala risorsa(metodo)
• dove si trova (indirizzo server)
• nome della risorsa(nome)

La forma più utilizzata di URL  è : <scheme-name>//<internet-node>:port/<path>?<query><metodo>://<indirizzo server>:port/<path + nome risorsa> ? <query>
Come creo un informazione per internet:

• linguaggi formali: insieme di regole per rappresentare e manipolare le risorse web in modo automatico. Essi sono costituiti da: sintassi (regole per comporre le frasi del linguaggio) e semantica (significato delle frasi). Categorie dei linguaggi formali:

• linguaggi di comunicazione o protocolli di comunicazione: vengono usati per trasmettere oggetti e realizzare servizi tramite internet. Es: FTP servizio trasferimento file, HTTP servizio WWW.
• linguaggi di rappresentazione:descrivono la struttura di una risorsa e sono XML(eXtensible Markup Language)  e XHTML (eXtensible HyperText Markup Language). I suoi elementi(Markup tags) sono non ambigui e standard.
• linguaggi di presentazione: descrivono come presentare una risorsa e sono: CSS (Cascading Style Sheets) , XSL(eXtensible Style Sheets Language), SMIL (Synchronized Multimedia Integration Language). Gli elementi sono non ambigui e standard.

Web statico :  si limita al recupero di documenti esistenti. I linguaggi di programmazione rendono il web dinamico: consentono di creare o modificare un documento su richiesta dell’utente recuperando parti di una base di dati o combinando oggetti in una pagina nuova.

• linguaggi di programmazione: categorie principali sono:
• linguaggi ad oggetti (le informazioni sono organizzate in unità indipendenti chiamate oggetti ) è Java
• linguaggi di scripting (sequenze di istruzioni solitamente inserite all’interno di un altro linguaggio) è Javascript,Vbscript, ASP, PHP.

Come è fatto un sistema web?

• Modelli: rappresentazione o astrazione di aspetti particolari di un progetto:

1. degli aspetti analizzati del mondo reale (modello concettuale)
2. della struttura (modello strutturale)
3. degli elementi rilevanti e delle relazioni che inercorrono tra loro (modello logico)
4. dei componenti fisicamente presenti (modello fisico)
5. degli scopi (modello funzionale)

• Architetture: struttura dei componenti di un sistema/programma, le loro relazioni, i principi e le linee guida che governano il loro progetto e l’evoluzione nel tempo.

• Architettura client-server :

Client : elemento che richiede il servizio; si preoccupa di dialogare con l’utente; Sfrutta tutte   le possibilità fornite dal calcolatore su cui viene eseguito;fornisce all’utente un’interfaccia intuitiva; elabora e richieste dell’utente e le risposte del server; .
Server : eroga il servizio, rende disponibili le risorse; Accetta richieste e risponde in modo automatico;

1. richiesta e risposta avvengono attraverso l’invio di un file contente le richieste/informazioni desiderate.
2. si possono collegare più server tra loro e la risposta può essere un’interazione tra più server.
3. un singolo computer può fare sia da client che da server in momenti differenti.
4. possono essere sulla stessa rete o su reti distinte.

La comunicazione c/s è regolata dai protocolli: HTTP, FTP,SMTP, Telnet.

• Il client web : i browser sono SW sul client che visualizzano le pagine web.
• Motori di rendering :  si differenziano per la qualità della renderizzazione (rispetto degli standard e per la velocità della stessa). Il motore migliore per quanto riguarda gli standard è KHTML. Per quanto riguarda la velocità i migliori sono: Presto e Gecko.
• Il Server web: il SW sul server che rende disponibili le pagine  del sito internet (IIS, Xtami).

Progettazione dell’informazione:

• Criteri di progettazione:

1. metodologia di progettazione web. Usercentered
2. criteri di progettazione:

• usabilità : efficacia, efficienza e soddisfazione con cui categorie ben definite di utenti raggiungono precisi obbiettivi in specifici contesti d’uso.

Criteri per l’usabilità sono: chiara gerarchia visiva – spazio ai contenuti – posizione dell’utente – visibilità di percorsi – collegamenti a pagine di supporto – motore di ricerca
Altri criteri: pochi colori – spazio fra testo ed immagini – pochi elementi dinamici

• riusabiltà : possibilità di utilizzo di un modulo SW in più di un programma o sistema SW. Essa implica: portabilità – presenza di specifiche : Es: applicazioni web.

Browser :  programma in grado di individuare la posizione di una pagina in internet e di interpretare le righe di codice sorgente scritte in HTML in modo da presentare la pagina web all’utente finale.
XHTML : derivato da XML si tratta di un linguaggio di annotazione per la struttura delle pagine web (capitoli,paragrafi,tabelle,liste,immagini,collegamenti). E’ uno standard W3C da 26/01/2000.
Esso eredita tutto da HTML aggiungendo il rigore e la chiarezza di XML:
caratteristiche :

• Modularizzazione :elementi e attributi sono divisi in moduli astratti per omogeneità funzionale e necessità computazionali del client.
• Conformità: solo elementi presenti nei moduli – valido rispetto della DTD dichiarata – elemento radice : <html> - attributo xmlns=http://www.w3.org/1999/xhtml in radice – doctype nell’intestazione.

Strumenti W3C di validazione:
La validazione è un controllo che viene effettuato mediante appositi SW che verificano la rispondenza del codice di pagine HTML alle specifiche del W3C. Questi metodi di validazione permettono di visualizzare gli errori formali che sono stati compiuti nella scrittura del codice.
Esistono diversi servizi gratuiti di validazione uno di questi è disponibile presso il seguente indirizzo: http://validator.we.org/
Collezioni di attributi :raggruppati in collezioni:

• Core (class, id, title)
• L18N (XML:lang)
• Events(onclick, onmousedown)
• Style (style)
• Common (i più comuni dei precedenti)

Categorie di elementi:

• Elementi inline : devono apparire dentro elementi blocco
• Elementi block : possono apparire dentro altri elementi blocco o contenere loro stessi elementi.

Le immagini

• Immagine:registrazione della distribuzione di luce che giunge ad un insieme di sensori(monitor,fotocamera)
• Immagine statica: immagine ricavata da sensori che riprendono oggetti in quiete rispetto ad essi
• Immagine analogica: macchina fotografica tradizionale
• Immagine digitale: matrice di numeri interi ciascuno in corrispondenza di un pixel.

 

Immagine digitale

• Immagini digitali:- B/N (matrice a due valori) – a livelli di grigio(con codice a n bit abbiamo 2 n  livelli possibili) – a colori(con codifica RBG occorrono 3 byte per pixel).
• Parametri dell’ immagine: risoluzione dell’ immagine : numeri dei pixel dai quali è composta – profondità di bit: numeri di bit usato per la codifica binaria dei colori.

Formati grafici:

• Un formato di dati grafico è una specifica che descrive come memorizzare le caratteristiche di un’ immagine su file;può prevedere o meno che si ricorra anche a tecniche di compressione.
• La maggior parte dei formati grafici include delle tecniche di compressione per memorizzare le immagini,per cui si tende, nel parlare comune, a confondere tra formati grafici e compressione di immagini.
• Formato raster:  rappresenta l’ immagine come una matrice di pixel(bitmap)
• Formato vettoriale: l’informazione grafica è costituita da una combinazione  di primitive geometriche (punto, linea,cerchio,…)
• Formati compressi: immagini in cui l’informazione grafica viene compressa con uno o più algoritmi specifici ( con o senza perdita di informazione)

Le immagini per il web
L’ esigenza di trasferire in rete i dati richiede l’ utilizzo di formati compressi.

• GIF: (graphics interchange format)
1. formato indipendente dalla piattaforma (decodificatore software presente in ogni browser)
2. tecnologie di compressione efficiente e senza perdita di dati
3. gestisce interlacciamento, trasparenza e animazione
4. limitato numero di colori disponibili(256, 8 bit)
5. formato proprietario
• JPEG: (joint phothographic experts group)
1.  formato indipendente dalla piattaforma (decodificatore software presente in ogni browser)
2. gestisce fino a 16 milioni di colori(24 bit)
3. tecnologia di compressione efficiente con perdita di dati progressiva e regolabile.
4. sfrutta un limite del sistema visivo umano che non percepisce piccoli cambiamenti di colore, mentre è molto sensibile a variazione di luminosità.

• PNG: (portable network graphics)
1. codifica a colori fino a 48 bit
2. compressione con /senza perdita di informazione
3. trasparenza variabile su 256 livelli
4. presenza di metadati nell’ immagine stessa.
5. gamma correction
6. formato libero
7. non supporta immagini multiple

Sintesi e orientamento

• Piccole immagini ( bottoni, icone : PNG, GIF)
• Animazioni bianco e nero: (PNG,GIF)
• Immagini scannerizzate e foto: (JPEG)
• Immagini grandi con molti dettagli:JPEG
• Editing dell’ immagine per lavorare alla massima risoluzione: bitmap,TIFF
• Immagine binaria :TIFF, GIF.