0

APERTURA

1

Nella lezione di oggi vedremo insieme:

• cos'è un testo digitale e cos'è un ipertesto
• come si trasforma un pagina di un libro in un testo digitale
• in che modo gli elaboratori di testo possono essere utili nella didattica
• quali attività didattiche si possono svolgere con i testi elettronici
• quali sono le caratteristiche fondamentali del linguaggio HTML per la creazione di ipertesti in rete

VO speaker su grafica

2

Benvenuti nella quarta lezione del corso di formazione a distanza sull'uso della multimedialità nella scuola, organizzato dal Ministero della Pubblica Istruzione e da RAI Educational.

Oggi ci occuperemo di testi e di ipertesti. Come voi tutti ben sapete lo studio dei testi e tramite i testi è sempre stata l'attività predominante in tutti gli ordini e gradi di scuole. Che ruolo svolgerà la comunicazione testuale in una scuola che si dedica sempre più all'analisi e all'uso degli altri codici comunicativi?

Carlo CK su home page

3

Cercheremo di rispondere a questo interrogativo assieme a Gino Roncaglia (Carlo saluta Gino) e ai nostri insegnanti ospiti. Abbiamo con noi oggi i professori: Stefano Giornetti, (saluti); Alessandro Rabbone, (saluti); e Nanda Cremascoli (saluti)

Ma prima di passare direttamente ai nostri temi, vi devo avvertite che la lezione di oggi avrà una struttura un po' atipica rispetto alle altre; infatti, sarà divisa in due parti separate. Una che si occupa si occupa dei testi elettronici e del loro uso nell'ambito della didattica, e un'altra che si occupa di quel tipo particolare di testi che è rappresentato dagli ipertesti, e in particolare dagli ipertesti destinati all'inserimento in rete. In questa seconda parte parleremo anche di HTML, il linguaggio più diffuso per la costruzione di ipertesti, quello su cui si basa il World Wide Web.

Carlo + Gino + ospiti

Giornetti, insegnante di Italiano e Latino, del Liceo Classico "G. Mameli" di Roma;

Rabbone, insegnante della Direzione Didattica di Gassino - Torino, ma comandato dall'anno scorso presso l'IRRSAAE Piemonte;

Nanda Cremascoli (?)

4

LA LEZIONE - Parte I

Jingle

5

[Carlo]: "Iniziamo quindi con il primo argomento di oggi. Allora Gino, forse possiamo partire da un tema un po' polemico e molto discusso: corriamo davvero il rischio di formare degli studenti che sappiano analizzare e utilizzare anche molto bene il linguaggio dei nuovi media, ma siano incapaci a scrivere correttamente nella propria lingua?"

[Gino]: "Il rischio c'è. Ma non è affatto una conseguenza implicita della penetrazione della multimedialità nella scuola. Anzi, proprio per quanto riguarda la diffusione della scrittura e della cultura scritta il computer e Internet, invece di rappresentare dei nemici per gli insegnanti, possono rivelarsi per loro dei formidabili alleati.

La scrittura e la lettura continueranno ad essere delle attività fondamentali anche nella scuola della multimedialità e su di esse seguiterà a concentrarsi, giustamente, l'attenzione degli insegnanti. Non credo che assisteremo ad una svalutazione della comunicazione testuale, quanto ad una sua integrazione con gli altri codici comunicativi. Le tecnologie informatiche inoltre potranno aiutare a svolgere in modo più proficuo proprio quelle attività didattiche tradizionali come la composizione di un tema o di un riassunto, l'analisi di un testo letterario, la produzione di una relazione di una ricerca. Basta pensare al ruolo di programmi molto diffusi come gli elaboratori di testo, che permettono oggi agli studenti di produrre dei documenti testuali più organici e più efficaci."

[Carlo]: "Integrazione di testi con suoni, immagini e filmati, quindi, più che sostituzione di questi al testo. Integrazione e convergenza di tutti questi formati in un'unica codifica: quella digitale. Nelle prossime lezioni vedremo cosa sono le immagini, i suoni e i filmati digitali; oggi chiediamoci solo cos'è un testo digitale? Vi siete mai chiesti come fa il computer, che come tutti sanno è in grado di manipolare solo bit, e cioè '0' e '1', a rappresentare oggetti più complessi come i testi, ossia successioni, stringhe di molti caratteri diversi?

Vediamolo insieme."

Carlo + Gino

6

La codifica binaria dei testi

Un testo [=] non è altro che una sequenza di caratteri.

[1]

Una sequenza lunga quanto vogliamo, ma sempre costruita a partire da un insieme finito di caratteri: [2]

le lettere maiuscole e minuscole dell'alfabeto, i numerali, ma anche tutti i segni di interpunzione e ovviamente lo spazio vuoto.

Se ad ogni carattere utilizzato associamo in modo biunivoco un numero binario [3] - un numero cioè costruito utilizzando solo le due cifre '0' e '1' - otteniamo una tabella di corrispondenza tra caratteri e numeri binari. Una tabella di questo tipo è alla base della codifica binaria dei caratteri .

