martedì 3 marzo 2026

Corso di HTML: 4 Introduzione al CSS

4 – Introduzione al CSS

In questo modulo ci concentreremo sullo styling delle pagine web utilizzando i CSS (Cascading Style Sheets). Il CSS permette di separare il contenuto dalla presentazione, rendendo i siti più ordinati e facili da aggiornare. Mentre HTML definisce cosa viene mostrato, CSS definisce come viene mostrato.

Durante la lezione, gli studenti impareranno a gestire colori, font, dimensioni, spaziature, allineamenti e layout base. Verranno inoltre esplorati i tre metodi principali di applicazione del CSS: inline, internal ed external, con esempi pratici per comprendere vantaggi e limiti di ciascun approccio.

📌 Concetti Base: Selettori, Proprietà e Valori

Il CSS si basa su tre elementi fondamentali:

  1. Selettori – identificano quali elementi HTML devono essere stilizzati.

  2. Proprietà – definiscono l’aspetto da modificare (colore, font, margini, ecc.).

  3. Valori – specificano il comportamento della proprietà scelta.

La sintassi di base del CSS è:

selettore {
  proprietà: valore;
}

Esempio pratico: vogliamo modificare i paragrafi (<p>) della pagina, impostando il colore del testo su blu e un font specifico:

p {
  color: blue;
  font-family: "Times New Roman", serif;
}

Spiegazione dettagliata:

  • p è il selettore che prende tutti i paragrafi della pagina.

  • color: blue; definisce il colore del testo.

  • font-family: "Times New Roman", serif; imposta il tipo di carattere, con fallback serif nel caso in cui il font principale non sia disponibile.

Questo esempio mostra come CSS renda uniforme e coerente l’aspetto di più elementi senza dover ripetere codice HTML inline.

📌 Colori, Font, Dimensioni e Spaziature

Il CSS permette di gestire molti aspetti visivi:

Colori

I colori possono essere definiti in diversi modi:

  • Nome colore: red, blue, green.

  • Esadecimale: #FF0000 per il rosso.

  • RGB: rgb(255,0,0).

Esempio:

h1 {
  color: #1E90FF;
}

Font

Possiamo definire il tipo, la dimensione e lo stile del carattere:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
}

Spiegazione:

  • font-family sceglie il tipo di carattere principale e i fallback.

  • font-size imposta la dimensione del testo in pixel o altre unità (em, rem).

  • font-style può essere normale, italic o oblique.

Dimensioni e Spaziature

  • Margini (margin): spazio esterno all’elemento.

  • Padding (padding): spazio interno all’elemento.

  • Larghezza e altezza (width, height): dimensioni dei blocchi o immagini.

Esempio pratico:

div.card {
  width: 300px;
  height: 200px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

Spiegazione:

  • La classe .card definisce un blocco di contenuto con dimensioni e spaziature controllate.

  • border aggiunge un bordo visibile.

Allineamenti

  • text-align gestisce l’allineamento orizzontale del testo (left, center, right).

  • vertical-align regola la posizione verticale di elementi inline.

  • La proprietà display permette di trasformare elementi inline in blocchi o viceversa.

Esempio:

h2 {
  text-align: center;
}

📌 Differenza tra Inline, Internal ed External CSS

1. Inline CSS

Lo stile viene applicato direttamente a un singolo elemento HTML tramite l’attributo style:

<p style="color:red; font-weight:bold;">Testo rosso e in grassetto</p>

Vantaggi: veloce per modifiche puntuali.
Svantaggi: difficile da mantenere su siti complessi, poco riutilizzabile.

2. Internal CSS

Gli stili sono inseriti in un blocco <style> all’interno dell’<head> della pagina:

<head>
  <style>
    p { color: green; font-size: 16px; }
    h1 { text-align: center; }
  </style>
</head>

Vantaggi: utile per stilizzare una singola pagina senza file esterni.
Svantaggi: non riutilizzabile su altre pagine.

3. External CSS

Il CSS è contenuto in un file separato (ad esempio stile.css) e collegato tramite <link>:

<head>
  <link rel="stylesheet" href="stile.css">
</head>

Vantaggi: separazione completa tra struttura e stile, facilità di manutenzione e riutilizzo su più pagine.
Consiglio: è il metodo consigliato per progetti complessi o siti multipagina.

📝 Esercizi Operativi

Per consolidare le conoscenze:

  1. Colori e Font
    Modifica tutti i paragrafi del tuo sito aggiungendo colore, font e dimensione.

    p {
      color: #333333;
      font-family: Verdana, sans-serif;
      font-size: 14px;
    }

  2. Box Model e Spaziature
    Crea un <div> con margini e padding visibili.

    <div class="card">Contenuto del box</div>

    .card {
      width: 250px;
      height: 150px;
      margin: 20px;
      padding: 15px;
      border: 1px solid black;
    }

  3. Allineamenti
    Centra il testo del titolo principale e i bottoni della pagina:

    h1, button {
      text-align: center;
    }

  4. Applicazione di Stile Inline e Internal
    Prova ad aggiungere uno stile inline a un singolo paragrafo e confrontalo con quello definito internamente nel <style>.

  5. Creazione di un File External CSS
    Salva un file stile.css con tutte le regole viste e collegalo alla tua pagina HTML. Modifica le proprietà e osserva l’impatto su tutta la pagina.

⚡ Esempio: Pagina Colorata con CSS Esterno

In questo esercizio mettiamo in pratica quanto appreso sui CSS. Creeremo una semplice pagina HTML e un file CSS esterno che definirà colori, font, spaziature e layout di base. L’obiettivo è comprendere come separare contenuto e presentazione e come applicare uno stile coerente su tutta la pagina.

1. Struttura della Pagina HTML

Iniziamo con la pagina HTML principale:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Pagina Colorata</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <header>
    <h1>Benvenuto nella mia Pagina</h1>
  </header>
  <section>
    <p>Questo è un paragrafo stilizzato con CSS esterno.</p>
    <p>Possiamo usare colori, font personalizzati e margini.</p>
  </section>
  <footer>
    <p>© 2025 Mario Rossi</p>
  </footer>
</body>
</html>

Spiegazione delle scelte

  1. Dichiarazione <!DOCTYPE html>: indica al browser che si tratta di HTML5, garantendo compatibilità con tutti i browser moderni.

  2. <html lang="it">: specifica la lingua della pagina, utile per accessibilità e SEO.

  3. <head>: contiene informazioni sulla pagina, inclusa la codifica dei caratteri (UTF-8) e il collegamento al file CSS esterno con <link rel="stylesheet" href="stile.css">.

  4. <body>: racchiude i contenuti visibili, suddivisi in header, section e footer.

  5. Header e Footer: separano visivamente e semanticamente le informazioni principali e di chiusura.

  6. Section con paragrafi: permette di organizzare il contenuto in blocchi tematici chiari e leggibili.

2. Il File CSS Esterno

Creiamo un file separato chiamato stile.css con le seguenti regole:

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  color: #333333;
  margin: 20px;
}
header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}
footer {
  background-color: #ddd;
  color: #333;
  padding: 10px;
  text-align: center;
}

