Come creare siti web interattivi per la didattica con Gemini (anche con IMMAGINI !)

Una spiegazione, un calcolatore, una linea del tempo e un quiz con risposte immediate: possiamo riunire questi elementi in un sito web da condividere con i nostri studenti. L’intelligenza artificiale ci aiuta a costruirlo, mentre Google Sites e Netlify Drop ci permettono di pubblicarlo.

Partiamo da due esempi semplici: la numerazione dei secoli e la differenza tra continente, Stato e regione. La semplicità serve a comprendere il procedimento, ma lo stesso percorso può essere utilizzato per contenuti più complessi. Nel secondo esempio aggiungeremo anche immagini scelte da noi.

Indice

• Passo 1: chiedere a Gemini un sito con un obiettivo didattico preciso
• Passo 2: esplorare spiegazioni, calcolatore e quiz
• Passo 3: incorporare il sito interattivo in Google Sites
• Passo 4: pubblicare una pagina autonoma con Netlify Drop
• Passo 5: preparare su Google Drive le immagini scelte da noi
• Passo 6: generare il sito di geografia con i collegamenti alle cartine
• Passo 7: pubblicare il sito con immagini e provare l’attività

Passo 1: chiedere a Gemini un sito con un obiettivo didattico preciso

Apriamo Gemini e scriviamo una richiesta che indichi che cosa vogliamo spiegare e a chi ci rivolgiamo. Per il primo esempio possiamo usare questa formulazione:

Crea un sito web interattivo che aiuti gli alunni della scuola media a comprendere come funziona la numerazione dei secoli.

Non stiamo chiedendo soltanto un testo sull’argomento, ma un ambiente nel quale gli studenti possano anche svolgere delle attività. Specificare argomento, destinatari e carattere interattivo aiuta a rendere chiaro il risultato che desideriamo.

Gemini genera il codice del sito e, nell’esempio sui secoli, ne presenta un’anteprima navigabile. Da qui possiamo esplorare le sezioni prima di occuparci della pubblicazione.

Passo 2: esplorare spiegazioni, calcolatore e quiz

Il sito sui secoli non si limita a una pagina da leggere, comprende diversi strumenti, ciascuno con una funzione didattica:

• Una spiegazione iniziale per introdurre il significato dei secoli e la loro numerazione.
• Le regole di calcolo per risalire dall’anno al secolo corrispondente.
• Un calcolatore automatico che restituisce il secolo e illustra il procedimento utilizzato.
• Una linea del tempo con grandi eventi storici, organizzata anche per epoche.
• Un quiz interattivo che segnala se la risposta è corretta o sbagliata.

Nel calcolatore, per esempio, inserendo l’anno 551 otteniamo il VI secolo. La parte interessante non è soltanto il risultato: il sito mostra anche la spiegazione del calcolo. In questo modo possiamo affiancare l’esercizio alla comprensione del procedimento.

Proviamo poi il quiz, selezionando sia una risposta corretta sia una sbagliata. Nell’esempio il sistema restituisce un feedback in entrambi i casi. È proprio questa risposta immediata a rendere l’attività diversa da una semplice scheda di lettura.

Prima di condividere il lavoro, percorriamo le varie sezioni e controlliamo che spiegazioni, calcoli e risposte siano adatti alla nostra classe. Il sito deve completare la lezione, non essere soltanto gradevole da vedere.

Passo 3: incorporare il sito interattivo in Google Sites

Una volta creato il sito, dobbiamo renderlo raggiungibile. La facilità di accesso è uno dei vantaggi principali dei siti web, a differenza di altri sistemi di pubblicazione, come ad esempio Google Classroom che richiede l’accesso all’utente.

La prima possibilità è inserire il lavoro in una pagina di Google Sites. È una soluzione utile se abbiamo già un sito didattico e vogliamo aggiungere un’attività interattiva accanto agli altri materiali.

1. In Gemini apriamo la visualizzazione Codice e copiamo il codice generato.
2. Apriamo nell’editor un nostro sito Google Sites.
3. Nel pannello di inserimento (barra laterale destra) scegliamo Incorpora.
4. Selezioniamo la scheda Incorpora codice e incolliamo il contenuto copiato.
5. Procediamo con l’anteprima e confermiamo l’inserimento.

L’attività appare all’interno di un riquadro. Ridimensioniamolo in larghezza e in altezza, in modo da lasciare spazio sufficiente alla consultazione delle sezioni interattive.

Terminata la sistemazione della pagina, facciamo clic su Pubblica e confermiamo. Possiamo quindi aprire la versione pubblicata per verificare come si presenta il sito a chi lo utilizza.

Per approfondire questa funzione, è disponibile anche la guida di Google Sites all’inserimento di contenuti e codice.

Passo 4: pubblicare una pagina autonoma con Netlify Drop

