Il primo progetto col tuo brief: come si valuta

La consegna

Rifai il percorso del capitolo con il tuo brief al posto di quello di Marta: cartella nuova, P230 coi tuoi dati, costruzione, tre iterazioni, collaudo. Il risultato è tuo e non somiglierà a nessun altro — quindi qui non trovi «la risposta giusta», ma il metro per giudicare la tua: sei tappe, e per ognuna un esito che si osserva invece di sperarci. In fondo, un caso svolto per intero su un mestiere diverso da quello di Marta.

Come si ragiona

1. Quello che si valuta è il percorso, non la pagina. Un mini-sito bello con un brief povero è un colpo di fortuna che non si ripete; un sito modesto nato da un brief solido è una capacità che userai per il prossimo lavoro. Giudica le tappe una per una, non il colpo d'occhio finale.

2. Il brief passa un test solo: un collega nuovo saprebbe costruirlo senza farti domande? È il test del contesto del C.O.R.E. (capitolo 1.3), applicato a un capitolato. Rileggi le tue dieci righe e cerca i punti dove chi legge dovrebbe indovinare: se ci sono, li indovinerà anche Code. E controlla che il vincolo tecnico sia riportato parola per parola — «una sola pagina, due file (HTML e CSS), nessuna libreria esterna». È la riga che ti tiene dentro un progetto che sai gestire.

3. Il brief deve contenere ciò che nessun modello può sapere. I tuoi prezzi veri, il tuo modo di lavorare, il cliente tipo. Il sito che «potrebbe essere di chiunque» non è un difetto dello strumento: è lo specchio di un brief generico. Il capitolo lo dice del sito di Marta, che deve metà del suo carattere a una riga sola sul suo modo di lavorare.

4. Le tre iterazioni si scelgono, non si improvvisano. Falle di tre tipi diversi: una di struttura (un elenco che diventa tabella), una di aspetto (i colori), una di contenuto (una sezione nuova). Non è pignoleria: sono i tre modi diversi in cui il lavoro può andare storto, e provandoli tutti impari a riconoscere quale correzione serve. Una alla volta, con il ricaricamento della pagina in mezzo: se qualcosa si rompe, il colpevole è sempre l'ultima mossa.

5. La terza iterazione serve a farti trovare un'invenzione. Chiedi una sezione che solo tu puoi riempire davvero — domande frequenti, condizioni, tempi. Code la costruirà bene e la riempirà di valori plausibili: tempi di consegna, percentuali di acconto, raggi di trasferta. Plausibili, non tuoi. Trovarne almeno una è il vero risultato didattico dell'esercizio: da lì in poi guarderai ogni numero della pagina chiedendoti «questo gliel'ho dato io?».

6. Il collaudo è diviso in due parti e restano divise. Quella che fa Code (P233): collegamenti che puntano a sezioni esistenti, email e telefono cliccabili, prezzi identici ovunque compaiano, titolo della linguetta del browser. Quella che fanno i tuoi occhi: restringi la finestra fino alla larghezza di un telefono e guarda se i testi si tagliano, se la tabella resta leggibile, se il pulsante dei contatti si raggiunge col pollice. Trenta secondi di finestra stretta valgono più di dieci scansioni automatiche.

7. La firma finale è la spiegazione. Il progetto è tuo quando sai dire cosa fa ciascuno dei due file e sai fare una micro-modifica da solo: cambiare una parola, vederla nel browser, rimetterla com'era. Se salti questo passo resti con l'impressione che «l'abbia fatto l'AI», e alla prima modifica urgente tornerai a chiedere invece di aprire il file.

Una soluzione svolta

Serena, personal trainer a Firenze, segue 120 clienti dal 2019 e non ha mai avuto una pagina propria. Cartella sito-serena, terminale dentro la cartella, claude. Poi P230, compilato:

Prepariamo il brief del mio mini-sito di presentazione: dieci righe scritte bene
adesso ci risparmiano venti correzioni dopo. Non costruire ancora nulla.
Chi sono e cosa faccio: Serena, personal trainer a Firenze, alleno in studio e
all'aperto alle Cascine, seguo 120 persone dal 2019.
Le tre sezioni che voglio:
1) chi sono — lavoro sulla postura e sul rientro dopo gli infortuni, non sulle diete;
2) servizi con i prezzi veri: valutazione iniziale gratuita (45 minuti),
   lezione singola 50 €, percorso da 10 lezioni 450 €;