Spiegazione delle scelte CSS

  • body: impostiamo uno sfondo chiaro, un font leggibile e un margine globale per separare il contenuto dai bordi del browser.

  • header: colore di sfondo verde (#4CAF50) per evidenziare il titolo della pagina, testo bianco per contrasto e padding per creare spazio interno.

  • p: dimensione del font adeguata (16px) e line-height per migliorare la leggibilità, margine inferiore per separare i paragrafi.

  • footer: colore grigio chiaro, padding e centratura del testo, per distinguere chiaramente la chiusura della pagina.

Motivazione: separare gli stili in un file esterno consente di modificare rapidamente l’aspetto dell’intero sito senza intervenire su ogni pagina HTML. Inoltre, migliora la manutenzione e la leggibilità del codice.

3. Esercizi Operativi

Questi esercizi permettono di sperimentare direttamente il CSS:

  1. Tema personale: modifica i colori di sfondo (background-color) e dei testi (color) per creare un tema grafico coerente con il tuo progetto personale.

    body {
      background-color: #e0f7fa;
      color: #1a237e;
    }

  2. Font multipli: cambia il font dei titoli (h1) e dei paragrafi (p) usando almeno due font diversi per distinguere gerarchicamente il contenuto.

    h1 {
      font-family: "Georgia", serif;
    }
    p {
      font-family: "Verdana", sans-serif;
    }

  3. Margini e Padding: modifica gli spazi tra sezioni e paragrafi per creare un layout più arioso e leggibile.

    section {
      margin: 30px 0;
      padding: 15px;
    }

  4. Nuova Section: aggiungi un nuovo blocco di contenuto e stilizzalo con classi personalizzate.

    <section class="news">
      <h2>Novità</h2>
      <p>Benvenuto nella sezione Novità, dove condivido aggiornamenti e contenuti interessanti.</p>
    </section>
    .news {
      background-color: #fff3e0;
      padding: 20px;
      border: 1px solid #ffb74d;
    }

  5. Esperimento con CSS Inline e Internal: prova a stilizzare un singolo paragrafo inline e confrontalo con il CSS interno in <style> e quello esterno, osservando come cambia la manutenzione e la consistenza dello stile.

4. Consigli per la pratica

  • Salva sempre i file CSS nello stesso percorso del file HTML o usa un percorso relativo corretto.

  • Usa nomi di classi descrittivi (.news, .card) per facilitare la lettura e la gestione degli stili.

  • Testa le modifiche in diversi browser per assicurarti della compatibilità.

  • Ricorda che il CSS è cumulativo e gerarchico: le regole più specifiche o più vicine all’elemento prevalgono su quelle generali.


✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di applicare stili CSS ai tuoi contenuti HTML, gestire colori, font, dimensioni e spaziature, e utilizzare i tre metodi principali di integrazione del CSS. Sarai pronto per creare pagine web esteticamente curate, coerenti e facilmente manutenibili.

alle Nessun commento:
Etichette: ,

lunedì 2 marzo 2026

Corso di HTML: 3 Strutturare i contenuti

3 – Strutturare i Contenuti di una Pagina Web
 

In questo modulo ci concentreremo su come organizzare in maniera chiara, coerente e semantica i contenuti di una pagina web. La struttura di una pagina HTML non riguarda solo l’aspetto visivo, ma anche la logica con cui i contenuti vengono organizzati. Una struttura coerente e semantica migliora la fruizione da parte degli utenti e rende la pagina più facilmente interpretabile dai motori di ricerca, aumentando l’accessibilità e l’usabilità del sito.

Impareremo ad utilizzare elementi semantici come <header>, <footer>, <section>, <article>, <aside> e <nav>, oltre a costruire tabelle e form di input per rendere la pagina interattiva e funzionale.

📌 Elementi Semantici

Gli elementi semantici forniscono significato al contenuto, aiutando sia i browser sia gli utenti a comprendere la struttura della pagina.

  • <header> contiene solitamente il titolo del sito o della pagina e i menu principali. È la sezione introduttiva che compare nella parte superiore della pagina.

  • <footer> racchiude informazioni di chiusura, come copyright, contatti o link utili. Si trova alla fine della pagina.

  • <section> definisce una sezione tematica del contenuto, ad esempio “Chi siamo” o “Servizi offerti”.

  • <article> è dedicato a contenuti indipendenti, come articoli di blog, news o post. Può essere condiviso autonomamente.

  • <aside> è utilizzato per contenuti laterali o correlati, come box informativi, link utili o citazioni.

  • <nav> raccoglie i link di navigazione principali, ad esempio il menu di un sito.

Esempio pratico di struttura semantica di pagina:

<body>
  <header>
    <h1>Il mio sito personale</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#portfolio">Portfolio</a>
      <a href="#contatti">Contatti</a>
    </nav>
  </header>
  <section id="home">
    <article>
      <h2>Benvenuto nel mio sito</h2>
      <p>Qui puoi trovare informazioni sul mio lavoro e i miei progetti.</p>
    </article>
    <aside>
      <p>Notizie recenti: nuove pubblicazioni e aggiornamenti!</p>
    </aside>
  </section>
  <footer>
    <p>&copy; 2025 Nome Cognome - Tutti i diritti riservati</p>
  </footer>
</body>

Spiegazione delle scelte:

  • La struttura separa chiaramente intestazione, contenuto principale e footer.

  • <article> contiene contenuti autonomi, mentre <aside> aggiunge informazioni correlate senza interrompere il flusso principale.

  • <nav> permette agli utenti di spostarsi facilmente tra le sezioni della pagina.

📌 Tabelle HTML

Le tabelle servono per organizzare dati tabulari in righe e colonne. Una tabella HTML è composta da:

  • <table> → elemento principale della tabella.

  • <tr> → definisce una riga.

  • <th> → definisce l’intestazione della colonna (grassetto e centrato di default).

  • <td> → definisce una cella con il contenuto dei dati.

Esempio di tabella:

<table border="1">
  <tr>
    <th>Nome</th>
    <th>Email</th>
    <th>Ruolo</th>
  </tr>
  <tr>
    <td>Mario Rossi</td>
    <td>mario.rossi@email.com</td>
    <td>Web Designer</td>
  </tr>
  <tr>
    <td>Luisa Bianchi</td>
    <td>luisa.bianchi@email.com</td>
    <td>Content Creator</td>
  </tr>
</table>

Spiegazione:

  • <th> è utilizzato per intestazioni di colonne, migliorando la leggibilità.

  • <tr> separa logicamente ogni riga, mentre <td> contiene i dati effettivi.

  • L’attributo border="1" aggiunge un bordo visibile, utile per esercitazioni e prototipi.

📌 Form di Input

I form permettono di raccogliere dati dagli utenti e sono essenziali per newsletter, contatti o registrazioni. Un form HTML si costruisce con <form> e contiene elementi di input come <input> e <textarea>.

Esempio pratico di form di contatto:

<form action="/invia-dati" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Inserisci la tua email" required>
  <label for="messaggio">Messaggio:</label>
  <textarea id="messaggio" name="messaggio" rows="4" placeholder="Scrivi qui il tuo messaggio" required></textarea>
  <button type="submit">Invia</button>
</form>

Spiegazione dettagliata:

  • <form action="/invia-dati" method="post"> specifica dove inviare i dati e con quale metodo.

  • Gli attributi id e name permettono di collegare label e input e di identificare i dati lato server.

  • placeholder fornisce un suggerimento visivo per l’utente.

  • required obbliga l’utente a compilare il campo prima di inviare il form.

  • <textarea> serve per messaggi più lunghi.

  • <button type="submit"> invia i dati al server.

📌 Consigli Operativi per la Lezione

Durante le tre ore di lezione, gli studenti dovranno:

  1. Creare una pagina con header, footer e almeno due section, inserendo un article e un aside in ciascuna sezione.

  2. Costruire una tabella con dati inventati (ad esempio elenco di contatti o prodotti).

  3. Creare un form di contatto completo di input per nome, email e messaggio.

  4. Verificare la coerenza semantica: ogni elemento deve avere senso nel contesto e migliorare la leggibilità.

📌 Obiettivi di Apprendimento

Al termine del modulo, gli studenti saranno in grado di:

  • Comprendere l’importanza della struttura semantica di una pagina web.

  • Utilizzare correttamente header, footer, section, article, aside e nav.

  • Costruire tabelle ben strutturate e accessibili.

  • Creare form di input con attributi utili all’usabilità e all’accessibilità.

  • Applicare le regole apprese per costruire pagine coerenti, leggibili e pronte per essere stilizzate con CSS o rese interattive con JavaScript.

Ecco una versione narrativa, approfondita e completa del Modulo 3 con l’esempio pratico del CV personale, comprensiva di spiegazioni dettagliate, motivazioni delle scelte, e guida passo passo agli esercizi. Il testo è pensato per essere didattico, narrativo e pronto per la lettura in aula o online.

🔹 Esempio: Creare un CV Personale Online

In questo esercizio praticheremo tutte le conoscenze acquisite sul Modulo 3, combinando elementi semantici, tabelle e form per creare un curriculum vitae online. L’obiettivo è realizzare una pagina chiara, leggibile e funzionale, che contenga informazioni personali, esperienze lavorative, istruzione, competenze e contatti.

📌 Struttura della Pagina

Ogni pagina HTML deve iniziare con la dichiarazione <!DOCTYPE html>, seguita dall’elemento <html> che racchiude tutto il contenuto. All’interno di <html>, <head> contiene informazioni come charset e titolo, mentre <body> ospita tutti gli elementi visibili.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>CV Personale</title>
</head>
<body>
  <!-- Contenuti visibili andranno qui -->
</body>
</html>

Spiegazione:

  • <meta charset="UTF-8"> assicura che il testo venga interpretato correttamente con caratteri speciali.

  • <title> appare nella scheda del browser.

  • Il corpo della pagina <body> conterrà header, sezioni, articoli, aside, form e footer.

📌 Header e Navigazione

L’header contiene il nome del candidato e il menu di navigazione interno, facilitando lo spostamento tra le sezioni.

<header>
  <h1>Mario Rossi</h1>
  <nav>
    <a href="#esperienza">Esperienza</a> |
    <a href="#istruzione">Istruzione</a> |
    <a href="#contatti">Contatti</a>
  </nav>
</header>

Spiegazione:

  • <h1> è il titolo principale del CV.

  • <nav> raccoglie i link interni tramite attributi href="#id" per una navigazione fluida.

  • Il simbolo | serve solo da separatore visivo tra i link.

📌 Sezioni e Articoli

Le sezioni principali sono create con <section>, mentre <article> racchiude contenuti autonomi come esperienze o progetti.

<section id="esperienza">
  <h2>Esperienza Lavorativa</h2>
  <article>
    <h3>Web Developer - Azienda XYZ</h3>
    <p>Dal 2020 ad oggi, sviluppo siti web e applicazioni online.</p>
  </article>
</section>

Spiegazione:

  • <section> delimita una sezione tematica.

  • <article> indica un contenuto indipendente, utile se vogliamo condividere questa sezione singolarmente.

  • Gli ID permettono ai link del nav di scorrere direttamente alla sezione corrispondente.

📌 Tabelle per l’Istruzione

Le tabelle organizzano dati in modo chiaro e leggibile.

<section id="istruzione">
  <h2>Istruzione</h2>
  <table border="1">
    <tr><th>Anno</th><th>Corso</th></tr>
    <tr><td>2018</td><td>Laurea in Informatica</td></tr>
    <tr><td>2016</td><td>Diploma Liceo Scientifico</td></tr>
  </table>
</section>

Spiegazione:

  • <th> definisce le intestazioni delle colonne.

  • <td> contiene i dati.

  • L’attributo border="1" è utile per esercitazioni e prototipi, facilitando la leggibilità.

📌 Contenuti Laterali con Aside

L’elemento <aside> serve per informazioni aggiuntive correlate.

<aside>
  <h3>Competenze Tecniche</h3>
  <p>HTML, CSS, JavaScript, Python, SQL</p>
</aside>

Spiegazione:

  • <aside> non interrompe il flusso principale.

  • Utile per competenze, link a portfolio o informazioni laterali.

📌 Form di Contatto

Il form permette agli utenti di contattare il candidato.

<section id="contatti">
  <h2>Contatti</h2>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Inserisci la tua email" required><br>
    <label for="messaggio">Messaggio:</label><br>
    <textarea id="messaggio" name="messaggio" placeholder="Scrivi qui il tuo messaggio" required></textarea><br>
    <input type="submit" value="Invia">
  </form>
</section>

Spiegazione:

  • <form> contiene tutti i campi di input.

  • Gli attributi id e name collegano le label ai campi.

  • required obbliga l’utente a compilare i campi.

  • <textarea> permette di scrivere messaggi più lunghi.

📌 Footer

Il footer chiude la pagina con informazioni generali.

<footer>
  <p>© 2025 Mario Rossi</p>
</footer>

Spiegazione:

  • <footer> contiene informazioni di chiusura e copyright.

  • Può includere anche link a privacy, termini o contatti.

📝 Esercizi Operativi

  1. Sezione Progetti:
    Aggiungi una sezione “Progetti” con almeno 2 articoli descrittivi.

    <section id="progetti">
      <h2>Progetti</h2>
      <article>
        <h3>Sito Portfolio</h3>
        <p>Progettazione e sviluppo di un portfolio personale online.</p>
      </article>
      <article>
        <h3>App Gestione Task</h3>
        <p>Applicazione web per gestire attività quotidiane con JavaScript.</p>
      </article>
    </section>

  2. Link nel Aside:
    Inserisci collegamenti a siti esterni che mostrano il portfolio.

    <aside>
      <h3>Portfolio Online</h3>
      <a href="https://portfolio1.example.com" target="_blank">Portfolio 1</a><br>
      <a href="https://portfolio2.example.com" target="_blank">Portfolio 2</a>
    </aside>

  3. Tabella dell’Istruzione:
    Aggiungi righe per corsi extra o certificazioni.

    <tr><td>2019</td><td>Corso avanzato di JavaScript</td></tr>

  4. Form Personalizzato:
    Aggiungi campo telefono o checkbox per newsletter.

    <label for="telefono">Telefono:</label>
    <input type="tel" id="telefono" name="telefono" placeholder="Inserisci il tuo numero"><br>
    <label><input type="checkbox" name="newsletter"> Iscriviti alla newsletter</label>

  5. Riorganizzazione Nav:
    Aggiungi link interni logici e prova il menu.

    <nav>
      <a href="#esperienza">Esperienza</a> |
      <a href="#istruzione">Istruzione</a> |
      <a href="#progetti">Progetti</a> |
      <a href="#contatti">Contatti</a>
    </nav>


✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di strutturare contenuti complessi in pagine HTML usando correttamente elementi semantici, tabelle e form. Saprai creare un curriculum vitae online completamente funzionale e accessibile, pronto per essere arricchito con CSS e interattività tramite JavaScript nei moduli successivi.

alle Nessun commento:
Etichette: ,

domenica 1 marzo 2026

Corso di HTML: 2 Fondamenti di HTM

 2 – Fondamenti di HTML

In questo modulo ci concentreremo sulla costruzione di pagine web utilizzando HTML, il linguaggio di markup che fornisce la struttura ai contenuti del Web. HTML permette di definire titoli, paragrafi, liste, link e immagini, nonché di aggiungere attributi che ne modificano il comportamento o l’aspetto. Lo scopo principale è comprendere come creare una pagina funzionante da zero e prepararsi per l’integrazione di CSS e JavaScript nei moduli successivi.

📌 Struttura base di una pagina HTML

Ogni pagina HTML ha una struttura fondamentale che deve essere rispettata affinché il browser interpreti correttamente il contenuto e lo mostri all’utente in modo coerente. La struttura di base si compone di quattro elementi principali:

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <body>

1. Questa dichiarazione va sempre all’inizio del documento HTML e indica al browser che il documento è scritto in HTML5, la versione più recente e standardizzata di HTML.

  • Senza <!DOCTYPE html>, i browser potrebbero interpretare la pagina in “modalità quirks”, cioè comportarsi come se fosse HTML vecchio, causando problemi di visualizzazione o compatibilità.

  • Pensalo come un istruzione di compatibilità: “Browser, interpreta questo documento come HTML5”.

2. Il tag <html> racchiude tutti gli elementi della pagina, sia quelli visibili all’utente che quelli non visibili ma utili per i browser e i motori di ricerca.

  • Spesso si specifica l’attributo lang per indicare la lingua del documento, ad esempio lang="it" per l’italiano.

  • Questo aiuta i motori di ricerca e gli screen reader a interpretare correttamente i contenuti, migliorando accessibilità e SEO.

Esempio concettuale:

<html lang="it">
  <!-- contenuti della pagina -->
</html>

3. La sezione <head> contiene tutte le informazioni non visibili direttamente all’utente ma fondamentali per il funzionamento della pagina.

  • Alcuni dei principali elementi contenuti in <head>:

    • <title> → definisce il titolo della pagina, visibile nella scheda del browser e nei risultati dei motori di ricerca.

    • <meta> → definisce metadati, come la codifica dei caratteri (charset="UTF-8") e le informazioni per SEO.

    • <link> → permette di collegare fogli di stile esterni (CSS) o icone.

    • <script> → eventuali script JavaScript da caricare nella pagina.

Perché è importante il head:

  • Senza un head correttamente strutturato, i browser potrebbero mostrare caratteri strani, non applicare correttamente i CSS o penalizzare la pagina nei risultati di ricerca.

4. Il tag <body> contiene tutti i contenuti visibili all’utente, come testi, immagini, link, video e moduli.

  • Ogni elemento che l’utente vede deve essere all’interno del body: se metti contenuti fuori dal body, il browser potrebbe ignorarli o mostrarli in modo irregolare.

  • Possiamo pensare al body come il “palco” della nostra pagina: tutto ciò che l’utente può vedere e interagire deve trovarsi qui.

📌 Elementi di testo

Per strutturare correttamente i contenuti testuali, HTML mette a disposizione tag semantici che aiutano sia l’utente che i motori di ricerca a comprendere il significato delle informazioni.

Titoli

  • <h1> → titolo principale della pagina (unico per pagina).

  • <h2> → sottotitolo, di secondo livello.

  • <h3> … <h6> → titoli di importanza decrescente.
    Consiglio: Utilizzare i titoli in ordine logico, senza saltare livelli, per migliorare leggibilità e SEO.

Paragrafi

  • <p> serve a creare paragrafi di testo separati.

  • Consente di organizzare il contenuto in blocchi leggibili e stilizzabili tramite CSS.

Elenchi

  • Elenchi puntati → <ul> + <li>

  • Elenchi numerati → <ol> + <li>

  • Gli elenchi permettono di presentare informazioni in modo chiaro e ordinato, facilitando la lettura.

Link

  • <a href="URL">Testo del link</a>

  • L’attributo href indica la destinazione del collegamento.

  • Altri attributi utili:

    • title → testo informativo che appare al passaggio del mouse.

    • target="_blank" → apre il link in una nuova scheda.

📌 Attributi più comuni

Gli attributi sono proprietà che modificano il comportamento di un elemento HTML.

Ecco i più frequenti:

  1. src → definisce la sorgente di immagini o media.

    <img src="foto.jpg" alt="Descrizione della foto">

  2. alt → testo alternativo per immagini; utile per accessibilità e SEO.

  3. title → informazioni aggiuntive visibili al passaggio del mouse.

  4. href → URL di destinazione dei link.

Nota importante: L’uso corretto degli attributi aumenta:

  • L’accessibilità per utenti con disabilità.

  • La comprensibilità dei contenuti da parte dei motori di ricerca.

  • La professionalità e chiarezza della pagina.

✅ Consigli pratici per principianti

  1. Sempre chiudere i tag: <p>Testo</p>.

  2. Organizzare il contenuto: titolo → sottotitoli → paragrafi → elenchi.

  3. Usare attributi significativi: nomi di immagini chiari, link descrittivi.

  4. Validare il codice: strumenti come W3C Validator aiutano a verificare errori HTML.

  5. Testare su più browser: Chrome, Firefox, Edge, Safari.


⚡ Esempio: Creare la propria prima pagina “Hello World”

Per mettere in pratica quanto appreso, creeremo una pagina HTML minimale. Apri il tuo editor di testo (come VS Code) e crea un file chiamato index.html. Inserisci il seguente codice:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Questa è la mia prima pagina web in HTML.</p>
  <a href="https://www.google.com" title="Vai a Google" target="_blank">Visita Google</a>
</body>
</html>

In questo esempio, il titolo della pagina viene visualizzato nella scheda del browser grazie a <title>, mentre il contenuto visibile include un titolo principale, un paragrafo descrittivo e un link cliccabile. L’attributo target="_blank" fa sì che il link si apra in una nuova scheda del browser.

📝 Esercizi Operativi

1. Modifica il titolo della pagina in “La mia prima pagina HTML”.
2. Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.
3. Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.
4. Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.
5. Inserisci una seconda intestazione <h2> e prova a scrivere un testo di sottotitolo.


⚡ Esercizi Svolti: La mia prima pagina HTML

Abbiamo gli esercizi operativi:

  1. Modifica il titolo della pagina in “La mia prima pagina HTML”.

  2. Cambia il testo del paragrafo con una breve descrizione di te stesso o del tuo progetto.

  3. Aggiungi un secondo paragrafo e inserisci un elenco numerato dei tuoi hobby utilizzando <ol>.

  4. Aggiungi un link a un sito a tua scelta, impostando il titolo con l’attributo title.

  5. Inserisci una seconda intestazione <h2> e scrivi un testo.

Soluzione completa

Apri il tuo editor di testo (ad esempio VS Code) e crea un file chiamato index.html. Inserisci il seguente contenuto:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>La mia prima pagina HTML</title>
</head>
<body>
  <!-- Intestazione principale -->
  <h1>Ciao! Benvenuto nel mio sito</h1>
  <!-- Paragrafo con descrizione personale -->
  <p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia. In questo sito condivido alcune informazioni su di me e sui miei interessi.</p>

  <!-- Secondo paragrafo con elenco numerato dei miei hobby -->
  <p>I miei hobby principali sono:</p>
  <ol>
    <li>Scrivere racconti e poesie</li>
    <li>Leggere libri di fantascienza</li>
    <li>Programmare piccole pagine web</li>
    <li>Suonare la chitarra</li>
  </ol>

  <!-- Link a un sito a scelta -->
  <p>Un sito che consiglio per aggiornamenti tecnologici è:
    <a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>
  </p>

  <!-- Seconda intestazione con testo -->
  <h2>Il mio percorso di apprendimento</h2>
  <p>Sto imparando a costruire pagine web passo dopo passo, iniziando dalle basi dell'HTML e proseguendo con CSS e JavaScript. L’obiettivo è creare siti completi e funzionali.</p>
</body>

</html>

Spiegazione dettagliata di ogni esercizio e soluzione

1. Modifica del titolo

<title>La mia prima pagina HTML</title>

  • Il titolo appare nella scheda del browser.

  • Abbiamo sostituito “Hello World” con un titolo più personale e descrittivo.

2. Paragrafo con descrizione personale

<p>Mi chiamo Alessandra Bianchi e sono appassionata di scrittura, lettura e tecnologia...</p>

  • Abbiamo inserito una breve presentazione personale.

  • <p> serve a delimitare un paragrafo di testo.

3. Secondo paragrafo con elenco numerato

<p>I miei hobby principali sono:</p>
<ol>
  <li>Scrivere racconti e poesie</li>
  <li>Leggere libri di fantascienza</li>
  <li>Programmare piccole pagine web</li>
  <li>Suonare la chitarra</li>
</ol>

  • <ol> crea un elenco numerato.

  • <li> definisce ciascun elemento della lista.

  • Abbiamo aggiunto un secondo paragrafo introduttivo prima dell’elenco per chiarezza.

4. Aggiunta di un link

<a href="https://www.techcrunch.com" title="Vai a TechCrunch" target="_blank">TechCrunch</a>

  • href indica l’URL del sito.

  • title è il testo che appare al passaggio del mouse.

  • target="_blank" apre il link in una nuova scheda.

  • L’utente può sostituire l’URL e il testo a suo piacimento.

5. Seconda intestazione con testo

<h2>Il mio percorso di apprendimento</h2>
<p>Sto imparando a costruire pagine web passo dopo passo...</p>

  • <h2> serve come sottotitolo, crea una gerarchia logica nella pagina.

  • Il testo spiega il proprio percorso di apprendimento, ma può essere personalizzato.

Risultato visivo nel browser

  1. Titolo della pagina: “La mia prima pagina HTML”.

  2. Intestazione principale <h1>: “Ciao! Benvenuto nel mio sito”.

  3. Paragrafo descrittivo con informazioni personali.

  4. Secondo paragrafo con elenco numerato dei hobby.

  5. Link a un sito esterno cliccabile che si apre in una nuova scheda.

  6. Sottotitolo <h2> con testo descrittivo del proprio percorso.

Questo esempio mostra come strutturare una prima pagina HTML completa rispettando le richieste degli esercizi. Gli studenti possono copiare il codice e vedere subito i risultati nel browser, imparando il significato di ogni tag e attributo.

✅ Risultati Attesi

Al termine di questo modulo, sarai in grado di creare pagine HTML strutturate, utilizzare correttamente titoli, paragrafi, elenchi e link, applicare gli attributi principali e comprendere come la struttura base di HTML costituisca la spina dorsale di ogni sito web. Queste competenze ti renderanno pronto a procedere con CSS e JavaScript nei moduli successivi, aggiungendo stile e interattività alle tue pagine.



alle Nessun commento:
Etichette: ,

sabato 28 febbraio 2026

Corso di HTML: 1 - Introduzione al Web

1 – Introduzione al Web

Cos’è Internet e il World Wide Web

In questo primo modulo ci addentreremo nel mondo del web partendo dalle basi. È fondamentale comprendere la differenza tra Internet e il World Wide Web. Internet è la rete globale di computer collegati tra loro, mentre il World Wide Web è l’insieme di pagine web accessibili tramite browser. Quando digitiamo l’indirizzo di un sito, ad esempio www.wikipedia.org, il nostro computer (il cosiddetto “client”) invia una richiesta al server remoto che ospita la pagina. Il server risponde inviando il codice della pagina, composto da HTML, CSS e JavaScript, e il browser lo interpreta per visualizzare la pagina sullo schermo.

Differenza tra HTML, CSS e JavaScript

Per costruire pagine web funzionali e gradevoli è indispensabile conoscere le tre tecnologie principali. HTML (HyperText Markup Language) definisce la struttura della pagina: titoli, paragrafi, link, immagini ed elenchi. CSS (Cascading Style Sheets) si occupa dello stile grafico, gestendo colori, font, spaziature e layout. JavaScript, infine, permette di aggiungere dinamismo e interattività, reagendo agli input dell’utente, modificando contenuti in tempo reale e creando animazioni. Una metafora utile è: HTML = scheletro, CSS = vestiti e design, JavaScript = impianti elettrici e automatismi.

Strumenti necessari per lavorare

Prima di scrivere codice, è fondamentale predisporre l’ambiente di lavoro. È necessario avere un computer aggiornato e un browser moderno, come Google Chrome o Firefox. Successivamente, è consigliabile installare Visual Studio Code, un editor di testo professionale che facilita la scrittura del codice grazie alle estensioni. Tra le più utili troviamo Live Server, per vedere in tempo reale le modifiche effettuate, Prettier, per mantenere il codice ordinato e leggibile, e HTML CSS Support, per suggerimenti e completamento automatico durante la scrittura.

Creare la prima pagina web

Dopo aver configurato l’ambiente, possiamo passare alla pratica. Creeremo un file chiamato index.html contenente HTML, CSS e JavaScript di base. Questo ci permetterà di comprendere come le tre tecnologie interagiscono tra loro. Ecco un esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima Pagina Web</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Hai cliccato il pulsante!')">Cliccami!</button>
</body>
</html>

Spiegazione del codice

Il tag <style> contiene regole CSS che definiscono il font, i colori e l’aspetto del pulsante. L’elemento <button> utilizza JavaScript per generare un messaggio di alert al click, aggiungendo interattività alla pagina. Ogni elemento HTML ha una funzione chiara: <h1> per il titolo principale, <p> per il paragrafo descrittivo e <button> per creare un pulsante cliccabile.

Questa esperienza permette di comprendere come HTML, CSS e JavaScript lavorino insieme per creare una pagina completa e interattiva. Inoltre, impostare correttamente l’ambiente di sviluppo consente di testare subito le modifiche, rendendo l’apprendimento più efficace e immediato.

Ecco una versione dettagliata e narrativa del mini-esercizio operativo, con spiegazioni passo passo e le motivazioni dietro le modifiche, in modo che sia immediatamente fruibile dagli studenti. Ho mantenuto il tono educativo e ho spiegato le scelte fatte nel codice:

📝 Mini-Esercizio Operativo – Personalizzare la prima pagina

In questo esercizio metteremo in pratica quanto appreso nel modulo precedente modificando alcuni elementi della nostra pagina web. L’obiettivo è comprendere come HTML, CSS e JavaScript lavorino insieme per creare contenuti interattivi e personalizzabili.

Passo 1 – Modificare il titolo della pagina

Il titolo della pagina appare nella scheda del browser e aiuta l’utente a riconoscere il sito. Per cambiarlo, individua il tag <title> all’interno della sezione <head> del file index.html e sostituisci il testo con:

<title>Benvenuto nel mio sito personale</title>

Spiegazione:

  • <title> definisce il titolo della pagina, visibile nella scheda del browser e nei risultati dei motori di ricerca.

  • Cambiare questo testo non influisce sul contenuto visibile della pagina, ma migliora l’esperienza dell’utente e l’indicizzazione SEO.

Passo 2 – Modificare il colore dello sfondo

Per rendere la pagina più accogliente, possiamo modificare lo sfondo usando CSS. Individua lo stile del body nella sezione <style> e sostituisci il colore di sfondo con lightblue:

body {
  font-family: Arial, sans-serif;
  background-color: lightblue;
  margin: 20px;
}

Spiegazione:

  • background-color imposta il colore di sfondo della pagina.

  • L’utilizzo di lightblue rende la pagina più luminosa e gradevole.

  • Modificare lo stile tramite CSS consente di separare la struttura (HTML) dall’aspetto grafico, facilitando future personalizzazioni.

Passo 3 – Cambiare il messaggio dell’alert

Il pulsante presente nella pagina attiva un messaggio tramite JavaScript. Per rendere l’interazione più significativa, modifica il testo del messaggio così:

<button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>

Spiegazione:

  • onclick è un attributo HTML che associa un’azione JavaScript al click del pulsante.

  • La funzione alert() mostra una finestra pop-up con il messaggio desiderato.

  • Cambiando il testo, rendiamo l’interazione più motivante e contestualizzata all’apprendimento.

Risultato finale del codice completo della pagina

Dopo le modifiche, il file index.html sarà così:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Benvenuto nel mio sito personale</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
      margin: 20px;
    }
    h1 {
      color: #2c3e50;
    }
    p {
      color: #34495e;
    }
    button {
      padding: 10px 15px;
      background-color: #2980b9;
      color: white;
      border: none;
      cursor: pointer;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1>Ciao, mondo!</h1>
  <p>Questa è la mia prima pagina web in HTML, CSS e JavaScript.</p>
  <button onclick="alert('Ottimo lavoro, sei pronto per il prossimo modulo!')">Cliccami!</button>
</body>
</html>

✅ Competenze acquisite

Dopo aver completato questo mini-esercizio, avrai sviluppato le seguenti competenze:

  1. Comprensione del funzionamento di Internet e del Web: sai come il browser comunica con i server e interpreta i contenuti HTML, CSS e JavaScript.

  2. Conoscenza dei ruoli di HTML, CSS e JavaScript: HTML struttura la pagina, CSS ne definisce l’aspetto e JS la rende interattiva.

  3. Installazione e configurazione degli strumenti di lavoro: sai usare Visual Studio Code, Live Server e altre estensioni utili.

  4. Creazione e modifica di una pagina web interattiva: sei in grado di personalizzare titoli, colori e 

alle Nessun commento:
Etichette: ,

venerdì 27 febbraio 2026

Corso di Programmazione Strutturata e OOP: 8 Test di un programma


🧪 8 Test di un programma

🎯 Obiettivi

  • Comprendere l’importanza dei test nel ciclo di vita del software
  • Distinguere tra test manuali e test automatici
  • Saper scrivere unit test per funzioni e classi in Python
  • Validare applicazioni con input previsti e imprevisti

📘 Contenuti del Modulo

🔹 1. Cos’è un test

  • Un test è una verifica del comportamento del programma rispetto agli output attesi.
  • Serve per garantire che funzioni, classi e moduli facciano ciò che devono.
  • I test aiutano a:
    • Scoprire bug
    • Verificare modifiche (regressioni)
    • Garantire la manutenibilità

🔹 2. Test manuale vs test automatico

Tipo di test Come si fa Quando usarlo Esempio
Test manuale Inserimento diretto di input e osservazione dell’output In fase iniziale o esplorativa Avviare una funzione e vedere se stampa ciò che ci si aspetta
Test automatico Codice che verifica altre funzioni In sviluppo e debugging professionale Uso del modulo unittest

🔹 3. Scrivere test per funzioni e classi

Esempio – Funzione da testare:

def somma(a, b):
    return a + b

✅ Test manuale:

print(somma(2, 3))  # Output atteso: 5

✅ Test automatico:

import unittest

class TestSomma(unittest.TestCase):
    def test_somma_interi(self):
        self.assertEqual(somma(2, 3), 5)

    def test_somma_zero(self):
        self.assertEqual(somma(0, 0), 0)

    def test_somma_negativi(self):
        self.assertEqual(somma(-1, -2), -3)

if __name__ == '__main__':
    unittest.main()

🔹 4. Validazione del software

Cosa succede se l’input non è previsto?

💥 Codice con errore:

print(somma("a", 2))  # Errore: TypeError

🎯 Possiamo gestire l’errore oppure testarlo:

def somma(a, b):
    if not isinstance(a, (int, float)) or not isinstance(b, (int, float)):
        raise TypeError("Devono essere numeri")
    return a + b

✅ E relativo test:

def test_tipo_errato(self):
    with self.assertRaises(TypeError):
        somma("a", 2)

🛠️ Attività Pratiche

✍️ 1. Scrivi casi di test per funzioni esistenti

Funzione di esempio:

def dividi(a, b):
    return a / b

Scrivi 3 test:

  • Divisione normale
  • Divisione con b = 1
  • Divisione per 0 (gestire con try/except o testare con assertRaises)

🧰 2. Introdurre il modulo unittest

Crea un file test_calcoli.py e importa:

import unittest
from calcoli import somma, dividi

Usa setUp() per inizializzare valori, tearDown() per pulire.

🚀 3. Progetto finale – Mini App e test

👩‍💻 App: un calcolatore che fa somma, sottrazione, moltiplicazione, divisione.

📦 Struttura:

progetto_calcolatrice/
│
├── calcolatrice.py         # Funzioni
├── app.py                  # Interfaccia utente
└── test_calcolatrice.py    # Test con unittest

👨‍🔬 Esempi di test da includere:

  • test_somma_positivi
  • test_divisione_zero
  • test_input_stringa (che solleva errore)

🧠 Test di valutazione – 6 domande

1. Perché servono i test nei programmi?
A) Per scrivere meno codice
B) Per controllare che il programma funzioni 
C) Per evitare i commenti