Se preferiamo che il sito occupi l’intera pagina, senza essere contenuto in un riquadro di Google Sites, possiamo scegliere un’altra strada: Netlify Drop.

Torniamo in Gemini e utilizziamo il comando per scaricare il codice. Nell’interfaccia dell’esempio si trova nel menu Esporta. Otterremo un file HTML da caricare sul servizio di pubblicazione.

1. Apriamo Netlify Drop e, al primo utilizzo, effettuiamo la registrazione.
2. Utilizziamo l’area di caricamento per selezionare il file HTML appena scaricato.
3. Se compare la richiesta di rinominare il file in index.html, scegliamo l’opzione che lo rinomina e procede alla pubblicazione.
4. Attendiamo il caricamento e controlliamo l’anteprima.
5. Facciamo clic su Make public per rendere pubblico il sito.

Al termine abbiamo un indirizzo web pronto da condividere. Aprendolo, il sito appare come una pagina autonoma, anziché come una sezione incorporata in un’altra pagina.

La scelta dipende quindi da come vogliamo organizzare i materiali: Google Sites per integrare l’attività in un percorso già esistente, Netlify Drop per ottenere un sito autonomo.

Passo 5: Un sito interattivo con immagini scelte da noi

Passiamo a un secondo esempio, nel quale vogliamo spiegare la differenza tra continente, Stato e regione attraverso alcune cartine geografiche.

Uso volutamente il termine “Stato”: per alcuni alunni la parola “Paese” può creare confusione con “paese”, inteso come centro abitato. 

Prepariamo le immagini da utilizzare. Nell’esempio sono presenti una cartina dell’Europa, alcune cartine di Stati, tra cui l’Italia, e alcune regioni italiane. Non occorre partire con una raccolta molto ampia: bastano pochi elementi per costruire un’attività di riconoscimento.

Procediamo quindi su Google Drive:

1. Creiamo una cartella dedicata alle immagini del sito su Google Drive e carichiamo le immagini.
2. Apriamo le opzioni di condivisione della cartella.
3. In Accesso generale passiamo da Con limitazioni a Chiunque abbia il link, mantenendo il ruolo di visualizzatore.
4. Carichiamo le immagini precedentemente selezionate e scaricate.
5. Attendiamo che il caricamento sia completato.

Questa impostazione serve a rendere le immagini raggiungibili tramite i relativi collegamenti. Per i dettagli sui permessi possiamo consultare la guida alla condivisione di file su Google Drive.

Passo 6: generare il sito di geografia con i collegamenti alle cartine

Torniamo in Gemini e formuliamo la nuova richiesta, specificando questa volta anche il formato HTML e l’utilizzo delle nostre immagini:

Crea un sito didattico interattivo in HTML per spiegare ai bambini la differenza tra continente, Stato e regione. Usa le cartine disponibili ai collegamenti che seguono.

Aggiungiamo poi i collegamenti alle singole immagini, uno alla volta: su Drive selezioniamo un file, apriamo il menu di condivisione e scegliamo Copia link. Incolliamo il collegamento nella chat, preceduto dal nome del territorio rappresentato.

Ripetiamo il procedimento per tutte le cartine. Associare ogni link a un nome chiaro permette di indicare quale immagine l’AI deve far corrispondere a ciascun continente, Stato o regione.

Quando l’elenco è completo, inviamo la richiesta. Gemini elabora il codice HTML del sito, includendo le immagini indicate.

Il risultato dell’esempio presenta sezioni dedicate ai tre concetti e un quiz illustrato. Gli alunni possono riconoscere una cartina e scegliere se rappresenta un continente, uno Stato o una regione.

Passo 7: pubblicare il sito con immagini e provare l’attività

Anche per questo secondo sito possiamo scegliere una delle due modalità già utilizzate.

• Con Google Sites: copiamo il codice HTML, lo incorporiamo nella pagina dedicata alla geografia e ridimensioniamo il riquadro.
• Con Netlify Drop: salviamo il codice come file HTML, lo carichiamo e rendiamo pubblico il nuovo sito.

Sia in Google Sites sia su Netlify Drop possiamo utilizzare l’anteprima per verificare la pagina dal punto di vista di chi la consulterà. Controlliamo che le cartine siano visibili e che sia possibile raggiungere il quiz.

Nell’attività illustrata, l’Italia va riconosciuta come Stato e la Lombardia come regione. Dopo ogni scelta il sito restituisce un feedback, confermando la risposta corretta oppure segnalando l’errore.

Una volta completata la verifica, condividiamo l’indirizzo della pagina pubblicata attraverso i canali che utilizziamo normalmente: registro elettronico, Google Classroom oppure email.

Il punto di arrivo è semplice: agli studenti basta aprire un collegamento per trovare spiegazioni, immagini e attività nello stesso spazio. Possiamo così corredare la nostra didattica con elementi digitali interattivi che completano e consolidano ciò che insegniamo.