Appunti · InformaticaIT · Maturità

Elaborazione digitale dei documenti e linguaggi di markup

Un documento digitale è una sequenza di bit organizzata secondo precisi schemi di codifica: testo, immagini, audio e video si riducono tutti a numeri, ma ciascun medium adotta una rappresentazione e una compressione diverse. I linguaggi di markup (anzitutto HTML) descrivono la struttura logica di un documento separandola, grazie ai CSS, dalla sua presentazione, mentre i formati strutturati come XML e JSON ne consentono lo scambio fra applicazioni eterogenee. L'appunto guida lo studente dalla codifica dei media alla produzione di pagine web corrette, strutturate, portabili e accessibili.

5 sezioni~26 min di lettura3 competenzeLivello Base 1 · Standard 3 · Approfondimento 1Verificato · 07/2026

T·0777 / 14

Profilo d’esame

Padroneggiare gli strumenti per l'elaborazione digitale dei documenti e la loro condivisioneComprendere la logica della marcatura e della strutturazione dei documentiProdurre documenti digitali corretti, strutturati e accessibili

Operatori:descrivispiegaclassificaconfrontaanalizzaillustracalcolainterpretagiustificaproduci

livello base

Riconoscere la codifica binaria dei principali media, leggere e scrivere semplice marcatura HTML ben formata e distinguere il ruolo di contenuto (HTML) e presentazione (CSS).

livello avanzato

Strutturare documenti complessi con HTML semantico e CSS, modellare e validare dati con XML/JSON e argomentare le scelte in termini di accessibilità, portabilità e standard aperti.

Profondità

Testo

Contenuti · 5 sezioni

Elaborazione digitale dei documenti e linguaggi di markup

Rappresentazione digitale dei documenti e dei media#

BaseOSA-informatica-DE-documenti-markup — Codifica e rappresentazione digitale dei documenti: testo, immagini, audio, video

Dal segnale analogico al documento digitale

Fig. 1Testo, immagini, audio e video sono ricondotti a una sequenza di bit tramite codifica; la compressione può essere lossless (senza perdita) o lossy (con perdita).

Ogni documento digitale, qualunque sia il medium che rappresenta, è in ultima analisi una sequenza di bit: l'elaborazione digitale dei documenti studia proprio gli schemi con cui testo, immagini, suoni e filmati vengono codificati in numeri e poi ricostruiti. La codifica è la convenzione condivisa che lega un simbolo (una lettera, un colore, un campione sonoro) a una particolare configurazione di bit; senza una codifica nota un file non è interpretabile.

Il testo si codifica associando a ciascun carattere un numero intero secondo una tabella standard. Lo storico ASCII usa 7 bit e copre 128 caratteri (lettere latine non accentate, cifre, punteggiatura, caratteri di controllo); è insufficiente per le lingue del mondo. Lo standard Unicode assegna invece un «code point» a ogni carattere di quasi tutti i sistemi di scrittura, e la codifica UTF-8 lo rappresenta con un numero variabile di byte (da 1 a 4): i caratteri ASCII restano un solo byte, garantendo la retrocompatibilità, mentre lettere accentate ed emoji ne usano di più. È questa la ragione per cui i documenti web dichiarano «UTF-8».

Le immagini si rappresentano in due modi complementari. Nelle immagini «raster» (o bitmap) l'immagine è una griglia di pixel, ciascuno con un proprio colore; la qualità dipende dalla risoluzione e dalla profondità di colore. Nel modello RGB ogni canale (rosso, verde, blu) usa tipicamente 8 bit, per un totale di 24 bit (16 777 216 colori). Nelle immagini «vettoriali» l'immagine è descritta da primitive geometriche (rette, curve, poligoni) e quindi è scalabile senza perdita: è il modello di SVG, formato vettoriale basato su markup.

Audio e video nascono da segnali analogici continui che vengono «digitalizzati» con il campionamento (si misura l'ampiezza a intervalli regolari, alla frequenza di campionamento) e la quantizzazione (si arrotonda ogni campione a un valore discreto, secondo la profondità di bit). Poiché i file multimediali grezzi sono enormi, intervengono i formati con compressione: «senza perdita» (lossless, come PNG o FLAC, che ricostruiscono esattamente l'originale) e «con perdita» (lossy, come JPEG o MP3, che scartano informazione poco percepibile per ridurre drasticamente le dimensioni). La scelta del formato è sempre un compromesso fra qualità, dimensione e finalità d'uso.