2. Cosa fa assertEqual() in unittest?
A) Confronta due numeri
B) Controlla che due valori siano uguali 
C) Aggiunge due numeri

3. Come si scrive un test per un errore previsto?
A) assertErrore()
B) assertRaises() 
C) tryAssert()

4. Qual è la differenza tra test manuale e test automatico?
A) Il manuale si scrive da soli, l’automatico no
B) Il manuale si osserva, l’automatico è codice 
C) Nessuna

5. Dove si scrivono i test automatici?
A) In fogli di calcolo
B) In file .txt
C) In file .py con unittest 

6. Il test self.assertEqual(somma(2, 2), 5) è…
A) Corretto
B) Fallito 
C) Sintattico

Risposte

B B B B C B


alle Nessun commento:
Etichette: ,

giovedì 26 febbraio 2026

Corso di Programmazione Strutturata e OOP: 7 Design dell’interfaccia utente


🎨 7 Design dell’Interfaccia Utente

🎯 Obiettivi Formativi

  • Comprendere i concetti fondamentali di UI (User Interface) e UX (User Experience)
  • Imparare a distinguere e progettare interfacce testuali, grafiche e web
  • Utilizzare librerie Python per la realizzazione di interfacce interattive
  • Applicare principi di semplicità, coerenza e usabilità nel design

