![Page 1: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/1.jpg)
1
Strumenti Informatici per l’insegnamento delle
ScienzeS. Casassa
![Page 2: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/2.jpg)
2
Gli Strumenti
• Il computer
facile da usare economico utile imprescindibile
• Il computer interconnesso: Internet
![Page 3: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/3.jpg)
3
Le possibilità
1. utilizzo di Programmi
2. costruzione di Ipertesti
3. accesso alle Informazioni
![Page 4: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/4.jpg)
4
InformazioniIl Sapere:dalle Biblioteca.. alle enciclopedie.. al gioco delle Perle di Vetro…
![Page 5: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/5.jpg)
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
![Page 6: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/6.jpg)
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
![Page 7: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/7.jpg)
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…
![Page 8: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/8.jpg)
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).
![Page 9: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/9.jpg)
9
Ipertesti: caratteristiche
Approccio alle informazioni:
Multi-medialeInterattivo Multi-dimensionaleConnessoVisivo
![Page 10: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/10.jpg)
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..
![Page 11: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/11.jpg)
11
La visualizzazioneConoscereConoscere
![Page 12: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/12.jpg)
12
La visualizzazione
Prevedere….ovvero Prevedere….ovvero fare SCIENZAfare SCIENZA
![Page 13: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/13.jpg)
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
![Page 14: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/14.jpg)
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
![Page 15: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/15.jpg)
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::
![Page 16: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/16.jpg)
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
![Page 17: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/17.jpg)
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
![Page 18: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/18.jpg)
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>
![Page 19: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/19.jpg)
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
![Page 20: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/20.jpg)
20
Fine prima parte
..to be continued
![Page 21: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/21.jpg)
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)
![Page 22: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/22.jpg)
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
![Page 23: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/23.jpg)
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
![Page 24: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/24.jpg)
24
Chime creato dalla MDL Information Systems Inc. e disponibile sul sito www.mdli.co.uk e consente di visualizzare strutture molecolari su internet.
![Page 25: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/25.jpg)
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
![Page 26: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/26.jpg)
26
Si ottiene:
![Page 27: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/27.jpg)
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>
![Page 28: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/28.jpg)
28
Si ottiene:
![Page 29: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/29.jpg)
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
![Page 30: 1 Strumenti Informatici per linsegnamento delle Scienze S. Casassa](https://reader035.vdocuments.pub/reader035/viewer/2022062312/5542eb57497959361e8c1f37/html5/thumbnails/30.jpg)
30
Form