I computer lavorano, come sappiamo, 'macinando' lunghe sequenze di bit. [4] Ogni bit corrisponde proprio a uno '0' o a un '1'. Attraverso la codifica binaria dei caratteri, queste sequenze di '0' e '1' possono rappresentare dei testi.

Ovviamente è indispensabile che diversi computer usino la stessa tabella di corrispondenza, altrimenti un testo significativo su un computer [5] apparirebbe come un'accozzaglia incomprensibile di simboli su di un altro [6].

Esistono diverse modi di codificare il testo; quello più conosciuto è il codice Iso-Latin 1, basato sul vecchio codice ASCII (American Standard Code for Information Interchange). Il codice Iso-Latin 1 associa a ogni carattere un numero binario lungo otto cifre, ovvero otto bit. Questi 8 bit permettono 256 combinazioni diverse di '0' e '1', e permettono dunque di codificare 256 caratteri diversi. [7] In questa codifica alla lettera "A" maiuscola corrisponde ad esempio il numero binario "10000001"; alla lettera "B" maiuscola, il binario "10000010"; e così via.

Per esempio, la frase "oggi piove" [8] diventa questa sequenza di cifre binarie. [la sequenza si vede a schermo ma non viene letta dallo speaker]

01001111 asc(g) asc(o)
01000111
01000111
01001001
00100000
01010000
01001111
01010110
01000101

VO su scheda grafica

Suggerimenti per l'animazione, parole in grassetto in grafica:

1. compare "nel mezzo del cammin di nostra vita": si illuminano o ingrandiscono rapidamente in sequenza le singole lettere
2. Come su una slot machine girano varie lettere e simboli di interpunzione
3. Si crea progressivamente una tabella: prima colonna a,b,c,d,e,f, seconda colonna numeri binari
4. Come in una slot machine, sequenze di numeri binari che si trasformano in lettere
5. in una grande icona di computer sulla sinistra: una sequenza di numeri binari che si trasforma in una frase dotata di senso a sinistra
6. A destra che diventa accozzaglia di simboli
7. Parte di codice ASCII (American Standard Code for Information Interchange).
8. In alto 'Oggi piove' sotto i byte che la rappresentano. Tra lettere e cifre delle frecce

7

IL CASO DI STUDIO - Parte I

Jingle

8

Bene, dopo aver visto come fanno i computer a rappresentare i testi, vediamo insieme alcuni esempi concreti di uso dei testi elettronici nell'ambito dell'attività didattica. Il primo filmato è stato girato nel Liceo Classico "Mameli" di Roma, e il secondo nel Liceo Scientifico "Giordano Bruno" di Melzo e Cassano

Carlo

9

(Sottopancia - Prof. Giornetti e Prof.ssa Marvasi e la classe ... del Liceo Classico "Mameli" di Roma)

[Giornetti]: "Allora [nome studente] sei riuscito a trovare il testo dell'Antigone di Sofocle?

[Studente]: "Si professore. Ho fatto come mi ha detto; sono andato sul sito del Perseus Project della Tufts University di Boston ed ho trovato sia il testo in greco che quello in inglese" [si devono vedere prima la pagina con il testo greco e poi quella con il testo inglese]

[Giornetti]: "Bene, allora salvali entrambi in un file di word"

[mentre la professoressa parla si deve vedere anche la pagina con il testo greco]

[Marvasi]: "Allora ragazzi, come vi dicevo questo primo verso [la prof.ssa legge il verso] contiene il (termine, lemma?) ....... che può presentare qualche difficoltà di interpretazione. Infatti può significare sia... che... [(e quindi potremmo tradurre l'intero verso...) sistemare]

[Giornetti]: " Per approfondire meglio questo punto potremmo servirci del dizionario in linea greco-inglese, Liddel-Scott, nell'editio maior. Consultandolo possiamo accedere direttamente ai testi citati nei lemmi del dizionario e presenti nel sito; inoltre è disponibile un analizzatore morfologico, che permette di risalire da ogni parola greca al suo lemma; un potente motore di ricerca consente, infine, di individuare le occorrenze delle parole greche nei testi presenti di cui si forniscono anche le frequenze. [sistemare]

Facciamo clic, su [termine di prima] e accediamo ai commenti...

[sistemare]

Possiamo addirittura vedere in quali testi , tra i 750 ? greci presenti nel data base del Progetto Perseus , ci sono delle altre occorenze di questo termine.

Impostiamo la ricerca.

Ecco vedete compare solo in... e...

[sistemare]

[Marvasi]: "Il fatto che compare solo in .... [autore, opera] ci conferma che è un termie rara nel greco classico [invento, sistemare come Giornetti ritiene opportuno]

