Sei sulla pagina 1di 24

TECNICHE AUDIOVISIVE PER IL WEB – 11 OTTOBRE 19

Tratta di audio/video in maniera artistica; contenuto tecnico, scrivere programmi per pc (java);
Lezioni teoriche fino dicembre, da metà dicembre diventa laboratorio.
Esame realizzare un progetto (applicazione per telefono o computer, deve essere interessante,
avere contenuto multimediale originale), fare delle modifiche in tempo reale, domande sui libri.
Libri  obbligatori: “L’ordine del tempo”, Carlo Rovelli, solo sulla prima metà
“Altered carbon”, Richard Morgan;
“Un oscuro scrutare”, Philip K. Dick
Ci potrebbe essere un progetto interdisciplinare su l’Odissea; “Iliade”, Omero, Tonna; “Odissea”,
Omero, Tonna;
Background su ODISSEA:
protagonista è Ulisse ( ulixes; odisseo); tre Ulisse (prima guerra di troia, durante viaggio, durante
guerra con pretendenti moglie); Itaca paese, penelope moglie (problema matrimonio; lei era una
regina e Ulisse doveva combattere, lei era da sola con il figlio che era in pericolo perché erede e
quindi i pretendenti volevano eliminarlo;), Telemaco figlio. tipico dei mondi nordici passare la
regalità tra una femmina a l’altra, infatti penelope era la regina di Itaca. Telemaco scappa per
cercare aiuto per non morire e finalmente torna con il terzo Ulisse, ma non quello vero.
Monitorare lo screen time (tempo di accensione dello schermo, quanto tempo sto al telefono);
quanto resisto senza web? senza telefono? sono elementi evasivi, preponderanti.
Java --> semplice, interfaccia intuitiva e strumenti automatizzati e preimpostati; può supportare
qualsiasi progetto e azione. Mouse e tastiera possono essere usati come sensori (proiezioni,
sensori, dlc, ..). Questo è uno strumento di comando; sintassi comune ad altri linguaggi di
programmazione.

PERSONE DIETRO A UN PROGETTO: (es. Applicazione)


Questa applicazione dovrà avere un sito web con:
1) GRAFICO
2) WEB DESIGNER
3) EDITOR
4) COPYWRITER
5) PROGRAMMATORE (quello del sito è diverso da quello dell’applicazione)
6) SISTEMISTA (persona che lavora con i sistemi informatici)
7) SOUND DESIGNER
8) SOCIAL MEDIA MANAGER
9) HELPESK (assistenza clienti)
10) SEO (gestisce motore di ricerca in modo tale che esca subito su internet quando lo si cerca)
11) VIDEO DESIGNER
12) STATISTICO/MATEMATICO (utente che viene carpito dal denaro che lui vuole, utente indotto
a comprare)
13) INVESTITORE (tira fuori i soldi)
14) MODERATORE (controlla quello che viene pubblicato)
15) TOGLI CONTENUTI (guarda i contenuti che vengono postati e li toglie)
16) TRADUTTORE/I
17) PUBBLICITARIO
18) MANAGER PROGETTUALE

L’applicazione necessita per forza dei programmatori e sistemisti (dal punto di vista funzionale) e
perché ha dei contenuti; le altre figure sono fondamentali e fanno andare avanti tutto. È
fondamentale anche l’utente, è il nostro scopo (tutti i personaggi dietro l’app fanno a turno
nell’helpesk per capire cosa vuole il cliente e di cosa ha bisogno l’applicazione). Se mi dimentico
dell’utente sto lavorando per una nicchia che artisticamente va bene (oltre al concetto artistico
devo avere un metodo per farlo fruire all’utente), ma per grosse aziende no; non bisogna mai
sottovalutare il fruitore perché io lavoro per esso.

POST SUI SOCIAL


