Contribuisci su GitHub

Chiunque può proporre miglioramenti secondo i meccanismi standard di GitHub:

1. Apri un’Issue nel repository per segnalare bug, proporre nuove funzioni o discutere miglioramenti (ad esempio preset JSON per discipline, correzioni di accessibilità, test su Android).
2. Apri una Pull Request (PR):
   • Fork del repo → branch descrittivo (es. fix/toolbar-android o feat/export-html).
   • Modifica i file (HTML/JS/CSS o esempi JSON), aggiungi note nel README se serve.
   • Commit con messaggi chiari → Push → PR verso main.
3. Discussione e review: manteniamo il confronto pubblico nell’Issue/PR; una volta approvata, la modifica viene unita e confluisce nella live in automatico (GitHub Pages).

Repository: github.com/vitopalumbopodcast/PageLayout

Scopo

Fornire un singolo file HTML con funzioni di accessibilità e componenti didattici già integrati. I contenuti non sono codificati nel markup, ma gestiti tramite import/export JSON. Obiettivo: riuso, coerenza, tempi di setup bassi.

Flusso JSON

1. Import: carica un file JSON → il runtime mappa i campi ai segnaposto e inizializza i componenti.
2. Edit: modifica contenuti in pagina (facoltativo).
3. Export: salva un JSON coerente con lo schema attuale (versionabile).
4. (Roadmap) Export HTML: genera un file unico con contenuti incorporati e script funzionante.

Schema minimo (esempio)

{
  "titolo": "Titolo pagina",
  "descrizione": "1-2 frasi di contesto",
  "immagine": {
    "src": "https://…/cover.png",
    "alt": "descrizione accessibile",
    "didascalia": "crediti/nota"
  },
  "obiettivi": ["Item A", "Item B"],
  "prerequisiti": ["Concetto 1", "Concetto 2"],
  "sezioni": [
    {
      "titolo": "Blocco 1",
      "testo": "Paragrafo/i…",
      "semplificato": "Versione breve…",
      "approfondimento": "Dettagli opzionali…"
    }
  ],
  "mermaid": "flowchart TD; A[Stimolo]-->B[Elaborazione]; B-->C[Risposta];",
  "attivita": {
    "step": ["Osserva", "Analizza", "Nomina"],
    "aiuti": ["Indizio 1", "Indizio 2"]
  },
  "quiz": [
    {
      "q": "Domanda?",
      "choices": ["A","B","C","D"],
      "correct": 0,
      "hint": "Suggerimento breve",
      "explain": "Spiegazione sintetica"
    }
  ],
  "glossario": [
    {"termine": "Termine", "definizione": "Definizione rigorosa"}
  ]
}

Nota: campi aggiuntivi sono ammessi; lo script ignora quelli non mappati.

Roadmap (priorità tecniche)

• Export HTML completo (bundle contenuti + JS, idempotente).
• Validator JSON con schema leggero e report differenze.
• Preset di pagina (scienze/storia) come esempi minimi riusabili.
• Test touch/Android su toolbar (hitbox/feedback focus).
• Print tokens per controlli tipografici (titoli/box/figure).

Uso rapido

1. Duplica il file HTML modello.
2. Prepara un .json con i campi minimi (vedi schema).
3. In pagina: pulsante Importa JSON → mappatura automatica.
4. Verifica: popover keyword, TTS/Karaoke, toggle Semplifica, quiz.
5. Esporta: Export JSON. (HTML completo: in arrivo).