Scribd
Carica
6 visualizzazioni47 pagine

Informatica 3.

appunti lezione

Caricato da

vittoriacornacchini
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
6 visualizzazioni47 pagine

Informatica 3.

appunti lezione

Caricato da

vittoriacornacchini
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 47

SINTETIZZANDO

I TAG
In HTML, i tag (o marcatori) sono racchiusi tra parentesi uncinate (< >) e marcano l’inizio e
la fine di un contenuto specifico. La chiusura del tag è segnalata dal simbolo / prima del
nome del tag.
Esempio:
- <html>…</html>
- <head>…</head>
- <body>…</body>

SINTASSI DI UN TAG HTML STANDARD


Ci chiediamo come si scriva in generale un tag in HTML.
<nome_tag
attributo1="valore1" … attributon="valoren" >
Contenuto
</nome_tag>

SINTASSI DI UN TAG HTML EMPTY


Ci chiediamo come si scriva un tag EMPTY in HTML.
<nome_tag
attributo1="valore1"… attributon="valoren" >
La differenza rispetto ad un tag standard è che manca il contenuto.
È possibile anche aggiungere lo / internamente, come chiusura del tag, come segue:
<nome_tag
attributo1="valore1" … attributon="valoren" />

SINTASSI DEI COMMENTI


Per rendere il codice più leggibile è possibile inserire dei “commenti”: si tratta di
indicazioni significative per l’autore, ma invisibili al browser.
La sintassi è la seguente:
<!-- questo è un commento —>
I commenti si posso inserire in qualsiasi parte di un documento HTML, ma NON all'interno
delle parentesi uncinate.

VALIDAZIONE HTML
Validare un documento significa assicurarsi di aver rispettato le regole sintattiche della
specifica HTML.
La validazione si può ottenere per HTML sul sito del W3C:
http://validator.w3.org

PERCHE’ VALIDARE IL DOCUMENTO HTML


Se un sito Web utilizza un linguaggio non conforme agli standard internazionali del W3C,
la sua visualizzazione potrebbe apparire diversa da browser a browser.
La presenza di errori nel codice HTML della pagina, rallenta la lettura da parte dei browser,
causando problemi di lentezza di navigazione.
Rispettare gli standard del Web rende più semplice lo sviluppo e l’utilizzo di tecnologie
assistive concepite per utenti diversamente abili.
Maggior manutenibilità del codice HTML.
Leggi nazionali (es. legge Stanca).
Infine, la validazione di un sito può influenzare (seppur in maniera minima), la sua
indicizzazione ed il suo posizionamento sui vari motori di ricerca.
RIFERIMENTO PER LA LISTA DEI TAG E GLI
ATTRIBUTI
Usiamo il sito della w3schools per identificare la lista di
tutti i tag e i loro attributi, seguendo il collegamento:
https://www.w3schools.com/tags/default.asp
Guardiamo la sintassi dei tag:

I TAG <DIV> E <SPAN>

<DIV> e <SPAN>
Gli elementi <div> (divisione) e <span> (insieme spaziale di parole) sono tag HTML
che si prestano particolarmente ad essere ‘sfruttati’ dai CSS.
Permettono di suddividere logicamente un documento (<div>) o determinate aree di
contenuto (<span>), associando loro stili specifici.

<DIV>
<div> è un tag di tipo block.
Esso definisce una divisione o una sezione di un documento HTML.
Da solo non fornisce cambiamenti visuali, se non legati al suo essere block.

<SPAN>
<span> è un tag inline.
Da solo, non fornisce cambiamenti visuali.
Esempio di utilizzo: specifica lo stile per tutti i numeri di telefono che compaiono all’interno
del testo di un documento html.

I FOGLI DI STILE

I FOGLI DI STILE-CSS
I CSS (cascading stylesheets) sono stati introdotti per definire l’aspetto grafico di una
pagina Web, separandolo dal suo contenuto.
Si tratta di un linguaggio, le cui regole sono contenute in un insieme di direttive
(Recommendations) emanate a partire dal 1996 dal W3C.

LE REGOLE DI STILE CSS


Le regole regole di stile esprimono le caratteristiche di stile
per un elemento HTML. Esse hanno la forma:
nome_elemento{proprietà1:valore1; … proprietàn:valoren}
Esempio
ESEMPI DI REGOLE
• h1 {color: red;}
Rende rosso il testo marcato con <h1>
• body{background-color:black; color:white;}
Rende nero lo sfondo dell’intero documento, e bianco il testo
• p{text-align:justify;}
Crea allineamento giustificato per il testo all’interno di ogni <p>
• a{text-decoration:none}
Toglie la sottolineatura a tutte le àncore.

DOVE INSERIRE LE REGOLE DI STILE


Le regole di stile possono essere utilizzate in tre modi diversi:
- Stili in linea;
- Foglio di stile interno;
- Foglio di stile esterno.

STILI IN LINEA
Si può definire lo stile di un singolo elemento utilizzando l’attributo style.
Gli stili inline si applicano ai soli tag a cui sono associati
Esempi
<h1 style="color: blue”>Titolo</h1>
<body>
style="background-color:black; color:white;">
Contenuto pagina
</body>
<p style=“text-align:justify”>Testo</p>
<a style=”text-decoration:none” href=“index.html”>
Vai alla home page
</a>

PERCHE’ NON USARE STILI IN LINEA !!IMPORTANTE!!


Questa tecnica è spesso utilizzata per sperimentare velocemente stili durante lo sviluppo
di una pagina, ma andrebbe evitata perché:
- Influisce solo sull’aspetto dell’elemento html per cui è definito;
- Appesantisce il codice html rendendolo nel tempo poco manutenibile;
- Mescola struttura (html) dell’informazione con sua presentazione, andando
controcorrente alla ‘filosofia’ dei CSS.

FOGLIO DI STILE INTERNO


Le regole di stile vengono tutte inserite all’interno del tag <style> (che va nella sezione
<head>).
Un foglio di stile interno ad un documento si applica al solo documento.
Esempio:
<head><title>Esempio</title>
<style>
h1 {color: red;}
body{background-color:black; color:white;}
p{text-align:justify;}
a{text-decoration:none}
</style>…
</head>…

FOGLIO DI STILE ESTERNO


Le regole di stile vengono inserite all’interno di un file che avrà estensione .css.
Esso viene poi collegato a qualsiasi file HTML usando il tag <link> (che va nella sezione
<head>).
Un foglio di stile esterno viene applicato a qualsiasi documento in cui esso viene
richiamato.
…<head>
<title>Esempio</title>
<link href="styles.css"
rel="stylesheet"
type="text/css" media="all">
</head>…
Esempi

I COMMENTI
È buona prassi commentare gli stili di un CSS, come un semplice ausilio per la propria
memoria o come aiuto nei confronti di altre persone con cui si collabora.
I commenti si aprono con una barra e un asterisco (/*) e si chiudono con la sequenza
inversa (*/)
/* Titoli */
h1{color: black;} /* colore del titolo*/
h2{color: gray;} /* colore del sottotitolo*/

USO DEI SELETTORI DI CLASSE E DEGLI IDENTIFICATORI

I SELETTORI DI CLASSE
I selettori di classe servono a scrivere regole specifiche per determinati elementi e a
richiamarle all’interno di un foglio di stile.
Si può applicare la classe a qualsiasi elemento html (contenuto in <body>).
Nel foglio di stile il selettore di classe è specificato facendo precedere il nome della classe
dal punto (.).
SINTASSI E UTILIZZO DEI SELETTORI DI
CLASSE
Se nel documento html si scrive:
<p class=“special">…</p>
Nel foglio di stile si scriverà una regola
richiamando il nome della classe preceduto dal
punto, come nell’esempio:

ESEMPIO DI SELETTORE DI CLASSE


Regola di stile definita come ‘intro’ nel CSS:
.intro {
font-size: 125%;
font-family: sans-serif;
}
Applicazione della classe ‘intro’ nel
documento HTML:
<p class="intro">This is the first
paragraph of the document. It has a
different style based on the "intro”class
selector.</p>

VISUALIZZAZIONE SUL BROWSER

Lo stile della regola di classe “intro” si applica solo al paragrafo per cui è stata indicata.

ESEMPIO
Si consideri il seguente codice html:
<p>Benvenuti a
<span class="citta"> Gorizia</span>,
nel polo di Santa Chiara</p>
Applicando la seguente regola di stile:
span.citta {font-family: Arial;
color: white;
background-color: black;
}

L’USO DEGLI IDENTIFICATORI


L’attributo id va utilizzato solo per un singolo elemento all’interno del documento (identi ca
in modo univoco un elemento).
L’attributo id è solitamente utilizzato per
identificare sezioni di layout di una pagina.
Per richiamare un selettore id all’interno di
un foglio di stile si utilizza il carattere
cancelletto (#).

COME SI UTILIZZANO I SELETTORI DI ID


Se nel documento html si scrive:
<p id=“copyright”>
…
</p>
Nel foglio di stile si scriverà una regola richiamando il nome dell’id preceduto da #, come
nell’esempio:

ESEMPIO
Si consideri il seguente frammento di
codice HTML, che utilizza un <div> con
attributo id per creare una divisione logica
del documento:
<div id="red">Questo testo è rosso
</div>
Le regole CSS si associano a questo elemento come di seguito:
div#red{
color:red;
}

SINTASSI SEMPLIFICATA
Per migliorare la leggibilità di un foglio di stile, è bene sapere che entrambe le seguenti
dichiarazioni sono valide, seppure con effetti diversi:
fi
div#red si applica esclusivamente ai tag div che abbiamo attributo id="red", mentre #red si
applica a qualsiasi tag che abbia attributo id="red". Allo stesso modo, span.citta si applica
esclusivamente ai tag span che abbiamo attributo
class="citta", mentre .citta si applica a qualsiasi tag che
abbia attributo class=“citta”.

I FORMATI MULTIMEDIALI PER IL WEB


LE IMMAGINI
LA VISIONE
Ci sembra del tutto scontato e naturale che i colori siano una
caratteristica delle cose stesse.
Invece, il colore non è una caratteristica del mondo fisico, ma il
complesso risultato dell'effetto della luce sull'apparato
percettivo umano. Un’arancia non è arancione ma che ci appare
arancione.

LUCE INVISBILE
La luce visibile è un’onda elettromagnetica nel range dei 400-700 nm (nanometro = 10-9
m)
La retina umana è fatta di due tipi di recettori: coni (7 milioni circa) e bastoncelli (120
milioni circa).
Ciascun tipo, quando stimolato dalla radiazione elettromagnetica, produce un particolare
pigmento – la iodopsina i coni e la rodopsina i bastoncelli – che avvia una serie di reazioni
chimiche e stimolazioni nervose, il cui esito finale è la percezione di luci e colori.

