Corso di HTML: 10 Progetto di un sito completo

10 – Project Work Finale: Sito Internet di uno Scrittore

Il Project Work Finale rappresenta il culmine del percorso didattico. L’obiettivo è realizzare un sito web completo dedicato a uno scrittore, mettendo in pratica tutte le competenze acquisite: HTML, CSS, JavaScript, layout responsive, ottimizzazione SEO e pubblicazione online.

Il progetto è pensato per essere altamente pratico, operativo e modulare, consentendo di ottenere un risultato reale e pubblicabile.

---

📌 Obiettivi del Project Work

Il sito dovrà includere sezioni e funzionalità specifiche, ciascuna con scopi chiari:

1. Home: presentazione dello scrittore con navigazione chiara verso tutte le altre sezioni.

2. Pagina Contatti: modulo funzionante con campi per nome, email e messaggio, pronto per test locale o integrazione con backend/servizi esterni.

3. Galleria Immagini: copertine libri, eventi o foto significative, con effetti interattivi al passaggio del mouse.

4. Blog/Portfolio: elenco dei libri o articoli, con titolo, descrizione e link per approfondire.

5. Footer: informazioni legali, copyright e link social.

6. Responsive Design: il sito deve adattarsi a dispositivi desktop, tablet e smartphone.

7. Ottimizzazione SEO: meta tag corretti, titoli chiari, URL leggibili e performance ottimizzate.

L’obiettivo finale è avere un sito completo, bello da vedere, funzionale e pronto per essere pubblicato online.

---

📌 Strumenti e Prerequisiti

Prima di iniziare il progetto è necessario avere a disposizione:

• Editor di testo aggiornato: Visual Studio Code o simili.

• Browser moderno: Chrome, Firefox o Edge per testare in tempo reale le modifiche.

• Conoscenze di base: HTML, CSS e JavaScript.

• Accesso a piattaforme di pubblicazione: GitHub Pages per siti statici o hosting remoto per soluzioni più complesse.

• Immagini ottimizzate: copertine libri o foto con dimensioni ridotte per migliorare performance.

---

📌 Struttura e Contenuti del Sito

1. Home

La pagina principale introduce lo scrittore e deve essere accattivante:

• Header con il nome dello scrittore e menu di navigazione con link a tutte le sezioni.

• Breve presentazione dell’autore con un paragrafo introduttivo.

• Sezione con link rapidi ai libri, blog e contatti, per facilitare la navigazione.

Esempio HTML:

<header>
  <h1>Nome Cognome</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="galleria.html">Galleria</a>
    <a href="blog.html">Blog</a>
    <a href="contatti.html">Contatti</a>
  </nav>
</header>
<section>
  <p>Benvenuti nel sito ufficiale dello scrittore Nome Cognome. Qui troverete tutte le informazioni sui libri, eventi e articoli.</p>
</section>

---

2. Pagina Contatti

Il modulo di contatto permette agli utenti di interagire con lo scrittore:

• Campi obbligatori: Nome, Email, Messaggio.

• Pulsante “Invia” che può generare un alert di conferma per test locale.

• Possibilità di integrazione con PHP o servizi esterni come Formspree per invio reale.

Esempio HTML:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="messaggio">Messaggio:</label><br>
  <textarea id="messaggio" name="messaggio" required></textarea><br>
  <input type="submit" value="Invia" onclick="alert('Messaggio inviato!')">
</form>

---

3. Galleria Immagini

La galleria consente di mostrare copertine e fotografie con un layout flessibile:

• Utilizzo di griglie CSS per allineare immagini.

• Hover effect per evidenziare immagini al passaggio del mouse.

• Possibilità di integrare lightbox JS per ingrandire le immagini.

Esempio CSS:

.galleria img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.galleria img:hover {
  transform: scale(1.1);
}

---

4. Blog / Portfolio

Sezione dedicata ai libri o articoli:

• Ogni voce include titolo, breve descrizione, link "Leggi di più".

• Possibilità di filtro per categoria o anno tramite JavaScript avanzato.

Esempio HTML:

<article>
  <h3>Titolo Libro 1</h3>
  <p>Breve descrizione del libro.</p>
  <a href="#">Leggi di più</a>
</article>

---

5. Footer

Il footer contiene informazioni legali e link utili:

• Copyright e anno corrente.

• Link social o recapiti.

• Eventuale menu secondario per altre sezioni.

Esempio HTML:

<footer>
  <p>© 2025 Nome Cognome | <a href="#">Privacy</a> | <a href="#">Termini</a></p>
  <div class="social">
    <a href="#">Facebook</a> | <a href="#">Instagram</a>
  </div>
</footer>

---

📌 Responsive Design e Ottimizzazione SEO

• Applicare media queries per adattare il layout a desktop, tablet e smartphone.

• Usare immagini flessibili e layout fluidi per migliorare l’esperienza utente.

• Includere meta tag SEO (title, description, keywords) in ogni pagina.

