Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- tailwind [2026/07/27 20:51] – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] walter
+++ tailwind [2026/07/27 21:03] (versione attuale) – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] walter
@@ Linea 85: / Linea 85: @@
 </code>
 ==== FASE 4: AVVIO DEL SERVER DI SVILUPPO ====
@@ Linea 101: / Linea 103: @@
 Quando hai terminato lo sviluppo in locale, non devi caricare l'intera cartella del progetto. È necessario prima generare la versione definitiva del sito (ottimizzata e leggera) e poi trasferirla online.
+=== 1. COMPILAZIONE DEL PROGETTO (BUILD) ===
+  - Apri il Terminale di Windows nella cartella del tuo progetto.
+  - Se il server di prova è ancora attivo, premi la combinazione di tasti [ CTRL + C ] per fermarlo.
+  - Digita il seguente comando e premi Invio:
+<code>
+     npx vite build
+</code>
+Al termine del processo, Vite creerà automaticamente una nuova cartella chiamata "dist" all'interno del tuo progetto. Questa cartella contiene solo i file necessari per il web (HTML, CSS minimizzato e immagini).
+=== 2. ACCESSO AD ALTERVISTA ===
+  - Apri il browser e vai sul sito ufficiale di Altervista (it.altervista.org).
+  - Clicca su "Login" in alto a destra e inserisci i tuoi dati di accesso (Username e Password).
+  - Entra nel pannello di controllo principale (Bacheca).
+=== 3. CARICAMENTO DEI FILE (DEPLOY) ===
+  - Nel menu di Altervista, seleziona la voce "Gestione File" (o "Sito" → "Gestione File").
+  - Assicurati di trovarti nella cartella principale del tuo spazio web (la cartella radice).
+  - Sul tuo computer, apri la cartella "dist" appena generata.
+  - Seleziona TUTTO il contenuto interno alla cartella "dist" (il file index.html e la cartella assets).
+  - Trascina e rilascia questi file direttamente nella schermata del browser di Altervista, oppure clicca sul pulsante "Invia Files" per selezionarli.
+=== ATTENZIONE / NOTA IMPORTANTE: ===
+Il file "index.html" deve trovarsi nella cartella principale di Altervista e NON all'interno di una sottocartella chiamata "dist". Se visitando il tuo link (es. nomesito.altervista.org) vedi una pagina bianca o un errore, verifica di aver spostato i file fuori dalla cartella "dist" durante il caricamento.
+===== Come usare VS Code fin dall'inizio =====
+  - Apri la cartella: Avvia VS Code, clicca su File > Apri cartella… e seleziona la cartella del tuo progetto (mio-progetto-tailwind).
+  - Usa il Terminale Integrato: Invece di usare il prompt dei comandi di Windows, premi la combinazione di tasti CTRL + ò (oppure vai in alto su Terminale > Nuovo Terminale). Si aprirà un terminale integrato in basso, già posizionato nella cartella corretta.
+  - Lancia i comandi da lì: Digita npm install… o npx vite direttamente nel terminale di VS Code.
+  - Scrivi il codice: Crea e modifica i file index.html, style.css e vite.config.js usando l'editor di testo di VS Code.
+=== Un trucco fondamentale per Tailwind su VS Code ===
+Per scrivere il codice alla massima velocità, devi assolutamente installare un'estensione gratuita ufficiale dentro VS Code:
+  - Clicca sull'icona dei quadratini a sinistra in VS Code (Estensioni), oppure premi CTRL + SHIFT + X.
+  - Cerca "Tailwind CSS IntelliSense" (quella ufficiale creata da Tailwind Labs).
+  - Clicca su Installa.
+Cosa fa questa estensione?
+Mentre scrivi il codice HTML e digiti una classe (ad esempio bg-), ti mostrerà un menu a tendina con i suggerimenti automatici di tutti i colori e le opzioni disponibili, mostrandoti persino un quadratino con l'anteprima del colore. Questo ti eviterà di dover ricordare a memoria tutti i nomi delle classi.
+Se vuoi aggiungere anche questa comoda scorciatoia alla tua guida in Word, ti preparo l'impaginazione al volo. Altrimenti, dimmi pure se hai già installato VS Code sul tuo computer!