Context engineering

-
Immagine
  Negli ultimi mesi, chi lavora con i modelli linguistici ha iniziato a notare uno spostamento sottile ma significativo: il problema non è più cosa scrivere nel prompt , ma cosa mettere nel contesto . È la differenza tra dare un'istruzione ben formulata e costruire l'intero ambiente informativo in cui un modello deve operare — memoria, strumenti, cronologia, vincoli, stato del sistema. Si parla ormai apertamente di context engineering come disciplina distinta dal prompt engineering, e la distinzione non è solo terminologica. 🔹 1. Il prompt come istruzione, il contesto come ambiente Un prompt ben scritto ottimizza una singola interazione. Il contesto, invece, è tutto ciò che il modello "vede" prima di rispondere: documenti recuperati, risultati di strumenti, conversazioni pregresse, regole di sistema, persino la cronologia di errori già commessi in quella sessione. Con l'adozione crescente di agenti che lavorano su compiti lunghi — scrivere codice, orchestrare...
Posta un commento

Corso di CSS & Web Design: 1 – Introduzione a CSS

-

1 – Introduzione a CSS

1. Cos’è il CSS e come si collega all’HTML

CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione di una pagina web. Grazie al CSS possiamo separare contenuto (HTML) e stile (CSS), rendendo il codice più leggibile e modulare.

Funzioni principali del CSS

  • Definire colori, font, dimensioni, margini, padding e layout.

  • Gestire il posizionamento degli elementi sulla pagina.

  • Creare effetti visivi e interattivi (hover, animazioni, transizioni).

Collegamento tra CSS e HTML

Il CSS può essere applicato in tre modi:

  1. Inline CSS – direttamente nell’elemento HTML:

<p style="color: blue; font-size: 16px;">Testo blu</p>

  • Pro: semplice e veloce.

  • Contro: difficile da mantenere su siti complessi.

  1. Internal CSS – all’interno della pagina HTML, nel tag <style>:

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Testo verde</p>
</body>

  • Buono per pagine singole o esperimenti.

  1. External CSS – file separato .css collegato tramite <link>:

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

/* stile.css */
p {
  color: red;
  font-size: 20px;
}

  • Pro: stile centralizzato per più pagine.

  • Consigliato in produzione.

2. Sintassi di base: selettori, proprietà, valori

Il CSS ha una sintassi molto semplice:

Selettore{proprietaˋ:valore;}\text{Selettore} \{ \text{proprietà}: \text{valore}; \}

Componenti principali

  1. Selettore – indica l’elemento HTML da stilizzare:

    • Elemento: p { } → tutti i paragrafi.

    • Classe: .classe { } → tutti gli elementi con class="classe".

    • ID: #id { } → elemento con id="id".

    • Universale: * { } → tutti gli elementi.

  2. Proprietà – ciò che vogliamo modificare:

    • color → colore del testo

    • background-color → colore di sfondo

    • font-size → dimensione del testo

    • margin → margini esterni

    • padding → spaziatura interna

  3. Valore – specifica della proprietà:

    • Colori: red, #ff0000, rgb(255,0,0)

    • Dimensioni: 16px, 1.2em, 100%

    • Allineamento: center, left, right

Esempio di blocco CSS

h1 {
  color: darkblue;
  font-size: 32px;
  text-align: center;
}

3. Esempi pratici di selettori

Selettore di elemento

p {
  color: green;
  font-family: Arial, sans-serif;
}

Selettore di classe

.highlight {
  background-color: yellow;
  font-weight: bold;
}

HTML:

<p class="highlight">Questo testo è evidenziato</p>

Selettore ID

#titolo-principale {
  font-size: 40px;
  color: darkred;
}

HTML:

<h1 id="titolo-principale">Benvenuti!</h1>

4. Esercizio svolto: applicare i primi stili a una pagina

Obiettivo

Creare una pagina HTML semplice con paragrafi e un titolo, applicando colori, font e allineamento.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Prima pagina CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1 id="titolo-principale">Benvenuti nella mia pagina!</h1>
  <p class="intro">Questo è il primo paragrafo con stile CSS.</p>
  <p class="intro">E questo è il secondo paragrafo, colorato e centrato.</p>