3) contatti: telefono, email, dove ricevo.
Il tono: diretto e concreto, do del tu, niente promesse di trasformazione.
Chi deve convincere: una persona sui 40 che torna a muoversi dopo anni fermi
e ha paura di farsi male.
Scrivi il brief in massimo 10 righe, con dentro:
1) chi sono e cosa offro, in due righe;
2) le tre sezioni, ciascuna con i suoi contenuti veri;
3) il tono di voce, con una frase d'esempio;
4) il vincolo tecnico, riportato tale e quale: «una sola pagina, due file
   (HTML e CSS), nessuna libreria esterna».
Regole: nel brief non deve esserci nulla di inventato — se per una sezione ti manca
un'informazione, chiedimela prima di scrivere; niente paroloni da agenzia.
Quando il brief è pronto, fermati: lo rileggo e ti do l'approvazione.

Il brief torna in dieci righe e con una domanda: i contatti veri — telefono, email, indirizzo dello studio — non glieli ha dati nessuno, e infatti Code non se li inventa: li chiede. Serena li aggiunge, approva, e la costruzione parte con P231. Due file, un permesso alla volta approvato, sette minuti: index.html e style.css. Doppio clic, la pagina si apre.

Le tre iterazioni, nell'ordine:

• Struttura. «Metti i tre servizi in una tabella: servizio, cosa comprende, prezzo.» Tocca entrambi i file. Ricarica: tre righe ordinate, la valutazione gratuita in cima.
• Aspetto. «Palette bianco sporco e verde salvia, un solo colore per i pulsanti.» Tocca solo style.css. Ricarica: la pagina smette di sembrare un modulo.
• Contenuto. «Aggiungi una sezione con 4 domande frequenti di chi ricomincia da fermo.» Ed ecco l'invenzione annunciata: le domande sono azzeccate (mi farò male? quante volte a settimana? posso disdire? serve l'abbigliamento?), le risposte no. Alla disdetta, Code scrive «entro 24 ore»: la regola di Serena sono 12 ore, e nessuno gliel'aveva detta. Correzione mirata: «nella FAQ sostituisci la disdetta con: entro 12 ore, altrimenti la lezione è consumata». Un giro, trenta secondi.

Il collaudo con P233 restituisce due parti. Quella di Code: i tre prezzi coincidono in tabella e nel testo, il telefono è cliccabile, un link del menu puntava a una sezione rinominata durante la seconda iterazione — unico errore vero, corretto. Quella di Serena, a occhio: a finestra stretta la tabella dei prezzi comprimeva l'ultima colonna, una riga di correzione e via. Poi P234 per farsi spiegare i due file, la micro-modifica di prova, e la copia di sicurezza in una sottocartella. Ventotto minuti in tutto.

Come capisci di averlo fatto bene

• Nella cartella ci sono due file e nient'altro: se sono comparse cartelle o librerie a sorpresa, il vincolo tecnico non era nel brief.
• Ogni numero della pagina lo riconosci come tuo. Quelli che non riconosci non sono errori di battitura: sono ipotesi ben vestite, e vanno sostituiti.
• Doppio clic su index.html e la pagina si apre; a finestra stretta nessun testo si taglia.
• Sai indicare, senza cercare, la riga dove si cambia un prezzo e quella dove si cambia un colore.
• Le iterazioni sono state tre, verificate una alla volta nel browser — non tre richieste in un messaggio.

L'errore che fanno quasi tutti

Chiedere le tre modifiche insieme per fare prima: «metti i prezzi in tabella, cambia i colori e aggiungi le FAQ». Code le esegue tutte e tre, la pagina si scompone in un punto, e adesso i sospettati sono tre. Si finisce a chiedere di annullare tutto e ricominciare, perdendo anche le due modifiche buone. La correzione è la regola del cantiere: una modifica, una ricarica, poi la successiva. Sembra lento e ti fa risparmiare il giro di correzioni.

E adesso

Il capitolo 4.4 elimina il fastidio che scoprirai domani mattina: alla nuova sessione Code non sa più chi sei, che tono usi, quali file non vanno toccati. Il mini-sito di Marta finito — i due file da studiare o da usare come base — è su go.totaliweb.com/r-kit-sito-marta. I prompt di questa pagina: P230 — go.totaliweb.com/p230 (brief), P231 — go.totaliweb.com/p231 (costruzione), P232 — go.totaliweb.com/p232 (iterazione), P233 — go.totaliweb.com/p233 (collaudo), P234 — go.totaliweb.com/p234 (spiegazione). Il progetto P1 «PreventiFacile» della Parte 6 riparte esattamente da qui e arriva fino alla messa online.