BASTONCELLI E CONI
• I coni sono sensibili ai colori.
• I bastoncelli sono sensibili ai livelli di luce.

PERCEZIONE VISIVA
La percezione visiva è sintetica: una luce
rossa ed una luce
verde che colpiscono insieme un medesimo
punto della retina avranno come risultato la
percezione del giallo; non vedremo né il
rosso né il verde.

Giocando con le tempere da piccoli siamo stati abituati a mescolare i colori e a vedere che
rosso e giallo danno arancione, blu e giallo danno verde, …
Queste leggi valgono anche nella visione?
Ci chiediamo se mescolando due raggi luminosi, il primo rosso e il secondo giallo
otteniamo ancora arancione.
La risposta è negativa. Esistono due tipi diversi di sintesi.

SINTESI ADDITIVA
La sintesi dei pigmenti (o sostanze colorate) si chiama sottrattiva perchè i colori mescolati
sottraggono la luce fino al nero.

ESPERIMENTO
Disco di Newton

SINTESI (O MESCOLANZA) ADDITIVA


Luci di differente lunghezza d'onda generano – sommate insieme – la visione del bianco:
questo fenomeno è definito sintesi o mescolanza additiva.
La visione del bianco può essere considerata come la controparte percettiva della somma
di tutte le radiazioni che compongono lo spettro visibile.
Ai fini della creazione di un sistema affidabile per la generazione di colori ottenuti
miscelando luci colorate, si ricorre solitamente all'uso di tre colori-base, che sono definiti
primari. I primari utilizzati oggi nei televisori, nei monitor dei computer e nei sistemi di
grafica digitale sono il rosso, il verde e il blu (RGB).
È interessante notare, però, che la terna dei cosiddetti colori primari è una scelta arbitraria
dell'uomo, che non ha giustificazioni nella fisica o nella fisiologia dell'occhio. Una terna di
colori primari, cioè, non esiste in natura.

SPETTRO VISIBILE
• Il prisma rifrange la luce bianca nei colori di cui è composta (spettro).

• Proiettando rosso, verde e blu otteniamo per miscelazione tutti gli altri
colori e la luce bianca.

LE IMMAGINI

DIGITALIZZAZIONE
Tutti i media (in particolare immagini, audio e video) per essere
elaborati da un computer devono essere trasformati da quella che è la
loro forma naturale (esterna al calcolatore, che viene definita solitamente analogica) in
forma digitale. Questo complesso processo è detto
digitalizzazione.

ANALOGICO
L’aggettivo analogico è in genere utilizzato per indicare
apparecchi, strumenti o dispositivi che trattano grandezze
rappresentandole con altre grandezze legate alle prime da
una relazione di analogia (in contrapposizione appunto a
digitale o numerico).
Ad esempio, la figura mostra un orologio analogico, che utilizza il movimento circolare
delle lancette (ovvero un trascinamento di oggetti nello spazio) per rappresentare il
cambiamento del tempo.

DIGITALE
L’aggettivo "digitale" viene usato per indicare, in
elettronica e in informatica, apparecchi o dispositivi
che rappresentano grandezze sotto forma numerica,
usando i simboli di un certo sistema di numerazione
(decimale o binario).
Un segnale è in formato digitale se viene
rappresentato attraverso cifre ("digit", in inglese) di
un sistema di numerazione.
Ad esempio, la figura mostra un orologio digitale, che rappresenta lo scorrere del tempo
attraverso il cambiamento del valore delle cifre.

CICLO DI AQUISIZIONE E DI RIPRODUZIONE

IMMAGINI RASTER
Sono una matrice bidimensionale di pixel colorati, le cui dimensioni sono determinate dalla
quantità di pixel (es. 640x480). Ciascun pixel assume un colore o una tonalità di grigio.
Ingrandendo un'immagine bitmap, i pixel appaiono evidenti.
ESEMPIO
Immagine bitmap Immagine vettoriale

IMMAGINI VETTORIALI
La grafica vettoriale disegna le immagini combinando elementi primari calcolati come
coordinate numeriche e formule che ne specificano la forma e la posizione nell’immagine.
Queste immagini sono alla base dell'animazione tridimensionale, grazie alle molteplici
capacità di visualizzazione delle stesse forme.

FORMATI VETTORIALE E RASTER


Immagini vettoriali vengono codificate attraverso l’uso di funzioni matematiche.
- Non sono vincolate a nessuna risoluzione
- Facili da trasformare in raster
- Possono contenere immagini raster
Immagini raster vengono codificate con una sequenza di punti (pixels).
- Comunemente dette anche bitmap (tecnicamente bitmap vale solo per immagini B/W)
- Hanno una definizione fissata
- Non possono includere immagini vettoriali

QUALITA’ DELL’IMMAGINE
L’immagine digitale in formato raster è memorizzata come una griglia (matrice) di n x m di
punti, che vengono detti dot (punti) oppure, riferendosi allo schermo, pixel.
La qualità dell’immagine bitmap dipende da due fattori:
1. Risoluzione spaziale (o semplicemente risoluzione), che specifica la dimensione
della griglia utilizzata per memorizzare l’immagine.
2. Risoluzione cromatica (o profondità di colore), che definisce quanti e quali colori
sono utilizzati per rappresentare l’immagine

HSV (HUE,SATURATION,VALUE) - RGB (RED,GREEN,BLUE)


• Tonalità (detta anche tinta) varia partendo convenzionalmente dal rosso primario,
passando per il verde primario e il blu primario, e quindi tornando al rosso.
• Saturazione (detta anche purezza) indica l'intensità e la purezza della singola tonalità;
• Valore (detta anche luminosità, o brillanza) è un'indicazione della sua brillantezza.

NELLE STAMPE: DPI (DOTS PER INCH)


DPI è l'acronimo dell'espressione inglese Dot Per Inches e rappresenta l'unità di misura
che esprime il numero di punti per pollice, ovvero la quantità di informazioni grafiche che
possono essere rese da una stampante grafica, da un plotter, o da monitor.
Generalmente ad un valore più elevato corrisponde una risoluzione maggiore e una
migliore resa sulle linee inclinate, oltre ad una possibilità di ricavare ingrandimenti senza
effetti sgradevoli.
QUANTO SPAZIO OCCUPA UNA IMMAGINE
L’occupazione in memoria varia in funzione della profondità di colore e delle dimensioni
dell’immagine.
Esempi:
- B/W 400 x 400 occupa 160K = 20KB = 19,5 KiB
- scala di grigi 160x120 occupa18,75 KiB
- 8 colori indicizzati 640 x 480 occupa300 KiB
- True color 1024 x 768 occupa 2,25 MiB
(valori per immagini non compresse)
La compressione può ridurre fortemente le dimensioni.
Esempio:
- JPEG 1024x768 può occupare 300 KB

COME CALCOLARE LO SPAZIO OCCUPATO


• Dim: (400 x 400) pixel, profondità di colore: B/W, 1 bit
400 x 400 x 1 bit = 160.000 bit = 160.000/ 8 B = 20.000 B = 19,5 KiB
• Dim: (160x120) pixel, profondità di colore: scala di grigi a 8 bit
160 x 120 x 8 bit = 1920* x 1 B = 1920/1024 KiB =
18,75 KiB

LA COMPRESSIONE DEI DATI


La compressione può essere eseguita in tempo reale o
in tempo differito.
Il dato deve essere decompresso per essere utilizzato.
La decompressione deve essere eseguita in tempo
reale.
- La riduzione del numero di bit necessari per codificare una singola informazione
(compressione entropica)
- La riduzione del numero di informazioni da memorizzare o trasmettere
- (compressione differenziale, compressione semantica)

La compressione può conservare integralmente o no il contenuto del dato originale


- Compressione senza perdita di informazione (lossless, reversibile): sfrutta le
ridondanze nella codifica del dato
- Compressione con perdita di informazione (lossy, irreversibile): sfrutta le
ridondanze nell’utilizzo (percezione) del dato

IL PROCESSO DI COMPRESSIONE
Il processo di compressione procede attraverso 3 fasi:
1. Trasformazione: i dati che costituiscono l’informazione (es. i punti di
un’immagine) sono trasformati in un dominio che richiede (può richiedere) meno
bit per la rappresentazione dei valori
2. Quantizzazione: i valori così ottenuti sono (possono essere) raggruppati in un
numero di classi minore e con distribuzione più uniforme
3. Codifica: l’informazione viene codificata in termini delle classi e dei valori
ottenuti, insieme alla tabella di codifica

TECNICHE DI COMPRESSIONE LOSSLESS


TECNICHE DI COMPRESSIONE LOSSLESS
Run-lenght encoding (RLE)

- Codifica sequenze di valori uguali premettendo un indicatore di ripetizione al valore


codificato
Codifica di Huffman
- Assegna un numero inferiore di bit alle sequenze più probabili attraverso un vettore
di codifica
Compressione Lempel-Ziv-Welch (LZW)
- Costruisce dinamicamente una tabella di codifica con numero variabile di bit sulla
base delle sequenze incontrate
Codifica differenziale
- Ogni dato è rappresentato come differenza rispetto al dato precedente (con
risoluzione lineare e non lineare)

RUN LENGHT ENCOGING (RLE)


Se ci sono molti valori consecutivi ripetuti c’è molta ridondanza che può essere
eliminata.
Lunghe sequenze dello stesso valore possono essere sostituite da un simbolo di
ripetizione, dal valore e dal numero di ripetizioni.
La compressione è efficace per sequenze di almeno tre valori uguali.
È adatta alla rappresentazione di immagini con poco dettaglio
(es. uno sfondo uniforme).

CODIFICA DI HUFFMAN
La codifica di Huffman è una codifica entropica, e produce un
codice a lunghezza variabile.
La lunghezza della rappresentazione di ogni simbolo
codificato dipende dalla probabilità che esso appaia all’interno
nella sequenza da codificare. Più probabile è il simbolo, più breve sarà la sua codifica.
La maggior parte degli algoritmi di compressione, anche lossless, contiene una fase in cui
viene utilizzata la codifica di Huffmann.
Esempio
Se considero i simboli A, B, C, D ed E, e sia pi la probabilità che il valore i-esimo si
presenti; in questo caso la probabilità coincide con la frequenza.
APPENDICE - DALLE OCCORRENZE ALLA FREQUENZA
Ammettiamo che le occorrenze dei simboli presenti in un
testo siano le seguenti:
•Simbolo A B C D E
•N. Occorrenze 76 36 32 30 26
Come si valuta la frequenza/probabilità?
Un modo per calcolare la frequenza consiste, fissata la somma totale delle occorrenze dei
singoli simboli, nel dividere tale somma per le occorrenze dei singoli simboli.

Nel nostro caso la somma totale è


76 + 36 + 32 + 30 + 26 = 200
f(A) = 76/200 = 0.38 f(B) = 36/200 = 0.18 e così via.