L’uso del telefono a lungo andare porta a depressione, tristezza; li usiamo perché siamo presi dai
contenuti, ma percepiamo una zona di no-confort. un produttore cerca di portare le persone in una
comfort zone positiva. per farlo devo passare dei messaggi che all’utente interessano e piacciono.
allora inizio la modellizzazione in cui io guardo i mi piace e i post che a lui piacciono; si conosce
così l’utente maschio al 95%, l’utente donna al 70% (per 1000 post a cui ha messo mi piace). Una
modellizzazione completa mi porta a sapere cosa piace o no al fruitore, ma devo selezionare la
pertinenza non facendo vedere quello che non è pertinente; lo tengo dentro una bolla facendo
vedere le cose gradite e mettendolo nella comfort zone --> utente disponibile all’acquisto.
Alcune major mandano lo stesso la pubblicità inducendolo a comprare il prodotto. Per
pubblicizzare un prodotto gli danno più risonanza alle persone che sono interessate a quel
determinato prodotto, facendola vedere per un sacco di tempo e in modo rindondante.
Questi social non sono democratici, ma passano a una modellizzazione per indurre all’acquisto.
problema filosofico è che non vedo altre idee/messaggi oltre al mio; noi siamo così tenuti dentro la
nostra bolla in cui potenzialmente siamo indotti anche ad essere inclini a delle idee politiche, alle
fake news.
Come guadagno da Instagram? o dai social in generale?
18 OTTOBRE 19

Esame sarà un’applicazione per cellulare o computer che fa qualcosa; deve essere di contenuto
artistico.
 temi: Iliade, Odissea (ulisse dantesco, quello delle vicende fuori dalla guerra), ambiente, altro.

----------------------------------------------------------------------------------------------------------------------------------

Applicativo composto da:


- Linguaggio; è più strutturato rispetto a quello umano, ma anche più semplice.
- Ambiente di sviluppo; sono delle cose già pre-fatte da altre persone;

Cosa scaricare:
- Programma per il linguaggio: cerco “java jdk download”, primo risultato, scarico versione
SE 8u231 la versione JDK, accetto la licenza, scarico versione windows x64;
- Programma per l’ambiente di sviluppo: cerco “netbeans ide”, primo risultato, schiaccio
download, ultima versione, primo link

Inizio programmazione:
- Apro netbeans, file, new project, java with ant, java application  scrivo il nome del
progetto (“Primo2019”; meglio non usare mai gli spazi per dare i nomi alle cose) e poi finish
- Cambiare font  in alto menù tools, options, fonts and colors, aumento o coambio font
- Struttura ad albero sulla sx  source package (istruzioni del programma ossia la ricetta);
- Trovo il mio pacchetto (in questo caso primo2019), seleziono con tasto dx, new, jframe, gli
do un nome (attenzione alle minuscole e maiuscole), finish
- Per vedere se funziona vado in alto su run, run file
- A sx abbiamo dei controlli, swing control, premo button e lo trascino nella finestra
- Rinomino il pulsante, tastodx, edit text
- Gli oggetti nel programma hanno nomi specifici; lo vedo sulla sx in basso  tasto dx sul
pulsante (a sx in basso), change variable name (btnAvviaSito)
- Cambiare colore, tasto dx sul bottone fisico, properties  modifico font, colore, etcc..
- Tasto dx su pulsante fisico, events, action, action performed  sistema passa da
interfaccia grafica a programmazione
 ci sono due parentesi graffe gialle, devo scrivere dentro le parentesi
- Inizio a scrivere i codici

- Far partire un sito web, browser


- Se parole sono sottolineate in rosso premo tasto dx, fix import (se sono sottilineati i
comandi sotto c’è un’errore nelle parentesi (elimina una la penultima o boh e tasto dx,
format))
- Trascino Text field (a dx nei comandi), cambio l’etichetta  sempre a sx, tasto dx, change
etc..
- Trascino altro button,cambio l’etichetta
- Scrivo un link dentro il text field e poi vado su button tasto dx, event, event permormed 
copio e incollo il codice di prima ma cambio il codice di string sito mettendo il collegamento
del text field

- La funzione “desktop” sui codici ha anche la funzione open che serve ad aprire file
25 OTTOBRE 19

Giovedì 31 lezione perché venerdì è festa  recupero

FORMALIZZAZIONE DI UN ALGORITMO

Algoritmo  sequenza di istruzioni.

Programma/App  dati + gli algoritmi che ci operano sopra; sequenza di istruzioni che operano
sui dati.

Metodi di rappresentazione di un algoritmo

