Laboratorio di Informatica
Il testo e i sistemi per la gestione del testo
Lezione 3
Il testo
• Testo ha una doppia natura
• rappresentazione visiva del linguaggio
• un segno grafico proprio
• Testo digitale
• Contenuto del testo
• i caratteri e le parole
• Aspetto del testo
• I glifi, i tipi di caratteri, gli attributi, la grandezza
• display a video recupera l’esperienza della tipografia
• Rappresentazione del testo
• schemi di bit per rappresentare i caratteri e immagazzinarli in
memoria
AA 20005/06
© Alberti, Bruschi, Rosti
2
Testo e grafica
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
N
el mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
AA 20005/06
© Alberti, Bruschi, Rosti
3
Testo e grafica
AA 20005/06
© Alberti, Bruschi, Rosti
4
Testo e grafica
Fonti
AA 20005/06
© Alberti, Bruschi, Rosti
5
Testo e grafica
Tipi di fonti
con grazie (serif)
Times, corpo 28
Normale, neretto, corsivo, sottolineato
senza grazie
(sans serif)
spaziatura
proporzionale
Helvetica, corpo 28
Normale, neretto, corsivo, sottolineato
spaziatura
Courier, corpo 28
fissa
Normale, neretto, corsivo, sottolineato
AA 20005/06
© Alberti, Bruschi, Rosti
6
Testo e grafica
Rappresentare il testo digitale
• Ogni carattere è rappresentato con un
numero, inclusi i segni di punteggiatura e le
cifre
• Lettere maiuscole o minuscole hanno
rappresentazione diversa
Hi, Heather.
72 105 44 32 72 101 97 116 104 101 114 46
AA 20005/06
© Alberti, Bruschi, Rosti
7
Testo e grafica
Tabelle di caratteri
• Funzione di corrispondenza tra un insieme di
caratteri e un valore, il suo codice
• Accordarsi su uno standard
• Nessun trasferimento di file sarebbe possibile altrimenti
• ASCII (American Standard Code for Information Interchange)
• Tabella per 128 caratteri, usa 7 bit
• ISO 646: standard ASCII con varianti nazionali
• Problemi di trasferibilità
• Problemi di visualizzazione del codice
AA 20005/06
© Alberti, Bruschi, Rosti
8
Testo e grafica
Formato ASCII esteso
• Utilizza 8 bit, quindi rappresenta 256 valori
• La prima metà è il formato ASCII
• La seconda metà rappresenta vari caratteri speciali
• Le lettere accentate o con segni particolari: umlaut o cediglie
…
• ISO 8859 del 1980 stabilisce lo standard per il
formato ASCII esteso a 8 bit
• 0-127 ISO-Latin 1 (il vecchio ISO 646)
• 128-159 non sono usati
• 160-255 i caratteri speciali
• Ma 256 caratteri non sono comunque sufficienti per
molte lingue
AA 20005/06
© Alberti, Bruschi, Rosti
9
Testo e grafica
Formato ISO10646
• ISO10646 è una collezione di 232 caratteri organizzati
in un ipercubo a 4 dimensioni
• 256 gruppi di 256 piani di 256 righe di 256 caratteri di 8 bit
(g,p,r,c)
• Il formato UNICODE, chiamato anche Basic Multilingual
Plane, è (0,0,r,c) e rappresenta tutti i set di caratteri inclusi il
cinese, il giapponese e il coreano
• Encoding è la funzione che mappa un codice in una
sequenza di byte per la trasmissione o l’archiviazione
• Quoted Printable: i caratteri tra 128 e 255 sono
rappresentati con 3 byte di cui il 1° è il simbolo =, gli altri
contengono il valore del codice in esadecimale
• è diventa =E9
• UCS-2 trasmette solo i due piani utilizzati da UNICODE
• UTF8 inoltre li trasmette in opportune sequenze di byte a 8
bit
AA 20005/06
© Alberti, Bruschi, Rosti
10
Testo e grafica
Sistemi per la gestione dei testi
Due approcci
• Markup: il processo con cui si segna un testo per
specificare il suo layout
• I sistemi di markup: gestori di testo basati su tag
• Descrittori dei comandi da applicare al testo
• I sistemi WYSIWYG (What You See Is What You Get)
• I markup sono presenti ma invisibili: codice binario
eseguibile
• Sostanzialmente una differenza di interfaccia
• Nei sistemi di markup testuale i file sorgenti sono file
di puro testo
• Più adatti al trasferimento tra piattaforme e sulla rete
AA 20005/06
© Alberti, Bruschi, Rosti
12
Testo e grafica
Markup visuale
• Nel markup visuale i tag definiscono
l’apparire del testo
• Es in LaTe: definire un titolo di sezione
centrato
\begin{center}
\fontfamily{hlh}
\fontseries{b} \fontshape{n}
\fontsize{14}{16}
\selectfont Introduzione
\end{center}
AA 20005/06
© Alberti, Bruschi, Rosti
13
Testo e grafica
Markup strutturale
• Nel markup strutturale i tag identificano elementi
logici del documento
\sectionheading{Introduzione}
• Altrove, anche in un diverso file, document style, si
trova la definizione degli elementi strutturali
\newcommand{ \sectionheading} [1]
{
\begin{center}
\begin{flushright}
\bfseries \Large # 1 \bfseries \itshape
\Large\uppercase{#1}
\end{center}
\end{flushright}
}
AA 20005/06
© Alberti, Bruschi, Rosti
14
Testo e grafica
Vantaggi del markup strutturale
• Facilita il cambiamento di layout
• Facilita la localizzazione del documento
• Accomodare prassi diverse di layout tipografico in diversi
paesi
• Facilita la ridefinizione del layout per differenti media
• Segnali sonori per non vedenti
• Separa il layout dalla struttura del documento
• Un meccanismo di astrazione sul testo
• Facilta la manipolazione automatica del testo
• Traduzioni automatiche di formato
• Generazione automatica di indici
AA 20005/06
© Alberti, Bruschi, Rosti
15
Testo e grafica
Standard Generalized Markup
Language
• Introduce la completa separazione tra
struttura e layout visuale
• Esistono solo markup strutturali
• Un meta-linguaggio di markup
• Consente la definizione di propri tag per definire
segmenti di documento
• Paragrafi, indici
• Non solo per marcare testi, anche per
strutturare ogni tipo di dati con documenti che
li descrivono
AA 20005/06
© Alberti, Bruschi, Rosti
16
Testo e grafica
DTD e fogli di stile
• Una DTD (Document Type Definition)
definisce la struttura e non il layout
• Un documento SGML contiene quindi la
descrizione della sua struttura
• Il layout è controllato da:
• I fogli di stile (style sheet)
• I browser interpretano i tag con specifiche di
default
• I fogli di stile vengono specificati con un
linguaggio ad hoc
AA 20005/06
© Alberti, Bruschi, Rosti
17
Testo e grafica
HyperText Markup Language
• CERN di Ginevra
• Linguaggio per autori e un sistema di
distribuzione
• Creare e distribuire sulla rete documenti
digitali integrati
• Linguaggio su cui si basa il World Wide Web
• La rete di computer che comunicano mediante il
protocollo HTTP
• Basato su architettura client-server
• I client tramite browser si collegano ai server
AA 20005/06
© Alberti, Bruschi, Rosti
18
Testo e grafica
Il successo del web
• I protocolli precedentemente usati per il
trasferimento dei file (FTP) prevedevano che i
documenti fossero trasferiti e copiati sulla
macchina per essere consultati
• le fasi di down-load e consultazione erano distinte
• Tramite il web è possibile consultare
direttamente dei documenti online
• il trasferimento dei documenti viene effettuato
automaticamente, in modo trasparente all’utente
AA 20005/06
© Alberti, Bruschi, Rosti
19
Testo e grafica
Il successo del web
• Consente di accedere in modo uniforme a
informazioni di varia natura
• immagini, animazioni, suoni, filmati ...
(multimedialità)
• Con l’introduzione di componenti attive (form,
applet, javascript, php,…) è anche
possibile utilizzare i browser web per
trasmettere informazioni dall’utente al server
AA 20005/06
© Alberti, Bruschi, Rosti
20
Testo e grafica
Le basi tecnologiche
• Le tecnologie che hanno permesso l’ampia
diffusione del web sono:
• gestione degli ipertesti e della multimedialità
• disponibilità di browser (client multi-protocollo)
• efficaci convenzioni per l’identificazione delle
risorse
• utilizzo di un protocollo nella connessione
browser-server web particolarmente semplice
AA 20005/06
© Alberti, Bruschi, Rosti
21
Testo e grafica
Il punto di forza:
la struttura ipertestuale
• È possibile navigare tra le pagine di
documenti che si trovano sul medesimo
computer o su computer diversi, magari a
migliaia di chilometri l'uno dall'altro
• i riferimenti ad altri documenti sono specificati
tramite link
• È semplice da usare:
• mediante l’uso di interfacce grafiche (browser) con
modalità di interazione point-and-click
AA 20005/06
© Alberti, Bruschi, Rosti
22
Testo e grafica
Ipertesti
• L'ipertesto è un testo che può essere letto in
sequenza oppure seguendo i rimandi, i link,
associati alle sue diverse parti
• II lettore può scegliere il percorso di lettura
che preferisce, assecondando liberamente i
suoi interessi
AA 20005/06
© Alberti, Bruschi, Rosti
23
Testo e grafica
Esempio
AA 20005/06
© Alberti, Bruschi, Rosti
24
Testo e grafica
Ipertesti
• In ogni punto del documento può comparire
un punto di ancoraggio (anchor)
• per relazioni
• link ad un’altra parte del medesimo documento
• hyperlink ad un altro documento il linea
• viene visualizzato dai browser in modo diverso
dal testo (in genere sottolineato)
• la selezione (point-and-click) viene interpretata dal
browser come la richiesta di visualizzare il
documento specificato dalla relazione
AA 20005/06
© Alberti, Bruschi, Rosti
25
Testo e grafica
esempio
AA 20005/06
© Alberti, Bruschi, Rosti
26
Testo e grafica
Il linguaggio HyperText Markup
Language
HTML in breve
• Definito sull base di SGML
• In particolare come una SGML DTD per descrivere le pagine
del Web
• Solo un linguaggio di markup
• Separa la definizione della struttura dal suo layout
•
•
•
•
Titoli, paragrafi e sottoparagrafi, liste
Pochi controlli tipografici: italico, grassetto
Tavole e moduli interattivi
Integrazione di media e introduce i legami ipertestuali
• Versione standard è HTML 4.0
AA 20005/06
© Alberti, Bruschi, Rosti
28
Testo e grafica
Evoluzioni di HTML
• I fogli di stile CSS (Cascading Style Sheet)
• per controllare il layout e posizionare
correttamente immagini e testo sulla pagina
• Introduce maggiori capacità di layout
• DHTML (Dynamic HTML)
• In accordo con un CSS consente di cambiare
dinamicamente la posizione di un elemento di stile
• Introduce animazione nella pagina
AA 20005/06
© Alberti, Bruschi, Rosti
29
Testo e grafica
HTML oggi
• Commercializzazione dei browser (metà ’90)
• Numerose estensioni proprietarie non standard
• Uso indebito dei tag
• Per controllare il formato del testo
• Uso massiccio di grafica
• Per controllare meglio il formato
• Persino per le formule matematiche
AA 20005/06
© Alberti, Bruschi, Rosti
30
Testo e grafica
Limiti HTML
• Tag non sufficienti per descrivere la grande varietà di
documenti
• Non consente la definizione di nuovi tag
• Es: un ristorante vuole i menù su web. Quali tag si
usano per definire le diverse entrate?
• Si useranno i tag delle sezioni solo perché il loro display
finale è simile all’importanza che vogliamo dare ai diversi
piatti
• Il markup NON descrive correttamente la struttura del
documento ma una struttura che si presenta simile
• Si perde il vantaggio della strutturazione: un motore di
ricerca non potrebbe cercare i primi piatti ad esempio
• Necessaria un’evoluzione
AA 20005/06
© Alberti, Bruschi, Rosti
31
Testo e grafica
Contenuto vs presentazione
• HTML struttura documenti per rendere il
contenuto più fruibile
• Titoli, liste, paragrafi, immagini
• Non controlla il layout finale
• Non struttura il contenuto
• Per questo viene sostituito dalla sua
evoluzione:
• il linguaggio XML (eXtensibile Markup Language)
AA 20005/06
© Alberti, Bruschi, Rosti
32
Testo e grafica
eXtensibile Markup Language
• Raccomandazione del W3C nel 1998
• Adattamento di un sottoinsieme SGML per il Web
• Consente di definire DTD per ogni tipo di documenti,
superando i limiti di HTML
• Esperti definiscono DTD specifiche, che condividono
caratteristiche di base di XML
• Browser le interpretano
• XML diventa un’infrastruttura che supporta vari
meccansimi per strutturare testi e documenti
multimediali non solo per il web
AA 20005/06
© Alberti, Bruschi, Rosti
33
Testo e grafica
Esempi di DTD per XML
• SMIL (Synchronized Multimedia Integration
language)
• linguaggio per la presentazione di coreografie
multimediali, in cui audio, video testo e grafica
sono integrati e sincronizzati in tempo reale
• Consente di specificare cosa e quando presentare: una
frase sincronizzata con un’immagine
• SVG (Standard Vector Graphics)
• Linguaggio per la definizione di grafica vettoriale,
inteso a superare le gravi limitazioni di HTML nella
gestione di documenti ricchi in multimedialità
AA 20005/06
© Alberti, Bruschi, Rosti
34
Testo e grafica
Esempi di DTD per XML
• MathML (Math Markup Language)
• XFDL (eXtensibile Forms Description
Language)
• RDF (Resource Description Framework)
• Fornisce uno standard per la definizione di
metadati
• Metadati: dati sul documento, il linguaggio o etichette per
la descrizione del contenuto
AA 20005/06
© Alberti, Bruschi, Rosti
35
Testo e grafica
Strumenti di sviluppo
• Minimo: un editor di testi (NotePad o SimpleText) e
un browser
• Applicazioni di tipo WYSIWYG (What You See Is
What You Get) dedicate (NetscapeComposer, W3C
Amaya)
• Cautela: supporto allo standard 4.0
• Comporre i documenti e poi inserire i tag oppure
inserire i tag durante la composizione ?
• Controllori di sintassi: HTML Tidy distribuito dal W3C
AA 20005/06
© Alberti, Bruschi, Rosti
36
Testo e grafica