</body>
</html>

CSS (stile.css)

/* Stile per il titolo */
#titolo-principale {
  color: darkblue;
  text-align: center;
  font-family: 'Verdana', sans-serif;
}

/* Stile per i paragrafi introduttivi */
.intro {
  color: darkgreen;
  font-size: 18px;
  text-align: center;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}

Risultato

  • Titolo centrato e blu.

  • Paragrafi centrati, verdi su sfondo grigio chiaro con padding.

  • Stile applicato tramite CSS esterno.

5. Suggerimenti pratici

  • Usare external CSS per progetti più grandi.

  • Dare nomi chiari a classi e ID (.menu, #footer).

  • Ricordare la cascata: se un elemento ha più regole, prevale quella più specifica.


Commenti

Posta un commento

Post popolari in questo blog

Corso di Programmazione Strutturata e OOP: 3 Ereditarietà incapsulamento polimorfismo

-
Immagine
3 Ereditarietà, Incapsulamento, Polimorfismo 📚 Contenuti teorici 🔹 1. Ereditarietà È il meccanismo per cui una classe figlia (o derivata) può ereditare attributi e metodi da una classe madre (o base) . Esempio semplice in Python: class Veicolo: def __init__(self, marca): self.marca = marca def accendi_motore(self): print("Motore acceso") class Auto(Veicolo): # Auto eredita da Veicolo def apri_portiere(self): print("Portiere aperte") mia_auto = Auto("Fiat") mia_auto.accendi_motore() # Metodo ereditato mia_auto.apri_portiere() # Metodo della classe Auto 🧩 Osservazione: Auto eredita tutto da Veicolo ma può aggiungere comportamenti nuovi o sovrascrivere quelli esistenti. 🔹 2. Incapsulamento Significa nascondere i dettagli interni e proteggere i dati usando modificatori di accesso e metodi per leggere/scrivere valori. Esempio in Python con getter e setter : class ContoBancario: def __ini...
Continua a leggere

Corso di CSS & Web Design: 3 – Box Model e spaziature

-
Immagine
3 – Box Model e spaziature 1. Concetto di Box Model In CSS ogni elemento HTML viene rappresentato come un rettangolo chiamato “box” , costituito da 4 aree principali : Content (contenuto) – dove si trova testo, immagine o contenuto dell’elemento. Padding (riempimento interno) – spazio tra contenuto e bordo. Border (bordo) – contorno dell’elemento. Margin (margine esterno) – spazio tra l’elemento e gli altri elementi. Schema Box Model +-------------------------+ | Margin | | +-------------------+ | | | Border | | | | +-------------+ | | | | | Padding | | | | | | +---------+ | | | | | | | Content | | | | | | | +---------+ | | | | | +-------------+ | | | +-------------------+ | +-------------------------+ Proprietà principali margin : distanza dall’esterno del box margin: 20px; /* tutte le direzioni */ margin-top: 10px; margin-left: auto; margin-right: auto; /* centratura orizzontale */ padding : ...
Continua a leggere

Corso di CSS & Web Design: 7 – Responsive Design

-
Immagine
7 – Responsive Design 1. Concetto di mobile-first Responsive Design significa che il layout e i contenuti di una pagina web si adattano automaticamente alle dimensioni dello schermo del dispositivo (desktop, tablet, smartphone). Principio mobile-first Si sviluppa il layout base per dispositivi mobili . Successivamente si aggiungono regole CSS per schermi più grandi tramite media queries. Vantaggi: Migliore performance su mobile. Approccio progressivo e modulare. /* Stile base (mobile) */ body { font-size: 16px; padding: 10px; } 2. Media Queries e breakpoints 2.1 Sintassi di base @media (min-width: 768px) { /* regole per tablet e superiori */ } @media (min-width: 1024px) { /* regole per desktop */ } min-width → mobile-first max-width → desktop-first È possibile combinare condizioni multiple: @media (min-width: 768px) and (max-width: 1023px) { /* tablet */ } 2.2 Breakpoints comuni Dispositivo Breakpoint suggerito Mobile 0...
Continua a leggere