Differenze

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

Link a questa pagina di confronto

Entrambe le parti precedenti la revisioneRevisione precedente
Prossima revisione		Revisione precedente
tailwind [2026/07/27 20:49] – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] waltertailwind [2026/07/27 21:03] (versione attuale) – [FASE 3: CREAZIONE DEI FILE DI PROGETTO] walter
Linea 41: Linea 41:
 All'interno della cartella "mio-progetto-tailwind", crea questi tre file fondamentali usando il tuo editor di codice (es. VS Code) o il Blocco Note: All'interno della cartella "mio-progetto-tailwind", crea questi tre file fondamentali usando il tuo editor di codice (es. VS Code) o il Blocco Note:
  
-===   File 1: vite.config.js   ===+=== File 1: vite.config.js ===
  
 Incolla il seguente codice per attivare il plugin di Tailwind: Incolla il seguente codice per attivare il plugin di Tailwind:
Linea 53: Linea 53:
  
 </code> </code>
-===   File 2: style.css   ===+ 
 +=== File 2: style.css ===
  
 Inserisci solo questa riga in cima al file per importare le funzioni del framework: Inserisci solo questa riga in cima al file per importare le funzioni del framework:
Linea 61: Linea 62:
  
 </code> </code>
-===   File 3: index.html   ===+ 
 +=== File 3: index.html ===
  
 Crea la struttura base della tua pagina web e collega il file CSS: Crea la struttura base della tua pagina web e collega il file CSS:
Linea 83: Linea 85:
  
 </code> </code>
 +
 +
 +==== FASE 4: AVVIO DEL SERVER DI SVILUPPO ====
 +
 +\\
 +1. Nel Terminale di Windows, assicurati di essere dentro la cartella del progetto e lancia il comando:
 +
 +<code>
 +npx vite
 +
 +</code>
 +
 +2. Copia l'indirizzo locale che compare (es. http://localhost:5173) e incollalo nel tuo browser.\\
 +3. Lascia il terminale aperto: ogni volta che modificherai l'HTML, la pagina si aggiornerà da sola.
 +
 +==== FASE 5: PUBBLICAZIONE DEL SITO WEB SU ALTERVISTA ====
 +
 +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!
 +