Lezione 2 (aa 2020-2021)

CODIFICA DELLE IMMAGINI

• Le immagini sono informazioni continue in tre dimensioni: due spaziali ed una colorimetrica.

• Per codificarle occorre operare tre discretizzazioni.

• Due discretizzazioni spaziali riducono l’immagine ad una matrice di punti colorati, detti pixel.

• La terza discretizzazione limita l’insieme di colori che ogni pixel può assumere

ESEMPIO: LIVELLI DI GRIGIO

• La codifica associa un unico codice ad un intervallo di livelli di grigio

• Tutti i livelli di grigio all’interno dell’intervallo vengono codificati allo stesso modo comportando una perdita di informazione

• Il livello di grigio originale non può essere ricostruito in maniera esatta dal codice binario

PRINCIPALI FORMATI DELLE IMMAGINI

Formato JPEG/JPG
(Joint Photographic Export Group)

Immagini a 24 bit (1 6,8 milioni di colori).
Usa una tecnica di compressione lossy (con perdita di informazioni) basata sul fatto che l’occhio umano percepisce maggiormente la luminosità rispetto al colore dei pixel.

La compressione quindi privilegia la resa della luminosità dei pixel rispetto all tonalità e alla saturazione del colore.

lo standard consente scegliere di graduare il rapporto tra compressione e qualità percepita

Formato PNG
(Portable Network Graphic)

Immagini a 8, 16, 24 e 32 bit (256 colori, 64k colori, 1 6.8 milioni di colori, 16.8 milioni di colori con canale alpha).

Usa un algoritmo di compressione lossless

Formato GIF
(Graphic Interchange Format)

max 256 colori -> profondità’ di colore 8 bit
Se l'immagine originale contiene un numero più elevato dì colori è necessario effettuare una riduzione con conseguente perdita di informazioni

Integra una compressione di tipo LZW (ZIP)

I colori sono memorizzati in una 'tavolozza', una tabella che associa un numero ad un certo valore di colore.

Consente di definire un colore come trasparente e consente di realizzare animazioni (una gif può essere composta da più frame ed è possibile definire il tempo di passaggio da un frame all’altro)

COMPRESSIONE DELLE IMMAGINI

Per codificare le immagini è necessario un alto numero di byte.

l’immagine qui sopra è un immagine a 24 bit di 450x800 pixel.

I byte necessari per codificarla sono 450x800x3=1.080.000 byte (1,02 megabyte)

L’alto numero di byte necessari può essere un problema quando devo salvare un immagine (su un hard disk, sulla memoria del mio smartphone o su un altro dispositivo), o quando la devo trasmetterla sulla rete.

Per ovviare al problema le immagini vengono compresse quando sono memorizzate come file e decompresso quando si caricano in memoria per modificarle o visualizzarle sullo schermo.

Nella compressione delle immagini si possono usare tecniche di tipo lossy e tecniche di tipo lossless ad esempio:

• il formato png usa tecniche lossless
• il formato jpeg usa tecniche lossy

COMPRESSIONE LOSSY
con perdita di informazione

Le compressioni di tipo lossy sono sempre progettate specificamente per un determinato tipo di informazione (ad esempio le immagini) e sono irreveresibili. Decomprimendo l’immagine compressa, cioè, non si otterrà l’immagine originale ma un’immagine con meno informazioni

La compressione lossy per le immagine di gran lunga più diffusa è lo standard jpeg. 

Si basa sul fatto che l’ occhio umano è più sensibile alle variazioni di luminosità che non a quelle di colore.

Partendo da questo fenomeno lo standard codifica con precisione la luminosità di ogni pixel mentre per la tonalità e la saturazione del colore codifica la media di un blocchetto di pixel adiacenti. Il risultato è una drastica riduzione dei numero di byte necessari.
a codificare l’immagine a fronte di una perdita molto contenuta della qualità percepita dell’immagine stessa

Lo standard jepg consente inoltre di regolare il rapporto tra numero dei byte necessari a codificare l’immagine e qualità percepita.

Lo standard jpeg da ottimi risultati per le immagine fotografiche e di tipo pittorico.

Per immagini di tipo grafico come loghi, diagrammi, clip art una alternativa interessante può essere la riduzione dei colori e l’utilizzo dello standard di codifica a 256 colori.

CODIFICA A 256 COLORI

• Un’immagine a 256 colori è composta da due elementi distinti:

• Una tabella di colori (palette) in cui vengono definiti i colori (fino ad un massimo di 256)

• I punti (pixel) di cui è composta l’immagine il cui colore è definito da un byte (8 bit) che indica quale colore usare tra quelli definiti nella tabella.

COMPRESSIONE LOSSLESS
senza perdita di informazione

La compressione di tipo lossless usa algoritmi di compressione generici applicabili a qualsiasi tipo di file.

Per quanto riguarda le immagini da buoni risultati per immagini a colori piatti ed è poco efficiente su immagini molto complesse e sfumate.

Il formato di file più diffuso che usa la compressione lossless è il png.

IMMAGINI VETTORIALI

• La grafica vettoriale scompone in gruppi logici di componenti (linee, cerchi, rettangoli, ecc. )

• Le forme vengono memorizzate in termini di coordinate e colori dei vari elementi geometrici che le compongono

