Imparare i linguaggi di programmazione WEB (HTML/CSS/JAVASCRIPT)
In questo articolo sono riportati tutti i link relativi alle differenti lezioni utili per imparare i linguaggi di programmazione WEB presenti in questo sito.
Scilab #3 Elaborazione di una immagine in Scilab: aumentare o diminuire la luminosità di una foto
Obiettivo: Effettuare una semplice elaborazione di una immagine in scilab con l’obiettivo di aumentare o diminuire la luminosità di una foto.
Teoria Rappresentazione di una immagine:
Un’immagine in scala di grigi a 8 bit rappresenta ogni pixel con un singolo valore che descrive la sua luminosità. Questi valori possono variare da 0 (completamente nero) a 255 (completamente bianco), con 256 livelli intermedi che rappresentano diverse sfumature di grigio. Ogni pixel dell’immagine è associato a una matrice bidimensionale, dove ogni elemento della matrice contiene un valore di luminosità che definisce il tono di grigio di quel pixel. Nel contesto delle immagini a 8 bit, un’immagine in scala di grigi è generalmente memorizzata come una matrice di interi compresi tra 0 e 255. La rappresentazione in scala di grigi è particolarmente utile per applicazioni che richiedono analisi di luminosità o contrasto, come nel caso della visione artificiale, della fotografia in bianco e nero e nell’elaborazione delle immagini mediche.
Esempio di una immagine in scala di grigi a 8 bit
Funzioni non lineari per modificare la luminosità:
Oltre alle funzioni iperboliche, altre funzioni non lineari come i logaritmi e le funzioni polinomiali sono utilizzate per modificare la luminosità dei pixel in modo non uniforme. Queste funzioni consentono di alterare l’intensità dei pixel in modo che alcune aree dell’immagine vengano più schiarite o scurite rispetto ad altre, permettendo così di applicare effetti visivi complessi.
Funzione Logaritmica:
Una delle funzioni più comuni per manipolare la luminosità in modo non lineare è la funzione logaritmica. La funzione logaritmica è utile per schiarire le aree scure dell’immagine senza modificare troppo le aree già chiare. La formula logaritmica applicata ai valori dei pixel può essere espressa come:
h(x) = 255*log(x+1)/log(255)
Questa funzione ha l’effetto di aumentare la luminosità nelle aree scure dell’immagine, rendendo più visibili i dettagli nelle ombre. Tuttavia, non ha un impatto significativo sulle aree già luminose, poiché il logaritmo cresce più lentamente man mano che x x aumenta. È particolarmente utile quando si desidera “illuminare” le ombre senza sovraesporre le luci.
Esempio di una immagine in scala di grigi a 8 bit elaborata utilizzando il logaritmo
Funzione Polinomiale:
Le funzioni polinomiali sono un’altra classe di funzioni non lineari utilizzate per modificare la luminosità. Una funzione polinomiale di grado nn applicata ai valori dei pixel può essere scritta come:
f(x) = 255*x^2/255^2
Questa funzione ha l’effetto di diminuire la luminosità nelle aree chiare dell’immagine.
Esempio di una immagine in scala di grigi a 8 bit elaborata utilizzando una funzione polinomiale
CONFRONTO TRA LE FUNZIONI: Per comprendere al meglio l’effetto di queste funzioni sulle immagini vengono in seguito riproposti i differenti studi di funzione confrontati con l’equalizzazione della retta bisettrice del primo e del terzo quadrante
Codice SCILAB: Il codice SCILAB presentato, si occupa di caricare un’immagine in formato .dat, applicare una trasformazione logaritmica per alterarne la luminosità e quindi visualizzare sia l’immagine originale che quella elaborata. Il codice è caratterizzato da differenti fasi:
Lettura dell’immagine: Il codice legge un’immagine salvata in formato .dat (un formato di dati binari). La matrice che rappresenta l’immagine viene creata usando i valori di luminosità per ogni pixel. L’immagine è rappresentata come una matrice di dimensioni 1024×683.
Elaborazione dell’immagine: Viene applicata una funzione logaritmica a ciascun pixel dell’immagine per modificarne la luminosità. La trasformazione logaritmica è progettata per schiarire le aree più scure dell’immagine, modificando l’intensità dei pixel.
Visualizzazione delle immagini: Il codice mostra due versioni dell’immagine:
La versione originale, letta dal file .dat.
La versione elaborata, che ha subito la trasformazione logaritmica per modificare la luminosità.
In sostanza, l’immagine viene letta e poi trasformata utilizzando una formula logaritmica per migliorare la visibilità delle aree scure, per poi visualizzare entrambe le immagini.
Scilab #3 Metodo dei rettangoli (Riemann) per determinare il valore di un integrale definito
Obiettivo: Determinare il valore di un integrale definito utilizzando il metodo dei rettangoli e sfruttando il software di calcolo numerico Scilab.
Il metodo dei rettangoli: Il metodo dei rettangoli, o somme di Riemann, è un approccio numerico per approssimare l’integrale definito di una funzione su un intervallo [a, b]. È uno dei metodi più semplici per comprendere l’integrazione come somma di aree.
L’idea alla base di questo approccio è quella di suddividere l’intervallo [a,b] in n sotto-intervalli di ampiezza costante h=(b−a)/n. Su ciascun sottointervallo, si costruisce un rettangolo la cui altezza dipende dal valore della funzione in un punto scelto del sottointervallo.
Metodo dei rettangoli destri e sinistri
Codice:
Un esempio del metodo dei rettangoli viene effettuato utilizzando il seguente codice Scilab il quale ha l’obiettivo di determinare il valore dell’integrale definito nell’intervallo [0, 2] della funzione
y = x^2
Esercizi:
Graficare le seguenti funzioni utilizzando il software di calcolo numerico Scilab:
y = 1 nell’intervallo [0, 2]
y = cos(x) nell’intervallo [0, pi/2]
y = x*ln(x) nell’intervallo [1, 2]
Scilab #2 Metodo di Bisezione per determinare gli zeri di una funzione
Obiettivo: Determinare gli zeri di una funzione utilizzando il metodo di bisezione e sfruttando il software di calcolo numerico Scilab.
Il metodo di bisezione:
Il metodo di bisezione è un metodo numerico iterativo che serve per trovare una radice (zero) di una funzione continua su un intervallo [a, b], a condizione che la funzione cambi segno su quell’intervallo:
f(a)*f(b) < 0
Questo significa che la funzione passa da negativa a positiva (o viceversa), quindi c’è almeno uno zero in mezzo (per il teorema degli zeri di Bolzano).
Il funzionamento del metodo di bisezione:
Si sceglie un intervallo iniziale [a, b] tale che f(a)*f(b)<0
Si calcola il punto medio c=(a+b):2
Si valuta f(c):
Se f(c)=0 si è trovata la soluzione esatta.
Se f(a)*f(c)<0, la radice è tra a e c: si aggiorna il valore di b = c
Se f(b)*f(c)<0, la radice è tra b e c: si aggiorna il valore di a = c
Si ripete il procedimento fino a che l’intervallo è sufficientemente piccolo, cioè:∣b−a∣<tolleranza desiderata.
Esempio del metodo di bisezione
Codice:
Un esempio del metodo di bisezione viene effettuato utilizzando il seguente codice Scilab il quale ha l’obiettivo di determinare gli zeri della funzione:
y = cos(x) – x
Esercizi:
Graficare le seguenti funzioni utilizzando il software di calcolo numerico Scilab:
y = x^3 nell’intervallo [-1, 1]
y = x^3-x-2 nell’intervallo [1, 2]
y = sin(x) – x/2 nell’intervallo [1, 2]
Scilab #1 Analisi di Funzioni Matematiche Elementari
Obiettivo: Analizzare alcune semplici funzioni elementari utilizzando il software di calcolo numerico Scilab.
Principi di calcolo numerico
Quando a scuola si studiano funzioni come sin(x), cos(x), 3x, etc… si pensa alle funzione come ad un oggetto continuo. Nel immaginario comune, esistono un’infinità di valori tra due numeri, mentalmente è possibile “zoomare” in modo arbitrario la funzione, e questa avrà sempre un valore. E’ importante considerare che un software di calcolo numerico come Scilab non può fare questo. Nel dettaglio, Scilab, invece di “conoscere” tutta la curva, fa una cosa molto più semplice e concreta:
Crea un vettore di punti del dominio (es. da 0 a 2π , con passo 0.1)
Valuta la funzione solo per quei punti
Memorizza in un vettore i punti del codominio
Collega i punti con seguenti sul grafico.
Nel codice presentemente riportato il software di calcolo numeri ha:
Ha preso circa 63 valori di x (da 0 a 2π)
Per ognuno ha calcolato sin(x)
Ha ottenuto una lista di coppie (x, y)
Ha disegnato il grafico unendo i punti con delle linee
Un secondo metodo utile per graficare le funzioni, sicuramente meno intuitivo, è quello di utilizzare un ciclo for per elaborare un punto alla volta. Dal punto di vista pratico questo approccio è sicuramente molto meno intuitivo d’altro canto è sicuramente utile per rendere visibile cosa fa Scilab internamente, cioè valutare la funzione punto per punto.
Esercizi:
Graficare le seguenti funzioni utilizzando il software di calcolo numerico Scilab:
y = x^2
y = 10cos(x)
y = sin(10*x)
y = x^2+4*x+6
TEST VARK: Determina il tuo stile di apprendimento
Il test VARK è uno strumento progettato per aiutare le persone a determinare il loro stile di apprendimento preferito. Il nome “VARK” è un acronimo che rappresenta quattro modalità di apprendimento principali: Visivo (Visual), Auditivo (Auditory), Lettura/Scrittura (Reading/Writing) e Cinestesico (Kinesthetic).
Visivo (Visual): Gli individui che apprendono principalmente in modo visivo preferiscono l’uso di grafici, diagrammi, mappe concettuali e altri supporti visivi. Queste persone apprendono meglio attraverso immagini, colori e schemi che organizzano e strutturano le informazioni.
Auditivo (Auditory): Questo stile di apprendimento si basa sull’ascolto e sull’ascolto attivo. Le persone con questa preferenza imparano meglio attraverso spiegazioni verbali, discussioni, podcast, registrazioni audio e altre forme di comunicazione uditiva.
Lettura/Scrittura (Reading/Writing): Coloro che prediligono questo stile di apprendimento apprendono meglio leggendo e scrivendo. Preferiscono i libri, gli appunti scritti, gli elenchi e altre forme di testo scritto per acquisire e organizzare le informazioni.
Cinestesico (Kinesthetic): Questo stile di apprendimento coinvolge il movimento fisico e le esperienze tattili. Le persone con questa preferenza imparano meglio attraverso l’esperienza pratica, l’apprendimento basato sulle attività e il coinvolgimento diretto con il materiale di studio.
1. Stai aiutando un ragazzo che vuole andare al parco. Cosa fai?
2. Non sei sicuro se la traduzione di scuola in inglese sia ‘School’ o ‘Skool’. Cosa fai?
3. Devi cucinare qualcosa di speciale per la tua famiglia. Cosa fai?
4. Un gruppo di turisti vuole conoscere i monumenti della tua città. Cosa fai?
5. Devi scegliere che telefono comperare. Cosa influenza maggiormente la tua decisione?
6. Come hai imparato ad utilizzare il cellulare?
7. Hai un problema al ginocchio. Cosa preferiresti che il dottore faccia:
8. Ti hanno regalato un nuovo videogioco ma non sai come funziona, cosa fai?
9. Ti piacciono i Siti Web che hanno:
10. Cosa influenza la tua decisione nell’acquisto di un videogioco tra le seguenti opzioni:
11. Preferisci un insegnante che usi:
12. Devi scegliere che cosa mangiare al ristorante. Cosa fai?
13. Devi fare un importante discorso ai tuoi amici. Cosa fai?
function ClickButton(){
var numV = 0;
var numA = 0;
var numR = 0;
var numK = 0;
JAVASCRIPT #6 Realizzazione di una Avventura Testuale, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi una semplice avventura testuale utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice avventura testuale. Questa avventura è caratterizzata da una sequenza di scene attraverso le quali è possibile muoversi premendo due differenti pulsanti. I due pulsanti permettono di cambiare scena attraverso due differenti funzioni javascript (Funzione1() e Funzione2()). Nello specifico, dal punto di vista del codice HTML, la pagina è caratterizzata da:
Un titolo principale (“L’Isola del Mistero”) (<h1>).
Una descrizione della scena corrente (<p>).
Immagine della scena corrente (<img>).
Due differenti pulsanti che permettono di cambiare scena (<button>).
Viene in seguito riportato uno screenshot relativo all’avventura testuale.
Differentemente, dal punto di vista del codice JAVASCRIPT, il codice è costituito da 5 differenti array. Ogni array è utilizzato per aggiornare la singola scena in seguito alla pressione di uno dei due pulsanti. E’ importante considerare che ad ogni specifico indice degli array corrisponde ad una specifica scena. In seguito sono descritti i 5 array impiegati nel codice javascript
Array delle descrizioni (descrizione [])
Array delle opzioni associate al pulsante1 (opzioni1 [])
Array delle opzioni associate al pulsante2 (opzioni2 [])
Array degli stati successivi associati al pulsante1 (next1 [])
Array degli stati successivi associati al pulsante2 (next2 [])
JAVASCRIPT #5 Realizzazione del gioco della Roulette HTML, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi il gioco della Roulotte utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco della Roulotte. Nello specifico, la pagina è caratterizzata da:
Un titolo principale (“Roulette”).
Immagine della roulette (che si trova in img/Roulette.png).
Visualizzazione del saldo (fisso a 100$).
Input per inserire un numero proposto dal giocatore.
Bottone SPIN per avviare l’estrazione. Premendo il tasto SPIN viene eseguita la funzione Spin() che genera un numero randomico e lo scrive nel relativo spazio.
Visualizzazione del numero estratto, inizialmente impostato su “0”.
Modifiche: Al fine di terminare il gioco è necessario introdurre una serie di modifiche:
Completare il codice gestendo i casi di vittoria e sconfitta (il giocatore perde dei soldi nel caso di sconfitta oppure vince dei soldi nel caso di vittoria)
Aggiungere una animazione legata alla vincita o alle possibili vincite.
Dare la possibilità all’utente di scegliere la puntata.
Dare la possibilità all’utente di scegliere se puntare sul colore oppure sul numero
JAVASCRIPT #4 Realizzazione del gioco del TRIS HTML, CSS e JAVASCRIPT
Obiettivo: Realizzare un programma che implementi il gioco del TRIS utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.
Codice:
Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco del TRIS. Nello specifico, la pagina è caratterizzata da:
Nove immagini rappresentanti la matrice 3×3 del TRIS (inizialmente impostate su img/0.png immagine vuota). Premendo su ogni immagine viene lanciata una funziona denominata Premuto alla quale viene passato un parametro che riporta l’informazione del pulsante che è stato premuto attraverso un identificativo da 0 a 8. Premendo i pulsanti cambiano le immagini riportate sul matrice 3×3 diventano rispettivamente croci oppure cerchi.
Due paragrafi (i.e., giocatore1 e giocatore2 che dovrebbero riportare lo status delle vittorie di ogni giocatore).
Modifiche: Al fine di terminare il gioco è necessario introdurre una serie di modifiche:
Completare il codice associando la funzione Premuto a tutte le immagini della matrice 3×3.
Introdurre un meccanismo utile per determinare il giocatore vincitore.
Impedire all’utente di premere una casella già scelta.
Aggiungere una animazione legata alla vincita o alle possibili vincite.
Aggiungere un contatore delle vittorie.
Introdurre una intelligenza artificiale per giocare contro il computer.
