Un sito deve farsi capire.
Osserva un sito, trova gli ostacoli e riparali. Poi costruisci una pagina che porti davvero alla destinazione.
Cominciamo da qui ↓Un PC, un progetto, 2–3 persone
Siete il piccolo team che ripara Giro Lago.
Decidete insieme cosa sistemare prima. Dopo alcune riparazioni e prima dell’HTML, scambiate i ruoli. Uno scrive, gli altri devono capire e proporre.
Il risultato del gruppo
Una pagina HTML del gruppo, due problemi osservati e la prova fatta da un altro gruppo.
Prima di chiudere, ognuno spiega un pezzo diverso del lavoro. Chi ha già finito aiuta con domande e indizi, lasciando usare il mouse al compagno.
Scegliete chi è al posto A, B e C. Non servono nomi.
Un cliente, un obiettivo
5 minuti
Giro Lago è un noleggio di biciclette inventato. Chi visita il sito deve capire quanto costa una bici e arrivare alla richiesta di prenotazione. Prima controlli il sito, poi lo ripari e infine costruisci un piccolo pezzo in HTML.
Oggi non basta dire «è brutto»: cerca una prova. Esempio: «in vista telefono il pulsante sparisce; quindi non riesco a iniziare la prenotazione».
Quale prova daresti a un compagno?
Osserva prima di toccare
10 minuti
Nel sito qui sotto prova a trovare il prezzo di due ore e a raggiungere Prenota. Passa a «Telefono». Fai scorrere l'anteprima: il primo schermo non è tutto il sito.
Individua almeno due ostacoli prima di aprire il pannello delle riparazioni.
Ripara e rifai la prova
20 minuti
Apri l'officina delle riparazioni
Cambia una cosa alla volta. Poi torna all'anteprima e rifai lo stesso compito.
Prima osserva il sito nelle due viste.
Aiuto 1 · Un indizio
Aiuto 2 · Un esempio da adattare
La prova dopo la riparazione
Trova i prezzi, poi usa il pulsante per arrivare alla sezione Prenota. Premi il pulsante di prova che trovi lì: non inserire dati personali.
Percorso da provare nell'anteprima.
Dal disegno al codice
15–40 minuti · base + extra
Nuovo passo: traduci una piccola parte del progetto in HTML. Il menu è un nav, il titolo è un h1, un collegamento usa a href. Dopo # scrivi l'id esatto della destinazione.
Completa il codice: un h1, due link nel nav verso #prezzi e #prenota, e un link nel main con testo Prenota una bici verso #prenota. Nel CSS rendi leggibile il paragrafo dei prezzi (almeno 16 px e contrasto sufficiente).
L'anteprima esegue solo HTML e CSS. I collegamenti interni portano alle sezioni della tua pagina.
Fai una modifica e premi Prova.
La tua pagina
Aiuto 1 · Un indizio
Aiuto 2 · Un esempio da adattare
<nav><a href="#prezzi">Prezzi</a></nav>. Per il testo prova p { font-size: 18px; color: #172a42; }.Fate provare il progetto a un altro gruppo
Fate provare il risultato a un altro gruppo: «Trova il costo di due ore e inizia una prenotazione». Guarda senza indicare dove cliccare. Poi modifica una cosa e rifai la prova. Se hai più tempo, disegna la tua versione in Excalidraw, con Home e Prenota collegate e i contenuti del primo schermo.
Il vostro lavoro, da mostrare
5 minuti
Fai vedere che cosa hai capito
Mostrate al docente il risultato del gruppo. A turno, ognuno spiega una scelta o una modifica diversa. Le spunte sono un'autovalutazione: il docente guarda anche il lavoro.
I progressi restano su questo browser. Scarica una copia se cambi PC.
Questo laboratorio non invia risposte al docente. Il file è una copia del lavoro da conservare; evita nomi, contatti e dati personali. Non è una verifica con voto.