D_{\text{bit}} = L \times A \times p

Dimensione di un'immagine raster

La dimensione in bit di un'immagine non compressa è il prodotto del numero di pixel in larghezza L per quello in altezza A per la profondità di colore p (bit per pixel).

1\ \text{KiB} = 2^{10}\ \text{byte} = 1024\ \text{byte}, \qquad 1\ \text{MiB} = 2^{20}\ \text{byte}

Multipli binari del byte

In informatica i multipli binari (kibibyte, mebibyte) sono potenze di 2; non vanno confusi con i multipli decimali (kB = 1000 byte) usati nel commercio.

Dimensione di un'immagine raster 800x600 al variare della profondita di colore

Esempio svolto

Calcolo della dimensione di un'immagine raster

Un'immagine raster non compressa è larga 800 pixel e alta 600 pixel, con codifica colore RGB a 24 bit per pixel. Calcola la dimensione del file in byte, in KiB e in MiB, e indica come cambierebbe passando a 8 bit per pixel.

Numero totale di pixel
Si moltiplicano larghezza e altezza.
Dimensione in bit
Ogni pixel occupa 24 bit (8 per canale RGB).
Conversione in byte
Si divide per 8 perché 1 byte = 8 bit.
Conversione in KiB e MiB
Si divide per 1024 e poi ancora per 1024.
Variante a 8 bit per pixel
Con 8 bit/pixel l'immagine occupa un terzo: 480 000 byte, cioè circa 468.75 KiB. La profondità di colore è proporzionale alla dimensione.

Risultato: L'immagine a 24 bit occupa 1 440 000 byte (circa 1406.25 KiB, ovvero circa 1.373 MiB); a 8 bit per pixel scende a 480 000 byte (circa 468.75 KiB), un terzo del precedente.

Errori frequenti

Confondere risoluzione (numero di pixel) e profondità di colore (bit per pixel): sono due grandezze indipendenti che concorrono entrambe alla dimensione del file.
Ritenere che la compressione JPEG sia reversibile: essendo lossy, ogni salvataggio successivo degrada ulteriormente l'immagine; per un logo a tinte piatte va preferito un formato lossless o vettoriale.

Approfondimento

La digitalizzazione dei segnali continui è governata da un risultato preciso, il teorema del campionamento di Nyquist-Shannon: per ricostruire fedelmente un segnale la frequenza di campionamento deve essere almeno il doppio della massima frequenza presente nel segnale. Poiché l'udito umano arriva a circa 20 kHz, l'audio dei CD campiona a 44,1 kHz; campionare troppo lentamente produce l'aliasing, con frequenze spurie. La dimensione dell'audio non compresso segue allora «frequenza di campionamento × profondità in bit × numero di canali × durata». La compressione, indispensabile per i media, sfrutta due idee diverse. Nei formati senza perdita si elimina la ridondanza statistica: la codifica RLE (run-length) accorcia le sequenze di valori ripetuti, la codifica di Huffman assegna codici più brevi ai simboli più frequenti avvicinandosi al limite entropico teorico di Shannon, e da questi dati si ricostruisce l'originale bit per bit. Nei formati con perdita si scarta anche informazione poco percepibile: il JPEG applica la trasformata discreta del coseno (DCT) e riduce i dettagli fini a cui l'occhio è meno sensibile; l'MP3 usa un modello psicoacustico che elimina i suoni mascherati da altri più forti. È il compromesso fra qualità e dimensione a decidere quale strada seguire, e spiega perché un logo a tinte piatte va salvato in un formato lossless o vettoriale, mentre una fotografia si comprime bene in JPEG.

Ripasso attivo

Un'immagine raster non compressa è larga 800 pixel e alta 600 pixel, con codifica colore RGB a 24 bit per pixel. Calcola la dimensione del file in byte, in kibibyte (KiB) e in mebibyte (MiB), e indica come cambierebbe passando a 8 bit per pixel.

Richiamo attivo

Ricorda i punti chiave — poi rivela.

