Il prototipo, oggi
Funziona davvero
- Tutte le pagine, su telefono, iPad e computer
- Filtri, distanza, ordinamento
- Candidatura in cinque passi con salvataggio automatico e controlli
- Area volontarie: cambio di stato con Annulla, nuovo gatto, promemoria
- Consenso per Instagram, copia del codice fiscale, condivisione
È simulato
- Gatti, nomi e date sono esempi
- I dati restano nel browser di chi lo usa: nessuna candidatura arriva davvero
- Le foto sono segnaposto colorati
- I post di Instagram sono riquadri finti
- Le volontarie non hanno un accesso con password
Com'è fatto
- HTML, CSS e JavaScript, senza librerie né passaggi di compilazione. Si apre da qualsiasi spazio web, così com'è. L'unica libreria è quella che disegna i codici QR (qrcode-generator, licenza MIT), usata solo nella presentazione.
- Un'unica pagina con indirizzi «#/…». Il tasto Indietro funziona, ogni ricerca si può condividere, e non serve configurare il server.
- Lo stato è salvato nel browser. Per questo, nel racconto, quello che Giulia cambia nel suo telefono compare subito nel telefono di Marta: le due pagine leggono gli stessi dati.
- Nessuna richiesta a server esterni. Caratteri e immagini sono sul vostro spazio; l'abbiamo verificato pagina per pagina: zero collegamenti verso terzi.
| Cartella | Cosa contiene |
|---|---|
| prototipo/ | Il sito (index.html) e la regia per presentarlo (presenta.html) |
| racconto/ | Il racconto per l'incontro |
| studio/ | Questi tre studi |
| assets/js/dati.js | I gatti di esempio e i dati dell'associazione: è il file da modificare per primo |
| assets/css/ | Fondamenta (colori, caratteri), componenti del sito, pagine di presentazione |
| assets/fonts/, assets/img/ | Caratteri e immagini, tutti in locale |
Dal prototipo al sito vero: tre cose cambiano
- Indirizzi veri per ogni gatto. Per avere su WhatsApp l'anteprima con la foto di Miele, ogni scheda deve esistere come pagina a sé (/cercano-casa/miele-trapani) con i suoi metadati. Gli indirizzi «#/» del prototipo non lo permettono.
- Un archivio condiviso al posto del browser. I gatti vivono in uno strumento di gestione che tutte potete aggiornare; il sito li legge da lì.
- Candidature che arrivano davvero, in un posto condiviso e protetto, con un avviso alla volontaria referente.
Tutto il resto (componenti, testi, comportamenti, casi difficili) passa così com'è: il prototipo è la specifica.
Dove aggiornerete i gatti
È la scelta più importante, e va fatta guardando a chi, tra voi, lo userà tra un anno, non al costo iniziale. Tre strade ragionevoli:
| Strada | A favore | Contro | Adatta se |
|---|---|---|---|
| WordPress sul vostro spazio web, con un tipo di contenuto «gatto» e campi fissi | Molto diffuso, ha un'app per il telefono, gira sull'hosting che avete già; moduli e anteprime social si risolvono con estensioni note | Va aggiornato con regolarità per la sicurezza; le estensioni vanno scelte con cura e sono un costo nel tempo | Qualcuna di voi lo conosce già, o c'è una persona di fiducia che lo segue |
| Sito statico generato da file, con un'interfaccia di gestione web (per esempio Decap CMS) | Veloce, sicuro, quasi senza manutenzione, nessun database; costi minimi | Serve una persona tecnica per configurarlo e per i cambiamenti; ogni modifica impiega qualche minuto ad andare online | C'è una persona tecnica disponibile all'inizio, e le volontarie aggiornano solo i gatti |
| Un foglio condiviso come archivio, che il sito legge | Lo sapete già usare tutte | Foto e candidature vanno gestite altrove; un errore in una cella rompe una scheda; i dati stanno su servizi esterni | Solo per una prima fase, con pochi gatti |
Qualunque strada si scelga, deve soddisfare i requisiti del vostro lato: un gatto nuovo in cinque minuti dal telefono, lo stato con un tocco, i promemoria, l'esportazione dei dati.
Candidature e dati personali
Indicazioni di progetto, non consulenza legale: informativa e trattamento vanno verificati da chi se ne occupa per l'associazione.
- Si chiede solo il necessario. La prima candidatura chiede nome, contatti, comune e qualche domanda sulla casa; documenti e indirizzo completo solo dopo il colloquio.
- Un posto condiviso, non la casella di una volontaria. Le candidature finiscono in un elenco con accessi personali; quando una volontaria lascia l'associazione, si toglie il suo accesso e i dati restano.
- Server in Europa. Che i moduli siano gestiti dal vostro hosting o da un servizio esterno, conviene che i dati restino nell'Unione europea.
- Tempi di conservazione decisi prima. Per esempio: le candidature non andate a buon fine si cancellano dopo un periodo stabilito.
- L'informativa accanto al pulsante di ogni modulo, con una casella da spuntare dove serve.
- Copia per chi scrive. Dopo l'invio arriva un'email con le risposte: rassicura, e riduce i messaggi «l'avete ricevuta?».
Cookie e servizi esterni
L'obiettivo è che il sito non debba chiedere consensi se non per Instagram.
| Elemento | Come lo trattiamo | Serve il consenso? |
|---|---|---|
| Caratteri tipografici | Ospitati sul vostro spazio, non su Google Fonts | No |
| Post di Instagram | Si caricano solo dopo «Mostra i post»; fino ad allora nessuna richiesta a Instagram | Sì, gestito dal vostro banner |
| Statistiche di visita | Uno strumento senza cookie (per esempio Plausible, o Matomo configurato senza cookie) | Di norma no, da verificare con chi cura la privacy |
| PayPal, GoFundMe, Amazon | Semplici collegamenti che si aprono sul loro sito | No |
| Bozze delle candidature | Salvate solo sul telefono di chi compila, per riprendere | No: è una funzione richiesta da chi la usa; va citata nell'informativa |
Velocità, anche a Favignana
L'obiettivo: il contenuto principale visibile entro 2,5 secondi su una rete 4G media. Il prototipo oggi pesa così, misurato sul telefono:
| Pagina | Peso totale | Richieste esterne |
|---|---|---|
| Home | circa 285 KB | 0 |
| Scheda del gatto | circa 230 KB | 0 |
Pesi non compressi; la maggior parte del sito è codice del prototipo, che compresso dal server scende a 28 KB. Il peso vero del sito saranno le foto dei gatti. Per tenerle leggere:
- Formati moderni (AVIF o WebP, con JPEG di riserva) e tre misure per ogni foto: circa 400, 800 e 1200 px sul lato lungo; il telefono scarica solo quella che gli serve.
- Caricamento solo quando la foto sta per entrare nello schermo, tranne la prima.
- Misure dichiarate per ogni immagine, così la pagina non salta mentre si carica.
- Se lo strumento di gestione non ridimensiona da solo, lo deve fare al momento del caricamento: non si può chiedere alle volontarie.
Accessibilità
Riferimento: WCAG 2.2, livello AA. Cosa è già nel prototipo:
| Tema | Cosa fa il prototipo |
|---|---|
| Contrasto | Testo nero su tutti i fondi: da 8,6 a 17 a 1. Grigio secondario solo dove supera 4,5 a 1. Errori in rosso scuro, 7,4 a 1, sempre con icona e frase. |
| Area toccabile | Almeno 44 px per ogni elemento toccabile; 52 px per i pulsanti principali. |
| Tastiera | Tutto si usa senza mouse. Menu, filtri e fogli tengono il focus al loro interno, si chiudono con Esc e lo riportano dov'era. |
| Cambio di pagina | Il focus va sul titolo della nuova pagina, e il titolo della scheda del browser cambia: chi usa un lettore di schermo sa dove si trova. |
| Messaggi | Salvataggi, conferme ed errori vengono annunciati ai lettori di schermo; gli errori dei moduli sono collegati al loro campo. |
| Stati | Mai solo colore: «Urgente», «Richieste in corso», «Sì / No / Da valutare» sono sempre scritti. |
| Movimento | Chi ha chiesto al telefono di ridurre le animazioni non vede scorrimenti animati né rotazioni. |
| Immagini | Le foto dei gatti avranno un testo che le descrive («Miele, gatta tigrata, sdraiata su una coperta»), non solo il nome. |
Da fare prima del lancio: una prova con VoiceOver su iPhone e TalkBack su Android, con le foto e i testi veri.
Pubblicare il prototipo sul vostro spazio
- Caricate l'intera cartella sul vostro hosting, con FTP o con il pannello del fornitore. Funziona anche in una sottocartella, per esempio
vostrodominio.it/proposta/. - Usate un indirizzo con HTTPS: copiare negli appunti e condividere dal telefono funzionano solo così.
- Le pagine chiedono già ai motori di ricerca di non essere indicizzate. Finché i dati sono di esempio, conviene comunque proteggere la cartella con una password dal pannello dell'hosting.
- Aprite la pagina principale: i codici QR si generano da soli con l'indirizzo giusto.
Mettere le foto vere
- Copiate le foto in
assets/gatti/, verticali, circa 1200 px sul lato lungo, per esempiomiele-1.jpg. - In
assets/js/dati.js, nella riga del gatto, scrivetefoto: ["assets/gatti/miele-1.jpg", "assets/gatti/miele-2.jpg"]. - Ricaricate: la prima foto diventa la copertina nell'elenco e nella scheda.
Prima del lancio, in ordine
- Risposte alle otto domande del racconto, testi tra parentesi quadre sostituiti.
- Scelta dello strumento di gestione e delle persone che lo useranno.
- Informativa privacy e cookie, tempi di conservazione delle candidature.
- Foto vere ottimizzate, testi alternativi.
- Prova con cinque persone e con i lettori di schermo.
- Statistiche senza cookie attive dal primo giorno, per avere il confronto.