Mi serve rappresentare un algoritmo per: condividerlo/insegnare, verificare il funzionamento,


memoria/documentazione, ripetizione/modello  algoritmo può essere brevettato.

Metodi:

- Tradizione orale  si spiega a voce;


- Linguaggio  si può rappresentare attraverso la nostra madre lingua, il nostro linguaggio.
È scritto ma può essere poco chiaro, ci possono essere fraintendimenti;
- Pseudocodice  scrivere in una specie di linguaggio informatico;
- Schemi a blocchi (chiede all’esame)
- Macchine a stati finiti

Schemi a blocchi

Metodo di rappresentazione degli algoritmi; rappresenta qualsiasi algoritmo.


E’ un disegno schematico con degli elementi specifici (sono quattro):

- Un blocco tondo con scritto inizio


- Un blocco tondo con scritto fine
- Un blocco rettangolare con scritto qualcosa
- Un blocco romboidale con scritto qualcosa

Sono tutti blocchi che costruiscono uno schema generico. Sono colleganti tra loro mediante delle
frecce (altro componente); un altro componente è il testo.

Si inizia con un pallino con scritto inizio e si finisce con un cerchio con scritto fine. Mi realizza così
un percorso dall’inizio alla fine. La strada è realizzata con delle frecce che collegano i blocchi.

Il blocco iniziale avrà obbligatoriamente una sola freccia in uscita. Il primo blocco dopo l’inizio più
gettonato è quello rettangolare, ha un’unica uscita e può avere più ingressi; all’interno del blocco
c’è del testo che mi descrive cosa c’è nel blocco  ci saranno delle istruzioni di lavoro da
eseguire. Poi si prosegue e si esce solo in un modo. Nella condizione in cui le decisioni da
prendere siano due si usa il blocco romboidale  ha un certo numero di ingressi e due uscite.
Questo è un blocco CONDIZIONALE, perché il nostro “automa” deve rispondere e decidere tra
due opzioni.
MODELLO DI SCHEMA A BLOCCO SEMPLICE:

INIZIO !!!

SI’ NO

???

FINE

Esempio di blocchi possibili dell’esame:

Candidato SI’ SI’ Ha la


INIZIO Ha letto il
è in relazione
libro?
orario? ?

NO NO

NO Tolgo 5 punti Tolgo 5 punti

FINE
Assegno un voto
SI’
Il risultato non può essere garantito nella qualità, l’importante è lo svolgimento.

Come faccio a fare un blocco con tre uscite? Utilizzo due blocchi romboidali di seguito.

In ambiente lavorativo si fanno partire più frecce dallo stesso rombo ma è un metodo SBAGLIATO
(non si usa per l’esame).

JAVA

Chiudo tutte le finestre in alto alla pagina poi vado sul progetto a sx con immagine della tazzina,
tasto dx, close

- File, new project, java with ant, java application


- Nome progetto “immagini 2019”  la project location è dove si trovano i miei progetti
- Clicco sul progetto con l’icona della scatola, tasto dx, new, jframe form
- Nome con iniziale maiuscola (creerà un file con delle istruzioni)
- Trasciniamo (prendendo dalla libreria a dx) il comando “label”  rinominare subito il
componente, tasto dx, change variable name (“lbTitolo”)
- Cambio nome del label, tasto dx sul bottone fisico, edit text  per font e colore, tasto dx,
poperties
- Per farlo partire posso premere il tasto play in alto (triangolino verde)  non esegue il file
ma il progetto
- “immagini 2019” con l’icona col foglio contiene le info  premo due volte per vedere
- Su “main” metto le istruzioni per visualizzare le finestre
- Nella prima riga io ho solo una dichiarazione  dico che c’è una finestra
Posso avere più finestre.
- Quando faccio play il calcolatore esegue un’istruzione alla volta
- Le scritte con il // sono commenti che potrebbero aiutare a capire il comando (le scriviamo
noi)
- Facciamo un’altra finestra ma la chiamiamo f1

- Ora mettiamo un’immagine  deve essere in png di dimensione massima 150 KB


