Galleria di immagini con Vue

In questa lezione impareremo a realizzare una galleria di immagini con Vue. Le gallerie di immagini sono un elemento comune su molti siti web, che consentono agli utenti di visualizzare e navigare attraverso diverse immagini in modo intuitivo. Nel tutorial JavaScript di questo blog, ho già sviluppato una galleria di immagini che potete consultare al seguente link: https://www.codingcreativo.it/galleria-di-immagini-con-filtri/

Creazione della Galleria di Immagini con Vue

Iniziamo creando un nuovo progetto Vue.js e aggiungendo la nostra galleria di immagini. Quindi, esegui i seguenti comandi nel terminale:

vue create gallery-app

Seguiamo le istruzioni per l’installazione del nuovo progetto e poi entriamo dentro la cartella:

cd gallery-app

Dopo creiamo il componente per la galleria di immagini dove utilizziamo la direttiva v-for per iterare attraverso l’array di immagini e visualizzarle nella nostra galleria. Le immagini inoltre vengono filtrate in base alla categoria corrente utilizzando il metodo filterImages. Abbiamo cura di garantire che quando il componente è creato le immagini siano tutte visibili. Dopo creiamo il metodo showImage che controlla se l’immagine deve essere mostrata, in base alla categoria selezionata. Le immagini vengono visualizzate o nascoste dunque utilizzando la direttiva v-show.

Personalizziamo infine il CSS per rendere la galleria di immagini responsive e stilizzata.

Continua la lettura su: https://www.codingcreativo.it/galleria-di-immagini-con-vue/ Autore del post: Cristina Parma Fonte:

Related Articles

Bubble Sort Python

L’algoritmo bubble sort in Python è l’argomento di questa lezione. Il bubble sort è un algoritmo di ordinamento molto semplice da implementare, ma dobbiamo dire che è anche poco efficiente.

Infatti il bubble sort è utilizzato principalmente in ambito didattico per far apprendere le logiche e le basi della programmazione.

Il funzionamento del bubble sort è questo:

Si confrontano gli elementi vicini tra di loro, portando l’elemento maggiore in ultima posizione durante la prima “passata” (eseguendo n-1 confronti), poi il secondo massimo in penultima posizione e così via finché l’array non è ordinato.

Quindi ad ogni passaggio si inserisce nell’elenco il valore successivo più grande al posto giusto.

La complessità dell’algoritmo è O(n2), sia nel caso peggiore, sia nel caso migliore.

Implementazione bubble sort in Python

Implementiamo la soluzione all’algortimo bubble sort in Python in maniera diversa rispetto agli altri linguaggi di programmazione. Questo perchè per lo scambio delle variabili in Python non è necessaria una variabile di appoggio temporanea.

In questa guida tratto l’argomento dello scambio delle variabili. Come scambiare il valore delle variabili

Dunque non sarà necessaria questa operazione:

temp = a;
a = b;
b = temp;

Ma basterà semplicemente scrivere:

a,b = b,a

Questa procedura, detta assegnazione simultanea, mi consente di snellire l’algoritmo bubble sort in Python.

def bubbleSort(array):
for j in range(0, len(array)-1):
for i in range(0, len(array)-1):
if array[i] >array[i+1]:
array[i], array[i+1] = array[i+1], array[i]

array_numbers = [54,26,93,17,77,31,44,55,20]
bubbleSort(array_numbers)

print(array_numbers)

L’algoritmo è molto semplice, basandosi sul confronto di elementi adiacenti.

Ma se l’algoritmo fosse ordinato? In ogni caso dovrei ripetere il ciclo esterno sempre n-1 volte. Possiamo pensare allora a fare delle ottimizzazioni all’algoritmo proposto.

Ottimizzazione bubble sort in Python – ordinamento per scambio con sentinella

Possiamo pensare di interrompere il ciclo for esterno, con un break, se al termine del primo ciclo interno non si è fatto alcuno scambio. Per questo scopo utilizziamo una variabile di appoggio chiamata flag, che inizializziamo a 0. Dopo, cambiamo il valore di questa variabile se nel ciclo interno si effettua almeno uno scambio. In alternativa a 0 ed 1 posso usare una variabile booleana.

