Oltre il BluOltre il Blu

01Il progetto

Il sito era il corso

Oltre il Blu nasce a Termoli nel 2022. Nasce dall'esperienza di docenti di sostegno e di scienze motorie, educatori, assistenti sociali, tecnici ABA, psicologi e psicoterapeuti. Segue persone con autismo e con disabilità fisiche e psichiche, fra Termoli e il basso Molise. Aveva bisogno di un sito completo, che chi ci lavora potesse aggiornare senza chiamare nessuno.

Il sito lo abbiamo progettato noi, ma a scriverlo sono stati altri. È nato dentro Connettiamoci, un corso di sviluppo web che abbiamo tenuto a cinque ragazzi. Invece di un progetto d'esempio, i ragazzi hanno lavorato sul sito vero, quello che sarebbe rimasto online. Prima del corso nessuno di loro aveva mai pubblicato una pagina web.

5

ragazzi hanno scritto il sito

2 ore

ogni lezione, sempre con lo stesso schema

8

fasi, dall'inizio alla pubblicazione

1

sito online, aperto a chiunque

02Il metodo

Ogni lezione uguale, il percorso no

Ogni lezione durava due ore, con quattro blocchi di lavoro e una pausa, sempre nello stesso ordine. Lo schema fisso era voluto, perché sapere cosa aspettarsi lascia più attenzione per la cosa nuova. Il percorso invece è cresciuto oltre il piano di partenza. Si sono aggiunte lezioni in più dove serviva approfondire, e recuperi per chi era stato assente.

• Mai partire dal foglio bianco, perché ogni lezione dava file già impostati con gli spazi da completare.
• Una guida interattiva per ognuno, con barra di avanzamento, esercizi, suggerimenti e soluzioni nascoste.
• Stesso progetto e stesso traguardo per tutti, con più codice pronto dove serviva e più libertà dove si poteva.
• Prima gli esempi e poi la teoria, con Git spiegato come i salvataggi di un disegno.
• Ogni incontro finiva con un pezzo di sito in più da vedere nel browser, invece che con i compiti.

Gli strumenti erano quelli veri, senza versioni semplificate fatte apposta per la lezione. Abbiamo usato HTML, Tailwind, JavaScript, Figma, Git e GitHub, VS Code con Live Server e GitHub Pages per pubblicare. Sul codice in comune abbiamo tenuto un ramo solo, con un file per ciascuno. I rami separati sono la strada dei professionisti, ma qui avrebbero complicato le cose senza insegnare niente di più.

03Le persone

Chi ha costruito cosa

Ognuno ha avuto una parte precisa del sito, e sono parti che oggi sono online e funzionano. Abbiamo diviso i file per non far lavorare due persone sulla stessa cosa. Quindi ognuno aveva la sua pagina, e la pagina principale era divisa per sezioni.

• Emanuele, il menu in alto e il piè di pagina, che stanno su ogni pagina e se sono sbagliati si vedono dappertutto.
• Giada, l'apertura della pagina principale e le fasce che vengono subito dopo.
• Ilaria, arrivata a corso iniziato accanto a Giada, che ha dovuto capire codice scritto da altri prima di toccarlo.
• Diego, le pagine Contatti e Come aiutarci, da cui passa chi ha deciso di fare qualcosa.
• Elio, la pagina Chi siamo, compresa la sezione della sede con le foto a scorrimento.

A seguirli, lezione dopo lezione, c'erano Simone e Marco.

1. 1

   Avvio

   Installare VS Code e Git, e scrivere il primo file HTML

   gli strumenti sono pronti

2. 2

   Fondamenta

   Le basi di Tailwind, il menu e il piè di pagina comuni

   il sito ha una sua faccia

3. 3

   Costruzione

   Ognuno costruisce le proprie sezioni

   la pagina principale è completa

4. 4

   Rifinitura

   Confronto con Figma, correzioni e banner dei cookie

   il sito somiglia al progetto grafico

5. 5

   Interattività

   JavaScript per il menu, le foto a scorrimento e le interazioni

   il sito risponde

6. 6

   Completamento

   Contatti, Come aiutarci e Chi siamo

   tutte le pagine esistono

7. 7

   Ottimizzazione

   Telefoni, testate per Google, icona del sito e immagini

   funziona su ogni schermo

8. 8

   Pubblicazione

   Messa online su GitHub Pages

   il sito è online

Fra una fase e l'altra ci sono state sessioni libere, senza guida e sul codice vero del sito. Alla fine sono state quelle in cui i ragazzi hanno lavorato di più come sviluppatori.

04Da lì in poi

La base è rimasta, il sito è cresciuto

Il sito pubblicato all'ultima lezione era il traguardo del corso, ma non quello del sito. Da lì abbiamo continuato noi, aggiungendo il blog, gli eventi e la ricerca interna. Abbiamo aggiunto anche le preferenze di lettura, per chi vuole testi più grandi o meno movimento, e un pannello con cui l'associazione pubblica da sola.

Quello che i ragazzi hanno costruito non è stato buttato e rifatto. La struttura delle pagine, i colori e l'ordine delle sezioni sono partiti da lì, e ci sono ancora sotto il sito di oggi. Per questo sul sito dell'associazione il corso ha una pagina tutta sua, invece di una riga nei ringraziamenti.

05Il risultato

Il risultato

Un'associazione nata nel 2022 ha un sito che aggiorna da sola, con il blog, gli eventi e le pagine per chi vuole donare o dare una mano. Cinque ragazzi che non avevano mai pubblicato una pagina sanno trasformare un progetto grafico in codice. E sanno lavorare in gruppo con Git e tenere online quello che hanno scritto.