- Inserisco un label nuovo nella finestra e cambio il nome “lbImmagine1”
- Tasto dx, properties, icon (…), import to project, selezione imm1, finish
- Tolgo il testo, tasto dx, edit text, cancello
- Tasto dx, events, mouse, mouseEntered  mi porta a dei codici, dove posso inserise delle
istruzioni  io posso fare qualcosa quando il mouse entra
- Inserisco una seconda immagine con nome “imm2”
- Inserisco una “text area”  cambio nome “taTastiera”
- Voglio che quando io premo un tasto mi cambia l’immagine di sfondo (dentro text area)
- Tasto dx, events, key, keyPressed
- Mi crea una zona di codice  metterò il tasto che verrà premuto

- La variabile char è di tipo carattere; evt è l’evento mi dice il tasto premuto della tastiera
- Un = è un assegnamento ossia che diventa uguale a quello che io scrivo dopo l’uguale; il
doppio == vuol dire che se io premo quella cosa o scrivo quella cosa.
- Quindi quando premo “a” mi cambia l’immagine
- Ma se voglio che mi rimetta l’altra immagine, metto “else”

- Else mi dice che qualsiasi cosa che non sia “a” o “A” mi cambi l’immagine
31 OTTOBRE 19

Come creare una pagina di paint:

- Elimino il progetto precedente; tasto dx new project, java w ant, java application, nome
“Paint2019”
- Tasto dx su Paint2019, new, jframeform e lo chiamo “FinestraDiSegno” (ho sbagliato e l’ho
chiamato FinestrO ma vabbeh)
- Vado sul main di Pain2019 e scrivo i seguenti codici per formare la dimensione della nostra
applicazione

- FinestraDiSegno fd  dichiaro come si chiama la funzione.


- Fd.setTitle  metto il titolo che voglio io
- Insericsco una Label e cambio subito il nome in “lbDisegno”
- Tasto dx su label, properties, schiaccio opaque e metto tick di fianco
- Tasto dx su label, events, mousemotion, mousedragged, e riapro la finestra di design
- Si tratta di una libreria grafica, che serve per disegnare creando una penna; do la mia
componente getGraphics. Riempire rettangolo in larghezza e altezza di 20x20 pixel.
- Posso cambiare il rect che è un rettangolo in qualche altra forma geometrica.
- g.drawOval draw è per disegnare solo il contorno e non riempimento.

- Random non è un dato strutturale.


- Si crea un insieme di colori che hanno valore max 255

- g.setColor serve per collegare il colore con il pennello.


- C’è problema logico, ovvero bisogna prima cambiare colore poi disegnare!
- COME FACCIO A FARLO ANDARE TUTTO PIU’ O MENO BLU? Devo cambiare
colorePennello = newColor (rosso, verde, 255)  con valore di blu max 255
- Oppure metto colorePennello = newColor (0.0, blu)
- COME GESTISCO LA TRASPARENZA? Inserisco int alpha.
- Inserisco Alpha = dado.nexInt(100); sotto alla serie dei colori elencati.
08 NOVEMBRE 19

Cosa fa parte di noi nella nostra vita? Cos’hanno tutti dentro di sè?

- Esperienza;
- Tradizione  mi baso sul me lo hanno detto ed è sempre stato così.
- Autorità;
- Deduzione;
- Sperimentazione;

Il metodo sperimentale:

- Osservazione e dati;
- L’ipotesi; (Dubbio  cogito ergo sum)
- Ripetibilità;
- Un confronto;
- La verifica;

Però parliamo linguaggi diversi quindi, che linguaggio usiamo? LA MATEMATICA.

I dati sono corretti? Il modello è corretto (il modello rappresenta l’algoritmo) si? Allora continuo così.

Non vanno bene? è inutile che continuo a lavorarci nuovamente, ma devo ricominciare da capo.

Fondamentale avere dei dubbi sempre.

Devo continuamente studiare ed imparare il modo da risolvere i problemi. 


Alcuni problemi possono essere dati dalla postura mentale.

Diagrammi di flusso /schemi a blocchi:


Modo per modellizzare gli algoritmi.
Cosa sono gli algoritmi? Una sequenza di istruzioni.

PARTE PRATICA

- New project, java w ant, java application  lo chiamo “CicloFor2019”


