Il testo e i sistemi per la gestione del testo Lezione 3 Laboratorio di Informatica.

Il testo e i sistemi per la gestione del testoLezione 3

Laboratorio di Informatica

AA 20005/06© Alberti, Bruschi, Rosti

Testo e grafica

2

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


Testo e grafica

3

Nel mezzo del cammin di nostra vita

mi ritrovai per una selva oscura

Nel mezzo del cammin di nostra vita

mi ritrovai per una selva oscura


Testo e grafica

4


Testo e grafica

5

Fonti


Testo e grafica

6

Tipi di fonti

Times, corpo 28Normale, neretto, corsivo, sottolineato

Helvetica, corpo 28 Normale, neretto, corsivo, sottolineato

Courier, corpo 28 Normale, neretto, corsivo, sottolineato

con grazie (serif)

senza grazie(sans serif)

spaziatura proporzionale

spaziatura fissa


Testo e grafica

7

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

H i , H e a t h e r .H i , H e a t h e r .

72 105 44 32 72 101 97 116 104 101 114 46


Testo e grafica

8

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


Testo e grafica

9

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


Testo e grafica

10

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

Sistemi per la gestione dei testi


Testo e grafica

12

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


Testo e grafica

13

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}


Testo e grafica

14

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}

\bfseries \Large # 1

\end{center}

}

\begin{flushright}

\bfseries \itshape \Large\uppercase{#1}

\end{flushright}


Testo e grafica

15

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


Testo e grafica

16

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


Testo e grafica

17

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


Testo e grafica

18

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


Testo e grafica

19

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


Testo e grafica

20

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


Testo e grafica

21

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


Testo e grafica

22

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


Testo e grafica

23

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


Testo e grafica

24

Esempio


Testo e grafica

25

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


Testo e grafica

26

esempio

Il linguaggio HyperText Markup Language


Testo e grafica

28

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


Testo e grafica

29

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


Testo e grafica

30

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


Testo e grafica

31

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


Testo e grafica

32

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)


Testo e grafica

33

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


Testo e grafica

34

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à


Testo e grafica

35

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


Testo e grafica

36

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

Il testo e i sistemi per la gestione del testo Lezione 3 Laboratorio di Informatica.

Documents

Transcript of Il testo e i sistemi per la gestione del testo Lezione 3 Laboratorio di Informatica.