<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dove vivono i dati? - Lezione</title>
    <style>
        /* --- Stile Base --- */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        /* Contenitore Principale */
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        /* --- PULSANTE HOME (AZZURRO FORZATO) --- */
        .btn-home {
            display: inline-block;
            background-color: #1E90FF !important; /* Azzurro DodgerBlue */
            color: white !important;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
            margin-bottom: 20px;
            transition: background 0.3s;
            border: none;
        }
        .btn-home:hover {
            background-color: #007bff !important; /* Azzurro un po' più scuro al mouse */
        }

        /* --- Tipografia --- */
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        h2 {
            color: #0078d4; /* Blu didattico */
            margin-top: 30px;
        }
        h3 {
            color: #444;
            margin-top: 20px;
        }
        p {
            margin-bottom: 15px;
        }

        /* --- Box per le Metafore --- */
        .metaphor-box {
            border-left: 5px solid #ccc;
            background-color: #f9f9f9;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
        }
        .server-side {
            border-left-color: #e74c3c; /* Rosso */
            background-color: #fff5f5;
        }
        .client-side {
            border-left-color: #27ae60; /* Verde */
            background-color: #f0fff4;
        }
        .metaphor-title {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 1px;
        }

        /* --- Box Tecnico --- */
        .tech-box {
            background-color: #eef4fa;
            border: 1px solid #dce6f1;
            padding: 20px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        /* --- Codice (Sfondo Nero per leggibilità) --- */
        code {
            font-family: 'Consolas', 'Monaco', monospace;
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 2px 6px;
            border-radius: 4px;
        }

        pre {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            border-left: 5px solid #f1c40f; 
        }

        /* --- Alert Sandbox --- */
        .sandbox-alert {
            background-color: #fff3cd;
            color: #856404;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #ffeeba;
            margin: 15px 0;
        }

        /* --- Liste --- */
        .flow-list li {
            margin-bottom: 10px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
<a href="index.html" class="btn-home">← Torna alla Home</a>
    <div class="container">
        

        <h1>Dove vivono i dati?</h1>
        <p class="intro">Capire la differenza tra Server-Side e Client-Side e come funziona la nostra "App Locale".</p>

        <h2>1. Il Ristorante vs La Cucina di Casa</h2>
        
        <div class="metaphor-box server-side">
            <span class="metaphor-title" style="color:#c0392b">Il Web Classico (Server-Side) = RISTORANTE</span>
            <p><strong>Esempio:</strong> Instagram, Wikipedia.</p>
            <ul>
                <li><strong>Tu (Browser):</strong> Sei il cliente seduto al tavolo.</li>
                <li><strong>Azione:</strong> Ordini un piatto (fai un click).</li>
                <li><strong>La Cucina (Server):</strong> C'è un cuoco (Database + PHP/Python) che lavora e ti porta il piatto pronto.</li>
            </ul>
            <p><em>Tu non vedi gli ingredienti grezzi, vedi solo il risultato finale.</em></p>
        </div>

        <div class="metaphor-box client-side">
            <span class="metaphor-title" style="color:#219150">La App Locale (Client-Side) = CUCINARE A CASA</span>
            <p><strong>Esempio:</strong> Il nostro file HTML/JS.</p>
            <ul>
                <li><strong>Tu (Browser):</strong> Sei sia il cliente che il cuoco.</li>
                <li><strong>Strumenti:</strong> La pagina HTML è il ricettario.</li>
                <li><strong>Azione:</strong> Il tuo PC fa tutto il lavoro. Non c'è nessuno "dall'altra parte".</li>
            </ul>
        </div>

        <hr>

        <h2>2. Il Server Passivo (Disco H:/)</h2>
        <p>Possiamo usare un disco esterno (o una chiavetta) per rendere tutto trasportabile. A differenza di un server vero (che "pensa"), il disco è un semplice magazzino ("stupido").</p>
        
        <h3>La differenza tecnica nei protocolli:</h3>
        <ul>
            <li>Se usi <code>http://</code> parli con un Server Web.</li>
            <li>Se usi <code>file://</code> parli col tuo disco fisso.</li>
        </ul>

        <div class="sandbox-alert">
            <strong>⚠️ Sicurezza: La "Scatola di Sabbia" (Sandbox)</strong><br>
            Perché dobbiamo premere "Carica CSV" e non salva da solo?<br>
            Se un sito web potesse leggere/scrivere liberamente sul tuo disco H:, un virus potrebbe cancellare tutto in un secondo! Per questo il browser vive in una "scatola di sabbia" e non può toccare il disco senza il tuo permesso esplicito (il click).
        </div>

        <hr>

        <h2>3. Il "Cervello" del Browser (LocalStorage)</h2>
        <p>Se scriviamo un nome nella tabella e premiamo F5 (aggiorna), normalmente sparisce tutto (memoria volatile). Come risolviamo?</p>

        <p>Usiamo il <strong>LocalStorage</strong>: è come un post-it incollato dentro il vetro del monitor. Anche se spegni il PC, il post-it resta lì.</p>
        <div class="tech-box">
            <strong>Caratteristiche del LocalStorage:</strong>
            <ul>
                <li>Vive dentro il browser (Chrome, Edge, Firefox).</li>
                <li>Può contenere <strong>SOLO TESTO</strong> (Stringhe).</li>
                <li>Ha un limite di spazio (5-10 MB).</li>
            </ul>
        </div>

        <h2>4. Analisi del Codice: Liofilizzare i dati</h2>
        <p>Poiché il LocalStorage accetta solo testo, ma la nostra tabella è un oggetto complesso, dobbiamo trasformarla.</p>

        <h3>A. Il Salvataggio (Serializzazione)</h3>
        <p>Usiamo <code>JSON.stringify</code> per trasformare l'oggetto in testo ("liofilizzazione").</p>
<pre>
function saveData() {
    // Trasforma la tabella complessa in una lunga stringa di testo
    // Es: "[{'nome':'Mario'....}]"
    localStorage.setItem('adminData', JSON.stringify(tableData));
}
</pre>

        <h3>B. Il Caricamento (Parsing)</h3>
        <p>Quando riapriamo la pagina, usiamo <code>JSON.parse</code> per ricreare l'oggetto ("reidratazione").</p>
<pre>
// Leggiamo la stringa dal magazzino
let saved = localStorage.getItem('adminData');

if (saved) {
    // JSON.parse fa il contrario: prende il testo e ricrea gli oggetti vivi
    tableData = JSON.parse(saved);
}
</pre>

        <hr>

        <h2>5. Riepilogo dei flussi dati</h2>
        <ul class="flow-list">
            <li>
                <strong>Server DB (es. Facebook):</strong><br>
                Browser ↔ Internet ↔ Server (PHP) ↔ Database SQL
            </li>
            <li>
                <strong>File System (Disco H:):</strong><br>
                Browser ↔ Legge/Scrive CSV manualmente ↔ File su Disco
            </li>
            <li>
                <strong>Local Storage (Il nostro "Salva"):</strong><br>
                Browser → Scrive nel "cassetto segreto" → Memoria Interna Chrome
                <br><em>(Tutto avviene dentro il PC, zero cavi, zero internet)</em>
            </li>
        </ul>

    </div>

</body>
</html>