[Marvasi interviene sulla difficoltà di traduzione del primo verso e l'importante aiuto che viene offerto dal vocabolario greco-inglese Liddel Scott in linea]

Contributo filmato

Uno studente al computer collegato ad Internet. Gli altri seduti in aula. Le schermate vengono proiettate sul grande schermo tramite videoproiettore.

Giornetti e Marvasi in piedi.

Giornetti si siede al posto dello studente

10

Descrizione della scena:

1. gli studenti sono seduti ognuno alla sua postazione e svolgono il compito; brevi suggerimenti da parte dell'insegnante (Flores Reggiani)
2. si vedono una schermata di un ragazzo che sta scrivendo il suo tema in modalità "Normale"
3. passa poi alla modalità "struttura" per controllare la scaletta del suo tema
4. lo stesso studente ritorna da modalità "struttura" a "normale" e comincia a scrivere i contenuti del tema
5. si vede la classe in generale
6. si vede la schermata di un altro ragazzo che sta usando il correttore ortografico
7. commento audio di Flores Reggiani sulle scene che si vedono

Contributo filmato

Liceo scientifico statale Giordano Bruno Melzo (Milano)

Docente: Flores Reggiani (Nanda Cremascoli)

11

Carlo: "Per svolgere delle operazioni sui testi, come quelle che abbiamo visto nel primo esempio, occorre naturalmente un testo in formato elettronico. Cominciamo allora dall'inizio: come procurarselo?"

Gino: "Ci sono essenzialmente tre strade.

La più ovvia, ma anche la più faticosa, consiste nel servirsi di un qualunque programma di elaborazione testi e digitare manualmente il testo. La seconda strada consiste nel servirsi di uno scanner per acquisire l'immagine della pagina stampata che ci interessa e di un programma di riconoscimento caratteri per trasformare l'immagine in caratteri ASCII; malgrado questi programmi funzionino ormai piuttosto bene è sempre meglio rivedere il testo e correggere il piccolo numero di caratteri non riconosciuti correttamente.

Ma se siamo fortunati potremo anche trovare in rete o su CD-Rom i testi che ci interessano. I testi disponibili sono molti di più di quanto non si creda, e il loro numero aumenta assai velocemente.

Carlo: "I programmi di videoscrittura non hanno bisogno di presentazioni; programmi come Word o come StarWriter sono molto intuitivi e sono sicuramente tra i primi programmi che si imparano ad usare quando ci si avvicina per la prima volta al computer, soprattutto in ambito scolastico. Mentre forse vale la pena che Gino, assieme alla professoressa Mastroianni, ci facciano vedere in dettaglio come si acquisisce un testo tramite scanner."

Carlo + Gino

Su wideowall immagini di riporto:

pezzo primo filmato

studente che digita testo

acquisizione di testo tramite scanner

Testo scaricato da Internet

12

[Gino]: "Vogliamo provare a trasformare la prima pagina dei Promessi Sposi in un testo digitale?"

[Marisa]: "Sì. Come prima cosa dobbiamo acquisire l'immagine della pagina tramite lo scanner".

[Gino]: "Il programma di acquisizione - fornito quasi sempre assieme allo scanner - produce sul nostro schermo l'immagine della pagina. Questa immagine, si badi bene, non è ancora un testo - non possiamo per esempio modificarne alcune parole. Per farlo diventare un testo digitale abbiamo bisogno di un programma particolare che analizza l'immagina ottenuta e cerca di riconoscere le forme dei caratteri stampati e di trasformale in caratteri ASCII. I programmi in grado di svolgere questa operazione si chiamano OCR - Optical Character Recognition, programmi di riconoscimento ottico dei caratteri.

[Marisa]: "Ho avviato l'OCR, che mi ha dato questo testo: (legge una riga".

[Gino]: " Malgrado siano piuttosto accurati, gli OCR compiono sempre qualche errore. Ed è quindi molto importante rivedere il testo acquisito e correggere i caratteri riconosciuti erroneamente. A questo punto possiamo salvarlo. Il testo 'estratto' dall'immagine della pagina potrà ora essere utilizzato all'interno di un qualunque programma di videoscrittura".

Gino + Marisa Mastroianni

Gino ha in mano il libro; lo passa a Marisa che alza il coperchio dello scanner, appoggia il libro aperto sullo scanner e avvia la scansione .

Si vede l'immagine della pagina sullo schermo.

Optical Character Recognition in sovrimpressione grafica

Marisa corregge errori

E salva testo

13

E per quanto riguarda il reperimento dei testi elettronici in rete? Come possiamo fare e dove possiamo trovarli?

Carlo

14

Esistono molti siti dove è possibile trovare testi elettronici su vari argomenti. Un buon esempio è dato dalla più famosa biblioteca virtuale italiana, quella del progetto Manuzio. Vi si arriva attraverso il sito di Liber Liber, un associazione culturale senza fini di lucro, nata nel 1993 proprio a supporto del progetto. Obiettivo è la realizzazione di una biblioteca di testi elettronici liberamente e gratuitamente consultabili e scaricabili, e le pagine del Manuzio comprendono già diverse centinaia di opere.

Se vogliamo cercare un testo possiamo consultare il catalogo disponibile o per autori o per opere.

Immaginiamo di voler cercare una poesia di Guido Gozzano. Non dovremo far altro che cliccare su autori e poi sulla G e quindi su Gozzano.

Nella pagina dedicata a Gozzano, troviamo alcuni cenni biografici sull'autore; una raccolta di fiabe e tutte le poesie; che possiamo leggere subito in rete... così...

[a tutto schermo si deve poter leggere facilmente le prime righe de Le due Strade]

oppure scaricare in formato HTML o in formato ASCII;

[click su TXT e salva su disco]

entrambi i file sono compressi per velocizzare la trasmissione; quindi una volta scaricati si dovrà avere un programma come Winzip per decomprimerli. Informazioni su questo programma e sulle operazioni di decompressione sono disponibili sia sul sito Internet sia sui CD-ROM del corso.

Navigazione Mila

• http://www.liberliber.it/
• http://www.liberliber.it/home/index.htm
• http://www.liberliber.it/biblioteca/a/index.htm
• http://www.liberliber.it/biblioteca/opere/a/
  index.htm
• http://www.liberliber.it/biblioteca/g/index.htm
• http://www.liberliber.it/biblioteca/g/gozzano/
  index.htm
• http://www.liberliber.it/biblioteca/g/gozzano/
  tutte_le_poesie/html/index.htm
• http://www.liberliber.it/biblioteca/g/gozzano/
  tutte_le_poesie/html/colloqui.htm
• http://www.liberliber.it/biblioteca/g/gozzano/
  tutte_le_poesie/html/colloqui.htm#3

15

Una volta che abbiamo il testo digitale, possiamo usarlo per moltissimi scopi: inserirlo in pagine web o presentazioni; utilizzarlo per analisi statistiche sul vocabolario e sulle scelte stilistiche dell'autore, come nell'esempio che abbiamo visto, e così via.

Ma la scuola non è solo il luogo dove si impara ad analizzare i testi; il suo scopo è anche quello di insegnare a produrre testi ben scritti.

Vediamo di che utilità possono essere gli attuali word processor nella didattica della composizione scritta. Ci limiteremo necessariamente solo a qualche esempio.

Carlo

16

Molti degli attuali elaboratori di testo - l'esempio che vediamo si riferisce a Word - permettono di passare facilmente dalla visualizzazione normale di un testo alla visualizzazione struttura.

La visualizzazione struttura aiuta a organizzare logicamente un testo. Possiamo pensarla come la tradizionale scaletta che precede la stesura di una composizione scritta.

In modalità struttura è facile identificare i livelli logici dell'elaborato; concentrare l'attenzione solo sui livelli più alti; spostare la posizione di un blocco o di un livello; è possibile iniziare a stendere in modo dettagliato una parte del testo e passare a nostro piacimento su altre.

Un'altra funzione molto utile è la disponibilità di correttori ortografici in varie lingue; con la possibilità di ampliare il dizionario utilizzato.

Per i lavori collaborativi si rivela molto interessante lo strumento revisione. In un prodotto a più mani ogni revisore di un documento può apportare il proprio contributo identificato da un colore particolare, dal proprio nome e dalla data in cui la revisione è stata fatta. In fase di stesura finale è possibile accettare o rifiutare le modifiche proposte.

VO su Scheda filmata di schermate

Non è necessario spiegare comando per comando; ma le operazioni devono essere abbastanza lente e si devono vedere molto, molto chiaramente i passi (dove avvengono i click) fatti dall'operatore

Parole in grassetto in sovrimpressione grafica

18

LA DISCUSIONE DIDATTICA - Parte I

Jingle

19

Prima parte della discussione : l'uso didattico della videoscrittura e dei testi digitali. Possibili punti per la discussione:

Un aiuto per imparare a scrivere

• Si impara a scrivere solo scrivendo e riscrivendo: la disponibilità di versioni plurime dello stesso testo permette ad uno studente di raffinare il proprio testo attraverso stesure (e correzioni da parte dell'insegnate) successive sempre più precise. Con la scrittura su carta questo è praticamente impossibile; un testo su un file permette all'allievo di concentrarsi sugli aspetti importanti della revisione senza perdere troppo tempo nella riscrittura delle parti che vanno bene.
• L'importanza della strutturazione logica dei testi. La possibilità di passare facilmente dalla visualizzazione struttura a quella normale può aiutare nella strutturazione logica dei testi
• Si prendono in considerazioni anche gli aspetti grafici, di layout di un testo che normalmente vengono trascurati.
• Si possono usare e integrare fra loro codici testuali non solo alfabetici (formule matematica, chimica, musica)
• Importante: attraverso gli strumenti di rete la scrittura diviene una pratica diffusa e differenziata: non solo scrittura finalizzata alla produzione di un tema o di un elaborato complesso, ma anche scrittura di chat, scrittura di e-mail, ecc.

Carlo + Gino + insegnanti ospiti

19 a

Filmato su bambini che si scrivono usando la posta elettronica oppure pezzo del filmato su due classi di scuola elementare che svolgono il chat girato per la lezione 9 nella scuola di Gassino. In entrambi i caasi chiedere a Rabbone

Contributo filmato

19 b

• La rete offre la possibilità di scrivere, di comunicare in un contesto reale e non fittizio

• Si possono creare archivi di insegnante, di scuola o frutto di progetti cooperativi a distanza di testi elettronici, si possono usare quelli in rete.

[Carlo]: "Chiudiamo con questo commento la discussione sul primo argomento di oggi."

Carlo + Gino + insegnanti ospiti

20

LA LEZIONE - Parte II

Jingle

21

[Carlo]: "Finora abbiamo parlato solo di testi lineari; ma sappiamo benissimo che esiste un'estensione del testo che tutti ormai conosciamo e che viene utilizzato molto nelle scuole, ossia l'ipertesto. Gino, vogliamo iniziare con una definizione di ipertesto?

[Gino]: "Certamente. Un ipertesto non è altro che un insieme di unità informative o blocchi testuali, collegati tra loro da vari rimandi - i famosi link.

Le dimensioni e la completezza informativa di ogni blocco testuale all'interno di un ipertesto può variare molto. Nei singoli blocchi, inoltre, l'informazione è veicolata attraverso del testo, ma anche da altri codici espressivi quali immagini, video, audio, ecc.. In quest'ultima caso molti preferiscono parlare di ipermedia invece di ipertesto.

I collegamenti possono istituire dei rimandi tra vari blocchi, tra porzioni di blocchi o all'interno dei singoli blocchi."

[Carlo]: "Ma qual è, in sostanza, la differenza tra un testo lineare e un ipertesto?"

[Gino]: "Per rendersene conto facilmente possiamo pensare alla differenza che c'è tra un libro giallo ed un dizionario. Il libro giallo deve essere letto in maniera sequenziale dall'inizio alla fine - almeno così avviene di solito, se il lettore rispetta il patto implicito che ha stabilito con l'autore del libro nel momento in cui ha deciso di leggere la sua opera. Il dizionario invece viene usato leggendo le definizioni delle singole voci in modo non sequenziale, saltando da una parte all'altra a seconda dei propri bisogni.

I singoli blocchi dell'ipertesto sono un po' come le definizioni del dizionario che noi leggiamo, utilizziamo, senza essere costretti a leggere quella immediatamente successiva per seguitare ad usare il dizionario."

[Carlo]: "Quindi all'interno di un ipertesto il lettore ha una libertà assoluta, può passare, a suo piacimento, da un blocco ad un altro?".

[Gino]: "Fino ad un certo punto; perché è sempre l'autore dell'ipertesto che detiene - se così si può dire - il potere del link; è sempre lui che decide quali blocchi sono collegati tra loro, e in che modo. Usando un altro paragone potremmo dire che il lettore di un libro tradizionale è come un viaggiatore che si muove lungo una strada. Può compiere delle soste, tornare indietro o addirittura decidere di abbandonarla; ma il percorso tracciato per lui è lineare. L'utilizzatore di un dizionario, invece, è come un uomo che si muove in un bosco; può decidere di fermarsi accanto all'albero che vuole; nessun percorso obbligato è stato definito per lui. Il lettore dell'ipertesto si trova in una situazione intermedia; ha di fronte a se vari percorsi che può intraprendere, ma non può passare a suo totale piacimento da un blocco testuale ad un altro, deve seguire il cammino scelto dall'autore dell'ipertesto. E' come un individuo che si muove in un parco; ha a disposizione vari sentieri, ma se vuole raggiungere la panchina non lontano da lui, non può attraversare il prato, deve seguire i sentieri preparati dai giardinieri."

Carlo + Gino

Mentre Gino parla una grafica su video wall: icone di documenti testuali collegati da frecce. Le icone cambiano dimensioni.

Molte icone di documento, diventano icone di filmati, suoni, immagini.

Si illuminano vari tipi di frecce.

22

IL CASO DI STUDIO - Parte II

Jingle

23

Carlo: "Proseguiamo adesso con un filmato girato nella Scuola Media "Angelicum" di Monte San Giovanni Campano, che ci mostra una classe impegnata nella costruzione di un ipertesto".

Carlo in CK su pagina sito

24

(Argomento: "Giuseppe Verdi", ovvero la progettazione, la ricerca e la costruzione di un ipertesto in html)

1. L'insegnante fa il punto della situazione sul lavoro già fatto (ricerche cartacee, in rete, su riviste, acquisizione immagini con scanner, scaricamento files midi) ed invita gli alunni a organizzare il materiale e a progettare la sua strutturazione ipertestuale.
2. Gli alunni si dividono i compiti e un gruppo inizia la progettazione ipertestuale.
3. Altri alunni iniziano a digitare i testi con il blocco note, salvando in formato html.
4. Successivamente aprono i file html con FrontPage Express ed iniziano la formattazione del testo e del body.
5. Si costruisce la home.
6. Si lascia capire che il lavoro è solo all'inizio, implementabile in qualsiasi momento.

Focalizzare l'attenzione su:

1. L'uso integrato di vecchi e nuovi mezzi per la didattica.
2. La capacità degli alunni, guidati ed abituati, alla progettazione: dalla carta, alla ricerca dei materiali, all'ipertesto.
3. La capacità degli alunni al lavoro collaborativi.
4. Importanza dell'utilizzo delle nuove tecnologie per veicolare "vecchi" saperi.
5. Possibilità in ambiente multimediale della sinergia dei linguaggi.
6. Facilità dell'utilizzo, pur in forma semplice, dell'html

Contributo filmato

Docente:Luisanna Fiorini

Scuola: Media Statale Angelicum, Monte San Giovanni Campano, FR (sez.centrale di Colli)

25

Per costruire un ipertesto ci si serve spesso del linguaggio HTML: Hyper Text Markup Language, ossia linguaggio di marcatura ipertestuale. Si tratta del linguaggio in cui sono scritte le pagine web. L'HTML ha il grande vantaggio di funzionare su qualunque tipo di computer, con qualunque tipo di sistema operativo. I suoi concetti fondamentali sono piuttosto semplici; vogliamo provare a vederli insieme?

Carlo

Parole in grassetto in grafica

26

Hyper Text Markup Language

HTML è un linguaggio di marcatura. Un linguaggio cioè che delimita, marca, porzioni di un documento con dei simboli particolari per comunicare al programma visualizzatore, il browser, come visualizzare quelle parti del documento sullo schermo. I simboli utilizzati per marcate un documento sono denominati marcatori, o - in inglese - tag.

Se, per esempio, il browser riceve questa porzione di codice

Oggi è <B>martedì</B>

lo visualizzerà in questo modo

Oggi è martedì

perché il marcatore B, dall'inglese Bold, dice al browser che tutto ciò che è compreso tra il marcatore di apertura e quello di chiusura /B deve essere sottolineato.

I marcatori sono costituiti da lettere mnemoniche racchiuse tra parentesi acute. Il marcatore di chiusura si differenzia da quello di apertura per la barra che lo precede.

VO su grafica

[suggerimenti per la grafica:

1. Parole in grassetto in grafica.
2.  HTML inglese e ital,
3. sinistra: icona doc + scritta "codice HTML"
4. centro: piccola immagine Netscape con scritta "browser"
5. destra: "documento visualizzato;
6. frecce tra elementi

in grande ed esattamente come scritto le due righe sovrapposte, i due marcatori colorati, stesso colore

Bold

I due marcatori cambiano colore e lampeggiano quando sono nominati dallo speaker

I due marcatori cambiano colore e lampeggia sola la barra

27

Dopo aver introdotto in concetto di linguaggio di marcatura, vogliamo vedere insieme come si scrivere un semplice documento HTML?

Carlo

28

Per scrivere la nostra pagina ci serviamo di un editor di testo che salva i file in formato solo testo, solo caratteri ASCII quindi, come Blocco Note per chi usa Windows. Si tratta del programma che vedete aperto alle mie spalle.

Come prima cosa dobbiamo inserire un marcatore di apertura e chiusura HTML per identificare l'intero documento. [i marcatori vengono inseriti] Ecco fatto.

Ogni documento HTML è poi diviso in due parti: la sezione HEAD, che contiene varie informazioni sul documento, che per ora non ci interessano, tra cui il titolo, con i relativi tag, TITLE.

Come titolo inseriamo, per esempio, "Saluti".

Questo titolo comparirà nella barra superiore della finestra del browser.

La sezione BODY, invece, conterrà il testo vero e proprio del nostro documento.

Inseriamo, per esempio, il testo:

Saluti a tutti

Un caro saluto a tutti i corsisti dalla redazione di Multimedi@Scuola

Ecco come apparirà nel nostro browser. Certo non è molto spettacolare; non compare neanche l'a capo che avevamo inserito, perché gli spazi vuoti vengono ignorati dal browser; che ci sia uno o più spazi vuoti, uno o più a capo, per lui è lo stesso; saranno sempre considerati come un unico spazio vuoto. Come possiamo fare per migliorare l'aspetto del nostro documento? Potremmo per esempio stabilire che "Saluti a tutti" va scritto con maggiore evidenza, e racchiuderlo tra il marcatore di apertura H1 e quello di chiusura barra H1, sempre racchiusi dalle parentesi acute; H1 sta per Heading, intestazione, di primo livello. E potremmo considerare il resto come un paragrafo normale, inserendo i tag, P, Paragraph.

Le cose vanno un po' meglio, non vi pare?

Allo stesso modo, potremo volere che la parola "Multimedi@scuola" sia in corsivo: usiamo anche in questo caso un marcatore, una I all'inizio e alla fine del corsivo (I sta per l'inglese Italic, che vuol dire corsivo): ecco fatto!

Ed ecco il risultato.

Buona parte della preparazione di un documento HTML consiste proprio in questa operazione: marcare il testo in modo che venga visualizzato nel modo da noi desiderato. Naturalmente i marcatori sono molto più numerosi di quelli che abbiamo visto insieme - ma il concetto di base non è poi troppo complesso.

Un'ultima cosa: perché vengano visualizzati correttamente, ricordate di salvare sempre i file HTML con estensione "htm" o "html"

CK di Mila su schermate e grafica

Vedi allegato "pagina HTML" in PowerPoint per avere un'idea

Parole in grassetto in risalto. Su Blocco Note.

Le coppie di tag dello stesso colore compaiono lampeggiando quando vengono inserite, poi rimangono fisse. Il testo inserito con stile macchina da scrivere.

Si vede il risultato in Netscape. Si cerchia il titolo con stile pennarello.

Si torna a Blocco Note.

Si inserisci il testo esattamente così, con l'a capo, ma senza tag.

Si vede il risultato in Netscape.

Si torna a Blocco Note

Si vede il risultato in Netscape.

Si torna a Blocco Note

Si vede il risultato in Netscape.

29

[Carlo]: "Probabilmente starete pensando che scrivere una pagina HTML non è forse difficile ma è sicuramente molto laborioso. Effettivamente avete ragione. Ma per fortuna esistono dei programmi che semplificano la creazione dei documenti HTML, vero Gino?"

[Gino]: "Sì, esistono molti programmi differenti che possono però essere classificati in due grandi categorie:

• Editor di testo potenziati che permettono di inserire con un semplice click del mouse i vari marcatori. Quello che vedete alle mie spalle si chiama Note Tab Light ed è compreso anche nel CD del corso. Questo menu, come vedete, permette di inserire automaticamente i marcatori prescelti, senza digitare tutto a mano.
• Programmi assai simili a un tradizionale wordprocessor, che generano automaticamente il codice HTML corrispondente al testo formattato che inseriamo. Due di questi programmi - Netscape Composer e FrontPage Express - sono gratuiti e compresi, rispettivamente, nelle versioni complete dei programmi Internet Explorer e Netscape. Li trovate nel CD-ROM del corso.

Con il primo tipo di programmi, l'autore deve sempre conoscere piuttosto bene il linguaggio HTML e inserire i marcatori al posto gusto, ma il lavoro risulta molto semplificato.

Con il secondo tipo di programmi, le cose sono ancora più facili."

[Carlo]: "Proviamo a rendercene conto riscrivendo la stessa pagina di prima usando Netscape Composer"

Carlo + Gino

Parole in grassetto in sovrimpressione grafica

Su WideoWall :

• Note Tab Light
• (a tutto schermo)
• Su Composer e poi su FrontPage Express

30

Lancio il programma e inizio subito a scrivere:

"Saluti a tutti

Un caro saluto a tutti i corsisti dalla redazione di Multimedi@Scuola.

Poi decido che questa è l'intestazione di primo livello. E, visto che è facile, decido anche di renderla rosso e metterla al centro.

Multimediascuola lo devo mettere in corsivo. Un click qui.

Vogliamo vedere il risultato? Scelgo la voce 'anteprima nel browser' - ecco la mia pagina pronta per il Web.

E i marcatori HTML? Li ha generati automaticamente il programma: eccoli.

CK di Mila su schermate

di Composer

di Netscape

31

Come avete visto, questi programmi compongono una pagina web, lasciandoci lavorare come se usassimo un normale elaboratore di testo. Non serve neppure conoscere la sintassi del linguaggio HTML - anche se averne almeno un'idea non guasta davvero!

Con questi programmi è molto facile inserire elementi più complessi come tabelle, immagini, e soprattutto collegamenti ipertestuali. Vogliamo vedere come si fa ad inserire un link?

Carlo

32

Inserire un link è molto semplice. Voglio ad esempio che con un click sulla parola "Multimedi@Scuola" si passi direttamente al sito del corso.

Come faccio?

Evidenzio tutta la parola; poi faccio click su questo pulsante, "inserisci link", digito l'indirizzo della pagina di Multimedi@scuola, e... il gioco è fatto!

CK di Mila su schermate

di Composer

di Netscape

33

[Carlo]: "Bene, abbiamo visto tre strumenti diversi: un editor 'nudo' come il Blocco note di Windows, un editor potenziato come Note Tab Light, e infine uno strumento che crea automaticamente il codice HTML senza neanche richiedere una conoscenza dei singoli marcatori. Vogliamo cercare di capire meglio quando conviene usare un programma e quando un altro?"

[Gino]: "Con programmi come Composer o FrontPage Express la scrittura è enormemente velocizzata e semplificata; ma è anche vero che talvolta è bene intervenire direttamente sul codice HTML. Questo si può fare ovviamente in Composer o Front Page, ma chi usa sempre questi programmi tende a "dimenticare" la sintassi HTML e quindi un allenamento con programmi come Note Tab Light può essere molto fruttuoso. Utilizzare invece un programma come Blocco Note, senza nessun aiuto, è riservato ai più pazienti e certosini - ma ormai lo fanno davvero in pochi.

[Carlo]: "Ma per scrivere un ipertesto basta conoscere l'HTML?"

[Gino]: "La conoscenza del linguaggio HTML è in un certo senso l'aspetto meno importante. E' fondamentale invece acquisire una metodologia di lavoro molto accurata: per esempio, definire bene l'argomento prescelto, individuarne le sue articolazioni logiche, definire il pubblico a cui è rivolto e il mezzo di pubblicazione (CD, rete?), raccogliere i materiali multimediali che si vogliono utilizzare, fare attenzione allo stile generale, ecc.

Mentre la pura pratica nell'uso del HTML può essere acquisita facilmente o essere addirittura già posseduta dagli studenti, questo tipo di competenze richiedono una capacità di analisi e riflessione assai maggiore, e rientrino a pieno titolo fra le competenze specifiche del docente.

Infine è bene ricordare che non tutti gli ipertesti devono nascere necessariamente per la rete, e che fra i programmi che si possono utilizzare per creare un ipertesto ve ne sono alcuni pensati appositamente per l'uso didattico. E' ad esempio il caso di Amico, un programma che - insieme ad altri - trovate anche sul nostro CD"

Carlo e Gino

Su Video Wall schermate dei programmi di cui si parla

34

LA DISCUSIONE DIDATTICA - Parte II

Jingle

35

Carlo: "Mi sembra che la costruzione di ipertesti sia un'attività didattica molto diffusa nelle scuole italiane; chiediamo ai nostri ospiti perché, e chiediamogli anche di spiegarci quali sono i contesti didattici in cui sia la costruzione di ipertesti sia il loro uso si rivelano davvero utili per l'apprendimento.

Spunti per la discussione:

• Un mezzo per pubblicare i propri testi in rete
• Un ipertesto è spesso la struttura che meglio si presta a organizzare il lavoro collaborativo di un gruppo di studenti della stessa classe o di più istituti.
• Per la sua struttura aperta, modulare, espandibile, ecc.
• Per la facilità con cui può essere letto da varie piattaforme e messo in rete
• Per la quantità di vari contenuti multimediali che può contenere
• Si potrebbe dire che l'ipertesto sta al lavoro collaborativo come la presentazione video sta alla lezione frontale?
• Pluridisciplinarietà implicita di un ipertesto
• Uso dell'ipertesto su CD didattici
• Lo strumento dell'ipertesto non rischia di essere addirittura troppo usato?

All'interno della discussione, circa 1'30" di servizio filmato su un esempio di lavoro di creazione di un ipertesto (da MediaScuola - filmato in cui i bambini usano fili per visualizzare la costruzione di link fra sezioni diverse di un ipertesto - può servire per introdurre la discussione sul ruolo di guida del docente)

Carlo + Gino + Ospiti

36

SUGGERIMENTI DI LAVORO

Jingle

37

E siamo giunti così alla fine di questa lezione, come sempre, vi suggeriamo alcuni spunti di lavoro e di approfondimento.

Carlo

38

Per quanto riguarda la prima parte della nostra lezione, dedicata all'uso dei testi digitali nella didattica, vi consigliamo di:

• individuare un testo che pensate vi sia utile in una delle [vostra] vostre prossime lezione e di provare ad acquisire [acquisirlo] quel testo tramite scanner o a cercarlo in Internet.
• discutere nel vostro gruppo d'ascolto [sui] i pro e i contro dell'uso degli elaboratori di testo nella didattica della lingua scritta.

Per quanto riguarda la seconda parte, l'HTML, a chi non ha alcuna pratica [dell'HTML] di questo linguaggio consigliamo di

• usare e modificare i semplici file HTML preimpostati che troverete nel CD per iniziare a scrivere semplici pagine in HTML.
• provare a comporre qualche pagina e un piccolo ipertesto di 3 o 4 pagine;

Per chi invece ha già una pratica [dell'HTML] di questo linguaggio consigliamo di

• provare ad abbozzare la struttura di un ipertesto su un tema che gli sta particolarmente a cuore, magari insieme a docenti di altre discipline.

VO e grafica.

Parole in grassetto in grafica

39

Vi ricordo che sia nel CD, sia nel nostro sito Internet, all'indirizzo www.educational.rai.it/corsiformazione/
multimediascuola troverete del materiale relativo agli argomenti di cui abbiamo parlato oggi. Tra cui StarWriter, un ottimo word processor completamente gratuito, alcuni programmi che facilitano la scrittura del codice HTML e un manuale introduttivo all'HTML che vi fornirà una panoramica di questo linguaggio assai più completa di quello che abbiamo potuto fare noi in pochi minuti. Come sempre, infine, vi invitiamo a discutere nel vostro punto di ascolto sulle esperienze che abbiamo proposto e sulle osservazioni fatte da noi e dai nostri ospiti. Se vi sembra che dalle discussioni tra voi siano emersi degli aspetti che abbiamo trascurato e che possano interessare tutti i corsiti, vi invitiamo a segnalarcelo nel nostro forum in rete.

Prima di salutarvi, e darvi appuntamento alla prossima lezione, voglio infine ricordarvi anche il sito di Mosaico, la nostra mediateca per le scuole. L'indirizzo è www.mosaico.rai.it.

Carlo

37

Nella lezione di oggi abbiamo visto insieme:

• cos'è un testo digitale e cos'è un ipertesto
• come si trasforma un pagina di un libro in un testo digitale
• in che modo gli elaboratori di testo possono essere utili nella didattica
• quali attività didattiche si possono svolgere con i testi elettronici
• quali sono le caratteristiche fondamentali del linguaggio HTML per la creazione di ipertesti in rete

OV speaker su grafica. In sottopancia scorrono i titoli di coda.