Larte de Labbacho: Analisi Multidisciplinare<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&family=Lato:wght@300;400;700&display=swap');\n\n body {\n font-family: 'Lato', sans-serif;\n background-color: #fdfbf7; \/* Parchment-like background *\/\n color: #2c241b; \/* Ink dark brown *\/\n }\n\n h1, h2, h3, .serif-font {\n font-family: 'Cinzel', serif;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1eadd;\n }\n ::-webkit-scrollbar-thumb {\n background: #8a3324;\n border-radius: 4px;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 350px;\n max-height: 400px;\n }\n\n .tab-btn.active {\n background-color: #8a3324;\n color: white;\n border-color: #8a3324;\n }\n\n .card {\n background-color: #ffffff;\n border: 1px solid #e5e0d0;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n\n \/* Interactive Element Styling *\/\n input[type=\"number\"] {\n border: 1px solid #d1c4b0;\n padding: 0.5rem;\n border-radius: 0.25rem;\n width: 100%;\n }\n button.action-btn {\n background-color: #2c241b;\n color: #fdfbf7;\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n transition: background-color 0.2s;\n }\n button.action-btn:hover {\n background-color: #4a3c2f;\n }\n <\/style>\n \n \n \n \n<\/head>\n<body class=\"flex flex-col min-h-screen\">\n\n \n <header class=\"bg-[#e6dfcf] border-b border-[#d1c4b0] p-6 text-center\">\n <h1 class=\"text-4xl font-bold text-[#8a3324] mb-2\">Larte de Labbacho (1478)<\/h1>\n <p class=\"text-xl italic text-[#5c4d3c]\">L’Aritmetica di Treviso: Un’Analisi Multidisciplinare<\/p>\n <p class=\"mt-4 max-w-3xl mx-auto text-sm\">\n Esplora il primo manuale di aritmetica a stampa del mondo attraverso gli occhi di 11 esperti. \n Seleziona una prospettiva per rivelare le connessioni tra matematica, commercio, storia e cultura.\n <\/p>\n <\/header>\n\n \n <main class=\"flex-grow flex flex-col md:flex-row max-w-7xl mx-auto w-full p-4 gap-6\">\n\n \n <aside class=\"w-full md:w-1\/4 flex flex-col gap-2\">\n <h2 class=\"serif-font text-xl mb-4 border-b-2 border-[#8a3324] pb-2\">Prospettive<\/h2>\n <div id=\"nav-container\" class=\"flex flex-col gap-2\">\n \n <\/div>\n \n <div class=\"mt-8 p-4 bg-[#f4e4bc] rounded-lg border border-[#d1c4b0]\">\n <h3 class=\"serif-font font-bold mb-2 text-[#8a3324]\">Stato dell’Analisi<\/h3>\n <div class=\"w-full bg-white rounded-full h-2.5 mb-2\">\n <div id=\"progress-bar\" class=\"bg-[#8a3324] h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <p id=\"progress-text\" class=\"text-xs text-right\">0\/12 Sezioni Esplorate<\/p>\n <\/div>\n <\/aside>\n\n \n <section class=\"w-full md:w-3\/4 flex flex-col gap-6\">\n \n \n <div id=\"content-header\" class=\"card p-6 rounded-lg\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 id=\"section-title\" class=\"text-3xl font-bold text-[#2c241b] serif-font\">Benvenuti<\/h2>\n <span id=\"expert-badge\" class=\"px-3 py-1 bg-[#e6dfcf] text-xs font-bold uppercase tracking-wider rounded text-[#5c4d3c]\">Introduzione Generale<\/span>\n <\/div>\n <p id=\"section-intro\" class=\"text-lg leading-relaxed mb-4\">\n Benvenuti nell’ambiente di studio interattivo dedicato all'”Arte dell’Abbaco”. \n Questo prezioso incunabolo, stampato a Treviso nel 1478, non \u00e8 solo un manuale di calcolo, \n ma una finestra sul Rinascimento commerciale, culturale e sociale. Usa il menu a sinistra per interrogare il testo.\n <\/p>\n <\/div>\n\n \n <div id=\"viz-panel\" class=\"card p-6 rounded-lg bg-white\">\n <h3 class=\"serif-font text-xl mb-4 text-[#8a3324]\">Visualizzazione Dati & Interazione<\/h3>\n \n \n <div id=\"chart-wrapper\" class=\"chart-container hidden\">\n <canvas id=\"mainChart\"><\/canvas>\n <\/div>\n\n \n <div id=\"interactive-tool\" class=\"w-full\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"bg-[#f9f7f1] p-4 rounded border border-[#e5e0d0]\">\n <h4 class=\"font-bold mb-2\">Contesto Storico<\/h4>\n <ul class=\"list-disc list-inside text-sm space-y-2\">\n <li>Data: 10 Dicembre 1478<\/li>\n <li>Luogo: Treviso<\/li>\n <li>Stampatore: Michele Manzolo (o Gherardo da Lisa)<\/li>\n <li>Lingua: Volgare Veneto<\/li>\n <\/ul>\n <\/div>\n <div class=\"bg-[#f9f7f1] p-4 rounded border border-[#e5e0d0]\">\n <h4 class=\"font-bold mb-2\">Importanza Globale<\/h4>\n <p class=\"text-sm\">\u00c8 il primo libro di matematica stampato in Occidente, precedendo l’opera di Piero della Francesca e Luca Pacioli. Segna il passaggio dalla scienza manoscritta a quella diffusa.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"analysis-content\" class=\"card p-6 rounded-lg bg-[#faf8f4]\">\n <h3 class=\"serif-font text-xl mb-2\">Analisi dell’Esperto<\/h3>\n <div id=\"expert-text\" class=\"prose max-w-none text-[#2c241b]\">\n \n <\/div>\n <\/div>\n\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-[#2c241b] text-[#fdfbf7] p-6 text-center mt-8\">\n <p class=\"text-sm opacity-80\">© 2023 Progetto di Valorizzazione Digitale – Treviso Arithmetic (1478)<\/p>\n <\/footer>\n\n <script>\n \/\/ --- DATA STORE ---\n \/\/ Contains the content for all 11 perspectives + Intro + Valorization\n const appData = {\n \"intro\": {\n title: \"Introduzione\",\n expert: \"Gestore della Conoscenza\",\n intro: \"L'Arte dell'Abbaco (o Aritmetica di Treviso) \u00e8 un'opera anonima stampata nel 1478. Rappresenta la nascita della divulgazione scientifica pratica.\",\n text: \"<p>Questo testo \u00e8 un <em>incunabolo<\/em> (libro stampato prima del 1500) di inestimabile valore. \u00c8 scritto in volgare veneto per essere accessibile non ai dotti accademici che scrivevano in latino, ma ai mercanti e agli apprendisti. La sua struttura \u00e8 puramente pratica, mirata a risolvere problemi reali di commercio.<\/p><p>In questa applicazione, attiveremo 11 esperti virtuali per dissezionare il testo. Clicca sulle voci del menu per iniziare l'analisi.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-center\">\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">1478<\/div>\n <div class=\"text-sm\">Anno di Pubblicazione<\/div>\n <\/div>\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">62<\/div>\n <div class=\"text-sm\">Carte (Pagine)<\/div>\n <\/div>\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">300+<\/div>\n <div class=\"text-sm\">Problemi Pratici<\/div>\n <\/div>\n <\/div>\n `\n },\n \"computisteria\": {\n title: \"Computisteria\",\n expert: \"Esperto Contabile\",\n intro: \"L'opera \u00e8 un manuale tecnico per la gestione dei conti. Insegna a calcolare tare, profitti e cambi valuta.\",\n text: \"<p>Dal punto di vista della computisteria, il testo \u00e8 un manuale operativo. Non si perde in teoremi, ma va dritto alla pratica contabile necessaria per la 'Partita Doppia' (anche se questa verr\u00e0 formalizzata meglio da Pacioli poco dopo).<\/p><p>I problemi tipici includono:<\/p><ul class='list-disc pl-5'><li><strong>Calcolo della Tara:<\/strong> Dedurre il peso dei sacchi o contenitori dalle merci.<\/li><li><strong>Baratto:<\/strong> Scambio di merci con valori diversi.<\/li><li><strong>Societ\u00e0:<\/strong> Divisione degli utili tra soci in base al capitale investito.<\/li><\/ul>\",\n vizType: \"chart\",\n chartType: \"doughnut\",\n chartData: {\n labels: ['Compravendita', 'Baratto', 'Societ\u00e0 (Compagnie)', 'Cambi Valuta', 'Pesi e Misure'],\n datasets: [{\n label: 'Tipologia Problemi Commerciali',\n data: [40, 25, 15, 10, 10],\n backgroundColor: ['#8a3324', '#c78d4d', '#e0c097', '#5c4d3c', '#2c241b']\n }]\n }\n },\n \"economia\": {\n title: \"Economia Aziendale\",\n expert: \"Analista di Business\",\n intro: \"Il testo riflette la struttura economica del capitalismo mercantile nascente. Treviso era un hub vitale.\",\n text: \"<p>Il testo dimostra una sofisticata comprensione del <strong>valore del tempo<\/strong> nel denaro (interessi) e della gestione del rischio nelle partnership. I problemi di 'Compagnia' insegnano come allocare le risorse e dividere i profitti in modo equo, fondamentale per le spedizioni commerciali veneziane.<\/p><p>Si nota l'importanza delle filiere produttive locali (tessuti, spezie) e la necessit\u00e0 di standardizzare i calcoli per ridurre i costi di transazione.<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Capitale Fisso', 'Capitale Circolante', 'Risorse Umane', 'Logistica'],\n datasets: [{\n label: 'Focus del Testo (Stima)',\n data: [10, 80, 50, 60],\n backgroundColor: '#8a3324'\n }]\n }\n },\n \"matematica\": {\n title: \"Matematica\",\n expert: \"Matematico\",\n intro: \"L'uso dell'algoritmo indo-arabo sostituisce l'abaco romano. Il cuore \u00e8 la 'Regola del Tre'.\",\n text: \"<p>Il libro diffonde i numeri arabi (0-9) e gli algoritmi di calcolo in colonna (somma, sottrazione, moltiplicazione, divisione 'a galera'). Ma la regina indiscussa \u00e8 la <strong>Regola del Tre<\/strong> (o Regola Aurea), che permette di risolvere proporzioni.<\/p><p><em>Esempio:<\/em> Se 7 braccia di stoffa costano 9 ducati, quanto costano 5 braccia?<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-[#f4e4bc] p-6 rounded-lg border border-[#8a3324]\">\n <h4 class=\"font-bold text-lg mb-4 text-[#8a3324] text-center serif-font\">Simulatore: La Regola del Tre<\/h4>\n <div class=\"flex flex-col gap-4 items-center\">\n <div class=\"flex items-center gap-2\">\n <span>Se<\/span>\n <input type=\"number\" id=\"math-a\" placeholder=\"Quantit\u00e0 A (es. 7)\" class=\"w-24 text-center\">\n <span>unit\u00e0 costano<\/span>\n <input type=\"number\" id=\"math-b\" placeholder=\"Prezzo B (es. 9)\" class=\"w-24 text-center\">\n <span>ducati...<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span>...quanto costano<\/span>\n <input type=\"number\" id=\"math-c\" placeholder=\"Quantit\u00e0 C (es. 5)\" class=\"w-24 text-center\">\n <span>unit\u00e0?<\/span>\n <\/div>\n <button onclick=\"calculateRuleOfThree()\" class=\"action-btn w-full md:w-auto mt-2\">Calcola con l'Algoritmo Antico<\/button>\n <div id=\"math-result\" class=\"mt-4 font-bold text-xl h-8 text-[#8a3324]\"><\/div>\n <\/div>\n <\/div>\n `\n },\n \"didattica\": {\n title: \"Didattica\",\n expert: \"Pedagogista\",\n intro: \"Un metodo 'Learning by Doing'. Problemi concreti invece di astrazioni teoriche.\",\n text: \"<p>L'approccio didattico \u00e8 rivoluzionario. Non ci sono definizioni assiomatiche. Si parte dal concreto: 'Se vuoi comprare zafferano...'. Questo metodo serviva a formare rapidamente i figli dei mercanti nelle 'Botteghe d'Abbaco'.<\/p><p>Caratteristiche chiave:<\/p><ul class='list-disc pl-5'><li>Uso della lingua volgare (accessibilit\u00e0).<\/li><li>Ripetizione di esercizi simili (rinforzo).<\/li><li>Scaffold progressivo (dalle operazioni base ai problemi complessi).<\/li><\/ul>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-white p-4 rounded shadow text-center\">\n <h5 class=\"font-bold text-[#2c241b]\">Metodo Scolastico (Latino)<\/h5>\n <p class=\"text-sm text-gray-600\">Teorico, basato su Boezio, astratto, per il clero.<\/p>\n <div class=\"mt-2 text-xs bg-red-100 p-1 text-red-800 rounded\">Accessibilit\u00e0 Bassa<\/div>\n <\/div>\n <div class=\"bg-[#f4e4bc] p-4 rounded shadow text-center border-2 border-[#8a3324]\">\n <h5 class=\"font-bold text-[#8a3324]\">Metodo d'Abbaco (Volgare)<\/h5>\n <p class=\"text-sm text-gray-600\">Pratico, basato su Fibonacci, esempi reali, per i mercanti.<\/p>\n <div class=\"mt-2 text-xs bg-green-100 p-1 text-green-800 rounded\">Accessibilit\u00e0 Alta<\/div>\n <\/div>\n <\/div>\n `\n },\n \"storia_matematica\": {\n title: \"Storia della Matematica\",\n expert: \"Storico della Scienza\",\n intro: \"Il ponte tra Fibonacci e Pacioli. La democratizzazione del numero.\",\n text: \"<p>Questo testo si colloca sulla scia del <em>Liber Abaci<\/em> di Fibonacci (1202), ma ha il merito storico di aver sfruttato la <strong>stampa<\/strong>. Ha fissato la terminologia matematica italiana e standardizzato i simboli.<\/p><p>\u00c8 fondamentale per capire come la matematica araba sia stata assorbita e adattata alle esigenze dell'Europa pre-rinascimentale.<\/p>\",\n vizType: \"chart\",\n chartType: \"line\",\n chartData: {\n labels: ['1202 (Fibonacci)', '1478 (Treviso)', '1494 (Pacioli)', '1537 (Tartaglia)'],\n datasets: [{\n label: 'Diffusione della Matematica Pratica (Indice ipotetico)',\n data: [10, 40, 85, 100],\n borderColor: '#8a3324',\n tension: 0.3,\n fill: true,\n backgroundColor: 'rgba(138, 51, 36, 0.1)'\n }]\n }\n },\n \"storia_treviso\": {\n title: \"Storia di Treviso\",\n expert: \"Storico Locale\",\n intro: \"Treviso nel 1478 era una ricca citt\u00e0 della Terraferma veneziana, nodo di scambio.\",\n text: \"<p>La pubblicazione a Treviso non \u00e8 casuale. La citt\u00e0 godeva di stabilit\u00e0 sotto la Serenissima e aveva una classe mercantile fiorente che richiedeva istruzione. Treviso era un crocevia per le merci che scendevano dal nord (Germania) verso Venezia.<\/p><p>Il libro riflette la vita quotidiana: si parla di tessuti, spezie, metalli, valute locali (ducati, grossi, piccioli).<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Venezia', 'Treviso', 'Firenze', 'Milano', 'Genova'],\n datasets: [{\n label: 'Produzione Libri Aritmetica (XV sec. - Stima)',\n data: [50, 20, 35, 15, 10],\n backgroundColor: ['#5c4d3c', '#8a3324', '#c78d4d', '#e0c097', '#d1c4b0']\n }]\n }\n },\n \"religione\": {\n title: \"Religione\",\n expert: \"Teologo\/Storico Religioso\",\n intro: \"La matematica come ordine divino. L'invocazione a Dio nel commercio.\",\n text: \"<p>Nonostante sia un testo tecnico, l'opera inizia e finisce con invocazioni a Dio. Nel 1400, il giusto profitto era dibattuto, ma la precisione matematica era vista come riflesso dell'ordine divino.<\/p><p>L'onest\u00e0 nel calcolo (evitare frodi su pesi e misure) ha una valenza morale. Il 'quaderno' del mercante iniziava spesso con 'Nel nome di Dio e del guadagno'.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"p-6 bg-[#fffaf0] italic border-l-4 border-[#8a3324]\">\n \"Incomincia una pratica molto bona et utile a ciaschaduno chi vuole usare larte de labbacho... chiamata in vulgaro larte de labbacho.\"\n <br><br>\n <span class=\"text-sm not-italic text-gray-600\">\n Anche la laicit\u00e0 del commercio nel 1478 \u00e8 permeata di ritualit\u00e0 religiosa. La precisione non \u00e8 solo economica, \u00e8 etica.\n <\/span>\n <\/div>\n `\n },\n \"geografia\": {\n title: \"Geografia di Treviso\",\n expert: \"Geografo Storico\",\n intro: \"La geografia economica disegnata dai problemi del libro.\",\n text: \"<p>Attraverso i problemi di cambio valuta e trasporto, il libro disegna una mappa mentale del mondo conosciuto dal mercante trevigiano: Venezia \u00e8 il centro, ma si citano Londra, Bruges, la Fiera di Lione.<\/p><p>Si menzionano fiumi (Sile, Piave) implicitamente come vie di trasporto per le merci pesanti citate nei problemi (legname, pietre).<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Venezia', 'Norimberga', 'Londra', 'Bruges', 'Lione'],\n datasets: [{\n label: 'Frequenza citazioni\/relazioni commerciali',\n data: [100, 45, 30, 25, 20],\n backgroundColor: '#2c241b'\n }]\n }\n },\n \"testi_antichi\": {\n title: \"Testi Antichi\",\n expert: \"Filologo\",\n intro: \"Analisi linguistica: il Volgare Veneto come lingua tecnica.\",\n text: \"<p>Il testo \u00e8 una miniera per i linguisti. Mostra il passaggio dal latino al volgare per usi tecnici. Termini come 'mozzar' (moltiplicare), 'partir' (dividere) mostrano l'evoluzione del lessico.<\/p><p>La struttura delle frasi \u00e8 paratattica, semplice, adatta alla memorizzazione orale e alla lettura veloce.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full text-sm text-left\">\n <thead class=\"bg-[#e6dfcf] font-bold\">\n <tr><th class=\"p-2\">Termine 1478<\/th><th class=\"p-2\">Italiano Moderno<\/th><th class=\"p-2\">Nota<\/th><\/tr>\n <\/thead>\n <tbody class=\"divide-y divide-[#d1c4b0]\">\n <tr><td class=\"p-2 font-mono\">Multiplicar<\/td><td class=\"p-2\">Moltiplicare<\/td><td class=\"p-2\">Radice latina<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Partir<\/td><td class=\"p-2\">Dividere<\/td><td class=\"p-2\">Concetto di 'spartire'<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Pizoli<\/td><td class=\"p-2\">Spiccioli<\/td><td class=\"p-2\">Valuta minore<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Cavedal<\/td><td class=\"p-2\">Capitale<\/td><td class=\"p-2\">Fondo monetario<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n `\n },\n \"tipografia\": {\n title: \"Tecniche Tipografiche\",\n expert: \"Storico della Stampa\",\n intro: \"L'impaginazione della matematica: una sfida tecnica.\",\n text: \"<p>Stampare matematica nel 1478 era difficilissimo. Non esistevano caratteri mobili per le frazioni o le linee di divisione. Manzolo dovette ingegnarsi.<\/p><p>Il layout lascia ampi margini (chiamati 'marginalia') per i calcoli del lettore. \u00c8 uno dei primi esempi di <em>User Experience Design<\/em> applicato al libro: uno strumento di lavoro, non solo di lettura.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"border-2 border-dashed border-gray-400 p-4 h-48 flex items-center justify-center relative bg-[#fdfbf7]\">\n <div class=\"absolute top-2 left-2 text-xs text-gray-500\">Pagina Tipo<\/div>\n <div class=\"text-center\">\n <p class=\"font-serif text-lg mb-2\">Testo del problema...<\/p>\n <div class=\"inline-block border-b border-black px-2 mx-2\">Numeratore<\/div>\n <br>\n <div class=\"inline-block px-2 mx-2\">Denominatore<\/div>\n <\/div>\n <div class=\"absolute right-4 top-10 w-16 h-24 border border-gray-300 flex items-center justify-center text-xs text-center text-gray-400\">\n Spazio Marginale per Calcoli\n <\/div>\n <\/div>\n `\n },\n \"museali\": {\n title: \"Tecniche Museali\",\n expert: \"Curatore Museale\",\n intro: \"Come esporre un libro di calcoli? Strategie espositive.\",\n text: \"<p>Il libro non va solo mostrato chiuso in una teca. Deve 'parlare'.<\/p><p><strong>Proposta espositiva:<\/strong><\/p><ul class='list-disc pl-5'><li><strong>Tavolo interattivo:<\/strong> Proiezione delle pagine dove i visitatori possono provare a risolvere i problemi toccando i numeri.<\/li><li><strong>Contestualizzazione:<\/strong> Affiancare monete dell'epoca (ducati) e strumenti di misura.<\/li><li><strong>Facsimile sfogliabile:<\/strong> Per recuperare la tattilit\u00e0 della carta antica.<\/li><\/ul>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-[#2c241b] text-[#fdfbf7] p-4 rounded shadow-lg text-center\">\n <h4 class=\"font-bold mb-2\">Concept Museale<\/h4>\n <div class=\"flex justify-around items-center mt-4\">\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udcd6<\/span>\n <span class=\"text-xs mt-1\">Oggetto Originale<\/span>\n <\/div>\n <div class=\"text-2xl\">\u27a1\ufe0f<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udd90\ufe0f<\/span>\n <span class=\"text-xs mt-1\">Replica Tattile<\/span>\n <\/div>\n <div class=\"text-2xl\">\u27a1\ufe0f<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udcbb<\/span>\n <span class=\"text-xs mt-1\">App Interattiva<\/span>\n <\/div>\n <\/div>\n <\/div>\n `\n },\n \"conclusioni\": {\n title: \"Conclusioni & Valorizzazione\",\n expert: \"Responsabile Strategico\",\n intro: \"Un patrimonio da attivare per il futuro di Treviso.\",\n text: \"<p>L'Arte dell'Abbaco \u00e8 un brand culturale potente per Treviso. Unisce la radice storica (Citt\u00e0 d'arte) con la vocazione economica (Nord-Est produttivo).<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-white p-6 rounded-lg shadow border-t-4 border-[#8a3324]\">\n <h3 class=\"font-bold text-lg mb-4 text-[#8a3324]\">Piano di Valorizzazione<\/h3>\n \n <div class=\"mb-4\">\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per le Scuole (Didattica)<\/h4>\n <p class=\"text-sm mt-1\">Laboratori \"Mercanti per un giorno\": matematica applicata usando le monete e le merci del 1478. Gara di calcolo con metodi antichi.<\/p>\n <\/div>\n\n <div class=\"mb-4\">\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per i Turisti (Geografia\/Storia)<\/h4>\n <p class=\"text-sm mt-1\">Itinerario \"Treviso Mercantile\": QR code nei luoghi del commercio storico collegati a problemi del libro.<\/p>\n <\/div>\n\n <div>\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per Aziende (Economia)<\/h4>\n <p class=\"text-sm mt-1\">Gadget aziendali di alto profilo (ristampe anastatiche) come simbolo di etica e precisione imprenditoriale.<\/p>\n <\/div>\n <\/div>\n `\n }\n };\n\n \/\/ --- STATE MANAGEMENT ---\n let currentPerspective = 'intro';\n let chartInstance = null;\n const visitedSections = new Set(['intro']);\n\n \/\/ --- DOM ELEMENTS ---\n const navContainer = document.getElementById('nav-container');\n const sectionTitle = document.getElementById('section-title');\n const expertBadge = document.getElementById('expert-badge');\n const sectionIntro = document.getElementById('section-intro');\n const expertText = document.getElementById('expert-text');\n const interactiveTool = document.getElementById('interactive-tool');\n const chartWrapper = document.getElementById('chart-wrapper');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n\n \/\/ --- FUNCTIONS ---\n\n function init() {\n renderNavigation();\n loadContent('intro');\n }\n\n function renderNavigation() {\n navContainer.innerHTML = '';\n const keys = Object.keys(appData);\n \n keys.forEach(key => {\n const item = appData[key];\n const btn = document.createElement('button');\n btn.className = `tab-btn w-full text-left px-4 py-3 rounded text-sm font-medium transition-colors duration-200 flex items-center justify-between group ${key === currentPerspective ? 'active' : 'bg-white text-[#5c4d3c] hover:bg-[#f1eadd]'}`;\n btn.innerHTML = `\n <span>${item.title}<\/span>\n <span class=\"opacity-0 group-hover:opacity-100 transition-opacity text-xs\">\u2192<\/span>\n `;\n btn.onclick = () => loadContent(key);\n navContainer.appendChild(btn);\n });\n }\n\n function updateProgress() {\n const total = Object.keys(appData).length;\n const visited = visitedSections.size;\n const percentage = (visited \/ total) * 100;\n progressBar.style.width = `${percentage}%`;\n progressText.innerText = `${visited}\/${total} Sezioni Esplorate`;\n }\n\n function loadContent(key) {\n currentPerspective = key;\n visitedSections.add(key);\n const data = appData[key];\n\n \/\/ Update Text Content\n sectionTitle.innerText = data.title;\n expertBadge.innerText = data.expert;\n sectionIntro.innerText = data.intro;\n expertText.innerHTML = data.text;\n\n \/\/ Handle Visualization\n handleVisualization(data);\n\n \/\/ Update UI State\n renderNavigation(); \/\/ Re-render to highlight active\n updateProgress();\n }\n\n function handleVisualization(data) {\n \/\/ Reset Areas\n interactiveTool.innerHTML = '';\n chartWrapper.classList.add('hidden');\n if (chartInstance) {\n chartInstance.destroy();\n chartInstance = null;\n }\n\n if (data.vizType === 'html') {\n interactiveTool.innerHTML = data.vizContent;\n interactiveTool.classList.remove('hidden');\n } else if (data.vizType === 'chart') {\n chartWrapper.classList.remove('hidden');\n const ctx = document.getElementById('mainChart').getContext('2d');\n \n chartInstance = new Chart(ctx, {\n type: data.chartType,\n data: data.chartData,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: { family: \"'Lato', sans-serif\" }\n }\n },\n tooltip: {\n backgroundColor: '#2c241b',\n titleFont: { family: \"'Cinzel', serif\" },\n bodyFont: { family: \"'Lato', sans-serif\" }\n }\n }\n }\n });\n }\n }\n\n \/\/ --- INTERACTIVE CALCULATOR FUNCTION ---\n window.calculateRuleOfThree = function() {\n const a = parseFloat(document.getElementById('math-a').value);\n const b = parseFloat(document.getElementById('math-b').value);\n const c = parseFloat(document.getElementById('math-c').value);\n const resDiv = document.getElementById('math-result');\n\n if (isNaN(a) || isNaN(b) || isNaN(c) || a === 0) {\n resDiv.innerText = \"Inserisci valori validi (A non pu\u00f2 essere 0).\";\n return;\n }\n\n \/\/ The algorithm: (B * C) \/ A\n const result = (b * c) \/ a;\n \n resDiv.innerHTML = `\n <span class=\"text-sm text-gray-500\">Operazione: (${b} \u00d7 ${c}) \u00f7 ${a} = <\/span>\n ${result.toFixed(2)} ducati\n `;\n }\n\n \/\/ Initialize App\n init();\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Larte de Labbacho: Analisi Multidisciplinare Larte de Labbacho (1478) L’Aritmetica di Treviso: Un’Analisi Multidisciplinare Esplora il primo manuale di aritmetica a stampa del mondo attraverso gli occhi di 11 esperti. Seleziona una prospettiva per rivelare le connessioni tra matematica, commercio, storia e cultura. Prospettive Stato dell’Analisi 0\/12 Sezioni Esplorate Benvenuti Introduzione Generale Benvenuti nell’ambiente di […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":3,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":61,"date":"2026-02-17T18:28:06","date_gmt":"2026-02-17T17:28:06","guid":{"rendered":"https:\/\/www.lartedelabbacho.it\/?page_id=61"},"modified":"2026-02-17T18:28:54","modified_gmt":"2026-02-17T17:28:54","slug":"analisi-multidimensionale-dellarte-dellabbaco","status":"publish","type":"page","link":"https:\/\/www.lartedelabbacho.it\/index.php\/analisi-multidimensionale-dellarte-dellabbaco\/","title":{"rendered":"Analisi Multidimensionale dell’Arte dell’Abbaco"},"content":{"rendered":"\n\n\n\n \n \n Larte de Labbacho: Analisi Multidisciplinare<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&family=Lato:wght@300;400;700&display=swap');\n\n body {\n font-family: 'Lato', sans-serif;\n background-color: #fdfbf7; \/* Parchment-like background *\/\n color: #2c241b; \/* Ink dark brown *\/\n }\n\n h1, h2, h3, .serif-font {\n font-family: 'Cinzel', serif;\n }\n\n \/* Custom Scrollbar *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1eadd;\n }\n ::-webkit-scrollbar-thumb {\n background: #8a3324;\n border-radius: 4px;\n }\n\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 350px;\n max-height: 400px;\n }\n\n .tab-btn.active {\n background-color: #8a3324;\n color: white;\n border-color: #8a3324;\n }\n\n .card {\n background-color: #ffffff;\n border: 1px solid #e5e0d0;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n }\n .card:hover {\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n }\n\n \/* Interactive Element Styling *\/\n input[type=\"number\"] {\n border: 1px solid #d1c4b0;\n padding: 0.5rem;\n border-radius: 0.25rem;\n width: 100%;\n }\n button.action-btn {\n background-color: #2c241b;\n color: #fdfbf7;\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n transition: background-color 0.2s;\n }\n button.action-btn:hover {\n background-color: #4a3c2f;\n }\n <\/style>\n \n \n \n \n<\/head>\n<body class=\"flex flex-col min-h-screen\">\n\n \n <header class=\"bg-[#e6dfcf] border-b border-[#d1c4b0] p-6 text-center\">\n <h1 class=\"text-4xl font-bold text-[#8a3324] mb-2\">Larte de Labbacho (1478)<\/h1>\n <p class=\"text-xl italic text-[#5c4d3c]\">L’Aritmetica di Treviso: Un’Analisi Multidisciplinare<\/p>\n <p class=\"mt-4 max-w-3xl mx-auto text-sm\">\n Esplora il primo manuale di aritmetica a stampa del mondo attraverso gli occhi di 11 esperti. \n Seleziona una prospettiva per rivelare le connessioni tra matematica, commercio, storia e cultura.\n <\/p>\n <\/header>\n\n \n <main class=\"flex-grow flex flex-col md:flex-row max-w-7xl mx-auto w-full p-4 gap-6\">\n\n \n <aside class=\"w-full md:w-1\/4 flex flex-col gap-2\">\n <h2 class=\"serif-font text-xl mb-4 border-b-2 border-[#8a3324] pb-2\">Prospettive<\/h2>\n <div id=\"nav-container\" class=\"flex flex-col gap-2\">\n \n <\/div>\n \n <div class=\"mt-8 p-4 bg-[#f4e4bc] rounded-lg border border-[#d1c4b0]\">\n <h3 class=\"serif-font font-bold mb-2 text-[#8a3324]\">Stato dell’Analisi<\/h3>\n <div class=\"w-full bg-white rounded-full h-2.5 mb-2\">\n <div id=\"progress-bar\" class=\"bg-[#8a3324] h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <p id=\"progress-text\" class=\"text-xs text-right\">0\/12 Sezioni Esplorate<\/p>\n <\/div>\n <\/aside>\n\n \n <section class=\"w-full md:w-3\/4 flex flex-col gap-6\">\n \n \n <div id=\"content-header\" class=\"card p-6 rounded-lg\">\n <div class=\"flex items-center justify-between mb-4\">\n <h2 id=\"section-title\" class=\"text-3xl font-bold text-[#2c241b] serif-font\">Benvenuti<\/h2>\n <span id=\"expert-badge\" class=\"px-3 py-1 bg-[#e6dfcf] text-xs font-bold uppercase tracking-wider rounded text-[#5c4d3c]\">Introduzione Generale<\/span>\n <\/div>\n <p id=\"section-intro\" class=\"text-lg leading-relaxed mb-4\">\n Benvenuti nell’ambiente di studio interattivo dedicato all'”Arte dell’Abbaco”. \n Questo prezioso incunabolo, stampato a Treviso nel 1478, non \u00e8 solo un manuale di calcolo, \n ma una finestra sul Rinascimento commerciale, culturale e sociale. Usa il menu a sinistra per interrogare il testo.\n <\/p>\n <\/div>\n\n \n <div id=\"viz-panel\" class=\"card p-6 rounded-lg bg-white\">\n <h3 class=\"serif-font text-xl mb-4 text-[#8a3324]\">Visualizzazione Dati & Interazione<\/h3>\n \n \n <div id=\"chart-wrapper\" class=\"chart-container hidden\">\n <canvas id=\"mainChart\"><\/canvas>\n <\/div>\n\n \n <div id=\"interactive-tool\" class=\"w-full\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"bg-[#f9f7f1] p-4 rounded border border-[#e5e0d0]\">\n <h4 class=\"font-bold mb-2\">Contesto Storico<\/h4>\n <ul class=\"list-disc list-inside text-sm space-y-2\">\n <li>Data: 10 Dicembre 1478<\/li>\n <li>Luogo: Treviso<\/li>\n <li>Stampatore: Michele Manzolo (o Gherardo da Lisa)<\/li>\n <li>Lingua: Volgare Veneto<\/li>\n <\/ul>\n <\/div>\n <div class=\"bg-[#f9f7f1] p-4 rounded border border-[#e5e0d0]\">\n <h4 class=\"font-bold mb-2\">Importanza Globale<\/h4>\n <p class=\"text-sm\">\u00c8 il primo libro di matematica stampato in Occidente, precedendo l’opera di Piero della Francesca e Luca Pacioli. Segna il passaggio dalla scienza manoscritta a quella diffusa.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"analysis-content\" class=\"card p-6 rounded-lg bg-[#faf8f4]\">\n <h3 class=\"serif-font text-xl mb-2\">Analisi dell’Esperto<\/h3>\n <div id=\"expert-text\" class=\"prose max-w-none text-[#2c241b]\">\n \n <\/div>\n <\/div>\n\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-[#2c241b] text-[#fdfbf7] p-6 text-center mt-8\">\n <p class=\"text-sm opacity-80\">© 2023 Progetto di Valorizzazione Digitale – Treviso Arithmetic (1478)<\/p>\n <\/footer>\n\n <script>\n \/\/ --- DATA STORE ---\n \/\/ Contains the content for all 11 perspectives + Intro + Valorization\n const appData = {\n \"intro\": {\n title: \"Introduzione\",\n expert: \"Gestore della Conoscenza\",\n intro: \"L'Arte dell'Abbaco (o Aritmetica di Treviso) \u00e8 un'opera anonima stampata nel 1478. Rappresenta la nascita della divulgazione scientifica pratica.\",\n text: \"<p>Questo testo \u00e8 un <em>incunabolo<\/em> (libro stampato prima del 1500) di inestimabile valore. \u00c8 scritto in volgare veneto per essere accessibile non ai dotti accademici che scrivevano in latino, ma ai mercanti e agli apprendisti. La sua struttura \u00e8 puramente pratica, mirata a risolvere problemi reali di commercio.<\/p><p>In questa applicazione, attiveremo 11 esperti virtuali per dissezionare il testo. Clicca sulle voci del menu per iniziare l'analisi.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 text-center\">\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">1478<\/div>\n <div class=\"text-sm\">Anno di Pubblicazione<\/div>\n <\/div>\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">62<\/div>\n <div class=\"text-sm\">Carte (Pagine)<\/div>\n <\/div>\n <div class=\"p-4 bg-gray-50 rounded shadow-sm\">\n <div class=\"text-3xl font-bold text-[#8a3324]\">300+<\/div>\n <div class=\"text-sm\">Problemi Pratici<\/div>\n <\/div>\n <\/div>\n `\n },\n \"computisteria\": {\n title: \"Computisteria\",\n expert: \"Esperto Contabile\",\n intro: \"L'opera \u00e8 un manuale tecnico per la gestione dei conti. Insegna a calcolare tare, profitti e cambi valuta.\",\n text: \"<p>Dal punto di vista della computisteria, il testo \u00e8 un manuale operativo. Non si perde in teoremi, ma va dritto alla pratica contabile necessaria per la 'Partita Doppia' (anche se questa verr\u00e0 formalizzata meglio da Pacioli poco dopo).<\/p><p>I problemi tipici includono:<\/p><ul class='list-disc pl-5'><li><strong>Calcolo della Tara:<\/strong> Dedurre il peso dei sacchi o contenitori dalle merci.<\/li><li><strong>Baratto:<\/strong> Scambio di merci con valori diversi.<\/li><li><strong>Societ\u00e0:<\/strong> Divisione degli utili tra soci in base al capitale investito.<\/li><\/ul>\",\n vizType: \"chart\",\n chartType: \"doughnut\",\n chartData: {\n labels: ['Compravendita', 'Baratto', 'Societ\u00e0 (Compagnie)', 'Cambi Valuta', 'Pesi e Misure'],\n datasets: [{\n label: 'Tipologia Problemi Commerciali',\n data: [40, 25, 15, 10, 10],\n backgroundColor: ['#8a3324', '#c78d4d', '#e0c097', '#5c4d3c', '#2c241b']\n }]\n }\n },\n \"economia\": {\n title: \"Economia Aziendale\",\n expert: \"Analista di Business\",\n intro: \"Il testo riflette la struttura economica del capitalismo mercantile nascente. Treviso era un hub vitale.\",\n text: \"<p>Il testo dimostra una sofisticata comprensione del <strong>valore del tempo<\/strong> nel denaro (interessi) e della gestione del rischio nelle partnership. I problemi di 'Compagnia' insegnano come allocare le risorse e dividere i profitti in modo equo, fondamentale per le spedizioni commerciali veneziane.<\/p><p>Si nota l'importanza delle filiere produttive locali (tessuti, spezie) e la necessit\u00e0 di standardizzare i calcoli per ridurre i costi di transazione.<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Capitale Fisso', 'Capitale Circolante', 'Risorse Umane', 'Logistica'],\n datasets: [{\n label: 'Focus del Testo (Stima)',\n data: [10, 80, 50, 60],\n backgroundColor: '#8a3324'\n }]\n }\n },\n \"matematica\": {\n title: \"Matematica\",\n expert: \"Matematico\",\n intro: \"L'uso dell'algoritmo indo-arabo sostituisce l'abaco romano. Il cuore \u00e8 la 'Regola del Tre'.\",\n text: \"<p>Il libro diffonde i numeri arabi (0-9) e gli algoritmi di calcolo in colonna (somma, sottrazione, moltiplicazione, divisione 'a galera'). Ma la regina indiscussa \u00e8 la <strong>Regola del Tre<\/strong> (o Regola Aurea), che permette di risolvere proporzioni.<\/p><p><em>Esempio:<\/em> Se 7 braccia di stoffa costano 9 ducati, quanto costano 5 braccia?<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-[#f4e4bc] p-6 rounded-lg border border-[#8a3324]\">\n <h4 class=\"font-bold text-lg mb-4 text-[#8a3324] text-center serif-font\">Simulatore: La Regola del Tre<\/h4>\n <div class=\"flex flex-col gap-4 items-center\">\n <div class=\"flex items-center gap-2\">\n <span>Se<\/span>\n <input type=\"number\" id=\"math-a\" placeholder=\"Quantit\u00e0 A (es. 7)\" class=\"w-24 text-center\">\n <span>unit\u00e0 costano<\/span>\n <input type=\"number\" id=\"math-b\" placeholder=\"Prezzo B (es. 9)\" class=\"w-24 text-center\">\n <span>ducati...<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <span>...quanto costano<\/span>\n <input type=\"number\" id=\"math-c\" placeholder=\"Quantit\u00e0 C (es. 5)\" class=\"w-24 text-center\">\n <span>unit\u00e0?<\/span>\n <\/div>\n <button onclick=\"calculateRuleOfThree()\" class=\"action-btn w-full md:w-auto mt-2\">Calcola con l'Algoritmo Antico<\/button>\n <div id=\"math-result\" class=\"mt-4 font-bold text-xl h-8 text-[#8a3324]\"><\/div>\n <\/div>\n <\/div>\n `\n },\n \"didattica\": {\n title: \"Didattica\",\n expert: \"Pedagogista\",\n intro: \"Un metodo 'Learning by Doing'. Problemi concreti invece di astrazioni teoriche.\",\n text: \"<p>L'approccio didattico \u00e8 rivoluzionario. Non ci sono definizioni assiomatiche. Si parte dal concreto: 'Se vuoi comprare zafferano...'. Questo metodo serviva a formare rapidamente i figli dei mercanti nelle 'Botteghe d'Abbaco'.<\/p><p>Caratteristiche chiave:<\/p><ul class='list-disc pl-5'><li>Uso della lingua volgare (accessibilit\u00e0).<\/li><li>Ripetizione di esercizi simili (rinforzo).<\/li><li>Scaffold progressivo (dalle operazioni base ai problemi complessi).<\/li><\/ul>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-white p-4 rounded shadow text-center\">\n <h5 class=\"font-bold text-[#2c241b]\">Metodo Scolastico (Latino)<\/h5>\n <p class=\"text-sm text-gray-600\">Teorico, basato su Boezio, astratto, per il clero.<\/p>\n <div class=\"mt-2 text-xs bg-red-100 p-1 text-red-800 rounded\">Accessibilit\u00e0 Bassa<\/div>\n <\/div>\n <div class=\"bg-[#f4e4bc] p-4 rounded shadow text-center border-2 border-[#8a3324]\">\n <h5 class=\"font-bold text-[#8a3324]\">Metodo d'Abbaco (Volgare)<\/h5>\n <p class=\"text-sm text-gray-600\">Pratico, basato su Fibonacci, esempi reali, per i mercanti.<\/p>\n <div class=\"mt-2 text-xs bg-green-100 p-1 text-green-800 rounded\">Accessibilit\u00e0 Alta<\/div>\n <\/div>\n <\/div>\n `\n },\n \"storia_matematica\": {\n title: \"Storia della Matematica\",\n expert: \"Storico della Scienza\",\n intro: \"Il ponte tra Fibonacci e Pacioli. La democratizzazione del numero.\",\n text: \"<p>Questo testo si colloca sulla scia del <em>Liber Abaci<\/em> di Fibonacci (1202), ma ha il merito storico di aver sfruttato la <strong>stampa<\/strong>. Ha fissato la terminologia matematica italiana e standardizzato i simboli.<\/p><p>\u00c8 fondamentale per capire come la matematica araba sia stata assorbita e adattata alle esigenze dell'Europa pre-rinascimentale.<\/p>\",\n vizType: \"chart\",\n chartType: \"line\",\n chartData: {\n labels: ['1202 (Fibonacci)', '1478 (Treviso)', '1494 (Pacioli)', '1537 (Tartaglia)'],\n datasets: [{\n label: 'Diffusione della Matematica Pratica (Indice ipotetico)',\n data: [10, 40, 85, 100],\n borderColor: '#8a3324',\n tension: 0.3,\n fill: true,\n backgroundColor: 'rgba(138, 51, 36, 0.1)'\n }]\n }\n },\n \"storia_treviso\": {\n title: \"Storia di Treviso\",\n expert: \"Storico Locale\",\n intro: \"Treviso nel 1478 era una ricca citt\u00e0 della Terraferma veneziana, nodo di scambio.\",\n text: \"<p>La pubblicazione a Treviso non \u00e8 casuale. La citt\u00e0 godeva di stabilit\u00e0 sotto la Serenissima e aveva una classe mercantile fiorente che richiedeva istruzione. Treviso era un crocevia per le merci che scendevano dal nord (Germania) verso Venezia.<\/p><p>Il libro riflette la vita quotidiana: si parla di tessuti, spezie, metalli, valute locali (ducati, grossi, piccioli).<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Venezia', 'Treviso', 'Firenze', 'Milano', 'Genova'],\n datasets: [{\n label: 'Produzione Libri Aritmetica (XV sec. - Stima)',\n data: [50, 20, 35, 15, 10],\n backgroundColor: ['#5c4d3c', '#8a3324', '#c78d4d', '#e0c097', '#d1c4b0']\n }]\n }\n },\n \"religione\": {\n title: \"Religione\",\n expert: \"Teologo\/Storico Religioso\",\n intro: \"La matematica come ordine divino. L'invocazione a Dio nel commercio.\",\n text: \"<p>Nonostante sia un testo tecnico, l'opera inizia e finisce con invocazioni a Dio. Nel 1400, il giusto profitto era dibattuto, ma la precisione matematica era vista come riflesso dell'ordine divino.<\/p><p>L'onest\u00e0 nel calcolo (evitare frodi su pesi e misure) ha una valenza morale. Il 'quaderno' del mercante iniziava spesso con 'Nel nome di Dio e del guadagno'.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"p-6 bg-[#fffaf0] italic border-l-4 border-[#8a3324]\">\n \"Incomincia una pratica molto bona et utile a ciaschaduno chi vuole usare larte de labbacho... chiamata in vulgaro larte de labbacho.\"\n <br><br>\n <span class=\"text-sm not-italic text-gray-600\">\n Anche la laicit\u00e0 del commercio nel 1478 \u00e8 permeata di ritualit\u00e0 religiosa. La precisione non \u00e8 solo economica, \u00e8 etica.\n <\/span>\n <\/div>\n `\n },\n \"geografia\": {\n title: \"Geografia di Treviso\",\n expert: \"Geografo Storico\",\n intro: \"La geografia economica disegnata dai problemi del libro.\",\n text: \"<p>Attraverso i problemi di cambio valuta e trasporto, il libro disegna una mappa mentale del mondo conosciuto dal mercante trevigiano: Venezia \u00e8 il centro, ma si citano Londra, Bruges, la Fiera di Lione.<\/p><p>Si menzionano fiumi (Sile, Piave) implicitamente come vie di trasporto per le merci pesanti citate nei problemi (legname, pietre).<\/p>\",\n vizType: \"chart\",\n chartType: \"bar\",\n chartData: {\n labels: ['Venezia', 'Norimberga', 'Londra', 'Bruges', 'Lione'],\n datasets: [{\n label: 'Frequenza citazioni\/relazioni commerciali',\n data: [100, 45, 30, 25, 20],\n backgroundColor: '#2c241b'\n }]\n }\n },\n \"testi_antichi\": {\n title: \"Testi Antichi\",\n expert: \"Filologo\",\n intro: \"Analisi linguistica: il Volgare Veneto come lingua tecnica.\",\n text: \"<p>Il testo \u00e8 una miniera per i linguisti. Mostra il passaggio dal latino al volgare per usi tecnici. Termini come 'mozzar' (moltiplicare), 'partir' (dividere) mostrano l'evoluzione del lessico.<\/p><p>La struttura delle frasi \u00e8 paratattica, semplice, adatta alla memorizzazione orale e alla lettura veloce.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full text-sm text-left\">\n <thead class=\"bg-[#e6dfcf] font-bold\">\n <tr><th class=\"p-2\">Termine 1478<\/th><th class=\"p-2\">Italiano Moderno<\/th><th class=\"p-2\">Nota<\/th><\/tr>\n <\/thead>\n <tbody class=\"divide-y divide-[#d1c4b0]\">\n <tr><td class=\"p-2 font-mono\">Multiplicar<\/td><td class=\"p-2\">Moltiplicare<\/td><td class=\"p-2\">Radice latina<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Partir<\/td><td class=\"p-2\">Dividere<\/td><td class=\"p-2\">Concetto di 'spartire'<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Pizoli<\/td><td class=\"p-2\">Spiccioli<\/td><td class=\"p-2\">Valuta minore<\/td><\/tr>\n <tr><td class=\"p-2 font-mono\">Cavedal<\/td><td class=\"p-2\">Capitale<\/td><td class=\"p-2\">Fondo monetario<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n `\n },\n \"tipografia\": {\n title: \"Tecniche Tipografiche\",\n expert: \"Storico della Stampa\",\n intro: \"L'impaginazione della matematica: una sfida tecnica.\",\n text: \"<p>Stampare matematica nel 1478 era difficilissimo. Non esistevano caratteri mobili per le frazioni o le linee di divisione. Manzolo dovette ingegnarsi.<\/p><p>Il layout lascia ampi margini (chiamati 'marginalia') per i calcoli del lettore. \u00c8 uno dei primi esempi di <em>User Experience Design<\/em> applicato al libro: uno strumento di lavoro, non solo di lettura.<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"border-2 border-dashed border-gray-400 p-4 h-48 flex items-center justify-center relative bg-[#fdfbf7]\">\n <div class=\"absolute top-2 left-2 text-xs text-gray-500\">Pagina Tipo<\/div>\n <div class=\"text-center\">\n <p class=\"font-serif text-lg mb-2\">Testo del problema...<\/p>\n <div class=\"inline-block border-b border-black px-2 mx-2\">Numeratore<\/div>\n <br>\n <div class=\"inline-block px-2 mx-2\">Denominatore<\/div>\n <\/div>\n <div class=\"absolute right-4 top-10 w-16 h-24 border border-gray-300 flex items-center justify-center text-xs text-center text-gray-400\">\n Spazio Marginale per Calcoli\n <\/div>\n <\/div>\n `\n },\n \"museali\": {\n title: \"Tecniche Museali\",\n expert: \"Curatore Museale\",\n intro: \"Come esporre un libro di calcoli? Strategie espositive.\",\n text: \"<p>Il libro non va solo mostrato chiuso in una teca. Deve 'parlare'.<\/p><p><strong>Proposta espositiva:<\/strong><\/p><ul class='list-disc pl-5'><li><strong>Tavolo interattivo:<\/strong> Proiezione delle pagine dove i visitatori possono provare a risolvere i problemi toccando i numeri.<\/li><li><strong>Contestualizzazione:<\/strong> Affiancare monete dell'epoca (ducati) e strumenti di misura.<\/li><li><strong>Facsimile sfogliabile:<\/strong> Per recuperare la tattilit\u00e0 della carta antica.<\/li><\/ul>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-[#2c241b] text-[#fdfbf7] p-4 rounded shadow-lg text-center\">\n <h4 class=\"font-bold mb-2\">Concept Museale<\/h4>\n <div class=\"flex justify-around items-center mt-4\">\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udcd6<\/span>\n <span class=\"text-xs mt-1\">Oggetto Originale<\/span>\n <\/div>\n <div class=\"text-2xl\">\u27a1\ufe0f<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udd90\ufe0f<\/span>\n <span class=\"text-xs mt-1\">Replica Tattile<\/span>\n <\/div>\n <div class=\"text-2xl\">\u27a1\ufe0f<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-2xl\">\ud83d\udcbb<\/span>\n <span class=\"text-xs mt-1\">App Interattiva<\/span>\n <\/div>\n <\/div>\n <\/div>\n `\n },\n \"conclusioni\": {\n title: \"Conclusioni & Valorizzazione\",\n expert: \"Responsabile Strategico\",\n intro: \"Un patrimonio da attivare per il futuro di Treviso.\",\n text: \"<p>L'Arte dell'Abbaco \u00e8 un brand culturale potente per Treviso. Unisce la radice storica (Citt\u00e0 d'arte) con la vocazione economica (Nord-Est produttivo).<\/p>\",\n vizType: \"html\",\n vizContent: `\n <div class=\"bg-white p-6 rounded-lg shadow border-t-4 border-[#8a3324]\">\n <h3 class=\"font-bold text-lg mb-4 text-[#8a3324]\">Piano di Valorizzazione<\/h3>\n \n <div class=\"mb-4\">\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per le Scuole (Didattica)<\/h4>\n <p class=\"text-sm mt-1\">Laboratori \"Mercanti per un giorno\": matematica applicata usando le monete e le merci del 1478. Gara di calcolo con metodi antichi.<\/p>\n <\/div>\n\n <div class=\"mb-4\">\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per i Turisti (Geografia\/Storia)<\/h4>\n <p class=\"text-sm mt-1\">Itinerario \"Treviso Mercantile\": QR code nei luoghi del commercio storico collegati a problemi del libro.<\/p>\n <\/div>\n\n <div>\n <h4 class=\"font-bold text-[#2c241b] border-b border-gray-200 pb-1\">Per Aziende (Economia)<\/h4>\n <p class=\"text-sm mt-1\">Gadget aziendali di alto profilo (ristampe anastatiche) come simbolo di etica e precisione imprenditoriale.<\/p>\n <\/div>\n <\/div>\n `\n }\n };\n\n \/\/ --- STATE MANAGEMENT ---\n let currentPerspective = 'intro';\n let chartInstance = null;\n const visitedSections = new Set(['intro']);\n\n \/\/ --- DOM ELEMENTS ---\n const navContainer = document.getElementById('nav-container');\n const sectionTitle = document.getElementById('section-title');\n const expertBadge = document.getElementById('expert-badge');\n const sectionIntro = document.getElementById('section-intro');\n const expertText = document.getElementById('expert-text');\n const interactiveTool = document.getElementById('interactive-tool');\n const chartWrapper = document.getElementById('chart-wrapper');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n\n \/\/ --- FUNCTIONS ---\n\n function init() {\n renderNavigation();\n loadContent('intro');\n }\n\n function renderNavigation() {\n navContainer.innerHTML = '';\n const keys = Object.keys(appData);\n \n keys.forEach(key => {\n const item = appData[key];\n const btn = document.createElement('button');\n btn.className = `tab-btn w-full text-left px-4 py-3 rounded text-sm font-medium transition-colors duration-200 flex items-center justify-between group ${key === currentPerspective ? 'active' : 'bg-white text-[#5c4d3c] hover:bg-[#f1eadd]'}`;\n btn.innerHTML = `\n <span>${item.title}<\/span>\n <span class=\"opacity-0 group-hover:opacity-100 transition-opacity text-xs\">\u2192<\/span>\n `;\n btn.onclick = () => loadContent(key);\n navContainer.appendChild(btn);\n });\n }\n\n function updateProgress() {\n const total = Object.keys(appData).length;\n const visited = visitedSections.size;\n const percentage = (visited \/ total) * 100;\n progressBar.style.width = `${percentage}%`;\n progressText.innerText = `${visited}\/${total} Sezioni Esplorate`;\n }\n\n function loadContent(key) {\n currentPerspective = key;\n visitedSections.add(key);\n const data = appData[key];\n\n \/\/ Update Text Content\n sectionTitle.innerText = data.title;\n expertBadge.innerText = data.expert;\n sectionIntro.innerText = data.intro;\n expertText.innerHTML = data.text;\n\n \/\/ Handle Visualization\n handleVisualization(data);\n\n \/\/ Update UI State\n renderNavigation(); \/\/ Re-render to highlight active\n updateProgress();\n }\n\n function handleVisualization(data) {\n \/\/ Reset Areas\n interactiveTool.innerHTML = '';\n chartWrapper.classList.add('hidden');\n if (chartInstance) {\n chartInstance.destroy();\n chartInstance = null;\n }\n\n if (data.vizType === 'html') {\n interactiveTool.innerHTML = data.vizContent;\n interactiveTool.classList.remove('hidden');\n } else if (data.vizType === 'chart') {\n chartWrapper.classList.remove('hidden');\n const ctx = document.getElementById('mainChart').getContext('2d');\n \n chartInstance = new Chart(ctx, {\n type: data.chartType,\n data: data.chartData,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: {\n font: { family: \"'Lato', sans-serif\" }\n }\n },\n tooltip: {\n backgroundColor: '#2c241b',\n titleFont: { family: \"'Cinzel', serif\" },\n bodyFont: { family: \"'Lato', sans-serif\" }\n }\n }\n }\n });\n }\n }\n\n \/\/ --- INTERACTIVE CALCULATOR FUNCTION ---\n window.calculateRuleOfThree = function() {\n const a = parseFloat(document.getElementById('math-a').value);\n const b = parseFloat(document.getElementById('math-b').value);\n const c = parseFloat(document.getElementById('math-c').value);\n const resDiv = document.getElementById('math-result');\n\n if (isNaN(a) || isNaN(b) || isNaN(c) || a === 0) {\n resDiv.innerText = \"Inserisci valori validi (A non pu\u00f2 essere 0).\";\n return;\n }\n\n \/\/ The algorithm: (B * C) \/ A\n const result = (b * c) \/ a;\n \n resDiv.innerHTML = `\n <span class=\"text-sm text-gray-500\">Operazione: (${b} \u00d7 ${c}) \u00f7 ${a} = <\/span>\n ${result.toFixed(2)} ducati\n `;\n }\n\n \/\/ Initialize App\n init();\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Larte de Labbacho: Analisi Multidisciplinare Larte de Labbacho (1478) L’Aritmetica di Treviso: Un’Analisi Multidisciplinare Esplora il primo manuale di aritmetica a stampa del mondo attraverso gli occhi di 11 esperti. Seleziona una prospettiva per rivelare le connessioni tra matematica, commercio, storia e cultura. Prospettive Stato dell’Analisi 0\/12 Sezioni Esplorate Benvenuti Introduzione Generale Benvenuti nell’ambiente di […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":3,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/www.lartedelabbacho.it\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}