ESEMPIO
La codifica di Huffman crea un albero binario in modo bottom-up, cioè dal basso verso
l’alto. Le foglie dell’albero sono i simboli.
Ad ogni passo prende i due nodi con le probabilità più basse, crea un sottoalbero e gli
assegna come probabilità la somma delle probabilità dei nodi figli, fino ad arrivare alla
radice.

Etichetta, a partire dalla radice, i rami di destra con il bit 1, quelli di sinistra con il bit 0.
Il codice associato ad ogni simbolo è l’etichetta del cammino della radice.

Nota:
L’ordine di etichettatura non è importante. Allo stesso simbolo questa codifica può
associare parole diverse.

ESEMPIO
La codifica associata ad ogni simbolo è l’insieme di etichette del cammino dalla radice fino
al simbolo.
Si noti come il simbolo più probabile A ha lunghezza della codifica c(A) = 0 minima, in
questo caso un solo simbolo.
c(A) = 0
c(B) = 100
c(C) = 101
c(D) = 110
c(E) = 111

ESERCIZIO
Siano assegnate le seguenti probabilità per i simboli. Trovare il codice di Huffman
associato.

LZW (LEMPEL-ZIV-WELCH)
L’algoritmo non distruttivo che va sotto il nome di LZW è il risultato delle modifiche
apportate nel 1984 da Terry Welch ai due algoritmi sviluppati nel 1977 e nel 1978 da Jacob
Ziv e Abraham Lempel, e chiamati rispettivamente LZ77 e LZ78.
Si tratta di una tecnica alla base di molti programmi di
compressione di dati su disco (ZIP, ARJ, GZ, ecc.) oltre che di
formati grafici (GIF, PNG).

- Usa i dati immessi per costruire un alfabeto espanso, basato


sulle stringhe incontrate.
- Mappa un numero variabile di simboli in un codice a lunghezza
fissa.
- Ottimo nel caso medio
- Rapporto di compressione dell’ordine del 50-70% al massimo.

LZW
Il risparmio di spazio in un file compresso con LZW dipende dal fatto che il numero di bit
necessari a codificare una parola che rappresenta una stringa nel dizionario è inferiore al
numero di bit necessari a scrivere nel file non compresso tutti i caratteri che compongono
la stringa.
Quanto più numerose e lunghe sono le stringhe che è possibile inserire nel dizionario,
tanto maggiore sarà il coefficiente di compressione del file e quindi l’algoritmo è
asintoticamente ottimo.

COMPRESSIONE LOSSY
I FRATTALI
La teoria dei frattali fu introdotta da Benoit B. Mandelbrot tra la fine degli anni ‘70 e l’inizio
degli anni ’80.
Parte dall'osservazione che esistono in natura delle strutture autosomiglianti, cioè
strutture, dette appunto frattali, che presentano caratteristiche pressoché identiche a
qualunque livello di dettaglio vengano ingrandite.
I frattali sono impiegati attualmente in Computer Graphics per creare oggetti molto
complicati come gli alberi, oppure per simulare effetti come il fumo o il fuoco.

COSA E’ UN FRATTALE?
Un frattale è un oggetto geometrico che si ripete nella sua struttura allo stesso modo su
scale diverse, ovvero che non cambia aspetto anche se visto con una lente di
ingrandimento.
In geometria sono oggetti autosimili che possono essere costituiti seguendo precise regole
di tipo matematico.
La parola frattale deriva dal termine latino fractus e significa spezzato, irregolare.

JULIA
• Gaston Maurice Julia, matematico francese nato nel 1893, propone per primo il
concetto di frattale.
• Il suo lavoro venne reso popolare dal polacco Mandelbrot.

MANDELBROT E SIERPINSKI
Mandelbrot viene considerato il padre dei frattali.
Egli è il fondatore della geometria frattale; ha dato il proprio nome
ad una famiglia di frattali, detti appunto frattali di Mandelbrot, e a un
particolare insieme, detto insieme di Mandelbrot.
Mandelbrot scopre i frattali quasi per caso nel 1979, mentre
conduceva degli esperimenti per conto del Thomas J. Watson
Research Center dell'IBM: suo zio, noto matematico, nel 1945, gli
propone di leggere il lavoro di Julia del 1918. Affascinato da tale
lavoro, anche con l'aiuto della computer grafica, definisce l concetto
di frattale, che ingloba anche il frattale di Julia.
La forte repulsione dello zio verso una matematica polacca astratta, in particolare quella
proposta da Waclaw Sierpinski, spinge di contro Mandelbrot a lavorare su essa e proprio
nei lavori di Sierpinski trova idee che lo porteranno alla definizione della geometria frattale.

QUANTO MISURA?
Alla domanda: “Quanto misurano le coste della Gran
Bretagna?”, Mandelbrot risponde che la lunghezza
dipende dallo strumento di misura.
Ogni volta che si riduce la lunghezza dello strumento
di misura, la lunghezza della costa aumenta, perché si può tenere conto di sinuosità
sempre più piccole.
Ponendo l’attenzione sulla costa orientale degli Stati Uniti, essa sembra una linea della
lunghezza approssimativa di 4.000 Km. La stessa costa, disegnata su un atlante, appare
molto più frastagliata. Quando si aggiungono le lunghezze dei capi e delle baie, la
lunghezza complessiva diventa circa 7.000 Km. Se passiamo a una scala minore,
troviamo una curva estremamente complessa, lunga quasi 20.000 Km.
Una persona che percorresse a piedi la costa, dovrebbe percorrere quasi 25.000 Km per
compiere il viaggio. E una formica che intendesse compiere la stessa spedizione,
dovrebbe forse percorrere 50.000 Km. Altri viaggiatori, ancora più piccoli, potrebbero
trovarsi a compiere un percorso ancora più lungo…

CARATTERISTICHE

Un frattale deve possedere alcune caratteristiche fondamentali:


- Autosomiglianza: se dettagli vengono osservati a scale
differenti, si nota sempre una certa somiglianza approssimativa con
il frattale originale.
- Risoluzione indefinita: non è possibile definire in modo netto ed
assoluto i confini dell'insieme (i bordi dell’immagine)
OGGETTI FRATTALI
FIOCCO DI NEVE DI VON KOCH
La figura a lato mostra come generare il cosiddetto fiocco di
neve di von Koch: si prende un segmento, lo si taglia in 3
parti e si sostituisce quella centrale con due segmentini
uguali a quello eliminato; ora si ripete l'operazione con ciascuno
dei quattro segmenti così ottenuti e si continua a ripeterla
per un numero infinito di volte. La curva che si ottiene dopo un numero infinito di iterazioni
è una curva frattale e come tutte le curve frattali è dotata di affascinanti proprietà
matematiche, facili da intuire ma, spesso, difficili da dimostrare.
Se il nome "fiocco di neve" vi sembra poco appropriato per la curva della slide
precedente, forse cambierete idea osservando ciò che si ottiene applicando il
procedimento appena descritto ai lati di un triangolo.

QUANTO MISURA?
Ad ogni iterazione la lunghezza della curva cresce di un fattore 4/3: se il segmento di
partenza ha lunghezza pari a 1, il secondo misura 4/3, il terzo 16/9, il quarto 64/27 e così
via. Questa successione è chiaramente divergente, cioè tende ad assumere un valore
infinito. Ma non è tutto: ogni pezzo del fiocco di neve, anche piccolissimo, gode della
proprietà dell'autosimilitudine cioè contiene in sé un'infinita ricchezza di particolari, di
minuscoli fiocchi di neve, e quindi anch'esso è di lunghezza infinita.

POLVERE DI CANTOR
La polvere di Cantor presenta la caratteristica dell’autosimilarità.
Partendo da un segmento, lo si divide in tre parti uguali eliminando la parte centrale: ai
due segmenti rimanenti, si applicherà lo stesso procedimento ottenendo il frattale mostrato
in figura.

TRIANGOLO DI SIERPINSKI
La costruzione del triangolo di Sierpinski parte da un un triangolo equilatero: unendo i
punti medi dei lati, si otterrà un nuovo triangolo, capovolto rispetto al precedente. Iterando
questo procedimento si ottiene il triangolo di Sierpinski, mostrato in figura.

I FRATTALI COME FIGURE GEOMETRICHE


Un frattale può essere visto come una figura geometrica in cui un motivo identico si ripete
su scala continuamente ridotta.
Ingrandendo un frattale si otterranno forme ricorrenti.
Ad ogni ingrandimento esso rivelerà nuovi dettagli.
Contrariamente a qualsiasi altra figura geometrica, un frattale, quando è ingrandito, non
perde dettaglio ma si arricchisce di nuovi particolari.

INIZIATORE E GENERATORE DI UN FRATTALE


I frattali possono essere definiti matematicamente.
In particolare alcune classi di frattali geometrici possono essere facilmente costruiti
mediante l'uso di due soli enti matematici detti rispettivamente iniziatore e generatore:
- L’iniziatore fornisce la struttura grossolana della forma dell’oggetto frattale
- Il generatore fornisce informazioni sui suoi dettagli
La costruzione di un frattale consiste nell'applicazione ripetuta del generatore
dall'iniziatore, con corrispondente cambiamento di scala ad ogni applicazione: il risultato
finale di tale iterazione è appunto un frattale geometrico.

COMPRESSIONE FRATTALE DELLE IMMAGINI


In tempi recenti (a partire dal 1988) è stata sviluppata una nuova tecnica di compressione
per le immagini detta compressione frattale.
Si tratta di un metodo di compressione lossy, utilizzato per la compressione delle immagini
con l'uso di frattali. Il metodo ha la sua maggiore efficacia per le fotografie di scene di
natura (alberi, montagne, nuvole).
La compressione frattale si basa sull'osservazione secondo cui gli oggetti frattali
deterministici posseggono la proprietà intrinseca di
presentare complessità visuali estremamente elevate, pur
avendo contenuto informativo estremamente basso.

L’UNIVERSO
Secondo il fisico e cosmologo statunitense Alan Guth
l’universo sarebbe un’immenso frattale che avrebbe la
struttura dell’insieme di Cantor.

TEOREMA DEL COLLAGE DI BARNSLEY


Il Teorema del collage di Barnsley dimostra che per un grande insieme di immagini
naturali esiste necessariamente una rappresentazione frattale semplice, ma non fornisce
un algoritmo generale per la costruzione di queste rappresentazioni.
In pratica, ottenere immagini di alta qualità con rapporti di compressione sensibilmente
superiori al JPEG richiede un grande impegno umano.

LIMITI DELLA COMPRESSIONE FRATTALE


