Slideshow in Vue JS

Cristina Parma 18/03/2024

In questa lezione realizziamo uno slideshow utilizzando Vue JS.

Gli slideshow sono un elemento comune nelle moderne applicazioni web, utilizzati per presentare contenuti in modo dinamico e coinvolgente. Con Vue.js, è possibile creare facilmente uno slideshow interattivo che offre una user experience fluida e piacevole. In questo tutorial, ti guiderò attraverso i passaggi per creare uno slideshow utilizzando Vue.js.

Preparazione dello slideshow in Vue JS Passo 1: Preparazione del Progetto

Per iniziare, creiamo un nuovo progetto Vue.js utilizzando Vue CLI con il seguente comando:

vue create slideshow-app

Seguiamo le istruzioni di configurazione del nostro progetto slideshow in Vue.js. Una volta completata la configurazione, entriamo nella directory del progetto:

cd slideshow-app Passo 2: Creazione del Componente Slideshow – script

Ora, creiamo un nuovo componente Vue per gestire lo slideshow. All’interno della directory src/components, creiamo un nuovo file chiamato SlideShow.vue e all’interno della sezione data(), definiamo due attributi:

slides: un array di oggetti, ognuno rappresentante una singola diapositiva. Ogni oggetto ha un id, un title, una description e un image. currentSlide: un indice che tiene traccia della diapositiva corrente visualizzata nello slideshow.

Poi utilizziamo il metodo mounted() che viene chiamato quando il

Continua la lettura su: https://www.codingcreativo.it/slideshow-in-vue-js/ Autore del post: Cristina Parma Fonte:

Categorie: Coding Creativo, Vedi tutti i blog di Didattica

Tags: Vue, Web

Cristina Parma

Banconote per gioco, con le architetture del nostro territorio

Ho ideato questa interessante attività in collaborazione con la Comunità di Valle Rotaliana-Koningsberg, (che è la zona dove sta la nostra scuola) che ci ha chiesto di creare delle banconote per un gioco da tavolo ispirato al nostro territorio.

Per la realizzazione delle banconote ci siamo ispirati ai tagli degli EURO, che raffigurano delle architetture ispirate alle varie epoche della storia. Abbiamo visto che ogni banconota ha:

DIMENSIONI SPECIFICHE riferite al TAGLIO 5, 10, 20, 50, 100, 200, 500COLORE CARATTERISTICOSTILE ARCHITETTONICO riferito a un PERIODO STORICO, dal più antico (5 euro) al più moderno (500 euro) ARCHITETTURE sul fronte e PONTI sul retrostemmi, decorazioni, mappa e bandiera EUROPEA

Abbiamo mantenuto i colori e le epoche storiche secondo lo schema degli EURO che vediamo qui sotto, tralasciando i tagli da 200 e da 500.

Il lavoro si è svolto in quattro fasi:

raccolta di immagini fotografiche delle architetture del nostro territorio: i ragazzi hanno fotografato case, palazzi, chiese, ponti, monumenti del loro paese.ricerca storica sulle architetture fotografate e suddivisione delle immagini per periodi storici dal più antico al più moderno.disegno monocromo, a seconda del taglio e del periodo storico, realizzato con le matite colorate su carta da lucido, con la fotografia come modello.elaborazione grafica digitale delle immagini per la creazione delle nostre banconote, utilizzando lo strumento Google Disegni condiviso nella GSuite scolastica.

Dopo aver fotografato i luoghi di interesse del paese i ragazzi hanno fatto una ricerca storica su ogni monumento, palazzo, chiesa o ponte e hanno suddiviso le architetture per periodo storico in modo da disegnare ogni periodo con un colore specifico:

5 euro GRIGIO/VIOLA 1000-140010 euro ROSSO/ROSA 1500-160020 euro BLU/AZZURRO 1700-180050 euro ARANCIONE/GIALLO primi 1900100 euro VERDE CHIARO E SCURO 1950-2000

alcune foto dei luoghi di interesse dei nostri dintorni scattate dai ragazzi

I disegni sono stati realizzati con le matite colorate su carta da lucido, copiando le forme e i chiaroscuri dalle fotografie.

I disegni sono stati fotografati e “ritagliati” digitalmente per essere utilizzati nell’elaborazione grafica delle banconote al computer in Google disegni

Sotto alcuni esempi e diverse versioni delle banconote elaborate digitalmente dai ragazzi. La nostra moneta è stata battezzata EUROT dalla fusione di EURO e ROTALIANA, il nome della piana che accoglie il nostro paese e quelli limitrofi.

questa la linea di banconote scelta per il gioco da tavolo

ArteaScuola 08/10/2021

Tassellatura modulare con animali

Dopo aver guardato questo interessante video della serie Arte… in pratica del canale circoloarci hm vi propongo il lavoro fatto nelle Classi Prime con le TASSELLATURE modulari. Abbiamo seguito le istruzioni del video utilizzando un foglietto quadrato post-it, oppure utilizzando una sagoma quadrata di 7,5cmx7,5cm ritagliata da un foglio a quadretti.

[embedded content]

Nelle prime fasi si ritagliano delle forme da un lato del foglietto e si attaccano sul lato opposto, traslando il pezzo nella stessa posizione, senza spostamenti. Il mio suggerimento è stato quello di ritagliare delle forme casuali, senza preoccuparsi di individuare in anticipo l’animale da rappresentare.

Successivamente abbiamo osservato la forma con attenzione e abbiamo cercato di rappresentare un animale, disegnando sul foglietto occhi, naso, orecchie, zampe, pinne, ali o code, a seconda dell’animale più adatto alla nostra strana forma. Ho raccomandato ai ragazzi di NON cercare la perfezione e la verosimiglianza, ma piuttosto di adattare la forma ad un animaletto che sembrerà un po’ strano e asimmetrico, ma ci permetterà di costruire la nostra tassellatura modulare perfetta.

Nella fase successiva abbiamo ricalcato la sagoma accostando le forme una all’altra in modo da riempire completamente un foglio da disegno e abbiamo ripassato il disegno con un pennarello nero indelebile.

Successivamente abbiamo dipinto le forme con uno, due o tre colori all’acquerello a scelta. I colori vengono alternati in modo da creare una sequenza ordinata.

Ecco le tassellature modulari finite, per me sono tutte bellissime!

ArteaScuola 31/08/2021

Articoli Correlati