1

Strumenti Informatici per l’insegnamento delle

ScienzeS. Casassa

2

Gli Strumenti

• Il computer

facile da usare economico utile imprescindibile

• Il computer interconnesso: Internet

3

Le possibilità

1. utilizzo di Programmi

2. costruzione di Ipertesti

3. accesso alle Informazioni

4

InformazioniIl Sapere:dalle Biblioteca.. alle enciclopedie.. al gioco delle Perle di Vetro…

5

Questioni Aperte

a) Circolazione libera o regolamentatab) Copyrightc) attendibilità

Come reperirle

a) i motori di ricerca:• www.google.it• www.altavista.it

b) I portali:• www.repubblica.it• www.libero.it

c) I siti dedicati (database):• www.nist.gov/srd

Informazioni

6

I Programmia) per il calcolo delle proprietà chimico-fisiche (

www.crystal.unito.it)

b) per la visualizzazione di tali proprietà (google: gas simulation)

c) per la “visualizzazione molecolare”

Rappresentazione tridimensionale della struttura molecolareRappresentazione tridimensionale della struttura molecolare

2D2D 3D3D

7

Ipertesti: utilità

Costruire e distribuire materiale didatticoCostruire e distribuire materiale didatticoUn ipertesto permette di costruire documenti didattici sia tradizionali, che Un ipertesto permette di costruire documenti didattici sia tradizionali, che interattivi (e-learning). interattivi (e-learning).

La La costruzionecostruzione di un ipertesto costituisce un momento di di un ipertesto costituisce un momento di apprendimento.apprendimento.Poiché richiede allo studente una elaborazione personale della materia Poiché richiede allo studente una elaborazione personale della materia

Organizzare/Condividere collezioni complesse di datiOrganizzare/Condividere collezioni complesse di datiUn ipertesto permette di organizzare e trasmettere dati scientifici di Un ipertesto permette di organizzare e trasmettere dati scientifici di natura diversa: risultati sperimentali, modelli, commenti, bibliografia, natura diversa: risultati sperimentali, modelli, commenti, bibliografia, files e programmi, ecc…files e programmi, ecc…

8

Ipertesti oltre l’HTMLLa logica degli ipertesti pervade la tecnologia…La logica degli ipertesti pervade la tecnologia…

• I “Desktop” di tutti i sistemi operativi (Windows, Linux, MacOSX ecc.) si presentano come ipertesti e propongono “link” a files, programmi e risorse remote.

• I sistemi di azionamento e di “help” di tutti gli apparecchi sono ordinati come ipertesti (talvolta HTML, ma più spesso di altro tipo). Un ipertesto formato da “menù” e “link” è indispensabile quando le risorse di visualizzazione sono povere (ad esempio il display dei telefoni cellulari).

9

Ipertesti: caratteristiche

Approccio alle informazioni:

Multi-medialeInterattivo Multi-dimensionaleConnessoVisivo

10

Visivo..

Le tecniche di visualizzazione risultano sempre particolarmente efficaci perché sfruttano la capacità del cervello umano di

interpretare e comprendere informazioni e stimoli visivi: più del 50%

dei neuroni sono dedicati alla “decodifica” della visione.

Connesso..

11

La visualizzazioneConoscereConoscere

12

La visualizzazione

Prevedere….ovvero Prevedere….ovvero fare SCIENZAfare SCIENZA

13

Nota sui filesDef1: documento di testo, un programma, un'immagine che viene identificato da un nome e, opzionalmente, da una estensione: per esempio nome.doc (jpj, giff, html)

Def2: insieme di dati (testo, immagini o altre informazioni) contenuti in una memoria magnetica e identificati da un unico nome.

leggono i files interpretano i files

14

E’ possibile generare o aprire un file html con tutti i programmi E’ possibile generare o aprire un file html con tutti i programmi capaci di leggere/modificare files di testocapaci di leggere/modificare files di testo

American Standard Code for Information Interchange

Uno standard che associa in modo univoco ed indipendente dal tipo di computer

carattere numero (byte)

