Laboratorio di Informatica per chimica LEZIONE 5 Applicazioni per l elaborazione di testi. Richiami Algoritmo, programma, dato Software di sistema e software applicativo Programmi e dati File e tipi di file 1 2 I programmi per l elaborazione di testi hanno rivoluzionato il modo di: scrivere archiviare recuperare documenti Un programma per l elaborazione di testi oggi: consente di produrre con facilità documenti formattati che utilizzano tipi di caratteri diversi, con vari tipi di impaginazione dei paragrafi, con elenchi puntati e numerati, con note a pie di pagina, contenenti tabelle, immagini e altri tipi di oggetti, fornisce strumenti per il controllo ortografico e la generazione automatica di indici. 3 4
Terminologia - carattere Typeface: aspetto del carattere Proporzionalità non proporzionali (Courier) proporzionali (Times, Helvetica) Grazie senza grazie (sans serif) o a bastone (Helvetica) con grazie (serif) (Times) Dimensione o corpo: altezza del carattere, generalmente misurata in punti (pt) 10 pt, 14 pt, 24 pt, 32 pt, 40 pt Terminologia - carattere Stile: altra variante dell aspetto del carattere grassetto (bold) corsivo (italic) sottolineato (underlined) Font: insieme di typeface, dimensione e stile Es.: Times bold 28 pt 5 6 Terminologia - paragrafo Centratura Allineamento a sinistra o a destra Giustificazione Rientro Numerazione di pagine, righe, sezioni Controllo di vedove (ultima riga del paragrafo nella pag. successiva) orfani (prima riga del paragrafo come ultima riga della pagina) 7 Impaginazione: Terminologia Testo su più colonne Intestazione e piè pagina (testo fisso) Altre funzionalità: Sillabazione Indici 8
Due approcci: Formattatori di testo Word processor Editor Programma che fornisce le funzionalità essenziali per l elaborazione di testi Es. Blocco note per Windows vi per Unix/Linux Esistono editor sensibili ai comandi (per generare codice di programmazione) 9 10 Editor - funzionalità Scrittura selezione, cancellazione (cut), copia (copy), reinserimento (paste) scorrimento (scrolling) verticale e orizzontale della finestra a capo automatico (word wraparound) ricerca (find) e sostituzione (replace) annullamento (undo) o ripetizione (redo) dell ultimo comando memorizzazione su file, inclusione di altri documenti, apertura simultanea di più file, ecc. Formattatori di testo Sia il testo che i comandi di impaginazione sono inseriti utilizzando un editor convenzionale. Si ottiene un file sorgente di descrizione della pagina. Il file sorgente è un semplice file di testo (in formato ASCII). Il file viene poi interpretato o da un programma che lo visualizza (es. browser per i file HTML) o che lo converte in un nuovo formato stampabile e visualizzabile (es. LaTex dvi ps). 11 12
Formattatori di testo I linguaggi per la formattazione sono detti linguaggi di markup LaTex: linguaggio di composizione tipografica (basato su TeX) che offre la possibilità di comporre documenti scientifici, ma non solo, ad un livello di qualità professionale. Il suo interprete è gratuito. HTML: linguaggio per la creazione di ipertesti. È il linguaggio con cui è costruito il World Wide Web. HTML Esempio di file HTML (esempio) <HTML> <HEAD> <TITLE>Laboratorio di informatica per chimica</title> </HEAD> <BODY> <CENTER> <H2>Laboratorio di informatica</h2></center> <HR> <A NAME="LINK"> </A> <H3>LINK A...</H3> <P> <UL> <LI><A HREF="http://www.unimi.it/">Università degli Studi di Milano</A> <LI><A HREF="http://www.matricola.unimi.it/home/home.asp">Matricola 2001</A> (Informazioni e opportunità per le matricole 2001-02 </UL> </BODY> </HTML> 13 14 Esempio HTML Word processor WYSIWYG (What You See Is What You Get): La composizione del documento e la sua visualizzazione vanno di pari passo. I comandi di formattazione sono offerti da bottoni e menu (o combinazioni di tasti) e la loro codifica non è visibile all utente. 15 16
Word processor Esempio di interfaccia WYSIWYG: MSWord Un sistema WYSIWYG: MSWord 17 18 MSWord: caratteri Gli attributi di un carattere sono: MSWord: paragrafi Gli attributi di un paragrafo sono: Stile: grassetto, corsivo, sottolineato,... Nome: times roman, arial, courier,... Dimensione: 12pt, 20pt, 32pt,. Allineamento: a sinistra, centrato, a destra, giustificato A sinistra centrato a destra giustificato.... 19 20
MSWord: paragrafi interlinea: singola, doppia, ecc. indentazione In genere la prima riga di un paragrafo ha un margine rientrato rispetto alle righe successive. (interlinea 1) Oppure, la prima riga può avere un margine normale e le righe successive avere un margine rientrato. (il 1,5) I paragrafi possono avere margini rientrati sia a destra che a sinistra (il 2). 21 Puntati MSWord: elenchi pippo pluto Numerati 1. Chimica industriale 2. Chimica applicata e ambientale Strutturati 1. Capitolo I 1.1 Sezione 1 1.2 Sezione 2 2. Capitolo II 2.1 Sezione 1 2.2 Sezione2 22 MSWord: note, intestazione, pie pagina MSWord: tabelle Una tabella è caratterizzata da righe e colonne Gli spazi definiti dalle intersezioni tra le righe e le colonne formano le celle Quando si digitano dei dati in una cella, il testo va a capo automaticamente e la cella adatta la propria profondità ai dati inseriti Ogni cella può essere formattata in modo indipendente dalle altre 23 24
Esempio: MSWord: tabelle Nome Cognome Matricola Claudia Airoldi 626756 Samuele Amantea 672555 Paolo Arensi 630524 MSWord: funzionalità trova / sostituisci controllo ortografico import/export gestione altri formati figure collegamenti ipertestuali stampa d unione anteprima di stampa stampa 25 26 MSWord: macro Permettono di creare semplici procedure (sequenze di comandi) definite dall utente e di associare ad esse semplici combinazioni di tasto per richiamarle. Esempio: macro che scrive i propri Nome Cognome Matricola combinazione di tasti = ALT + y MSWord: stili modelli (template): permettono di definire uno stile e uno scheletro su cui costruire il documento stili: permettono di definire gli stili (carattere, tipo di paragrafo, ecc.) per le varie parti di un documento (diversi livelli di titoli, paragrafo normale, didascalie, ecc.) 27 28
MSWord: stili HTML HyperText Markup Language permette la creazione di documenti multimediali ipertestuali è il linguaggio per la creazione di pagine Web; è semplice; può essere visualizzato da tutte le piattaforme; una stessa pagina può però apparire in modo diverso a seconda del il tipo di computer, di monitor, di velocità di connessione e di software utilizzato per la visualizzazione (browser). 29 Ipertesti 30 Esempio L'ipertesto è un testo che può essere letto sequenzialmente oppure seguendo i rimandi (link) associati alle sue diverse parti II lettore può scegliere il percorso di lettura che preferisce, assecondando liberamente i suoi interessi 31 32
Ipertesti esempio In ogni punto del documento può comparire un etichetta per relazioni (link) ad un altra parte del medesimo documento (hyperlink) ad un altro documento il linea viene visualizzata dai browser in modo diverso dal testo (in genere sottolineato) la selezione (point-and-click) viene interpretata dal browser come una richiesta di visualizzare il documento specificato 33 34 etichetta Multimedialità Indica l insieme delle tecnologie finalizzate alla gestione integrata di informazioni basate su media differenti testi singole immagini immagini in movimento (animazioni, filmati) suoni programmi 35 HTML È un linguaggio basato sull uso di tag (marcatori), cioè parole chiave racchiuse tra i segni minore (<) e maggiore (>), che svolgono diverse funzioni formattazione dello stile del testo rimandi (collegamenti ipertestuali) ad altre risorse disponibili sul WWW definizione di maschere di inserimento dati inclusione di altri oggetti complessi, quali immagini, suoni, video (multimedialità) Un documento HTML viene salvato in formato ASCII, ed è quindi universale. 36
HTML: tag Alcuni tag prevedono un identificatore di inizio (<tag>) e di fine marcatura (</tag>) altri sono dei tag singoli (es.: <HR>, <BR>). Esistono delle codifiche per rappresentare in modo universale ed indipendente dalla piattaforma i caratteri ASCII non standard (es.: lettere accentate). HTML: tag Molti tag hanno attributi speciali che permettono una scelta fra alcune opzioni Gli attributi possiedono valori. In genere i valori vanno racchiusi tra virgolette In HTML l uso del maiuscolo o minuscolo ha il solo scopo di migliorare la leggibilità del codice. 37 38 HTML: tag È il browser utilizzato dall'utente ad occuparsi di tradurre correttamente i tag HTML per visualizzare una pagina, includendo eventuali oggetti complessi immagini animazioni suoni HTML: un semplice esempio <HTML> <HEAD> <TITLE>La mia pagina</title> </HEAD> <BODY BGCOLOR=#ffffff> <H1>Benvenuti!</H1> Questa è la mia pagina. Visita il sito del <A HREF="http://www.dsi.unimi.it">DSI</A>. </BODY> </HTML> 39 40
HTML: tag per formattare titoli: <H1>...</H1>, <H2>...</H2>,...,<H6>...</H6> paragrafo: <PALIGN=RIGHT LEFT CENTER>...</P> fine riga: <BR> HTML: caratteri speciali lettere accentate : à=à è=è é=é í=í ò=ò ú=ú simboli : > < &=& linea: <HR SIZE=n WIDTH=m ALIGN=x NOSHADE> testo a spaziatura fissa preformattato: <PRE>...</PRE> 41 42 HTML: tag per i caratteri tipo del carattere: <FONT SIZE=n COLOR=#rrggbb FACE="font">...</FONT> stile del testo: bold: <B>...</B> italic: <I>...</I> typewriter: <TT>...</TT> enfatizzato: <EM>...</EM> sottolineato: <U>...</U> ingrandimento <BIG>...</BIG> e riduzione <SMALL>...</SMALL> della dimensione del carattere apici: <SUP>...</SUP> e pedici <SUB>...</SUB> 43 HTML: liste ed elenchi <UL TYPE=CIRCLE> <LI> Primo elemento <LI> Secondo elemento <LI> Terzo elemento </UL> <OL> <LI> Primo elemento <LI> Secondo elemento <LI> Terzo elemento </OL> <OL> <LI> Primo elemento <OL TYPE=a> <LI> Secondo elemento </OL> <LI> Terzo elemento </OL> 44
HTML: immagini È possibile includere nella pagina delle immagini. È necessario indicare il nome del file in formato GIF o JPEG specificandone la collocazione mediante una URL: HTML: esempio <IMG SRC="/gif/mczolor.gif" ALT="Mozilla"> Questa è una immagine visualizzata alla destra del testo... <IMG SRC="http://host.domain/file.gif" ISMAP HEIGHT=h WIDTH=w BORDER=n ALIGN=RIGHT LEFT TOP MIDDLE BOTTOM ALT="testo alternativo"> 45 46 HTML: collegamenti ipertestuali Definizione di una etichetta (hotword) con collegamento ad una URL <A HREF="URL">etichetta</A> HTML: collegamenti ipertestuali Collegamento ipertestuale ad un àncora definita all'interno di un documento <A HREF="URL#àncora">etichetta<A> Definizione di un àncora da utilizzare per un link ad un punto specifico all'interno del documento corrente <A NAME= àncora">testo</a> Definizione di un link ad un indirizzo di posta elettronica per l'invio di una E-mail <A HREF="mailto:nome@dominio">Nominativo</A> 47 48
HTML: form È possibile costruire delle maschere o moduli (form) per l invio di dati CGI (Common Gateway Interface) è lo standard per l invio di informazioni tra server e script uno script CGI è quindi un programma, normalmente scritto in Pearl, che comunica con il server in un linguaggio standard i dati vengono passati come parametri a procedure CGI appositamente predisposte sul server web che li acquisiscono e li elaborano. HTML: form <HTML> <HEAD> <TITLE>E-Mail Form</TITLE> </HEAD> <BODY> <FORM method="post" action="invio.php"> <P>Your Name:<br> <INPUT type="text" name="sender_name" size=30> </p> <P>Your E-Mail Address:<br> <INPUT type="text" name="sender_email" size=30> </p> <P>Message:<br> <textarea name="message" cols=30 rows=5></textarea> </p> <INPUT type="submit" value="send This Form"> </FORM> </BODY> </HTML> 49 50 HTML: form Fogli di stile (CSS) I Cascading Style Sheet (CSS) consentono di impostare molteplici proprietà per tutti gli elementi della pagina marcati da un tag, offrendo quindi una maggior flessibilità e precisione di formattazione della pagina possono essere definiti all interno o all esterno del documento 51 52
Fogli di stile (CSS) Esempio <HTML><HEAD> <TITLE>La mia pagina con i SS</TITLE> <STYLE> H1 {color:lime;font: normal 24pt Arial, Times P {color:blue; font: normal 18pt "Times"} </STYLE></HEAD> <BODY BGCOLOR=#ffffff> <H1>Benvenuti!</H1> Questa è la mia pagina. Visita il sito del <A HREF="http://www.dsi.unimi.it">DSI</A>. </BODY> </HTML> 53 Script Pagine dinamiche programmi eseguibili in una pagina Web es: aprire una finestra di avviso caricare versione della pagina a seconda del browser modificare un frame secondo la posizione del mouse scritti generalmente in JavaScript linguaggio supportato dalla gran parte dei browser rappresentano le fondamenta dell HTML dinamico (DHTML). 54 Esempio Pagine dinamiche Tabella dei colori <HTML><HEAD> <TITLE>Esempi di script</title> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> document.write("today is "+Date()) </SCRIPT> <P>Testo testo </BODY></HTML> 55 56