Cos’è un applicazione

Un pc, un moderno smartphone, un tablet, una moderna smart tv sono macchine elettroniche programmabili.

Grazie ai programmi che possono eseguire sono in grado di ricevere, trasmettere, immagazzinare ed elaborare informazioni.

Un programma è un insieme di linee di codice che, a loro volta, sono costituite da un certo insieme di istruzioni.

Un’applicazione è un programma progettato per eseguire un certo insieme di funzioni, compiti o attività mirate a risolvere un problema dell’utente che lo usa.

Di norma in un dispositivo programmabile abbiamo due tipi di programmi

  • i programmi che costituiscono il sistema operativo del dispositivo che ne garantiscono le funzionalità di base
  • le applicazioni il cui obbiettivo è quello di offrire all'utente un'interfaccia il più possibile immediata per aiutarlo a risolvere problemi concreti

Spesso pensiamo alle app come programmi specifici installati sul nostro dispositivo.

Le pagine web che utilizziamo per collegarci ad un social o alla nostra banca sono programmi altrettanto complessi e utili, vere e proprie applicazioni web che utilizziamo grazie al nostro browser

Possiamo quindi pensare a due tipi di app:

  • app native: sono create per essere installate in maniera permanente su un dispositivo. Le chiamo applicazione native perché sono realizzate per un sistema operativo specifico.
  • applicazioni web: vengono scaricate da internet quando le utilizzo; vengono eseguite grazie al browser; possono girare su qualsiasi dispositivo moderno che sia dotato di un browser.

Molto spesso le app native che posso installare su un dispositivo mobile offrono le stesse funzionalità delle corrispondenti applicazioni web che posso utilizzare con il browser.

Struttura di un'applicazione

 

La progettazione di un app si articolerà quindi in tre fasi:
1. progettazione dell’interfaccia
2. progettazione del modulo
di elaborazione dei dati
3. progettazione dei moduli di gestione
dei dati locali e remoti

Codifica delle informazioni

La precondizione perché un’applicazione possa funzionare è che le informazioni da elaborare siano tradotte in un formato che la macchina elettronica sia in grado di comprendere.

Le informazioni, cioè, grazie ad una operazione di codifica dovranno essere trasformate in dati.

Per comprendere il meccanismo proviamo ad analizzare un’invenzione molto lontana dall’informatica, ma che ha avuto lo stesso impatto fondamentale nello sviluppo della cultura: l’invenzione della stampa.

PRIMA DI GUTEMBERG: amanuensi

COME

  • Ogni pagina (testo e figure) viene copiata a mano

PRO

  • Assoluta libertà creativa: ogni copia è unica

CONTRO

  • Alti costi: il lavoro di ogni amanuense produce una sola copia

  • Possibilità di errori umani

PRIMA DI GUTEMBERG: xilografia

COME

  • Ogni pagina viene ancora copiata a mano, ma incidendo una matrice di legno inversa.

PRO

  • Una volta realizzata la matrice il processo di copia è automatico.

CONTRO

  • Ogni matrice ha la vita di una pagina. Terminata la stampa non si può riutilizzare nulla.

DOPO GUTEMBERG

COME

  • La matrice della pagina viene realizzata affiancando caratteri di piombo preesistenti.

PRO

  • I caratteri di piombo possono riutilizzati molte volte.

CONTRO

  • Viene persa una parte di espressività artistica..

IL PROCESSO

  • Ogni pagina viene scomposta in singole unità informative (i caratteri)

  • Ad ogni carattere viene sostituita la versione che la macchina di stampa è in grado di elaborare (il carattere componibile di piombo)

  • La pagina può essere data in pasto alla macchina che può stamparne centinaia o migliaia di copie.

Definizioni

Informatica è la disciplina che studia l’elaborazione automatica di informazioni.

Elaboratore è sistema per l’elaborazione automatica delle informazioni.

Per automazione si intende tutto ciò che compie un compito prestabilito senza l’intervento umano.

Codifica è l'operazione con cui rendiamo disponibili le informazione per l'elaborazione automatica. Ogni informazione viene tradotta in un sistema simbolico su cui l'elaboratore può operare.

CODIFICA

  • A secondo del tipo di informazione da trattare di solito ho regole di codifica diverse.

  • I caratteri componibili sono ottimi per stampare i testi ma non mi servono a nulla per stampare immagini o disegni.

  • Per inserire disegni in una pagina stampata con il metodo di Gutemberg posso creare delle incisioni da affiancare ai caratteri componibili.