ATTENZIONE: l’estensione è solo una ATTENZIONE: l’estensione è solo una convenzione per riconoscere i files, e non convenzione per riconoscere i files, e non ha effetto sul contenuto del file stesso!ha effetto sul contenuto del file stesso!

Un file HTML è semplicemente UN FILE DI TESTO (ASCII)Un file HTML è semplicemente UN FILE DI TESTO (ASCII)

E’ il più semplice e diffuso linguaggio per scrivere ipertestiE’ il più semplice e diffuso linguaggio per scrivere ipertesti

L’estensione è di solito: “html”, “htm”, “HTML”, “HTM”L’estensione è di solito: “html”, “htm”, “HTML”, “HTM”

HTML

15

Un file HTML contiene, oltre al testo, Un file HTML contiene, oltre al testo, caratteri di controllocaratteri di controllo, filtrati e , filtrati e interpretatiinterpretati dai “browser” dai “browser”

<A><A>bla blabla bla</A></A>

che significa: il testo “che significa: il testo “bla blabla bla” è assoggettato all’azione specificata dal ” è assoggettato all’azione specificata dal carattere “carattere “AA”.”.

Il carattere Il carattere </A> </A> specifica dove termina il campo di applicazione.specifica dove termina il campo di applicazione.

ESEMPIO

Il carattere di controllo <B> significa “scrivi in grassetto” (“Bold” in inglese)

Se scriviamo nel file di testo (ad es. col blocco note)Se scriviamo nel file di testo (ad es. col blocco note)

<B> bla bla bla </B> bla bla<B> bla bla bla </B> bla bla

Aprendo il file con Netscape o Explorer appariràAprendo il file con Netscape o Explorer apparirà

bla bla bla bla bla bla bla blabla bla

(tre “bla” in grassetto e due normali)(tre “bla” in grassetto e due normali)

I caratteri di controllo hanno la seguente I caratteri di controllo hanno la seguente sintassisintassi::

16

FORMATTAZIONE DEL TESTO E DELLA PAGINAFORMATTAZIONE DEL TESTO E DELLA PAGINA

La dimensione della pagina La dimensione della pagina non è definitanon è definita, e varia modificando le dimensioni della finestra , e varia modificando le dimensioni della finestra del browser. del browser.

Per questo motivo, la formattazione del testo nel file HTML è regolata solo dai “tag” e NON Per questo motivo, la formattazione del testo nel file HTML è regolata solo dai “tag” e NON dalla disposizione del testo nel file HTML.dalla disposizione del testo nel file HTML.

Il testo:Il testo:Ambarabà cici cocco

tre civette sul comò

Apparirà come:Apparirà come:Ambarabà cici cocco tre civette sul comò

La formattazione corretta si La formattazione corretta si ottiene con:ottiene con:

<P>Ambarabà cici cocco <BR>

tre civette sul comò </P><P></P> delimita un delimita un

paragrafoparagrafo

<BR> manda a capomanda a capo

Consultare la lista dei “tag” per le altre opzioni di formattazione

17

INSERIRE UN’IMMAGINEINSERIRE UN’IMMAGINE

È sufficiente inserire il “tag”È sufficiente inserire il “tag”

<IMG SRC=“nomefile” > <IMG SRC=“nomefile” >

Dove “nomefile” può essere:Dove “nomefile” può essere:

1)1) Un file grafico che si trovi nella stessa directory Un file grafico che si trovi nella stessa directory dell’ipertesto, possibilmente nei formati dell’ipertesto, possibilmente nei formati JPEG, PNG o GIFJPEG, PNG o GIF

2)2) Un URL che indirizza ad un’immagine che si trova altroveUn URL che indirizza ad un’immagine che si trova altrove

Questa tag possiede opzioni per l’allineamento, la scala, ecc Questa tag possiede opzioni per l’allineamento, la scala, ecc

(vedi lista). Inoltre può essere (vedi lista). Inoltre può essere “annidata”“annidata” in altre tag. in altre tag.

Ad esempio:Ad esempio:

<CENTER><IMG SRC=“nomefile” ></CENTER><CENTER><IMG SRC=“nomefile” ></CENTER>