📚 Contenuti Teorici

🔹 1. Concetti Base di UI/UX

  • Differenza tra UI (aspetto) e UX (esperienza utente)
  • Principi fondamentali: chiarezza, consistenza, feedback, tolleranza agli errori
  • Errori comuni nel design dell’interfaccia

🔹 2. Tipologie di Interfacce

  • Testuali (CLI): linee di comando, menu numerici, prompt
  • Grafiche (GUI): pulsanti, finestre, etichette, slider
  • Web-based: moduli HTML, CSS, JavaScript, responsive design

🔹 3. Librerie grafiche per Python

  • Tkinter – semplice, integrata, perfetta per GUI di base
  • PyGame – ideale per giochi e interfacce grafiche dinamiche
  • PyQt – per progetti più complessi e professionali (multifinestra)

🔹 4. Progettare un’interfaccia usabile

  • Workflow di progettazione: mockup → wireframe → codice
  • Concetti di accessibilità, gerarchia visiva, e affordance
  • Coerenza tra elementi: layout, colori, comportamento

🛠️ Attività Pratiche

🧮 1. Creare una calcolatrice GUI con Tkinter

  • Obiettivo: progettare una semplice calcolatrice (somma, sottrazione, moltiplicazione, divisione)
  • Funzioni: display numerico, bottoni numerici e operatori, gestione errori
  • Estensione facoltativa: modalità scientifica