Ecco il codice di esempio:

def bubbleSort(array):
for j in range(0, len(array)-1):
flag = False
for i in range(0, len(array)-1):
if array[i] >array[i+1]:
array[i], array[i+1] = array[i+1], array[i]
flag = True
if not(flag):
break

array_numbers = [54,26,93,17,77,31,44,55,20]
bubbleSort(array_numbers)

print(array_numbers)

Seconda ottimizzazione dell’algoritmo bubble sort in Python

Possiamo ottimizzare l’algoritmo bubble sort riflettendo sul fatto che ad ogni incremento di j, almeno gli ultimi j+1 elementi sono già stati ordinati. Questo in considerazione del fatto che ad ogni iterazione, l’elemento più grande è stato spostato verso destra.

Quindi ad ogni iterazione accorciamo il ciclo dei confronti. Infatti all’n-esima iterazione si può fare a meno di toccare gli ultimi n-1 elementi che ormai sono nella loro posizione definitiva. Dunque decrementiamo n di uno ad ogni iterazione (- -n), in modo da diminuire di 1, di volta in volta, il numero dei confronti effettuati.

Ecco dunque il codice completo dell’algoritmo ottimizzato:

def bubbleSort(array):
len_array = len(array)
for j in range(0, len_array-1):
flag = False
for i in range(0, len_array-1):
if array[i] >array[i+1]:
array[i], array[i+1] = array[i+1], array[i]
flag = True
len_array = len_array – 1
if not(flag):
break

array_numbers = [54,26,93,17,77,31,44,55,20]
bubbleSort(array_numbers)

Terza ottimizzazione dell’algoritmo bubble sort in Python

Un’ulteriore ottimizzazione all’algoritmo bubble sort in Python può essere sviluppata in considerazione del fatto che il ciclo interno si interrompe proprio dove è avvenuto lo scambio. Quindi, dopo ogni iterazione più elementi si trovano nella posizione definitiva e si può evitare di ordinarli nuovamente.

Occorre memorizzare la posizione ( i+1) dell’ultimo scambio effettuato in una variabile che chiameremo ad esempio pos. Dopo assegniamo alla lunghezza dell’array il valore di pos.

Ecco una possibile implementazione dell’algoritmo ottimizzato:

def bubbleSort(array):
len_array = len(array)
for j in range(0, len_array-1):
flag = False
for i in range(0, len_array-1):
if array[i] >array[i+1]:
array[i], array[i+1] = array[i+1], array[i]
flag = True
pos = i + 1
if not(flag):
break
else:
len_array = pos

print(i,j)

array_numbers = [54,26,93,17,77,31,44,55,20]
bubbleSort(array_numbers)

print(array_numbers)

Conclusioni

In questa lezione ho realizzato alcune implementazioni dell’algoritmo bubble sort in Python, cercando di ottimizzare un algoritmo semplice da implementare, ma lento. Nelle prossime lezioni spiegherò altri algoritmi di ordinamento.

Alcuni link utili

Indice tutorial sul linguaggio Python

1 – Introduzione al linguaggio Python

2 – Le variabili

3 – Operatori aritmetici e di assegnazione

4 – Stringhe

5 – Casting

6 – Input e print

7 – Primi esercizi in Python

8 – Errori in Python

9 – Script Python

10 – Scambio di variabili

11 – Modulo math

Vuoi rimanere aggiornato sulle nuove tecnologie per la Didattica e ricevere suggerimenti per attività da fare in classe?

Sei un docente?

soloscuola.it la prima piattaforma
No Profit gestita dai

Volontari Per la Didattica
per il mondo della Scuola. 

 

Tutti i servizi sono gratuiti. 

Associazione di Volontariato Koinokalo Aps

Ente del Terzo Settore iscritta dal 2014
Tutte le attività sono finanziate con il 5X1000