mostra l’immagine al centro della paginamostra l’immagine al centro della pagina

18

INSERIRE UN “LINK”INSERIRE UN “LINK”

L’espressioneL’espressione

<A HREF=“URL”> bla bla <A><A HREF=“URL”> bla bla <A>

trasforma le parole “bla bla” in un collegamento all’URL trasforma le parole “bla bla” in un collegamento all’URL specificata.specificata.

Questa può essere ad esempio:Questa può essere ad esempio:

1)1) Un altro file html (è utile suddividere gli ipertesti in piccoli Un altro file html (è utile suddividere gli ipertesti in piccoli files)files)

2)2) un’immagineun’immagine

3)3) Una risorsa (file o immagine) su un altro computerUna risorsa (file o immagine) su un altro computer

Per trasformare UN’IMMAGINE in LINK è sufficiente annidare Per trasformare UN’IMMAGINE in LINK è sufficiente annidare

l’immagine nel collegamento:l’immagine nel collegamento:

<A HREF=“URL”><A HREF=“URL”> <IMG SRC=“immagine.jpg”><IMG SRC=“immagine.jpg”> <A><A>

19

INSERIRE UNA TABELLAINSERIRE UNA TABELLA

<TABLE><TABLE>

<TR><TR>

<TD> cella11 <TD> cella12 <TD> cella11 <TD> cella12

</TR></TR>

<TR> <TR>

<TD> cella21 <TD> cella22 <TD> cella21 <TD> cella22

</TR></TR>

</TABLE></TABLE>

cella11 cella12

cella21 cella22

Le celle della tabella possono contenere testo, immagini, link, Le celle della tabella possono contenere testo, immagini, link, ecc…ecc…

Le tabelle si usano anche per Le tabelle si usano anche per disporre il contenuto sulla paginadisporre il contenuto sulla pagina in modo ordinato, cioè per creare colonne e riquadri di testo ed in modo ordinato, cioè per creare colonne e riquadri di testo ed

immagini.immagini.

(per specificare le dimensioni, vedi la lista dei “tag”) (per specificare le dimensioni, vedi la lista dei “tag”)

<TR></TR> definisce una rigadefinisce una riga

<TD> definisce una celladefinisce una cella

20

Fine prima parte

..to be continued

21

COME IMPARARE L’ HTML?COME IMPARARE L’ HTML?

Vi sono moltissimi manuali a disposizione, molti dei quali disponibili in rete. Vi sono moltissimi manuali a disposizione, molti dei quali disponibili in rete.

Vedi ad esempio il sito: www.html.itVedi ad esempio il sito: www.html.it

Per una guida semplice e sintetica consultare il sito “Bare Bones Guide to HTML” Per una guida semplice e sintetica consultare il sito “Bare Bones Guide to HTML” http://werbach.com/barebones/http://werbach.com/barebones/

Ma è proprio necessario?Ma è proprio necessario?

Esistono molti programmi che permettono di scrivere ipertesti senza conoscere Esistono molti programmi che permettono di scrivere ipertesti senza conoscere l’HTML. L’utente scrive come su un “word processor”, e la formattazione viene l’HTML. L’utente scrive come su un “word processor”, e la formattazione viene tradotta automaticamente dal programma in formato HTML.tradotta automaticamente dal programma in formato HTML.

I programmi più comuni di questo tipo sono:I programmi più comuni di questo tipo sono:

FrontPage, DreamweaverFrontPage, Dreamweaver (a pagamento) e (a pagamento) e Mozilla ComposerMozilla Composer (gratuito ma (gratuito ma limitato)limitato)

22

Powerpoint è lo strumento più diffuso per creare Powerpoint è lo strumento più diffuso per creare presentazioni da proiettare o stampare (seminari, lauree,presentazioni da proiettare o stampare (seminari, lauree,…).…).

Powerpoint può scrivere un ipertesto composto da una serie di Powerpoint può scrivere un ipertesto composto da una serie di files HTML contenenti un indice e le singole diapositive. files HTML contenenti un indice e le singole diapositive.