🖥️ 2. Sviluppare un menù interattivo da console

  • Progettare un'interfaccia a scelta multipla da terminale (es. menu di un'app)
  • Navigazione tramite input numerico
  • Esempi: diario digitale, agenda, gestione liste

🔍 3. Analizzare e migliorare un’interfaccia esistente

  • Scegliere un’interfaccia reale (app mobile, software desktop, sito web)
  • Valutare in base ai principi UX/UI: intuitività, estetica, efficacia
  • Proporre modifiche migliorative tramite wireframe o descrizione tecnica

🧪 Test e Verifica

  • Quiz teorico a scelta multipla su concetti UI/UX, librerie e principi di design
  • Check-list di valutazione per analizzare una GUI esistente (rubrica)
  • Revisione peer-to-peer dei progetti degli studenti (valutazione tra pari)

🧰 Materiali Extra

  • Template GUI Tkinter di base da personalizzare
  • Strumenti online per mockup: Figma, Draw.io, Balsamiq
  • Mini-guida illustrata: “10 regole d’oro della UX”

💬 Discussione finale

“La buona interfaccia si dimentica, la cattiva si fa notare.”
Riflessione collettiva: quali sono le app o i siti con le interfacce migliori secondo te?
Qual è il confine tra funzionalità e bellezza nel design?