• Carico computazionale. Nonostante
l'indiscutibile novità della compressione
frattale per le immagini e delle teorie che ne
stanno alla base, gli elevatissimi carichi
computazionali e l'incerta caratterizzazione in
termini di fedeltà di ricostruzione,
rappresentano una contropartita ancora
inaccettabile ai favorevoli rapporti di
compressione ottenibili da essa.
• Contributo umano. Inoltre i migliori esempi
della compressione frattale richiedono un
significativo contributo umano: il processo di generazione di un'immagine dalla sua
rappresentazione frattale è semplice da automatizzare, ma la procedura inversa è
invece complessa, soprattutto da ottimizzare.
• Eterogeneità della realtà da codificare. La maggior parte delle immagini naturali
hanno proprietà matematiche eterogenee (per esempio, un'immagine con un lago, alberi
e prati può essere rappresentata tramite varie classi di rappresentazioni frattali).
• Le maggiori semplicità ed efficienza degli algoritmi di compressione JPEG e JPEG 2000
hanno per il momento messo in secondo piano le tecniche di compressione frattale.

FORMATI MULTIMEDIALI PER IL WEB


AUDIO
FONDAMENTI ACUSTICA
Quando un corpo vibra, la sua vibrazione si propaga nell'ambiente circostante sotto forma
di un'onda che esercita una pressione nel mezzo in cui si propaga, ed è proprio
quest'onda che viene chiamata suono.
Noi possiamo sentire un suono solo se esiste un mezzo attraverso il quale la vibrazione
del corpo si può propagare; il suono si propaga in qualsiasi tipo di mezzo, solido liquido o
gassoso, anche se con velocità diverse.
Il suono rappresenta dunque una forma di trasporto di energia meccanica da un punto ad
un altro di un dato mezzo elastico attraverso il quale l'onda si propaga.

LA PERCEZIONE DEL SUONO


L’onda sonora si infrange contro il timpano che oscilla seguendo le variazioni di
pressione.
Il movimento del timpano viene poi amplificato e trasferito ad un organo chiamato coclea
tramite tre ossicini (staffa, incudine e martello), che formano una specie di snodo
meccanico.
Il compito della coclea è quello di convertire le vibrazioni meccaniche che giungono dagli
ossicini in impulsi elettrici da inviare al cervello utilizzando il nervo uditivo.

PSICOACUSTICA
La psicoacustica è la scienza che si occupa dello studio della percezione sonora.
L’orecchio umano, che percepisce le frequenze che vanno dai 20 Hz ai 20 kHz, è più
sensibile tra i 2kHz e i 4 kHz.
Il range dinamico, dal suono più basso al più alto percepito, è di 96 dB (Decibel).

IL SUONO COME ONDA ANALOGICA

FONDAMENTI ACUSTICA
Le principali caratteristiche di un suono sono:
• Frequenza
• Ampiezza
• Timbro

FREQUENZA
La frequenza è il parametro che permette di distinguere tra suoni acuti e gravi; quanto
maggiore è la frequenza, tanto più acuto è il suono.
La frequenza è il numero di periodi (o di vibrazioni) al secondo.
L’unità di misura della frequenza si chiama Hertz, o in breve Hz.
- 1Hz = 1 vibrazione al secondo
- 1 Kilo Hertz = 1.000 vibrazioni al secondo
Ogni apparato uditivo percepisce gamme limitate di frequenze.

GAMMA UDIBILE
La sensibilità dell’apparato uditivo umano si estende nella gamma di frequenze che vanno
dai 20Hz ai 20.000 Hz (20.000 = 20 K).

La sensibilità alla frequenze non è uniforme.


Se consideriamo i suoni compresi nella gamma udibile, ci accorgiamo che all’aumentare
della frequenza, non aumenta linearmente la sensazione dell’altezza del suono.
Per esempio, se consideriamo un suono a 20 Hz ed uno a 30 Hz, ad una differenza di 10
Hz corrisponde una chiara differenza nell’altezza del suono udito. Al contrario, se
consideriamo un suono di 6.000 Hz ed uno di 6.010 Hz, pur con una differenza sempre di
10 Hz, non avvertiamo nessuna differenza nell’altezza del suono.

INFRASUONI, ULTRASUONI E IPERSUONI


- Infrasuoni (o gamma subsonica) = i suoni la cui frequenza sia al di sotto dei 20 Hz
- Ultrasuoni = i suoni la cui frequenza va dai 20.000 Hz a 1 GHz (da 20.000 a un
miliardo di vibrazioni al secondo)
- Ipersuoni = da 1 GHz a 10 THz (da un miliardo a 10.000 miliardi di vibrazioni al

secondo).
Così, per esempio, il sonar, ma anche i delfini, i pipistrelli, i topi e i ratti, percepiscono gli
ultrasuoni mentre gli elefanti percepiscono gli infrasuoni.

SUONI E FREQUENZE
Sappiamo che l’orecchio umano percepisce suoni con frequenze che vanno dai 20Hz e i
20.000 Hz.
• La voce umana maschile può emettere suoni fra i 120 Hz e i 7.000 Hz.
• La voce umana femminile può emettere suoni fra 200 Hz e 9.000 Hz.
• Una radio trasmette tra i 50 Hz e i 15.000 Hz.

AMPIEZZA
L’ampiezza dà informazioni sulla dinamica di un suono, sulla sua intensità e quindi sul
volume.

L’unità di misura fisica (che misura la pressione sonora) è W/m2 (W sta per watt) ma
poiché l'orecchio è in grado di percepire suoni di intensità variabile entro limiti vastissimi, si
preferisce adottare come unità di misura dell’intensità il decibel (dB).
1 dB = 20 log10A dove A è la pressione sonora

SOGLIA DI UDIBILITA’ E SOGLIA DEL DOLORE


Il campo udibile dall’orecchio umano varia da 0 a 130 dB
(soglia del dolore).

TIMBRO
Il timbro, detto anche impropriamente colore del suono, ci dà informazioni sulle
caratteristiche della sorgente sonora; per esempio, ci permette di distinguere fra due note
con la stessa frequenza e la stessa ampiezza emesse una da un piano e una da un
violino.
Chiamato anche “forma d’onda” perché caratterizza il modo in cui una specifica sorgente
vibra.

SENSIBILITA’ AI SUONI
Come detto, l'orecchio umano percepisce i suoni in modo non
lineare: è sensibile in misura differente alle varie frequenze.
Questo grafico mostra che per percepire suoni molto bassi o alti
(in frequenza) abbiamo bisogno che questi suoni siano molto
intensi. Le frequenze che percepiamo meglio sono quelle fra i 2 Hz e i 4 KHz.

MASCHERAMENTO
Un interessante fenomeno relativo alla percezione sonora è il masking (mascheramento).
Possiamo distinguere tra due tipi di mascheramento:
- Mascheramento in frequenza
- Mascheramento temporale

MASCHERAMENTO IN FREQUENZA
Sia il suono segnato in rosso un rumore di 1 KHz a 30 dB, mentre la linea tratteggiata (e in
parte blu) sia il suono a cui siamo interessati.
In assenza di rumore, poteremmo percepire il suono di 1,5 KHz già a 8/9 dB; in presenza
del rumore, esso viene mascherato: tale fenomeno è noto come mascheramento in
frequenza.

MASCHERAMENTO TEMPORALE
Se il suono più forte cessa all’improvviso noi non avvertiamo
subito la presenza del suono più debole; occorrerà un po' di
tempo perché il nostro orecchio si adatti.

Se il ‘test tone’ ha un'ampiezza di 40 dB, bastano 5 ms per


avvertirlo; se è di soli 20dB, ne occorrono quasi 20 di millisecondi perché risulti avvertibile.

COMPOSIZIONE DI EFFETTI DI. MASCHERAMENTO


Se abbiamo più toni a diverse frequenze e alcuni di questi muoiono, le maschere temporali
e quelle in frequenza si fondono e danno luogo a tale fenomeno:
In conclusione l'effetto complessivo del mascheramento è che molti toni non saranno mai
udibili perché collocati nel dominio della frequenza e del tempo troppo vicino a toni forti.

SEGNALI ANALOGICO E DGITALE


• Il segnale audio è per sua natura un segnale analogico, ovvero un segnale che varia in
modo continuo nel tempo.

• Un segnale digitale ha invece una forma di questo tipo.

LA DIGITALIZZAZIONE
La digitalizzazione è il processo che trasforma un segnale analogico in segnale digitale.
Le operazioni proprie della digitalizzazione sono essenzialmente due:
- Il campionamento;
- La quantizzazione.

CAMPIONAMENTO
Come riuscire a rappresentare un segnale audio, per sua natura analogico e dunque con
un andamento continuo, con un segnale digitale preservando l’informazione?
L’idea è quella di approssimare la funzione analogica che è “morbida” con una funzione
fatta a rettangoli.
Ad ogni istante di tempo si associa un valore numerico, e si misura il valore assunto dal
segnale ad intervalli discreti, ricavandone ogni volta un campione.
Il numero di campioni in un intervallo di tempo è detto sampling rate, che esprime il
numero di volte al secondo in cui il campionamento è eseguito (frequenza di
campionamento).

TEOREMA DEL CAMPIONAMENTO DI NYSQUIST-SHANNON


Esiste un teorema, teorema del campionamento, che dice che se non si vogliono avvertire
imperfezioni nell'ascolto, si deve scegliere una frequenza di campionamento che sia
almeno doppia della massima frequenza di interesse (tale frequenza è detta valore di
Nyquist).
Visto che l’orecchio umano non percepisce frequenze superiori a 20Khz, per ottenere un
buon campionamento bisogna utilizzare una frequenza di campionamento di almeno
40Khz.
Questo spiega il perché lo standard di qualità CD imponga una frequenza di 44khz.

QUANTIZZAZIONE
Se l'insieme dei rettangolini è sufficientemente fitto, la funzione di partenza è ben
approssimata.
Notiamo che l'altezza della funzione al variare di t varia in modo continuo e la sua
memorizzazione richiederebbe un numero elevatodi bit per rappresentare il valore da essa
assunto.
Il processo di discretizzazione dei valori possibili per questa variazione di altezza è
detto quantizzazione; esso fissa il numero di bit disponibili per memorizzare ciascun
campione d’onda.
Per il suono i valori tipici per i livelli di quantizzazione sono i seguenti:
- 256 valori ottenibili con 8 bit, per esempio per la trasmissione in rete.
- 65.536 valori ottenibili con 16 bit, per esempio per la memorizzazione su DVD.

AUDIO DIGITALE
Il meccanismo di campionamento e la successiva quantizzazione dell'ampiezza
costituiscono le basi della conversione di un segnale da analogico a digitale.

OPERATIVAMENTE
Per registrare un suono e memorizzarlo in formato digitale occorre campionarlo.
Come visto, l’onda acustica (a) viene divisa in un elevato numero di frammenti e ogni
frammento viene memorizzato come campione digitale che rappresenta il frammento (b).
Passo successivo è la discretizzazione (quantizzazione) dei valori sull’asse delle ordinate
(c).