Queste presentazioni possono essere condivise in Queste presentazioni possono essere condivise in rete, trasformandole in file HTMLrete, trasformandole in file HTML

IN PRATICA: menù “File”/”salva con nome”; tipo File: “Pagina IN PRATICA: menù “File”/”salva con nome”; tipo File: “Pagina web”. web”.

Powerpoint

23

Utilizziamo il Chime plug in per introdurre la struttura di una molecola Utilizziamo il Chime plug in per introdurre la struttura di una molecola di cui conosciamo le coordinate in formato PDB (Protein Data Bank) di cui conosciamo le coordinate in formato PDB (Protein Data Bank) o XYZ (Xmol format) in un testo HTML. o XYZ (Xmol format) in un testo HTML.

Queste coordinate sono il risultato di una ricerca su Internet e loro Queste coordinate sono il risultato di una ricerca su Internet e loro salvataggio sulla macchina locale. salvataggio sulla macchina locale.

Si tenga conto che il PDB è liberamente accessibile a chiunque Si tenga conto che il PDB è liberamente accessibile a chiunque all’indirizzo:all’indirizzo:

http://www.pdb.bnl.org/http://www.pdb.bnl.org/

Plug-in program

24

Chime creato dalla MDL Information Systems Inc. e disponibile sul sito www.mdli.co.uk e consente di visualizzare strutture molecolari su internet.

25

<HTML><HEAD><TITLE>Chime: Come si usa.</TITLE></HEAD><BODY BGCOLOR=WHITE><CENTER><H1>Chime: Come si usa senza aggiunte</H1></CENTER>

<BASEFONT SIZE=4>In questo caso l'informazione relativa alla strutturaviene riportata prima della struttura<BR><H3>Struttura della morfina<BR>La struttura presenta una forma a T</H3>

<EMBED src="morfina.pdb" bgcolor=whitealign=abscenter width=300

height=300 startspin=truespinY=20 spinX=20display3D=spacefillscript="zoom 130"frank=false

></EMBED><P>Ulteriore testo segue la figura della struttura molecolare</BODY></HTML>

visualizzare la struttura della morfina:

Esempio

26

Si ottiene:

27

<HTML><HEAD><TITLE>Chime: Come si usa.</TITLE></HEAD><BODY BGCOLOR=WHITE>

<CENTER><H1>Chime: Come si usa con la tabella</H1></CENTER>

<BASEFONT SIZE=4>In questo caso l'informazione relativa alla strutturaviene riportata a lato in una cella della tabella<BR><TABLE BORDER=0 CELLSPACING=3 CELLPADDING=2 ><TR><TD><CENTER><H3>Struttura della morfina<BR>La struttura presenta una forma a T</H3></CENTER></TD><TD><CENTER>

Esempio: visualizzare la struttura della morfina in una tabella:

<EMBED src="morfina.pdb" bgcolor=whitealign=abscenter width=300

height=300 startspin=truespinY=20 spinX=20spinZ=20display3D=spacefillscript="zoom 130"frank=false

></EMBED></CENTER></TD></TR></TABLE><P>Ulteriore testo segue la definizione della tabella</BODY></HTML>

28

Si ottiene:

29

DISPLAY3D: { DISPLAY3D: { backbone | ball&stick | cartoons | ribbons | spacefill | backbone | ball&stick | cartoons | ribbons | spacefill | sticks | strands | wireframe sticks | strands | wireframe }}

BGCOLOR: { blackBGCOLOR: { black | white | #RRGGBB | white | #RRGGBB }}

COLOR3D: { chCOLOR3D: { chain | cpk | group | monochrome | shapely | structure | ain | cpk | group | monochrome | shapely | structure | temperature | user temperature | user }}

SPINX: { angoloSPINX: { angolo }; SPINY: { angolo}; SPINY: { angolo }; SPINZ: { angolo}; SPINZ: { angolo }}

STARTSPIN: { true | false }STARTSPIN: { true | false }

FRANK: { true | false }FRANK: { true | false }

SCRIPT=“zoom 130”SCRIPT=“zoom 130”

Comandi

30

Form