alle Nessun commento:
Etichette: ,

mercoledì 25 febbraio 2026

Corso di Programmazione Strutturata e OOP: 6 IDE e ambienti di sviluppo


🔧 6 IDE e Ambienti di Sviluppo

🎯 Obiettivi:

  • Comprendere cos’è un IDE e il suo ruolo nella produttività del programmatore
  • Acquisire dimestichezza con ambienti professionali e strumenti integrati
  • Configurare, esplorare e usare ambienti come Thonny, VS Code, PyCharm e Replit
  • Avviare un piccolo progetto software, con controllo versioni base

🔍 Cos’è un IDE?

Un IDE (Integrated Development Environment) è un ambiente integrato che semplifica la scrittura, l’esecuzione, il debug e la gestione del codice. Include:

  • Editor di codice (con evidenziazione della sintassi)
  • Terminale integrato
  • Strumenti di debug (punti di interruzione, variabili in tempo reale)
  • Autocompletamento e linting
  • Gestione dei file di progetto
  • Integrazione con sistemi di versionamento (Git)
⚖️ Confronto tra IDE
IDE Adatto per… Pro Contro
Thonny Principianti in Python Interfaccia semplice, installazione veloce Limitato per progetti grandi
VS Code Tutti i linguaggi Estensioni infinite, leggero, Git integrato Richiede configurazione iniziale
PyCharm Python avanzato Potente, supporto completo per Django, Flask Pesante e richiede licenza Pro per alcune funzioni
Replit Lavoro in cloud Nessuna installazione, condivisione facile Prestazioni limitate, meno controllo su ambienti
🏗️ Struttura di un progetto software (esempio base)