PROGRAMMABILITÀ

  • Un torchio da stampa è una macchina estremamente semplice e specializzata in grado di svolgere un unico compito.

  • Con lo sviluppo dell’industria sono apparse macchine che anche se  dedicate ad un compito specifico, lo possono svolgere in maniera diversa a seconda dei programmi che eseguono (dalle macchine industriali a controllo numerico, alle macchine da cucire da famiglia).

  • Poi sono arrivati i computer che, nati come macchine per eseguire calcoli, hanno perso ogni specificità e sono in grado, eseguendo i programmi adatti, di elaborare qualsiasi tipo di informazione.

  • Oggi questa capacità di simulare qualsiasi macchina eseguendo programmi si è allargata ad altri dispositivi elettronici che ci circondano come i telefoni e le tv

CODIFICA E COMPUTER

  • Il computer è l'elaboratore programmabile più complesso e completo oggi esistente.

  • Come succede per tutti gli elaboratori, le informazioni devono essere correttamente codificate perché il computer possa elaborarle.

  • Il computer è una macchina elettronica e quindi deve usare dei dispositivi elettrici per elaborare le informazioni codificate.

  • Come base del sistema di codifica si è deciso di usare dei micordispositivi in grado di avere due stati elettrici definiti che nella codifica possono essere rappresentati dalle cifre 0 e 1

  • Nelle schedine che vedete qui a destra sono collocate centinaia di miliardi di microdispositivi che possono avere due stati elettrici definiti (potete pensare ad acceso/spento o a carico/scarico)

  • Sulla superficie magnetica di un hard-disk abbiamo decina di migliaia di miliardi di particelle in grado di avere due stati magnetici definiti.

  • Nel primo caso abbiamo la cosiddetta RAM, memoria temporanea che il computer usa per elaborare le informazioni. Nel secondo caso tipo di memoria di massa dove i dati vengono memorizzati in maniera permanente.

  • In entrambi i casi i due stati possono essere rappresentati dalle cifre 0 e 1.

BIT BINARY DIGIT

  • L’unità di base della codifica che trasforma le informazioni in dati che il computer può elaborare è il bit 

  • Il termine bit è la condensazione di binary digit e rappresenta la cifra che viene utilizzate nella rappresentazione dei numeri secondo la notazione binaria e può assumere i valori 0 e 1

  • La rappresentazione fisica di un bit in una macchina automatica richiede un dispositivo in grado di trovarsi in due possibili stati

  • Interruttore (accesso/spento)  

  • Un condensatore (carico/scarico)            

  • Una particella magnetica (Nord/Sud)

  • Ecc.

SISTEMA BINARIO

  • Il sistema numerico binario è un sistema numerico posizionale in base 2. Esso utilizza solo due simboli, 0 e 1, invece delle dieci cifre utilizzate dal sistema numerico decimale. I numeri espressi nel sistema numerico binario sono chiamati numeri binari.    

  • Un numero binario è una sequenza di cifre binarie (dette bit). Il valore della cifra nella posizione n  (contando da destra verso sinistra iniziando da 0) si ottiene moltiplicando la cifra per 2n , anziché per 10n, come avviene nella numerazione decimale. 

SISTEMA ESADECIMALE

  • Il sistema numerico esadecimale (spesso abbreviato come esa o hex) è un sistema numerico posizionale in base 16, cioè che utilizza 16 simboli invece dei 10 del sistema numerico decimale tradizionale. Per l'esadecimale si usano in genere simboli da 0 a 9 per le prime dieci cifre, e poi le lettere da A a F per le successive sei cifre, per un totale di 16 simboli.

  • Il sistema esadecimale è molto usato in informatica, per la sua relazione diretta tra una cifra esadecimale e quattro cifre binarie.   

  • i numeri binari sono ingombranti e di difficile lettura per cui nell’uso comune si è cercata una rappresentazione alternativa
  • la notazione esadecimale ha la caratteristica di rappresentare i numeri in maniera molto più compatta conservando, però, al struttura originale della notazione binaria

CODIFICA

  • La codifica e’ l’operazione che consente trasformare le informazioni in dati numerici che calcolatori elettronici possono leggere ed elaborare.

  • Un bit può assumere solo due valori (0 e 1)

  • Per rappresentare insiemi costituiti da più di due stati/simboli si usano serie di bit.

  • Una stringa di bit e’ costituita da un certo numero di bit (normalmente 8 o multipli di 8) ed e’ detta parola (word).

  • La codifica si articola in due fasi:

  • Divisione dell’informazioni in unità informative

  • Assegnazione ad ogni unità di un valore NUMERICO che la codifica

  • La precisione con cui sarò in grado di rappresentare l’insieme delle informazioni che codifico dipenderà dal rapporto tra il numero delle unità informative diverse da codificare e numero dei codici di cui dispongo.

  • Con n bit si possono rappresentare 2n valori diversi e quindi si possono rappresentare 2n informazioni diverse

  • La lunghezza della parola, quindi, definisce quante informazioni possono essere codificate.

