THETA E LA MISSIONE DELL'ARMONIA - CSS
Laboratorio italiano - Onda 1: Creazione / Libro 2

DA DOVE COMINCIO?

La prima volta fatti aiutare da un adulto a preparare un computer, un browser
e un editor di testo/codice che salvi testo semplice. Se manca l'editor,
preparatelo prima di iniziare. Non devi installare programmi da solo.

1. Trova lo ZIP scaricato. Su Windows: clic destro sullo ZIP, "Estrai tutto",
   poi "Estrai". Su Mac: doppio clic sullo ZIP. Apri "theta-css-laboratorio-it":
   devi vedere LEGGIMI.txt e inizio. Questa cartella potrebbe trovarsi dentro
   un'altra cartella creata durante l'estrazione. Non lavorare dentro lo ZIP.
2. Dentro trovi "inizio". Copia e incolla tutta questa cartella sul Desktop.
   Rinomina solo la copia "la-mia-piazza". Non creare una cartella vuota
   e non spostare l'originale: ti servirà per ricominciare. Se una cartella
   di lavoro esiste già, usa un nome nuovo, come "la-mia-piazza-2";
   non sostituire le prove precedenti.
3. Apri "la-mia-piazza" e controlla che contenga questi tre file:

   la-mia-piazza/
     index.html
     base.css
     stile.css

   Non rinominare o separare i file. Se non vedi .html o .css nei nomi,
   chiedi a un adulto di mostrare le estensioni; non aggiungerle alla cieca.
4. Apri index.html di "la-mia-piazza" nel browser. Se il doppio clic apre
   un'altra app, trascina il file in una scheda vuota del browser.
   Devi vedere "La mia piazza di Ondyria", con bottega, vetrina e mercato.
5. Apri l'editor. Scegli File > Apri e seleziona stile.css dentro
   "la-mia-piazza". Devi vedere codice, non la città. Non usare Word o Pages.
   Lascia aperti sia l'editor sia il browser.
6. Segui pagina 10 del libro nella tua copia di stile.css. Salva nell'editor
   (Ctrl+S su Windows, Command+S su Mac), torna alla piazza nel browser
   e premi il pulsante Aggiorna, quello con la freccia circolare.
   Non devi scaricare di nuovo lo ZIP o riaprire il sito a ogni prova.

Dopo il download e la preparazione degli strumenti, non servono account,
connessione Internet o un server per eseguire la pagina.

COME SO SE SONO PRONTO?

Nel browser vedi la piazza schematica; nell'editor il codice di stile.css.
All'inizio bottega e titolo non sono ancora sistemati: è voluto.
Se nel browser compare solo testo con simboli come <html>, hai aperto
il file come testo: torna al passo 4. Ora puoi seguire la storia.

DOVE SCRIVO LA PRIMA REGOLA?

A pagina 10 vai in fondo a stile.css, dopo l'ultima }, e aggiungi il blocco
con p su nuove righe. Non cancellare il codice che c'è già e non copiare
i segni ``` dei riquadri. Poi sostituisci p con .avviso come chiede il libro:
modifica quel blocco, non aggiungerne un secondo. Dopo Salva e Aggiorna,
deve cambiare solo "Avviso: bottega aperta.", non il menu né l'altro avviso.

A pagina 21 aggiungi il nuovo blocco .avviso con font-size e line-height:
quello precedente sul colore è stato eliminato a pagina 15. Da quel punto
modifica i due valori nel blocco nuovo, senza duplicarlo.

LA CITTÀ NEL BROWSER

Questo laboratorio usa una versione schematica di Ondyria, non le immagini
del racconto. Bottega, vetrina e chioschi sono elementi HTML già pronti.
Con CSS ne cambierai colori, caratteri, bordi, spazi e disposizione.
Le figure geometriche nella vetrina rappresentano bottiglie, vaso e rotoli.

QUALI FILE MODIFICO?

- stile.css: le regole CSS su cui lavorerai.
- index.html: la struttura pronta. Modificala soltanto quando il libro
  lo chiede esplicitamente, nell'Extra di pagina 11 e a pagina 34.
  Dopo l'Extra di pagina 11 ripristina l'HTML come indicato nel libro.
- base.css: la scenografia e le impostazioni pronte. Non modificarlo.

Se usi un editor generico, salva come testo semplice, non come documento
Word o testo formattato. Mantieni il nome stile.css, senza aggiungere .txt.
Il file esiste già: usa Salva, non creare un altro documento con Salva con nome.
Se compare una richiesta di conversione o formato, chiedi aiuto a un adulto.
Quando il libro chiede di cambiare un valore, modifica la regola esistente;
non accumulare nuove copie della stessa regola in fondo al file.

COME USO LE ALTRE CARTELLE?

Puoi svolgere tutto il percorso nella tua copia di "inizio".
Le cartelle seguenti sono punti di controllo: contengono già il risultato
della tappa indicata. Guardale dopo aver provato, oppure usale per ripartire.
Copia sempre la cartella intera: non mescolare file di tappe diverse e non
sovrascrivere il tuo lavoro. Ogni cartella ha tutti e tre i file necessari.

Cartella       Riferimento nel libro / risultato
inizio         Pagina 6: punto di partenza
m1             Pagine 10-11: cambia solo l'avviso scelto
m2             Pagine 15-16: colori della bottega, coppia A
m3-titolo      Pagina 20: carattere e dimensione del titolo
m3             Pagina 21: dimensione e interlinea del primo avviso
m4             Pagine 24-25: bordo, padding e margin della vetrina
fila           Pagina 28: fila unica, ancora da migliorare
m5             Pagina 29: i chioschi possono andare a capo
sfida          Pagina 33: prova sbagliata, cambiano tutti i tendoni
corretta       Pagine 33 e 39: cambia solo il tendone firmato
finale-1       Pagina 34: nuova frase e colori della coppia B
finale-2       Pagina 35: bordo viola della vetrina
finale         Pagina 36: esempio completo con gap di 24px

Le prove sbagliate sono intenzionali: "fila" mostra i limiti della fila
unica; "sfida" cambia troppi elementi. Non sono il risultato da conservare.
Alcuni colori iniziali sono poco leggibili: li correggerai durante le missioni.
Le prove Extra tornano ai valori indicati prima di proseguire.
Il progetto finale è un esempio: il libro consente anche altre scelte.

SE NON VEDI IL CAMBIAMENTO

- Hai salvato il file nell'editor e aggiornato la pagina nel browser?
- Stai aprendo index.html della stessa cartella in cui modifichi stile.css?
- I tre file sono ancora insieme e hanno i nomi originali?
- Hai conservato punti, parentesi graffe, due punti e punti e virgola del CSS?
- Hai cambiato soltanto la regola richiesta, senza cancellare le altre?

Se serve, torna all'ultima modifica o riparti da una copia della tappa
precedente. Non cancellare le tue prove: confrontarle aiuta a capire.

MODIFICA -> SALVA -> AGGIORNA -> OSSERVA