Un progetto professionale è composto da:

/mia-app/
├── main.py                # Codice principale
├── /modules/             # File modulari
│   └── util.py
├── requirements.txt      # Librerie da installare
├── README.md             # Documentazione del progetto
├── .gitignore            # File da escludere dal controllo di versione
└── /venv/                # Ambiente virtuale (opzionale)
🧰 Uso integrato degli strumenti
Strumento Funzione
Editor Scrittura del codice con evidenziazione e suggerimenti
Terminale Esecuzione di comandi, script, installazione pacchetti
Debugger Trovare errori tramite breakpoints e ispezione
Controllo versione (Git) Salvare versioni del progetto, collaborare in team

🧪 Attività pratiche

⚙️ 1. Configurare un ambiente di sviluppo completo

  • Installare VS Code o Thonny
  • Installare Python, Git
  • Aggiungere estensioni: Python, GitLens (su VS Code)
  • Configurare l’ambiente virtuale (python -m venv venv)

💡 2. Progetto guida: una mini-app in Python

Obiettivo: creare una calcolatrice base da terminale con struttura modulare

Passaggi:

  • Creare una cartella calcolatrice
  • Scrivere main.py e una funzione in modules/operazioni.py
  • Avviare da terminale: python main.py
  • Eseguire debug passo passo