NUMERO DI COMBINAZIONI

  • parola di 8 cifre decimali -> 108 = 100.000.000 conbinazioni da 0 a 99.999.999
  • parola di 8 cifre binarie -> 28 = 256 conbinazioni

da 0 a 11111111

CODIFICA ESATTA E CODIFICA APPROSSIMATA

  • Una codifica esatta a n bit è possibile solo quando l’insieme delle informazioni da codificare è finito e di dimensione inferiore o uguale  al massimo del valore che posso rappresentare con una parola di una lunghezza n.

  • I calcolatori sono oggetti finiti che elaborano e memorizzano un numero finito di bit.

  • Se il calcolatore è in grado di elaborare fino ad un massimo di n bit e l’insieme da codificare ha una contiene un numero di informazioni maggiore di 2n se ne può dare solo una rappresentazione approssimata o parziale. Questa limitazione avviene in due modi:

  • Operazioni di limitazione

  • Operazioni di partizionamento

 

CODIFICA DEL TESTO

STANDARD ASCII
AMERICAN STANDARD CODE FOR INFORMATION INTERCHANGE

  • La codifica ASCII prevede l’utilizzo di 128 caratteri diversi

  • Ogni carattere è associato perciò ad un numero espresso da una parola di 7 bit (0-127)

  • La codifica ASCII è estremamente limitata. Modellata sulle lingua inglese non comprende le lettere con modificatori quali accenti, dieresi, tilde ecc.

CODICE ASCII ESTESO

  • Per superare le limitazioni del codice ASCII standard:

  • Utilizzo di 8 bit invece di sette (256 simboli invece di 128)

  • I primi 128 uguali alla versione standard

  • Gli altri 128 personalizzati per gruppi di lingue

  • Per interpretare correttamente un testo sono necessarie due informazioni:

  • Codifica ASCII

  • Tabella che viene utilizzate per i simboli maggiori di 127

UNICODE

  • Lo standard ISO10646/Unicode si basa su una codifica a 32 bit  che consente oltre due miliardi di possibili caratteri

  • Così possono essere rappresentati tutti i caratteri attualmente usati nel mondo

  • Lo spazio occupato dal testo quadruplica.

  • Sono codifiche che usano un numero variabile di bit per definire un carattere e risparmiare così spazio

  • In UTF 8, ad esempio,  si usano 8 , 16 , 24, 32 bit a seconda dei caratteri da rappresentare. Il decodificatore decodifica il testo leggendo un byte (8 bit) alla volta.  Se il byte è un codice inferiore a 128 il carattere corrisponde all'ASCII standard e viene definito da quell’unico byte, altrimenti il decodificatore controlla il byte successivo, se questo è inferiore 1100000 il carattere viene definito da due byte, altrimenti viene controllato il terzo byte e così via.

NUMERI

  • Una codifica esatta a n bit è possibile solo quando l’insieme delle informazioni da codificare è finito e di dimensione inferiore o uguale  al massimo del valore che posso rappresentare con una parola di una determinata lunghezza

  • I calcolatori sono oggetti finiti che elaborano e memorizzano un numero finito di bit.

  • Se l’insieme da codificare ha una contiene un numero di informazioni maggiore di 2n se ne puo’ dare solo una rappresentazione approssimata o parziale. Questa limitazione avviene in due modi:

  • Operazioni di limitazione

  • Operazioni di partizionamento

NUMERI INTERI

  • I numeri interi sono un insieme discreto illimitato.

  • Per poter essere codificati devono essere limitati.

  • Sottoinsieme simmetrico rispetto allo 0.

  • Si usa 1 bit per rappresentare il segno e i restanti a = n-1 per rappresentare il modulo.

  • Il massimo numero rappresentabile è (in modulo) 2a-1.

  • Se il risultato di un’operazione eccede il modulo 2a-1 non può essere codificato e il calcolatore restituisce un messaggio di overflow.

NUMERI REALI

  • I numeri reali sono un insieme continuo e illimitato.

  • Per poterli rappresentare occorre limitarli (in modo simmetrico rispetto allo 0) e partizionarli.

  • Rappresentazione in virgola fissa: Degli n bit della parola, 1 rappresenta il segno, a rappresentano le cifre prima della virgola e b le cifre dopo la virgola.

     – Il massimo numero rappresentabile è (2n-1-1)/2b

     – L’accuratezza assoluta è 2-b

  • Rappresentazione in virgola mobile: (Floating point).

 

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.

Jpeg massima qualità: 215.609 byte

Jpeg alta qualità (90%): 55.195 byte

Jpeg qualità media (50%): 24.576 byte

Jpeg bassa media (10%): 9.983 byte

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


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.