• Durante la visualizzazione, coordinate e colori vengono utilizzati per ricreare l’immagine

• La grafica vettoriale e’ comunemente usata nei disegni, disegni animati e nella grafica lineare in generale

Cosa succede quando uso un applicazione?

La piattaforma web

La piattaforma web è un ambiente di sviluppo nato per sviluppare siti web che oggi è usato anche per creare applicazioni
per desktop e mobile.

L’oggetto del nostro corso sarà studiare i tre linguaggi che costituisco il cuore della piattaforma (HTM, CSS e Javascript) e utilizzarli per creare semplici applicazioni online e offline.

Come funziona internet

Uniform Resource Locator o url è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet,  come un documento o un'immagine.

STRUTTURA DELL’URL

• La struttura di un URL è:

protocollo://indirizzo_risorsa

PROTOCOLLO

• Il protocollo stabilisce le regole con cui i dati verranno trasferiti. I protocolli più usati sono:

• http

• https

• ftp

• Se non specifico alcun protocollo il browser aggiungerà automaticamente all'URL http che è il protocollo di default per comunicazione su Internet.

INDIRIZZO RISORSA

• La parte di un URL che contiene l'indirizzo della risorsa è composto da vari elementi, alcuni obbligatori, altre opzionali:

protocollo://nomehost [:porta][percorso][?querystring][#hash]

• Nomehost è obbligatorio. Gli elementi non specificati vengono sostituiti dagli elementi di default.

INDIRIZZO RISORSA

• La parte di un URL che contiene l'indirizzo della risorsa è composto da vari elementi, alcuni obbligatori, altre opzionali:

protocollo://nomehost [:porta][percorso][?querystring][#hash]

• Nomehost è obbligatorio. Gli elementi non specificati vengono sostituiti dagli elementi di default.

ESEMPI DI URL

http://sisteminterattivi.org/home

https://95.110.178.124:8443/login_up.php3?success_redirect_url=https...

ARCHITETTURA CLIENT SERVER

Quando richiedo una risorsa ad un computer remoto possono succedere due cose:

• il computer cerca il file che gli ho chiesto e me lo invia usando il protocollo richiesto. Ad esempio richiedo un immagine o un file audio: spesso il computer remoto semplicemente cerca il file sul suo hard disk e me lo invia
• alla mia richiesta il computer remoto elabora i dati che ho allegato alla mia richiesta e mi invia una il risultato dell’elaborazione. In pratica l’elaborazione avviene in parte sul mio dispositivo locale (client) e in parte su quello remoto (server).

In questo secondo caso parlo di architettura client-server.

ARCHITETTURA CLIENT-SERVER

• Server

• Programma in ascolto su una porta (punto di accesso)

• 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 server, generalmente, può servire più client contemporaneamente

• Client

• Un client è un programma che si connette ad un server, fa una richiesta, aspetta una risposta e la utilizza per preparane un nuova richiesta al server o per fornire un output (un risultato) all'utente.

WEB SERVER

• Un Web Server  è un programma (in esecuzione su un computer remoto o sul computer locale) in grado di gestire le richieste di trasferimento di pagine web ad un client, tipicamente un web browser.  Il Web Server gestisce due flussi di informazioni:

• le richieste che arrivano dai client (che vengono analizzate ed elaborate)

• le risposte inviate ai client (che sono il risultato di queste elaborazioni)

• Per comunicare con i client un web server utilizza il protocollo HTTP (per default sulla porta 80) o il suo corrispondente sicuro HTTPS (sulla porta 443).

• Un web server e spesso è in grado di eseguire programmi lato server, utilizzando linguaggi di programmazione progettati appositamente per questo utilizzo

• Di norma il risultato della elaborazione di questi programmi viene inviato al client sotto forma di pagina web.

WEB SERVER LOCALE

• Un Web Server  locale è un server installato sul tuo pc

• Il numero ip 127.0.0.1 è un numero ip riservato (non utilizzato su internet) che indica il computer locale

• Spesso nei sistemi operativi a questo numero viene assegnato l'alias localhost.

• Con server web locale avremo a che fare con indirizzi del tipo:

http://localhost:61238/index.html

• o

http://127.0.0.1:8000/index.html

COME FUNZIONA INTERNET

1. Le informazioni che ci arrivano da Internet ci arrivano in formato pagina web
2. Come nella comunicazione tradizionale le informazioni sono organizzate semanticamente in indici, titoli, sottotitoli, paragrafi, figure, ecc., in modo che siano intellegibili.
3. Questa formattazione semantica viene fatta utilizzando HTML, un linguaggio che contiene istruzioni che servono, appunto, ad organizzare i contenuti di una pagina web.
4. La pagina web per essere fruita deve essere presentata in maniera piacevole e leggibile su vari tipi di schermo e di dispositivo. A tal fine è stato costruito un altro linguaggio che ha il compito di definire le regole di visualizzazione della varie parti di una pagina: CSS
5. Infine le pagine web sono interattive e possono essere parte di una applicazione web complessa: 
   • Interattività ipertestuale immediata (HTML)
   •  Elaborazione lato server (Invio richieste e ricevo risposte e risultati di elaborazioni)
   • Elaborazione lato client: utilizzo di programmi scritti in javascript per concorrere al funzionamento dell’applicazione.