Fonti: Indicazioni Nazionali per i Licei (DPR 89/2010, DM 211/2010) — Obiettivi Specifici di Apprendimento (Ministero dell'Istruzione e del Merito (MIM))

Linguaggi di markup: la struttura di HTML#

StandardOSA-informatica-DE-documenti-markup — Linguaggi di markup: struttura e logica di HTML

L'albero DOM di un documento HTML

Fig. 3Ogni nodo dell’albero DOM è un elemento; le foglie contengono testo o attributi.

Un linguaggio di markup non è un linguaggio di programmazione: non descrive un algoritmo, ma «marca» il contenuto di un documento per attribuirgli una struttura e un significato. HTML (HyperText Markup Language) è il linguaggio di markup del Web: tramite etichette dette «tag» indica che cosa è un certo frammento di testo (un titolo, un paragrafo, un elenco, un collegamento) lasciando al browser il compito di interpretarlo e visualizzarlo.

L'unità fondamentale è l'elemento, di solito formato da un tag di apertura, un contenuto e un tag di chiusura, per esempio «<p>Testo del paragrafo</p>». Alcuni elementi sono «vuoti» e privi di chiusura (per esempio «<img>» o «<br>»). Gli elementi possono portare attributi, coppie nome="valore" scritte nel tag di apertura, che ne specificano proprietà: l'attributo «href» di un collegamento, «src» e «alt» di un'immagine, «id» e «class» per identificare o raggruppare elementi.

Un documento HTML ben formato ha una struttura precisa: la dichiarazione «<!DOCTYPE html>», l'elemento radice «<html>» che racchiude tutto, la sezione «<head>» con i metadati (titolo della pagina, codifica dei caratteri, collegamento ai fogli di stile) e la sezione «<body>» con il contenuto effettivamente visibile. Poiché gli elementi si annidano gli uni dentro gli altri senza sovrapposizioni, il documento forma una struttura ad albero: è il DOM (Document Object Model), in cui ogni nodo è un elemento, un attributo o del testo, e da cui discende la possibilità di manipolare la pagina via programmazione (Fig. 1).

HTML5 introduce l'idea di marcatura «semantica»: invece di costruire la pagina con generici «<div>», si usano elementi che dichiarano il ruolo di ciascuna parte, come «<header>», «<nav>», «<main>», «<article>», «<section>», «<footer>». La marcatura semantica rende il documento più comprensibile alle macchine (motori di ricerca, tecnologie assistive) e più manutenibile per le persone: è il primo passo verso pagine accessibili e portabili. Centrale è inoltre il concetto di ipertesto: l'elemento «<a>» con l'attributo «href» crea collegamenti che intrecciano i documenti in una rete navigabile, idea fondante del World Wide Web.

Esempio svolto

Scrivere e leggere un frammento HTML5 ben formato

Scrivi un frammento HTML5 ben formato con un'intestazione contenente un titolo di primo livello, un paragrafo con un collegamento a https://www.miur.gov.it e un'immagine con testo alternativo; poi descrivi l'albero DOM.

Scheletro del documento
Si parte dalla dichiarazione del tipo di documento e dalla radice con head e body: <!DOCTYPE html><html lang="it"><head><meta charset="UTF-8"><title>Esempio</title></head><body> ... </body></html>.
Intestazione e titolo
Dentro il body si inserisce un'intestazione semantica con il titolo di primo livello: <header><h1>Documenti digitali</h1></header>. Il tag h1 indica il titolo principale per significato, non per dimensione.
Paragrafo con collegamento
Il collegamento si annida nel paragrafo tramite l'elemento a con attributo href: <p>Visita il <a href="https://www.miur.gov.it">sito del Ministero</a>.</p>. I tag vanno chiusi nell'ordine inverso di apertura.
Immagine con testo alternativo
L'immagine è un elemento vuoto con gli attributi src e alt: <img src="logo.png" alt="Logo della scuola">. L'attributo alt è indispensabile per l'accessibilità.
Lettura dell'albero DOM
La radice html ha due figli, head (con meta e title) e body; body contiene header (con h1), un paragrafo p (con dentro a) e img. Ogni elemento è un nodo, il testo e gli attributi sono foglie.

Risultato: Un frammento ben formato annida correttamente i tag e usa elementi semantici; il suo DOM è un albero con radice html, i rami head e body e, sotto body, header/h1, p/a e img.

Errori frequenti

Sovrapporre i tag invece di annidarli correttamente, per esempio «<b><i>testo</b></i>»: l'ordine di chiusura deve rispettare quello di apertura, altrimenti l'albero del documento non è ben formato.
Omettere l'attributo «alt» nelle immagini o usare i tag per ottenere un effetto grafico (per esempio un titolo «<h1>» scelto solo perché grande): la scelta dei tag deve seguire il significato, non l'aspetto, che spetta ai CSS.

Approfondimento

La pagina web moderna si regge su tre livelli complementari, applicazione concreta della separazione delle responsabilità: HTML per la struttura e il significato, CSS per la presentazione, JavaScript per il comportamento. HTML è dichiarativo — descrive «che cosa» sono le cose, non «come» calcolarle — mentre JavaScript è un vero linguaggio di programmazione imperativo che agisce sulla pagina. Il ponte fra i due è proprio il DOM: il browser, leggendo l'HTML, ne costruisce l'albero degli oggetti, e JavaScript può poi leggerlo e modificarlo a tempo di esecuzione (aggiungere un nodo, cambiare un testo, reagire a un clic), così che la pagina diventi dinamica senza doversi ricaricare. Vale la pena conoscere a grandi linee come il browser trasforma il markup in pixel: analizza (parsing) l'HTML costruendo il DOM e i CSS costruendo il CSSOM, li combina nel render tree, calcola la geometria di ogni scatola (layout o reflow) e infine disegna (painting). Gli elementi di modulo (form, input) collegano infine la pagina al server: i dati inseriti dall'utente vengono inviati e un programma lato server li elabora — l'anello che porta dal documento statico all'applicazione web vera e propria, argomento che riprenderemo con la struttura di Internet e i suoi servizi. Comprendere questa architettura a strati chiarisce perché la scelta dei tag debba seguire il significato, lasciando l'aspetto ai CSS e l'interattività a JavaScript.

Ripasso attivo

Scrivi un frammento HTML5 ben formato che rappresenti una pagina con un'intestazione contenente un titolo di primo livello, un paragrafo di testo con al suo interno un collegamento a https://www.miur.gov.it e un'immagine con testo alternativo. Poi descrivi a parole l'albero DOM corrispondente.

Richiamo attivo

Ricorda i punti chiave — poi rivela.

Fonti: Indicazioni Nazionali per i Licei (DPR 89/2010, DM 211/2010) — Obiettivi Specifici di Apprendimento (Ministero dell'Istruzione e del Merito (MIM))

Presentazione e stile con i CSS#

StandardOSA-informatica-DE-documenti-markup — Separazione contenuto/presentazione con CSS

Separazione tra contenuto (HTML) e presentazione (CSS)

Fig. 4L’HTML descrive struttura e significato, il CSS l’aspetto: lo stesso contenuto può avere stili diversi (portabilità).

Il principio cardine dei documenti web moderni è la separazione fra contenuto e presentazione: HTML descrive la struttura e il significato, mentre i CSS (Cascading Style Sheets, fogli di stile a cascata) ne descrivono l'aspetto — colori, caratteri, spaziature, disposizione degli elementi. Tenere separati i due livelli rende il documento più leggibile, manutenibile (un'unica modifica al foglio di stile aggiorna tutte le pagine) e portabile fra dispositivi diversi (Fig. 1).

Una regola CSS è composta da un selettore, che individua gli elementi a cui applicare lo stile, e da un blocco di dichiarazioni, ciascuna formata da una proprietà e un valore. Per esempio «p { color: navy; font-size: 16px; }» colora di blu e dimensiona tutti i paragrafi. I selettori più usati sono il selettore di tipo («p»), il selettore di classe («.evidenza», che corrisponde all'attributo class) e il selettore di id («#intro», unico nella pagina); esistono anche selettori combinati e contestuali.

Il foglio di stile si può collegare al documento in tre modi: «in linea» tramite l'attributo style su un singolo elemento (sconsigliato perché mescola di nuovo contenuto e presentazione), «interno» dentro un elemento «<style>» nell'head, oppure «esterno» con un file .css separato richiamato da «<link rel="stylesheet" href="...">». Quest'ultimo è il modo migliore: un solo file dà uno stile coerente a un intero sito.

Il nome «a cascata» indica che più regole possono interessare lo stesso elemento e che esiste un ordine di priorità per risolverne i conflitti, basato su specificità del selettore, ordine di dichiarazione ed ereditarietà (molte proprietà passano dagli elementi contenitori ai contenuti). I CSS gestiscono inoltre il «box model» (ogni elemento è una scatola con contenuto, padding, bordo e margine) e consentono layout adattivi («responsive») che, tramite le media query, riorganizzano la pagina secondo le dimensioni dello schermo: un requisito ormai imprescindibile per la portabilità.

Esempio svolto

Scrivere una regola CSS con selettore di classe

Dato «<p class="avviso">Attenzione</p>», scrivi una regola CSS per un foglio di stile esterno che renda gli elementi di classe «avviso» rossi, in grassetto e con margine superiore di 12 pixel; motiva la scelta del foglio esterno.

Scegliere il selettore
L'elemento porta class="avviso", quindi si usa il selettore di classe, che in CSS si scrive con un punto davanti al nome: .avviso.
Aprire il blocco di dichiarazioni
Dopo il selettore si apre la graffa che racchiude le dichiarazioni proprietà: valore separate da punto e virgola: .avviso { ... }.
Scrivere le tre dichiarazioni
color: red; imposta il colore del testo; font-weight: bold; lo rende grassetto; margin-top: 12px; aggiunge il margine superiore richiesto.
Collegare il foglio esterno
La regola va salvata in un file, per esempio stile.css, richiamato nell'head con <link rel="stylesheet" href="stile.css">, così la stessa regola vale per tutte le pagine del sito.
Motivare la scelta
Il foglio esterno separa nettamente contenuto e presentazione: una sola modifica aggiorna tutte le pagine e mantiene l'HTML pulito, a differenza dello stile in linea che andrebbe ripetuto su ogni elemento.

Risultato: .avviso { color: red; font-weight: bold; margin-top: 12px; } in un file .css collegato con <link>: una regola unica, riusabile e manutenibile su tutto il sito.

Errori frequenti

Usare ovunque lo stile in linea: vanifica la separazione dei livelli e rende impossibile cambiare l'aspetto del sito in un colpo solo.
Confondere classe e id: la classe (con il punto, riutilizzabile su più elementi) e l'id (con il cancelletto, unico nella pagina) non sono intercambiabili; usare lo stesso id su più elementi viola la regola di unicità.

Approfondimento

Il nome «a cascata» nasconde un algoritmo preciso di risoluzione dei conflitti. Quando più regole toccano la stessa proprietà di uno stesso elemento, vince quella con maggiore specificità, calcolata come una terna che conta (identificatori id; classi, attributi e pseudo-classi; elementi): uno stile in linea batte un id, un id batte una classe, una classe batte un selettore di tipo; a parità di specificità prevale l'ultima regola dichiarata, e «!important» scavalca tutto, da usare con parsimonia. A questo si aggiunge l'ereditarietà: alcune proprietà (come il colore del testo o il font) passano dagli elementi contenitori ai contenuti, altre no. Ogni elemento è reso come una scatola del box model — contenuto, spaziatura interna (padding), bordo e margine — e la proprietà «box-sizing» decide se larghezza e altezza comprendano o meno padding e bordo, causa frequente di layout inattesi. I sistemi di disposizione moderni, Flexbox (per allineamenti lungo un asse) e Grid (per griglie bidimensionali), hanno sostituito i vecchi espedienti basati sui «float», permettendo layout robusti; uniti alle media query — regole condizionali sulle dimensioni dello schermo — realizzano il design responsivo, che adatta la stessa pagina dal telefono al monitor. È qui che la separazione fra contenuto e presentazione mostra tutto il suo valore: la stessa struttura HTML, con fogli di stile diversi, può essere ripresentata per media e dispositivi differenti senza toccare il contenuto.

Ripasso attivo

Dato il paragrafo HTML «<p class="avviso">Attenzione</p>», scrivi una regola CSS, da inserire in un foglio di stile esterno, che renda tutti gli elementi con classe «avviso» di colore rosso, in grassetto e con un margine superiore di 12 pixel; spiega poi perché questa soluzione è preferibile allo stile in linea.

Richiamo attivo

Ricorda i punti chiave — poi rivela.

Fonti: Indicazioni Nazionali per i Licei (DPR 89/2010, DM 211/2010) — Obiettivi Specifici di Apprendimento (Ministero dell'Istruzione e del Merito (MIM))

Documenti strutturati e formati di scambio (XML/JSON)#

ApprofondimentoOSA-informatica-DE-documenti-markup — Documenti strutturati e formati di scambio dei dati (cenni a XML/JSON)

Lo stesso dato in XML e in JSON

Fig. 5XML è verboso e facilmente validabile; JSON è conciso e leggero. Entrambi rappresentano lo stesso dato in modo strutturato.

Oltre a descrivere pagine da visualizzare, i linguaggi di markup servono a rappresentare dati strutturati indipendenti dal modo in cui saranno mostrati, così da poterli scambiare fra applicazioni diverse. È questa la funzione di XML e JSON, i due formati più diffusi per l'interscambio dei dati. A differenza di HTML, che ha un insieme fisso di tag con un significato grafico, questi formati separano i dati dalla loro presentazione e ne preservano la struttura logica.

XML (eXtensible Markup Language) è un metalinguaggio: non definisce tag propri ma regole con cui chiunque può definirne, modellando i dati di un dominio specifico (per esempio «<libro><titolo>...</titolo><autore>...</autore></libro>»). Un documento XML deve essere «ben formato» (tag correttamente annidati e chiusi, un solo elemento radice) e può essere «valido» se rispetta uno schema (DTD o XML Schema) che ne descrive la struttura ammessa. La sua struttura, come quella di HTML, è un albero (Fig. 1).

JSON (JavaScript Object Notation) è un formato testuale più leggero, nato per rappresentare dati come oggetti (coppie chiave: valore racchiuse fra graffe) e array (sequenze ordinate fra parentesi quadre); i valori possono essere stringhe, numeri, booleani, null, oggetti o array annidati. È diventato lo standard di fatto per le comunicazioni fra browser e server (per esempio nelle API web), perché è conciso, facilmente leggibile e immediatamente convertibile nelle strutture dati dei linguaggi di programmazione.

La scelta fra i due dipende dallo scopo: XML è più verboso ma più potente nel descrivere documenti complessi, è validabile con schemi rigorosi, supporta attributi e namespace ed è adatto a documenti misti testo/dati; JSON è più compatto, più rapido da leggere e scrivere e ideale per lo scambio di dati strutturati semplici fra applicazioni web. Entrambi sono testuali, leggibili dall'uomo, indipendenti dalla piattaforma e quindi pilastri della portabilità e dell'interoperabilità.

Esempio svolto

Rappresentare un libro in XML e in JSON

Rappresenta i dati di un libro (titolo «Informatica», autore «M. Rossi», anno 2024, disponibile sì) in XML ben formato e in JSON equivalente, e indica dove preferiresti ciascun formato.

Individuare i campi
I dati sono quattro: titolo (testo), autore (testo), anno (numero) e disponibile (booleano). Servono per entrambe le rappresentazioni.
Scrivere l'XML
Si sceglie un elemento radice e si annida un sottoelemento per campo: <libro><titolo>Informatica</titolo><autore>M. Rossi</autore><anno>2024</anno><disponibile>true</disponibile></libro>. I tag sono chiusi e annidati: il documento è ben formato.
Scrivere il JSON
Si usa un oggetto con coppie chiave: valore, chiavi fra virgolette e niente virgola finale: { "titolo": "Informatica", "autore": "M. Rossi", "anno": 2024, "disponibile": true }. I numeri e i booleani non vanno fra virgolette.
Confrontare i due formati
L'XML usa più caratteri (tag di apertura e chiusura) ed è validabile con uno schema; il JSON è più compatto e direttamente mappabile sulle strutture dati di un linguaggio.
Scegliere il contesto
Preferirei JSON per uno scambio rapido di dati fra un'applicazione web e un server (API); preferirei XML per un documento complesso da validare rigorosamente con uno schema o ricco di attributi e namespace.

Risultato: I dati si rappresentano fedelmente sia in XML (verboso ma validabile) sia in JSON (conciso e leggero); JSON è ideale per le API web, XML per documenti complessi e da validare.

Errori frequenti

Considerare XML un linguaggio di programmazione: è un linguaggio di descrizione dei dati, privo di logica esecutiva.
Sbagliare la sintassi JSON: le chiavi vanno fra virgolette doppie, niente virgola dopo l'ultimo elemento e i valori stringa sempre fra virgolette doppie (non singole).

Approfondimento

XML e JSON sono formati di serializzazione: trasformano le strutture dati presenti in memoria (oggetti, liste, record) in una sequenza di caratteri trasmissibile o memorizzabile, e viceversa la deserializzazione (parsing) le ricostruisce nelle strutture del linguaggio ricevente. È questo che rende possibile lo scambio fra sistemi eterogenei: un server scritto in un linguaggio produce JSON, un client scritto in un altro linguaggio lo interpreta. La struttura ad albero di XML si interroga con linguaggi dedicati come XPath e si trasforma con XSLT, mentre la validità di un documento si controlla contro uno schema (XML Schema per XML, JSON Schema per JSON) che ne fissa i campi ammessi, i tipi e le cardinalità — l'analogo, per i dati scambiati, di un controllo di tipo. È in questo ruolo che JSON domina il web: le API in stile REST espongono risorse che il client richiede via HTTP ottenendo in risposta JSON, immediatamente convertibile in oggetti del linguaggio. Rispetto ai formati testuali, i formati binari (come Protocol Buffers) sono più compatti e veloci da elaborare ma non leggibili dall'uomo; il CSV resta comodissimo per dati tabellari semplici ma non rappresenta strutture annidate. La scelta del formato è dunque un compromesso fra leggibilità, verbosità, capacità espressiva e prestazioni, sempre nel segno della portabilità e dell'interoperabilità, gli stessi valori che governano la progettazione delle basi di dati e delle reti.

Ripasso attivo

Rappresenta i dati di un libro (titolo «Informatica», autore «M. Rossi», anno 2024, disponibile sì) prima in XML ben formato e poi in JSON equivalente; indica infine in quale contesto preferiresti ciascun formato.

Richiamo attivo

Ricorda i punti chiave — poi rivela.

Fonti: Indicazioni Nazionali per i Licei (DPR 89/2010, DM 211/2010) — Obiettivi Specifici di Apprendimento (Ministero dell'Istruzione e del Merito (MIM))

Accessibilità e portabilità dei documenti#

StandardOSA-informatica-DE-documenti-markup — Standard, accessibilità e portabilità dei documenti digitali (cenni); produzione di pagine e documenti digitali, ipertesti e collegamenti

I pilastri di un documento accessibile e portabile

Fig. 6Un documento accessibile e portabile poggia su: standard aperti (W3C), HTML semantico, alternative testuali (attributo alt, sottotitoli) e separazione fra struttura e presentazione.

Un documento digitale è davvero «buono» quando, oltre a essere corretto, è accessibile e portabile. L'accessibilità è la qualità per cui il documento può essere fruito da tutti, comprese le persone con disabilità (visive, uditive, motorie) e indipendentemente dalla tecnologia usata; la portabilità è la capacità di essere visualizzato e interpretato correttamente su dispositivi, sistemi operativi e software diversi. Sono due facce della stessa scelta di fondo: aderire a standard aperti invece che a soluzioni proprietarie.

Gli standard nascono da organismi indipendenti: il W3C (World Wide Web Consortium) definisce HTML, CSS e le linee guida per l'accessibilità (le WCAG, Web Content Accessibility Guidelines). Rispettare gli standard e scrivere markup valido (verificabile con i «validatori») garantisce che browser diversi interpretino la pagina allo stesso modo, riducendo gli errori di visualizzazione: è il fondamento tecnico della portabilità.

L'accessibilità si costruisce in larga parte con scelte di marcatura: usare HTML semantico (titoli gerarchici corretti, liste, tabelle con intestazioni) perché i lettori di schermo si orientano sulla struttura; fornire alternative testuali alle immagini con l'attributo «alt» e sottotitoli ai contenuti audio/video; garantire un contrasto cromatico sufficiente e la navigabilità da tastiera; non affidare un'informazione al solo colore. Curare l'accessibilità migliora l'esperienza di tutti gli utenti e, per i siti pubblici, è anche un obbligo normativo.

Sul piano dei formati, la portabilità si ottiene preferendo formati aperti e documentati a quelli chiusi: per i testi destinati alla pubblicazione fedele, il PDF (formato aperto ISO) garantisce che il documento appaia identico ovunque; per i dati, formati testuali come XML, JSON e CSV viaggiano fra applicazioni diverse senza dipendere da uno specifico software. Produrre documenti accessibili e portabili significa, in sintesi, separare struttura e presentazione, aderire agli standard e pensare fin dall'inizio a tutti i possibili lettori e dispositivi.

Esempio svolto

Audit di accessibilità di una pagina difettosa

Una pagina usa solo <div>, immagini senza alt e segnala i link solo con il colore. Individua almeno tre problemi di accessibilità e proponi una correzione di marcatura per ciascuno.

Problema 1: assenza di semantica
Costruire tutto con <div> priva i lettori di schermo di punti di riferimento. Correzione: usare elementi semantici (header, nav, main, article, footer) e titoli gerarchici h1, h2, h3 per dare struttura al documento.
Problema 2: immagini senza alt
Senza l'attributo alt un'immagine è invisibile alle tecnologie assistive. Correzione: aggiungere a ogni immagine un alt descrittivo, per esempio <img src="grafico.png" alt="Grafico delle vendite 2024">; alt="" solo per immagini puramente decorative.
Problema 3: link distinti solo dal colore
Chi non percepisce i colori non riconosce i collegamenti. Correzione: marcarli con l'elemento <a> (che porta un significato, non un colore) e aggiungere un segnale non cromatico, per esempio la sottolineatura, oltre a un contrasto adeguato.
Verifica con uno standard
Si controlla la pagina con un validatore W3C e con le linee guida WCAG, verificando contrasto, navigazione da tastiera e correttezza del markup.

Risultato: I tre interventi (HTML semantico, attributi alt, link marcati con <a> e segnale non solo cromatico) rendono la pagina accessibile e, aderendo agli standard W3C/WCAG, anche più portabile.

Errori frequenti

Ridurre l'accessibilità a un dettaglio estetico: è invece una proprietà strutturale del documento, costruita soprattutto con markup semantico e alternative testuali.
Affidare un'informazione al solo colore (per esempio «i campi in rosso sono obbligatori»): chi non distingue i colori la perde; va sempre aggiunta un'indicazione testuale.

Approfondimento

Le linee guida WCAG del W3C organizzano l'accessibilità attorno a quattro principi, riassunti dall'acronimo POUR: il contenuto deve essere percepibile (alternative testuali, sottotitoli, contrasto sufficiente), utilizzabile (navigabile da tastiera, senza trappole, con tempi adeguati), comprensibile (linguaggio chiaro, comportamento prevedibile) e robusto (interpretabile in modo affidabile da browser e tecnologie assistive attuali e future). Su questi principi poggiano tecniche concrete: la marcatura semantica di HTML5 comunica di per sé la struttura ai lettori di schermo, e dove il markup nativo non basta si aggiungono gli attributi ARIA (ruoli, stati e proprietà) che descrivono alle tecnologie assistive i componenti interattivi complessi. Una buona pagina segue inoltre il miglioramento progressivo (progressive enhancement): parte da una base solida in HTML che funziona ovunque e vi aggiunge stile e interattività come strati opzionali, così che, se CSS o JavaScript non sono disponibili, il contenuto resti comunque fruibile (degradazione elegante). Infine, l'adesione a standard aperti e documentati non serve solo alla portabilità immediata fra dispositivi, ma anche alla conservazione a lungo termine: un documento in un formato aperto resterà leggibile anche quando il software con cui è stato creato sarà scomparso, mentre un formato proprietario chiuso rischia di diventare illeggibile. Accessibilità e portabilità sono così due aspetti di una stessa etica del progetto: pensare a tutti i lettori, oggi e domani.

Ripasso attivo

Ti viene fornita una pagina web che usa solo elementi «<div>», immagini senza attributo «alt» e indica i link soltanto cambiandone il colore. Individua almeno tre problemi di accessibilità e proponi per ciascuno una correzione concreta a livello di marcatura.

Richiamo attivo

Ricorda i punti chiave — poi rivela.

Fonti: Indicazioni Nazionali per i Licei (DPR 89/2010, DM 211/2010) — Obiettivi Specifici di Apprendimento (Ministero dell'Istruzione e del Merito (MIM)) · Esame di Stato del secondo ciclo — quadri di riferimento e griglie di valutazione (Ministero dell'Istruzione e del Merito (MIM))

Riferimenti e fonti

Fonti

Ministero dell'Istruzione e del Merito (MIM)

Elaborazione digitale dei documenti e linguaggi di markup

5 sezioni~26 min di lettura3 competenzeLivello Base 1 · Standard 3 · Approfondimento 1Verificato · 07/2026

Elaborazione digitale dei documenti e linguaggi di markup

Punti chiave

Calcolo della dimensione di un'immagine raster

Punti chiave

Scrivere e leggere un frammento HTML5 ben formato

Punti chiave

Scrivere una regola CSS con selettore di classe

Punti chiave

Rappresentare un libro in XML e in JSON

Punti chiave

Audit di accessibilità di una pagina difettosa

Fonti

Elaborazione digitale dei documenti e linguaggi di markup

Punti chiave

Calcolo della dimensione di un'immagine raster

Punti chiave

Scrivere e leggere un frammento HTML5 ben formato

Punti chiave

Scrivere una regola CSS con selettore di classe

Punti chiave

Rappresentare un libro in XML e in JSON

Punti chiave

Audit di accessibilità di una pagina difettosa

Fonti