COMPRESSIONE DEI SEGNALI AUDIO


Il problema dell’audio digitale è la grossa quantità di dati che serve per rappresentare un
suono.
Un file audio non compresso arriva ad occupare anche 10MB al minuto, come per gli
standard per segnali audio non compressi PCM (Pulse Code Modulation) o WAV
(Windows Audio).
Nel campo dei segnali vocali (telefonate, audio-conferenze) le richieste in termini di
frequenza di campionamento e bit per campione sono più limitate. Un segnale vocale può
essere ricostruito con qualità adeguata campionando a soli 8KHz con campioni da 13bit.
Una delle prime tecniche di compressione è stata la quantizzazione non lineare che,
basandosi su alcune proprietà della voce e dell'orecchio umano riesce ad ottenere la
stessa qualità dei 13bit menzionati con soli 8bit.
Questa codifica a 8.000 campioni al secondo e 8bit per campione prende il nome di
LogPCM o PCM (Pulse Code Modulation) telefonico e richiede una banda "canonica" di
64Kbit/s, cioè lo standard per la telefonia digitale,o ISDN (Integrated Services Digital
Network).

COMPRESSIONE DEI SEGNALI AUDIO


L’obbiettivo delle tecniche di compressione è ovviamente quello di ridurre lo spazio
necessario ad immagazzinare determinati dati o la banda necessaria per trasmetterli, però
mantenendo una elevata qualità.
Una prima classificazione delle tecniche di compressione distingue tra tecniche
- Lossless: mantengono perfettamente inalterate le informazioni dopo la compressione
- Lossy: prevedono un certo degrado delle informazioni

FORMATI MULTIMEDIALI PER IL WEB


IL VIDEO
IL VIDEO
Con il termine video si intende un sistema di riproduzione di immagini in movimento.
L’occhio umano percepisce una sequenza sufficientemente veloce di immagini statiche
come un movimento continuo. Questo fenomeno viene spiegato in due modi alternativi:
- POV (Persistence of Vision). Alcuni ritengono che questo dipenda dal fenomeno di
persistenza delle immagini sulla retina, detto POV . Un’immagine rimane impressa sulla
retina per circa un decimo di secondo.
- Fenomeno phi. Altri ritengono invece che la fusione di immagini simili e successive non
avvenga nella retina, ma a un livello superiore: questo processo è detto “fenomeno phi”.
Tale fenomeno è stato attentamente studiato in laboratorio, nel 1912, dallo psicologo
Max Wertheimer, padre e fondatore della psicologia della forma o della Gestalt.

MOVIMENTO E FOTOGRAMMI
Il movimento del video è in ogni caso una illusione ottica.
Un video riproduce una sequenza di immagini statiche (comunemente chiamate
fotogrammi, o in inglese frame).

DIGITALIZZAZIONE VIDEO
Nel digitalizzare il video si ripresentano tutte le tematiche relative alla digitalizzazione delle
immagini, ovvero, per ogni fotogramma si devono definire risoluzione spaziale e
risoluzione cromatica.
Oltre a ciò, è necessario considerare che le sequenze di immagini
vengono prodotte a intervalli di tempo regolari e che deve essere
digitalizzato un numero di immagini al secondo sufficiente.
Poiché alla traccia video è solitamente associata almeno una traccia
audio occorre trattare la digitalizzazione dell’audio, in termini di
campionamento e quantizzazione.

FOTOGRAMMI E TEMPO
Il video digitale può essere inteso come una risorsa dipendente da:
- I fotogrammi (frames), ciascuno dei quali deve essere codificato come una immagine
bitmap (ovvero come una griglia di punti A x B).
- Il tempo, che scandisce la sequenza di riproduzione dei fotogrammi.
LA DIMENSIONE DELLO SCHERMO
Le immagini video hanno differenti tipi di proporzione, sulla base del rapporto larghezza-
altezza, il cosiddetto aspect ratio. Le proporzioni più comuni sono le seguenti:
- 4:3 (quattro terzi), utilizzata comunemente dagli standard PAL e NTSC.
- 16:9 (sedici noni), utilizzata comunemente dallo standard High Definition Television
(HDTV).

FREQUENZA DI FRAMING
La velocità con cui i fotogrammi si susseguono è misurata in frame al secondo, o frame
per second (fps).
Si tratta in realtà di una frequenza, e quindi questa grandezza viene misurata anche in
Hertz (Hz).
Nel caso in cui la velocità con cui si susseguono in fotogrammi non sia sufficiente si
possono verificare due fenomeni:
- Il video lento: i fotogrammi non sono sufficienti a dare percezione del movimento
continuo e dunque sono visibili singoli fotogrammi come entità a sé stanti. Questo
effetto si ottiene solitamente intorno ai 10 fotogrammi al secondo.
- Il movimento non fluido: i fotogrammi sono sufficienti a dare all’occhio umano la
percezione del movimento, ma con una scarsa continuità. Questo effetto si ottiene
solitamente intorno ai 15-16 fotogrammi al secondo e può essere notato per esempio
nei vecchi filmini super8.

ESEMPI DI FREQUENZA DI FRAMING - 1


