1 strumenti informatici per linsegnamento delle scienze s. casassa
TRANSCRIPT
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