- Mi compare la pagina di lavoro; tasto dx a sx sul “CicloFor2019” con l’icona del pacchetto,
new, jframe form  lo nomino “FinestraIniziale”
- Vado sul source di “CicloFor2019” e scrivo:
- Dobbiamo dirgli di metterla in RAM; quindi nel main (sempre source di “CicloFor2019”)
scrivo:

- SetTitle lo usiamo per mettere il titolo; setVisible per impostare la visualizzazione;


setLocation per impostare la posizione.
- Premo play per controllare che tutto vada.
- Andiamo a riempire questa finestra  torno su “FinestraIniziale”, a sx seleziono button e lo
inserisco nella finestra; cambio il nome, tasto dx, change variable name, ‘btStart’.
- Vado su properties del button; sull’opzione text scrivo “IniziaEsempio”, e sull’opzione
toolTipText scrivo “IniziaEsempioDelCicloFor”.
- Premiamo play per vedere se funziona.
- Dopodichè aggiungiamo il disegno  a sx seleziono label e lo trascino nella finestra;
cambio subito il nome in “lbDisegno”.
- Li cambio il background  vado su properties, background, metto bianco, dopo selezione
l’opzione opaque.
- Ora che ho la mia pagina bianca devo fare in modo che succeda qualcosa all’interno di
essa, quindi aggiungo un evento  tasto dx sul button, events, action, actionPerformed.
- Mi apre il source e sotto ‘private void’ scrivo:

- Questo mi serve per capire che ho davvero premuto il pulsante. Come trovo gli errori?
Devo guardare il codice ma a volte non basta, per capire posso mettermi dei punti in cui mi
faccio scrivere dal programma cosa sta accadendo; in questo caso mi faccio scrivere “hai
premuto …”.
- Visto che JOptionpane è sottolineato devo aggiungere nel source questo codice scrivendo
(è quello con IMPORT):
- Ora voglio che quando clicco io disegni; per farlo devo prendere un oggetto di grafica.
Quindi scrivo (è quello con GRAPHICS):

- Se non riconosce ‘Graphics’ allora lo aggiungo alla libreria:

- Adesso scrivo le istruzioni per disegnare un rettangolo:


- Premo play e vedo se funziona.
- Vedo che si forma solo un rettangolo all’interno dello spazio di disegno, ma io vorrei
crearne di più. Per prima cosa mi serve una variabile casuale, cioè qualcosa che sia un
numero casuale e che vari.
- Indi per cui scrivo:

- Visto che Random non lo riconosce scrivo anche questo nella libreria:

- Dopo di che aggiungo:

- Visto che Color non esiste lo aggiungo sempre alla libreria come import java.awt.Color.
- Continuo ad aggiungere codici sotto le specifiche dei rettangoli:

- Il + 5 serve per non lasciare il valore a zero.


- Con questi valori ora creiamo un colore:

- Metto due // davanti a JOptionPane.showMessageDialog ( this,….).


- Premo Play per vedere se funziona.
- Dovrebbero uscire tanti rettangoli colorati dentro lo spazio di disegno, premendo il bottone.

SLAID 47
06 DICEMBRE 19

Progetto su ambiente o odissea (ritorno)  applicazione; abbiamo a disposizione timer, audio,


label, button ….

Abbiamo visto a lezione: le finestre (movimento tra finestre), il pulsante, le etichette (label con
immagini), l’audio, il timer, ripetizione, tastiera-voce/mouse, come andare su internet, aprire
programmi (desktop).

Dragon Naturally Speaking  software per riconoscimento vocale

Massima di Murphy dice che in un progetto saprò solo il tempo (il tempo che ci devo mettere),
costo (costo del progetto) e scopo (se conosco i primi due in modo preciso questo parametro
rimane un po’ nebuloso).

Parametri da considerare per un programma:

- Specifica (richiesta del cliente; cosa deve fare) - COSA


- I nostri mezzi materiali/immateriali di sviluppo / mezzi de cliente - COME
- Richieste temporali - QUANDO
- Budget - COSTO
- Esclusioni (cosa il programma non farà di certo)
- Manutenzione

Realizzazione: metodologie