Standard Tradizionali:
Cinema: 24 fps, standard per la maggior parte dei film per creare un effetto motion blur
che simula la visione naturale.
Televisione:
• NTSC (principalmente USA, Canada, Giappone): 29.97 fps (interlacciato, equivalente a
59.94 campi per secondo).
• PAL (Europa, parti dell'Asia): 25 fps (interlacciato, equivalente a 50 campi per secondo).
Standard Moderni:
- Televisioni ad alta definizione (HDTV): 30 fps e 60 fps sono comuni, con
alcuni contenuti anche a 120 fps per movimenti ultra-lisci, particolarmente
nei videogiochi e nei contenuti sportivi.
- Tecnologia Ultra HD (4K/8K): frequenze fino a 60 fps sono standard, con
discussioni in corso per aumentare queste frequenze fino a 120 fps per
una maggiore fluidità e dettaglio.

ESEMPI DI FREQUENZA DI FRAMING - 2


Frequenze nei Video Online
- Streaming Video: Piattaforme come YouTube, Netflix, e Amazon Prime Video
supportano una vasta gamma di frequenze, generalmente da 24 fps fino a 60 fps, a
seconda del contenuto.
- Gaming e Streaming Live: I videogiochi trasmettono spesso a frequenze più alte per
ridurre il ritardo e migliorare la reattività, spesso a 60 fps o superiore, fino a 144 fps o
più in streaming live su piattaforme come Twitch.
Futuro e innovazioni
- High Frame rate (HFR): I film come quelli della serie di "Lo Hobbit", che sono stati girati
a 48 fps, mostrano un interesse verso frequenze di frame superiori nel cinema per una
qualità visiva migliorata.
- Standard Emergenti: L'introduzione di HDMI 2.1 permette
supporto per frequenze di aggiornamento ancora più elevate,
facilitando l'adozione di 120 fps e oltre in dispositivi consumer.

VIDEO: LE DIMESIONI
Per valutare le dimensioni di un video digitale (considerando
soltanto la parte video e non quella audio). poniamo che:
- Ogni fotogramma è un’immagine bitmap di dimensione AxB e
con profondità di colore (in bit) pari a N.
- La frequenza è pari a F fotogrammi al secondo.
- Il tempo di durata del video è pari a T secondi.
Sotto queste condizioni quale sarà il bit rate (cioè il numero di bit al secondo) del nostro
video?
Come sappiamo ogni immagine occupa AxBxN bit.
Poiché di immagini se ne producono F al secondo, lo spazio occupato per ogni secondo
di video sarà AxBxNxF bit.
Di conseguenza, se il video dura T secondi, lo spazio complessivo occupato sarà
AxBxNxFxT bit.

ESEMPIO
Calcoliamo lo spazio occupato per i seguenti dati:
- Dimensioni del fotogramma: 640 pixel di larghezza e 480 pixel di altezza;
- Profondità del colore: 3 byte, pari a 24 bit (i quali corrispondono alla risoluzione
cromatica True Color);
- Frequenza: 30 frame al secondo;
- Durata totale del video: 2 minuti, pari a 120 secondi.
Il valore del bit rate è dato quindi da 640 x 480 x 3 x 30 pari a circa 27 MB al secondo,
mentre la dimensione completa del file video (della durata di 2 minuti ovvero di 120
secondi) risulta pari a circa 3 GB.

WORDPRESS
INTRODUZIONE AI CMS
CHE COS’E’ WORDPRESS?
Wordpress è nato come piattaforma di blogging, ma ad oggi è il CMS più utilizzato per
sviluppare e mantenere aggiornati siti di ogni tipo:
• Blog personali e istituzionali;
• Siti informativi;
• E-commerce….
È sviluppato in PHP e si basa sul DBMS MySQL.

WORDPRESS CMS VS WORDPRESS PIATTAFORMA DI BLOGGING ONLINE


WordPress è quindi:
• Un CMS vero e proprio: strumento di sviluppo per siti e blog da ospitare sul proprio
spazio Web.
• WordPress.org è il sistema di gestione dei contenuti open source, in cui è possibile
trovare un host web e installare il software di WordPress.
• Piattaforma di blogging WordPress.com:
- Pur essendo basata sul medesimo CMS è nata, invece, per ospitare blog e siti degli
utenti iscritti, ed è a scopo di lucro;
- Si presenta con una versione gratuita di base e una serie di opzioni extra a pagamento.
- Con i piani di WordPress.com, gli utenti possono scegliere di far gestire a WordPress gli
aspetti tecnici relativi all’esecuzione di un sito web, compresa l’installazione di temi e
plugin e l’instradamento di un nome di dominio verso il vostro blog.

WORDPRESS.COM
Utilizzare la piattaforma online è semplice, MA:
• Non permette di sfruttare appieno le potenzialità del CMS
• Ci sono forti limitazioni per preservare la sicurezza della piattaforma.

LIMITAZIONI DI WORDPRESS.COM
Dominio di terzo livello:
- non è possibile registrare un dominio di secondo livello -sinonimo di professionalità nella
creazione di un sito o blog
Limitazione nell’uso dei temi:
- È possibile utilizzare soltanto i temi disponibili di serie sulla piattaforma e non
caricarne uno dall’esterno;
- È impossibile intervenire sul codice del tema per applicare eventuali modifiche e
personalizzazioni
Limitazione nell’uso dei plugin:
- È assolutamente impossibile installare un
qualsiasi plugin (quindi anche widget),
infatti la voce plugin manca del tutto nel
pannello di gestione
Nessun accesso all’hosting:
- Nessun controllo sullo spazio di hosting, per
esempio per aggiungere, rimuovere,
caricare o scaricare file e cartelle del sito
Utenti limitati:
- Non si possono creare direttamente nuovi utenti in quanto questi ultimi vanno “invitati”
(massimo 10) e, se non fossero già registrati, dovranno creare a loro volta un account
su WordPress.com.

CHE COS’E’ UN CMS?


CMS è acronimo di Content Management System: Sistema di Gestione dei Contenuti.
Un CMS permette di definire, organizzare e aggiornare i contenuti di un sito Web
dinamico anche a coloro che non hanno necessariamente conoscenze di
programmazione.
Un sito Web dinamico si differenzia sostanzialmente da uno statico dove il
programmatore Web definisce le pagine html una volta per tutte, all’inizio della
progettazione.
Grazie al diffondersi di CMS, siti e portali Web non sono più gestiti da esperti informatici,
ma soprattutto da nuove figure professionali, i cui profili sono sempre più
interdisciplinari.

ESEMPI DI CMS
Esistono tanti CMS che si possono distinguere in base a:
• Licenza d’utilizzo: open-source vs commerciali;
• Piattaforme di sviluppo utilizzate come linguaggio di scripting (PHP,
Java, ASP.NET, Perl, Python, Ruby on Rails, ecc).
È bene ricordare altri CMS open-source, basati sulle stesse
piattaforme (PHP-MYSQL):
• Joomla!: adatto a portali di medie dimensioni
http://www.joomla.it/
• Magento: specifico per portali di e-commerce https://magento.com/
• Drupal: permette di creare dei veri e propri framework di sviluppo
http://www.drupal.it

COM’E’ FATTO UN CMS


Gli elementi architettali di un CMS sono 3, ossia:
• Il server Web
• Il Database
• Il Client
In pratica, un CMS:
- È una applicazione lato server, scritta utilizzando linguaggi di scripting lato server
(PHP, ASP, DOT.NET, Java e Servlet,…)
- Si interfaccia con un DataBase, ossia una base di dati contenente tutti i contenuti
relativi al sito Web e tutte le informazioni necessarie al corretto funzionamento del sito
stesso (configurazione, utenti, ecc.)
- Permette agli utenti del sistema di accedere tramite un client Web (via browser) alle
funzionalità di amministrazione e gestione dei contenuti.

FRONT-END VS BACK-END
Si definisce quindi:
• Front-end: la visualizzazione dei contenuti, così come appaiono ai visitatori;
• Back-end: la sezione di configurazione, amministrazione e gestione dei contenuti del
sito.

DATABASE
Una base di dati (o Database – DB) è un
archivio strutturato per organizzare i dati in
modo da garantirne l’inserimento,
la modifica, l’aggiornamento e la
cancellazione.
Semplificando , un DB può essere pensato come un insieme di tabelle, composte da righe
(o record), ciascuna di esse suddivisa in campi; ogni record contiene un insieme di dati
descritti attraverso i campi; ogni record deve avere una chiave primaria, ossia un
identificatore univoco che permette di fare riferimento allo specifico record; le tabelle sono
collegate tra loro attraverso associazioni.
DATABASE E DBMS
Anche nel caso dei DB esistono applicativi server e client
e la comunicazione avviene nel seguente modo:
• Il client effettua una richiesta, es. «inserimento di un
nuovo ‘articolo’»;
• Il server esegue la richiesta e restituisce un risultato (es.
un messaggio di conferma di avvenuto inserimento);
Un server in grado di gestire un DB si chiama DBMS
(DataBase Management System).
• Tra i più diffusi: MySQL (acquisito da Oracle), MariaDB,
MsSQL, Postgress.
Un esempio tipico di applicazione installata su un server
web che offre tutti gli strumenti utili alla gestione
di un DB è phpMyAdmin; esso permette
l'interfacciamento amichevole con il modulo di
amministrazione MySQL.
WORDPRESS COME CMS
Per utilizzare WordPress come CMS: https://
it.wordpress.org/
(Occorre scaricare il pacchetto ed avere a
disposizione un Web Server)
Utilizzando altervista.org salteremo questo
passaggio!

WORDPRESS: STATISTICHE DI UN SUCCESSO MONDIALE


• Il 43 % dei siti Web utilizza WordPress.
•Tra i CMS, WordPress è in assoluto il
più utilizzato: tra i siti che fanno uso
di un CMS, il 65% di questi è basato
su WordPress.
•Sono disponibili 12.177 temi, più
4000 estensioni di diverso genere,
59.610 plugin.
•Secondo il WordCamp, più di 75
milioni di siti usano WordPress.
•Wordpress 5.3 è stato scaricato più di
7 milioni di volte.
•Wordpress è alla base del 14,7% dei
migliori siti web al mondo.
•Chiunque può trovare il tema più
adatto alle proprie esigenze, e se non lo trova, può crearlo da sé.
• Non solo piccoli e sconosciuti blogger: anche società molto importanti utilizzano questa
piattaforma.

LA STORIA DI WORDPRESS
Inizialmente creato da Matt Mullenweg e distribuito con la licenza GNU General Public
License.
La prima versione fu rilasciata il 27 Maggio 2003 dai fondatori Matt Mullenwege e Mike
Little.
Il nome WordPress fu suggerito da Christine Selleck, ma le varie versioni furono chiamate
con nomi legati al jazz.

ESEMPIO
Ecco come appare il sito appena creato su it.altervista.org
Tutta la fase di installazione sul Web server e la connessione al DBMS è gestita
interamente dalla piattaforma in modo del tutto trasparente.

BACHECA
DASHBOARD O BACHECA DI AMMINISTRAZIONE
Per accedere alla bacheca è necessario effettuare login:
• URLSITO/wp-admin
La bacheca (pannello a destra):
• Permette di avere una overview del nostro sito
• Visualizza le attività recenti e le novità della
community
• Evidenzia le statistiche dei visitatori

AGGIORNAMENTI E ALTRI DETTAGLI


Bacheca: si accede ad “Aggiornamenti”.
Da qui è possibile gestire tutti gli aggiornamenti dell’installazione:
A. Versione del CMS;
B. Plugin
C. Temi già installati
PUBBLICAZIONI DI CONTENUTI E GESTIONE COMMENTI
GLI ARTICOLI DI ESEMPIO

DIFFERENZA TRA PAGINE E ARTICOLI A COLPO D’OCCHIO


LE IMPOSTAZIONI
La voce impostazioni permette di gestire le impostazioni:
• Generali
• Scrittura
• Lettura
• Discussione (notifiche, commenti, ecc)
• Relative alle dimensioni delle immagini e del caricamento file (Media)
• Permalink
• Le altre voci sono proprie dell’installazione di altervista e non vengono analizzate in
questa sede.

LE IMPOSTAZIONI GENERALI
Le impostazioni generali permettono di definire:
• Il titolo del sito
• Il motto: deve spiegare l’argomento del sito
• L’icona del sito / indirizzo sito
• L’indirizzo dell’utente amministratore del sito
• Il ruolo degli utenti che si registrano (sottoscrittore per
impostazione predefinita)
• Fuso orario, formato data e ora
• Lingua del sito

PREMALINK DELLE SINGOLE PAGINE/ARTICOLI


È possibile personalizzare i permalink delle singole pagine ed articoli:
• Nell’editor delle pagine/articoli è possibile modificare l’URL
nell’ultima parte del link relativo alla pagina

EDITING DELLE PAGINE: REVISIONI


• Wordpress conserva revisioni progressive dei contenuti
• È possibile risalire a revisioni precedenti per confrontarle
con quella attuale ed eventualmente ripristinarle
• Cliccando su Revisioni, si apre una nuova
schermata in cui vengono affiancate due
versioni del contenuto ed è possibile scorrere
per selezionare le altre
• Cliccando sul pulsante Ripristina questa
revisione è possibile sostituire la versione
attuale con quella visualizzata nella parte destra
della nuova schermata.

CONTENUTI E STRUUTURA DI UN SITO BASE


INTRODUZIONE
Abbiamo visto che WordPress è una piattaforma
per la gestione di contenuti e permette quindi:
• Di creare, gestire e organizzare contenuti
complessi;
• Al di là della semplice struttura statica di un
sito con pagine fisse di testo e immagini
raramente aggiornate;
• Oltre il blog dove periodicamente vengono
pubblicati nuovi articoli con notizie, recensioni,
opinioni e commenti del pubblico.
Realizzare un sito significa prima di tutto definire
quali saranno questi contenuti e come saranno organizzati.
Questa operazione riguarda soprattutto le pagine statiche del sito, cioè quelle che in
generale non subiranno variazioni di rilievo nel tempo.

INSTALLARE TEMA
Se invece voglio installare un tema
diverso, lo scelgo, per esempio, su
wordpress.org. Sia Astra la mia scelta:
https:// wordpress.org/
themes/astra/
I PLUGIN
I Plugin:
- Sono frammenti di codice che
estendono le funzioni di
WordPress;
- Possono essere molto semplici e
svolgere un compito, oppure molto complessi, come i plugin per trasformare i siti in e-
commerce;
- Possono essere relativi solo alle funzioni del back office oppure essere evidenti nel
front-end attraverso i widget inseriti in spazi appositi, detti area widget.

CREIAMO ORA LE NOSTRE PAGINE


Dal menù generale scegliere
Pagine
poi in alto Aggiungi pagina. Potremo quindi utilizzare
il WordPress editor

INSERIAMO TRE PAGINE


Proviamo a creare tre pagine Chi sono - Progetto -
Contatti
-Aggiungi il titolo
-Inserisco una mia foto o immagine preferita,
eventualmente anche solo un link all’immagine
-Inserisco un paragrafo
Faccio lo stesso per tutte le altre pagine, aggiungendo il titolo, almeno.

L’EDITOR CLASSICO 1/3


Se abbiamo già lavorato in Wordpress e vogliamo utilizzare l’editor classico, abbiamo due
scelte:
- Utilizzare tale funzionalità dal menù dell’editor a blocchi
- Installare un apposito plugin

L’EDITOR CLASSICO 2/3


Installiamo un apposito plug-in.
Classic Editor https://wordpress.org/plugins/classic-editor/
da scaricare e caricare
in WordPress nella
pagina dei plugin.

L’EDITOR CLASSICO 3/3


In alternativa, da Plugin > Aggiungi
Plugin
cerchiamo classic editor,
selezioniamo quello evidenziato in
figura, e clicchiamo su:
Installa ora
E poi attiviamolo
IMPOSTAZIONI DI LETTURA: DA BLOG A SITO
Occorre modificare questa impostazione per far sì che la Homepage sia una pagina creata
dall’utente. Selezionare:
Aspetto >Personalizza>Impostazioni homepage
Ma per far questo occorre prima creare la pagina statica.

Per impostazione predefinita, WordPress si comporta come una piattaforma di blogging e


visualizza, quindi, gli articoli (post) nella Homepage, disponendoli in ordine cronologico dal
più recente al meno recente.

MENU E ALTRI ELEMENTI DI NAVIGAZIONE


Dalla voce Aspetto, selezionare
• Al primo accesso all’area Menu si viene invitati a creare il primo
menu del sito;
• I pannelli Pagine, Link, Categorie permettono di selezionare
gli elementi da inserire nel menu;
• Il pannello a destra visualizza gli elementi già inseriti e la
struttura del menu.

CREIAMO IL NOSTRO MENU


Creiamo un menù di nome: menu-principale-it
Posizione Su Pagine, scegliamo le nostre pagine
Aggiungi al menù

ASPETTO > PERSONALIZZA > MENU


GESTIONE DELLE VOCI DI MENU
Una volta inserite le pagine desiderate nella struttura del menu, è possibile gestirle:
Cliccando e trascinando il relativo pannello;
• Aprendo quest’ultimo con un clic sul triangolino a destra e cambiando
(Etichetta di navigazione) con una voce personalizzata, rispetto al titolo della pagina;
• Eliminandola del tutto cliccando sul link Rimuovi.

• Per quanto riguarda i collegamenti, dopo aver incollato il link nella casella superiore del
pannello, è possibile decidere il nome da dare alla voce di menu. Questa funzione può
tornare utile, oltre che per aggiungere voci che puntano a risorse esterne al sito, per
includere nel menu articoli, così come file caricati nella libreria

ELIMINARE LA TOOBLAR DI ALTERVISTA 1/2

ELIMINARE LA TOOBLAR DI ALTERVISTA 2/2

LE ESTENSIONI DI WORDPRESS
I PLUGIN: DEFINIZIONE, SCELTA ED INSTALLAZIONE

INTRODUZIONE
Abbiamo visto che WordPress è una piattaforma per la gestione di contenuti che permette
ampia personalizzazione.
I plugin rappresentano strumenti fondamentali per espandere ed estendere
opportunamente le funzionalità di WordPress, potenzialmente, rispondendo a qualsiasi
esigenza del committente.
Ci sono circa 60.000 plugin disponibili, per un totale di oltre 1 milione e mezzo di
download

I PLUGIN
• Per la gestione dei plugin si può accedere direttamente dal menù della bacheca di
amministrazione, dalla voce Plugin

• In alternativa, si può visitare direttamente il sito https://it.wordpress.org/plugins/

CRITERI DI SCELTA DEI PLUGIN


Come scegliere un plugin
1. Numero di installazioni
2. Valutazione media degli utenti sul totale delle installazioni
3. Frequenza degli aggiornamenti
4. Compatibilità (e retro compatibilità) garantita: un problema tipico si verifica quando un
buon plugin, che si è abituati ad utilizzare e che è funzionale al sito,
non è più supportato in caso di aggiornamento della piattaforma
Wordpress
5. Capacità del plugin tout-court, senza acquisto della versione premium.

LISTA DEI PLUGIN


Non esiste la ricetta giusta per tutti i siti, tuttavia è opportuno stilare una
lista di plugin che dovrebbero essere presenti qualsiasi
sia la tipologia di sito:

Plugin di Ottimizzazione
• Yoast SEO è uno dei plugin SEO più popolari e
utilizzati su WordPress, con oltre 5 milioni di installazioni attive. Offre
una vasta gamma di funzionalità, tra cui analisi SEO per i contenuti,
ottimizzazione dei meta tag, suggerimenti per migliorare la leggibilità
dei contenuti, gestione degli sitemaps XML e molto altro ancora.
https://wordpress.org/plugins/wordpress-seo/ .
• Rank Math è un plugin SEO completo per WordPress, offre
strumenti avanzati per l'ottimizzazione dei contenuti, l'integrazione
dei social media e la generazione di sitemap XML. Con un'interfaccia utente intuitiva, è
adatto a utenti principianti. https://wordpress.org/plugins/seo-by-rank-math/
•EWWW image utilizza algoritmi avanzati di ottimizzazione delle
immagini per garantire che le immagini siano ridotte al minimo
delle dimensioni possibili, migliorando così le prestazioni del sito
e riducendo i tempi di caricamento delle pagine: https://
wordpress.org/plugins/ewww-image-optimizer/
Prenotazione e pianificazione appuntamenti
• WP Booking Calendar consente agli utenti di gestire le prenotazioni online per servizi
come hotel, appartamenti, eventi, sale riunioni e molto altro ancora. Offre funzionalità
avanzate per la gestione degli orari, la disponibilità delle risorse, la conferma automatica
delle prenotazioni e la sincronizzazione con i calendari esterni. https://wordpress.org/
plugins/booking/
• WordPress Online Booking and scheduling Plugin - Bookly: plugin per la
prenotazione online e la pianificazione degli appuntamenti, offre una vasta gamma di
funzionalità per la gestione delle prenotazioni. https://wordpress.org/plugins/bookly-
responsive-appointment-booking-tool/

Form di contatto
• Contact Form 7: plugin gratuito e altamente
personalizzabile per creare form di contatto su
WordPress. Offre un'ampia gamma di opzioni
di personalizzazione, ma può richiedere un po' di
tempo per essere configurato secondo le proprie esigenze. https://wordpress.org/
plugins/contact-form-7/
• WPForms: offre un'interfaccia utente intuitiva con funzionalità drag-and-drop per la
creazione di form di contatto e altri tipi di form. Include funzionalità avanzate come
l'integrazione con servizi di pagamento e la creazione di sondaggi e moduli di
registrazione. https://wordpress.org/plugins/wpforms-lite/

Analisi del Traffico e Conversioni


• Site kit by Google consente di integrare facilmente diversi servizi e strumenti di Google
direttamente nel sito web. https://wordpress.org/plugins/google-site-kit/
• MonsterInsights: è il plug-in di Google Analytics più popolare per WordPress, facile da
usare, offre dashboard inegrate e report personalizzati.
https://it.wordpress.org/plugins/google-analytics-for-wordpress/#description

Personalizzazione Login e Pannello di amministrazione - Area riservata


• White Label custom Admin experience consente di personalizzare l'aspetto del
pannello di controllo WordPress. https://wordpress.org/plugins/white-label/
• AGCA Custom Dashboard consente di personalizzare i widget, le metriche e le
informazioni visualizzate nel pannello di controllo per adattarsi ad esigenze speci che:
https://wordpress.org/plugins/ag-custom-admin/
• Custom Login Page permette di personalizzare la pagina di accesso al sito WordPress,
consentendo di modi care il layout, i colori, lo sfondo
e altri elementi per creare un'esperienza di accesso
unica per i tuoi utenti: https://wordpress.org/plugins/
colorlib-login-customizer/

Plugin di Gestione degli Utenti


• Ultimate Member: consente di creare facilmente aree
riservate agli utenti, gestire registrazioni, pro li utente,
ruoli, autorizzazioni e altro ancora. https://
wordpress.org/plugins/ultimate-member/
• User Role Editor: permette di creare ruoli personalizzati e de nire le autorizzazioni per
accedere a contenuti speci ci: https://wordpress.org/plugins/user-role-editor/

Plugin per creare temi - Theme Builder


fi
fi
fi
fi
fi
• Elementor Website Builder - https://it.wordpress.org/plugins/elementor/
[si veda anche: https://elementor.com/ ]
• Beaver Builder - Wordpress Page Builder - drag and drop page builder
https://it.wordpress.org/plugins/beaver-builder-lite-version/

ESTENSIONE DELLE FUNZIONALITA’ DEL SITO


I plugin fin qui presentati garantiscono una migliore fruibilità, ottimizzazione e sicurezza
del sito.
Vediamo di seguito alcuni plugin che permettono di estendere le funzionalità di un sito
base.
Ad esempio, in generale, ogni sito aziendale dovrebbe offrire la possibilità all’utente di:
- Trovare velocemente la sede dell’azienda individuandola su di una mappa;
- Poter inviare un messaggio tramite un modulo di contatto
Anche in questo caso un uso sapiente dei plugin risulta di particolare importanza!

INSERIRE UNA MAPPA GOOGLE


Scaricare e installare il seguente plugin: Very Simple Google Maps - https://
wordpress.org/plugins/very-simple-google-maps/
- Permette di inserire una mappa di google all’interno del sito tramite shortcode;
- Permette di inserire un indirizzo semplicemente con il seguente shortcode:
[vsgmap address="street address to display”]

PRINCIPI DI INTELLIGENZA ARTIFICIALE E SUE APPLICAZIONI

INTELLIGENZA ARTIFICIALE
L’intelligenza Artificiale (IA) è un’area dell’informatica che studia come realizzare macchine
capaci di operare autonomamente:
- Risolvere problemi
- Compiere azioni
- Comprendere un linguaggio naturale
- Riconoscere immagini e suoni

THE IMITATION GAME


Test di Turing
Un sistema intelligente deve essere i grado di compiere azioni/funzioni tipiche dell’uomo

IL CERVELLO UMANO
• Fino a 100 miliardi di neuroni (~80K/mm2)
• Fino a 100.000 sinapsi per ogni neurone
• Fino a 160 Km

IL CERVELLO UMANO: COME FUNZIONA


È fault tolerant = anche in presenza di neuroni danneggiati, continua a funzionare anche
se con un calo delle prestazioni.

IL CERVELLO UMANO: COME APPRENDERE


È in grado di imparare
le connessioni tra i neuroni cambiano sulla base dell’esperienza
IL NEURONE BIOLOGICO
Un neurone è formato da:
- Detriti: prolungamenti ramificati attraverso cui ogni neurone riceve i segnali elettrici;
- Soma: corpo cellulare contenente nucleo ed organelli;
- Assone: prolungamento filamentoso;
- Sinapsi: connessioni tra assone e rami detritici di altri neuroni.

NEURONE ARTFICIALE
Percettore: Introdotto nel 1958 dallo psicologo statunitense Frank Rosenblatt

MACHINE LEARNING
È un’area dell’Intelligenza Artificiale dedicata allo studio e sviluppo di sistemi che possono
imparare dai dati con i quali vengono addestrati, arrivando a identificare modelli e a
prendere decisioni autonomamente, con un intervento umano ridotto al minimo.
Utilizza Utilizza algoritmi che consentono ai sistemi di apprendere dai dati e di effettuare
previsioni o prendere decisioni in modo autonomo.

AREE DELL’INTELLIGENZA ARTIFICIALE


Abbiamo detto che l'Intelligenza Artificiale si occupa dello sviluppo di sistemi informatici in
grado di eseguire compiti che richiedono l'intelligenza umana. Questi compiti possono
includere, tra gli altri:
• L’apprendimento automatico - Machine learning;
• Il riconoscimento di modelli - Pattern Recognition;
• Il ragionamento - Reasoning;
• La comprensione del linguaggio naturale - Natural Language Processing;
• La risoluzione di problemi - Problem Solving.

NATURAL LANGUAGE PROCESSING


È un’area dell’Intelligenza Artificiale che si focalizza sull'interazione tra computer e
linguaggio umano, al fine di permettere alle macchine di interpretare, generare e
rispondere al linguaggio naturale in modo coerente e contestualmente appropriato.

KNOWLEDGE GRAPH
Un knowledge graph è un grafo di dati che ha l’obiettivo di accumulare e trasmettere la
conoscenza del mondo reale, i cui i nodi rappresentano entità di interesse e i cui archi
rappresentano relazioni potenzialmente diverse tra queste entità.
KNOWLEDGE GRAPH DI GOOGLE

NATURAL LANGUAGE PROCESSING


È un’area dell’Intelligenza Artificiale che si focalizza sull'interazione tra computer e
linguaggio umano, al fine di permettere alle macchine di interpretare, generare (→ Text
generation) e rispondere al linguaggio naturale in modo coerente e contestualmente
appropriato.

CHATBOT
Un chatbot è un software che simula ed elabora le conversazioni umane (scritte o parlate),
consentendo agli utenti di interagire con i dispositivi digitali come se stessero
comunicando con una persona reale.

CHAT GPT - cosa è


Chat GPT Chat Generative Pre-trained Transformer) è un software
proprietario dell’organizzazione no profit OpenAI, aperto a tutti, che
genera risposte simili a quelle umane su input degli utenti, usanto un
modello basato su reti neurali.
La piattaforma di Chat GPT è gratuita. Esistono, però, anche piani a
pagamento.

CHAT GPT - caratteristiche


La principale caratteristica di ChatGPT è la sua capacità di sostenere conversazioni in
linguaggio naturale con gli utenti. È stato addrestato su una vasta quantità di testo
proveniente da Internet, il che gli consente di comprendere e generare testo in modo
coerente e umanamente comprensibile.
Attualmente sono disponibili:
• Per tutti - ChatGPT 3.5 (30 novembre 2022);
• A pagamento - ChatGPT 4: più potente, e riservata agli account premium (14 marzo
2023);
• Per tutti - ChatGPT 4o (omnis): (13 maggio 2024)

CHAT GPT - limiti


I principali limiti di Chat GPT sono:
• Le informazioni disponibili sono limitate a gennaio 2022 per la versione 3.5, a dicembre
2023 per la versione 4 e a maggio 2023 per la versione 4o;
• Le risposte non sono sempre accurate, le citazioni possono essere errate (o a volte
inventate) e per l’utente inesperto risulta difficile capire quando questo accade;
• Rimane comunque un’anteprima che è stata resa disponibile al pubblico proprio per
aumentare il numero di interazioni e poter continuare il suo allenamento rapportandosi
con il mondo reale.

ATTENZIONE DA AVERE NELL’UTILIZZO DI UN CHATBOT


• Attendibilità/verifica dei risultati: i risultati forniti non sono sempre attendibili, è bene
che vengano verificati prima del loro utilizzo/condivisione
• Privacy e condivisione dei dati: è bene non condividere dati personali, riservati e
sensibili
• Età di utilizzo: verificare i limiti di età per l’utilizzo di questi software (in particolare
ChatGPT è utilizzabile a partire dai 13 anni ma con il consenso dei genitori, Gemini è
utilizzabile invece solo dai 18 anni)

INTERFACCIA CHATGPT

GEMINI
• Chatbot di intelligenza artificiale generativa
• Utilizza l'apprendimento automatico per migliorare continuamente le sue capacità di
comunicazione
• Interagisce con gli utenti attraverso il linguaggio naturale
• Può rispondere a domande, riassumere, correggere, revisionare e tradurre testi,
generare testi in maniera creativa (storie, poesie, articoli, …), fornire spiegazioni su
argomenti e concetti anche complessi
• Accede a dati aggiornati
• Ricorda quanto gli è stato chiesto in precedenza (prompt
chaining)
• Come tutti i sistemi di questo tipo può avere limitazioni e
talvolta produrre risposte inesatte o non coerenti.

COME SI AUTO - DESCRIVE GEMINI


• Intelligente: Posso comprendere e rispondere a domande complesse, seguire istruzioni
e completare compiti in modo accurato.
• Creativo: Posso generare testi di fantasia, scrivere poesie, comporre musica e creare
contenuti originali.
• Informativo: Posso fornire informazioni su un'ampia gamma di argomenti, tra cui
scienza, storia, attualità e cultura.
• Completo: Posso fornire risposte complete e approfondite alle tue domande, anche se
sono aperte, impegnative o insolite.
• In continuo apprendimento: Sto sempre imparando e migliorando le mie capacità
grazie all'interazione con gli utenti e all'accesso a nuove informazioni.

BARD - GEMINI
Gemini nasce il giorno 8 febbraio 2024, sulle ceneri di Bard (10 aprile 2023)
Ultima versione: 30 aprile 2024

INTERFACCIA DI GEMINI

RITORNIAMO A CHATGPT

CHATGPT

TEXT GENERATION - 1(SELF-SUPERVISED LEARNING)


PROMPT ENGINEERING
Il prompt engineering è il processo che consente di guidare le soluzioni di intelligenza
artificiale generativa (IA generativa) per generare i risultati desiderati.
Nel prompt engineering, si studia come scegliere i formati, le frasi, le parole e i simboli più
appropriati che guidano l'IA a interagire con i tuoi utenti in modo più significativo.

IL PROMPT ENGINEERING - 1
Il prompt è la domanda che viene posta al chatbot. Più è dettagliato più la risposta sarà
precisa. Il prompt engineering è l’ottimizzazione del prompt al fine di ottenere risultati più
pertinenti. Un prompt può contenere una combinazione di:

IL PROMPT ENGINEERING - 2
Per quanto riguarda il formato ad esempio è possibile indicare:
- Il registro linguistico da utilizzare (colloquiale, formale, …)
- Il tono da utilizzare (divertente, persuasivo, …)
- Il formato della risposta (discorsivo, tabella, elenco puntato, …)
- La lunghezza della risposta (numero caratteri/parole/righe/…)
- Gli elementi specifici da includere/escludere

WRITE CLEAR AND SPECIFIC INSTRUCTIONS - 1


Tactics
- Delimeters can be anything like: ```, """, < >, <tag> </tag>
- Define the length of the response: N. of Sentences or Words etc

Example
Input: Fai il riassunto del testo delimitato dalle virgolette in una singola frase
"ChatGPT è un potente modello di intelligenza artificiale che utilizza l'architettura GPT-3.5
per fornire conversazioni interattive e testuali con gli utenti. È addestrato su una vasta
quantità di dati linguistici e ha una vasta conoscenza di vari argomenti. ChatGPT è in
grado di comprendere il contesto e generare risposte coerenti, cercando di fornire
informazioni utili e pertinenti. È progettato per interagire in modo naturale con gli utenti,
creando un'esperienza simile a quella di una conversazione con un essere umano."
Output: ChatGPT è un potente modello di intelligenza artificiale addestrato su dati
linguistici ampi, che offre conversazioni interattive e coerenti con gli utenti, fornendo
informazioni pertinenti e creando un'esperienza di conversazione simile a quella umana.
SUMMARIZING
Example
Input:
Review: "Ho comprato questo adorabile peluche di panda per il compleanno di mia figlia,
e lei lo adora così tanto che lo porta sempre con sé. È incredibilmente morbido e il suo
viso ha un'aria così amichevole. Tuttavia, devo ammettere che mi sembra un po' troppo
piccolo considerando il prezzo che ho pagato. Speravo di trovare opzioni più grandi allo
stesso costo. Fortunatamente, è arrivato un giorno prima del previsto, così ho potuto
giocarci un po' prima di darlo a mia figlia.”

Il tuo compito è generare un breve riassunto di una recensione di prodotto da un sito di e-


commerce per fornire un feedback al reparto Spedizioni. Riassumi la recensione sopra,
delimitata da virgolette, in al massimo 30 parole, concentrando l'attenzione sugli aspetti
che menzionano la spedizione e la consegna del prodotto.

Output:
Consegna anticipata apprezzata, ma peluche piccolo rispetto al prezzo pagato. Morbido e
amichevole, piace molto a mia figlia

LE APP DELL’IA IN APPINVENTORY

YOUTUBETRANSCRIPT
• Applicazione gratuita, non è necessaria la registrazione
• Dato l’URL di un video YouTube esegue la trascrizione del parlato
YOUTUBESUMMARIES
• Richiede la registrazione tramite account Google
• Sistema a crediti: una volta esauriti è necessario attendere 24 ore oppure passare al
piano pro
• Dato l’URL di un video YouTube esegue un riassunto per punti

TURBOSCRIBE
• Richiede la registrazione - nel piano gratuito massimo 3 trascrizioni al giorno
• È possibile caricare un video dal proprio dispositivo
oppure come link (YouTube, gDrive, …)
• Possibilità esportare la trascrizione (anche come
sottotitoli)
• Possibilità di tradurre la trascrizione ottenuta

TUBSCRIBE - 2

SUMMARIZER
• Tool gratuito
• Permette di riassumere un testo potendo scegliere la lunghezza ed il formato
FILLOUT: AI QUIZ MAKER
• Applicazione gratuita - necessaria la registrazione
• L’applicazione serve a creare quiz e form online
• Il tool AI Quiz Maker crea automaticamente un quiz a
partire da un testo
• Dopo la generazione automatica è possibile
modificare le domande a mano

FILLOUT: AI QUIZ MAKER - 2

REVISELY: AI QUIZ GENERATOR


• Applicazione gratuita - si può utilizzare anche senza registrazione
• Crea automaticamente un quiz a partire da un testo, da un documento o da un’immagine
• Dopo la generazione automatica è possibile modificare le domande a mano

REVISELY: AI FLASHCARD GENERATOR


• Applicazione gratuita - si può utilizzare anche senza registrazione
• Crea un set di flashcard a partire da un testo, da un documento o da un’immagine
• Dopo la generazione automatica è possibile modificarle manualmente
• È possibile la condivisione tramite link e la fruizione in modalità “studio” o “esercizio”
SLIDESGO: AI PRESENTATIONS
• Applicazione gratuita - necessaria la registrazione
• Applicazione per creare presentazioni
• Il tool AI presentations permette di creare
automaticamente una presentazione a partire da una
argomento
• Successivamente sarà possibile modificare le slide
generate secondo le necessità

ALGOR
• Applicazione per la creazione di mappe concettuali
• Applicazione gratuita (con dei limiti) - necessaria la registrazione
• È possibile creare delle mappe manualmente oppure è possibile generare
automaticamente delle mappe partendo da un testo
• Per la generazione automatica: sistema a crediti che non si rinnovano (per utilizzarla in
modo continuativo è necessario scegliere un piano…

Potrebbero piacerti anche