• Ottimizzare le performance riducendo il peso delle immagini e minificando CSS/JS.

📝 Esercizio: Creazione del Sito di uno Scrittore

In questo esercizio praticheremo passo passo tutte le competenze acquisite durante il corso, dalla struttura HTML alla grafica CSS, fino all’interattività con JavaScript e alla pubblicazione online. L’obiettivo è costruire un sito web completo e funzionante, pronto da mostrare a chiunque.

---

1. Preparazione dell’Ambiente di Lavoro

Il primo passo consiste nel creare l’ambiente organizzato:

• Crea una cartella principale sul tuo PC, ad esempio “SitoScrittore”.

• All’interno della cartella crea:

  • index.html → la Home.

  • contatti.html, galleria.html, blog.html → le altre pagine del sito.

  • Una sottocartella css per i fogli di stile (es. style.css).

  • Una sottocartella js per i file JavaScript (es. script.js).

Strutturare bene i file e le cartelle facilita la manutenzione, la pubblicazione e la gestione dei collegamenti tra pagine.

---

2. Strutturare la Home

La Home è la porta d’ingresso del sito e deve essere chiara e accattivante:

• Inserisci un header con il nome dello scrittore.

• Aggiungi un menu di navigazione con link alle altre pagine.

• Crea una sezione di presentazione con breve introduzione all’autore.

• Inserisci link rapidi a libri, galleria e contatti per facilitare la navigazione.

Esempio HTML:

<header>
  <h1>Nome Cognome</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="galleria.html">Galleria</a>
    <a href="blog.html">Blog</a>
    <a href="contatti.html">Contatti</a>
  </nav>
</header>
<section>
  <p>Benvenuti nel sito ufficiale di Nome Cognome. Scopri i suoi libri, eventi e articoli.</p>
</section>

---

3. Costruire la Pagina Contatti

La pagina contatti consente agli utenti di interagire:

• Crea un form con campi obbligatori: Nome, Email, Messaggio.

• Aggiungi un pulsante Invia con alert di conferma per test locale.

• In futuro puoi collegare il modulo a un backend o a servizi esterni come Formspree.

Esempio HTML:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="messaggio">Messaggio:</label><br>
  <textarea id="messaggio" name="messaggio" required></textarea><br>
  <input type="submit" value="Invia" onclick="alert('Messaggio inviato!')">
</form>

---

4. Creare la Galleria

La galleria deve mostrare immagini di libri o eventi:

• Organizza le immagini in griglia flessibile usando CSS Grid o Flexbox.

• Aggiungi hover effect per rendere le immagini interattive.

• Opzionalmente, integra un lightbox JavaScript per ingrandire le immagini.

Esempio CSS:

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
.galleria img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.galleria img:hover {
  transform: scale(1.1);
}

---

5. Creare la Sezione Blog

La sezione blog/portfolio raccoglie libri o articoli:

• Ogni articolo contiene titolo, descrizione breve e link “Leggi di più”.

• Puoi aggiungere un filtro JS per categorie o anni di pubblicazione.

Esempio HTML:

<article>
  <h3>Libro 1</h3>
  <p>Breve descrizione del libro.</p>
  <a href="#">Leggi di più</a>
</article>

---

6. Collegamento e Navigazione tra le Pagine

• Assicurati che il menu sia coerente su tutte le pagine.

• Tutti i link interni devono puntare correttamente a index.html, contatti.html, galleria.html e blog.html.

---

7. Stilizzare con CSS Esterno

• Collega style.css a tutte le pagine con <link rel="stylesheet" href="css/style.css">.

• Applica stili a header, menu, sezioni e footer.

• Utilizza media queries per rendere il sito responsive:

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  .galleria {
    grid-template-columns: 1fr;
  }
}

---

8. Aggiungere Interattività con JavaScript

• Toggle menu mobile o contenuti nascosti.

• Alert per conferma invio modulo contatti.

• Eventi mouseover/mouseout per evidenziare elementi.

Esempio JS:

function toggleMenu() {
  let nav = document.querySelector('nav');
  nav.classList.toggle('aperto');
}

---

9. Pubblicazione Online

• GitHub Pages: carica l’intera cartella e abilita Pages nelle impostazioni del repository.

• Hosting FTP: usa FileZilla per caricare i file su un server remoto.

• Controlla che tutte le pagine siano raggiungibili e responsive.

---

✅ Risultati Attesi

Al termine del Project Work, sarai in grado di:

1. Creare un sito web completo e funzionale dedicato a uno scrittore.

2. Strutturare contenuti multisezione usando HTML semantico.

3. Applicare CSS per layout, grafica, responsive design e interazioni.

4. Implementare JavaScript per migliorare l’usabilità della pagina.

5. Pubblicare il sito online e renderlo accessibile al pubblico.

6. Ottimizzare il sito per SEO e performance di base.

Questo esercizio rappresenta la sintesi operativa di tutto il corso, trasformando le conoscenze teoriche in un progetto reale e professionale, pronto per essere mostrato in un portfolio.