Ecco la conclusione del modulo, con l'ultima attività completata, un test di verifica e uno spunto per il dialogo in classe o nel blog.

🌐 3. Introduzione al controllo versione con Git (concetti base)

Comando Git Cosa fa
git init Inizializza un repository
git add . Aggiunge file al tracking
git commit -m "messaggio" Salva una versione del progetto
git status Mostra lo stato attuale dei file
git log Elenco dei commit effettuati

👉 Puoi usare Git anche da VS Code, grazie al pannello "Source Control", per una gestione visiva più intuitiva.

🧪 Test di verifica (4 domande)

  1. Cos’è un IDE e quale delle seguenti NON è una sua funzione?
    A) Evidenziazione della sintassi
    B) Esecuzione del codice
    C) Installazione automatica del sistema operativo
    D) Debug interattivo

  2. Quale IDE è consigliato per principianti in Python?
    A) Visual Studio
    B) PyCharm
    C) Thonny
    D) Replit

  3. Cosa fa il comando git commit?
    A) Elimina il progetto
    B) Invia il progetto via email
    C) Crea un salvataggio dello stato attuale
    D) Installa nuove librerie

  4. Quale file contiene l’elenco delle librerie usate in un progetto Python?
    A) .gitignore
    B) README.md
    C) main.py
    D) requirements.txt

💬 Riflessione finale

💡 Domanda per la discussione:
Secondo te, è meglio iniziare con un IDE semplice e poi passare a strumenti professionali, o è utile affrontare subito ambienti più completi come VS Code o PyCharm?

📌 Conclusione

Gli IDE non sono solo "editor": sono ambienti completi di lavoro, fondamentali per scrivere codice in modo efficiente e professionale.
Imparare a usarli significa diventare sviluppatori consapevoli, capaci non solo di scrivere codice, ma di gestire, testare e documentare progetti reali.
E con Git, si inizia anche a ragionare in ottica di lavoro di squadra e versionamento, competenze chiave in ogni ambito software moderno.


alle Nessun commento:
Etichette: ,
Iscriviti a: Commenti (Atom)

Corso di HTML: 4 Introduzione al CSS

4 – Introduzione al CSS In questo modulo ci concentreremo sullo styling delle pagine web utilizzando i CSS (Cascading Style Sheets). Il CS...