- A cascata  generica. Faccio la progettazione, poi realizzazione e la verifica delle


funzionalità. Alla fine di tutto ho la vendita.

- Agile  più legata al software. Faccio un progetto parziale, realizzazione parziale, verifica
superflua e poi vendita. Dopo che ho trovato un acquirente ricomincio da capo e inserisco
un altro pezzo per poi venderlo di nuovo.

PARTE PRATICA:

- Chiudo tutte le finestre aperte + chiudo i progetti sulla sx, taso dx, close
- Tasto dx, new project, java w ant, java application  ‘AudioClip2019’
- Inserisco le info sul ‘main’
- Aggiungo una finestra, vado in altro a sx sull’icona a forma di scatola, tasto dx, new, jframe
form  ‘FinestraPrincipale’
- Vado in AudioClip2019, nei codici, e inserisco un codice che mi faccia visualizzare quello
che faccio  su main
- Vado a raggruppare le istruzione per uno scopo specifico ossia quello di far riprodurre gli
audio
- Vado sull’icona in altro a sx scatola di Audio2019, tasto dx, new, javaclass  ‘MiaClip’
- Il numero delle istruzioni già scritte non esiste
- Ovunque ci sia una parentesi graffa chiusa metto un commento ossia ‘end class MiaClip’;
all’interno metto i parametri

- Dopo di che metto i parametri nelle varie funzioni


- Torniamo alla FinestraPrincipale sopra
- Mettiamo due pulsanti, prendo button e lo trascino all’interno; tasto dx, change variable
name  ‘btnStart’. Tasto dx, Proprieties, text  ‘AVVIA CANZONE’
- Devo aggiungere un evento, tasto dx, events, action, action performed. Voglio far partire un
oggetto clip. Andiamo alla fine del file e mettiamo:
- Torno allo start e scrivo

- Ritorno nel design e inserisco una label  cambio sempre nome con ‘lblStop’; tasto dx,
proprieties, icon, import to project, prendo un immagine, finish e ok
- Tasto dx su label, events, mouse, mouse entered
- Sul source metto:

- Dopo vado su proprieties del progetto (con la tazza), vedo dove si trova il file e crep una
cartella chiamata media con dentro un file chiamato audio01
- Quando passo sopra l’immagine mi esce errore, allora vado a mettere a posto nel source

METODO PER TROVARE GLI ERRORI

- Vado sul source di MiaClip e modifico; la prima modifica è nelle funzioni  si previene un
errore. Uso quindi il blocco try e catch. Uno dei primi problemi è lo stop.
- Il blocco try catch serve per farsi dire che se c’è un errore il programma te lo fa sapere e ti
dice dove.
- Adesso andiamo a prendere loop. Deve essere contornata da un blocco try catch

- Metto a posto anche play

- Poi sposto le 4 righe che erano in play in public MiaClip

- Ma ci sono degli errori, quindi metto il blocco try catch di nuovo


- Se io muovo il mouse sulla label ho il comando stop e mi dà degli errori  perché io ho
messo uno stop prima di new (ossia io la cancello primo che si costruisca). Non ho creato
nessun oggetto da fermare.
- Allora la riga che avevo in button ( mc01 = new MiaClip ( "media/audio01.wav" ) ; ) la
taglio e la metto all’inizio del programma

- Ora il programma non mi dà più errore


- Come faccio per fare una seconda clip? Come prima. Quindi scrivo che esiste un nuovo
componente  sempre in fondo
- Ritorno all’inizio per inserire i codici da inserire poi

- Vado a rimettere la funzione che avrà

- Ritorno nella cartella media per caricare il file  la chiamerò ‘audio02’


- Gli audio suoneranno tutti insieme in contemporanea
- Devo farmi aiutare dal programma per correggere gli errori  primo metodo:
System.out.println è una funzione che mi scrive delle cose sul programma, quindi anche se
non funziona. Quindi come prima cosa mi metto una funzione che mi faccia visualizzare un
messaggio:
- Ma non in tutti i programmi posso farmi uscire i messaggi sotto forma di finestra, lo uso con
programmi seplici; quindi lo cambio per renderlo più semplice e farmi restituire direttamente
una scritta dal programma