1 Strumenti Informatici per linsegnamento delle Scienze S. 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 Informazioni Il Sapere: dalle Biblioteca.. alle enciclopedie.. al gioco delle Perle di Vetro…

5 Questioni Aperte a)Circolazione libera o regolamentata b)Copyright c)attendibilità Come reperirle a)i motori di ricerca: b)I portali: c)I siti dedicati (database): Informazioni

6 I Programmi a)per il calcolo delle proprietà chimico-fisiche ( b)per la visualizzazione di tali proprietà (google: gas simulation) c)per la visualizzazione molecolare Rappresentazione tridimensionale della struttura molecolare 2D 3D

7 Ipertesti: utilità Costruire e distribuire materiale didattico Un ipertesto permette di costruire documenti didattici sia tradizionali, che interattivi (e-learning). La costruzione di un ipertesto costituisce un momento di apprendimento. Poiché richiede allo studente una elaborazione personale della materia Organizzare/Condividere collezioni complesse di dati Un ipertesto permette di organizzare e trasmettere dati scientifici di natura diversa: risultati sperimentali, modelli, commenti, bibliografia, files e programmi, ecc…

8 Ipertesti oltre lHTML 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-mediale Interattivo Multi-dimensionale Connesso Visivo

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 visualizzazione Conoscere

12 La visualizzazione Prevedere….ovvero fare SCIENZA

13 Nota sui files Def1: 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 filesinterpretano i files

14 E possibile generare o aprire un file html con tutti i programmi capaci 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: lestensione è solo una convenzione per riconoscere i files, e non ha effetto sul contenuto del file stesso! Un file HTML è semplicemente UN FILE DI TESTO (ASCII) E il più semplice e diffuso linguaggio per scrivere ipertesti Lestensione è di solito: html, htm, HTML, HTM HTML

15 Un file HTML contiene, oltre al testo, caratteri di controllo, filtrati e interpretati dai browser bla bla bla bla che significa: il testo bla bla è assoggettato allazione specificata dal carattere A. Il carattere specifica dove termina il campo di applicazione. ESEMPIO Il carattere di controllo significa scrivi in grassetto (Bold in inglese) Se scriviamo nel file di testo (ad es. col blocco note) bla bla bla bla bla bla bla bla bla bla Aprendo il file con Netscape o Explorer apparirà bla bla bla bla bla (tre bla in grassetto e due normali) I caratteri di controllo hanno la seguente sintassi:

16 FORMATTAZIONE DEL TESTO E DELLA PAGINA La dimensione della pagina non è definita, e varia modificando le dimensioni della finestra del browser. Per questo motivo, la formattazione del testo nel file HTML è regolata solo dai tag e NON dalla disposizione del testo nel file HTML. Il testo: Ambarabà cici cocco tre civette sul comò Apparirà come: Ambarabà cici cocco tre civette sul comò La formattazione corretta si ottiene con: Ambarabà cici cocco tre civette sul comò delimita un paragrafo manda a capo Consultare la lista dei tag per le altre opzioni di formattazione

17 INSERIRE UNIMMAGINE È sufficiente inserire il tag Dove nomefile può essere: 1)Un file grafico che si trovi nella stessa directory dellipertesto, possibilmente nei formati JPEG, PNG o GIF 2)Un URL che indirizza ad unimmagine che si trova altrove Questa tag possiede opzioni per lallineamento, la scala, ecc (vedi lista). Inoltre può essere annidata in altre tag. Ad esempio: mostra limmagine al centro della pagina

18 INSERIRE UN LINK Lespressione bla bla bla bla trasforma le parole bla bla in un collegamento allURL specificata. Questa può essere ad esempio: 1)Un altro file html (è utile suddividere gli ipertesti in piccoli files) 2)unimmagine 3)Una risorsa (file o immagine) su un altro computer Per trasformare UNIMMAGINE in LINK è sufficiente annidare limmagine nel collegamento:

19 INSERIRE UNA TABELLA <TABLE><TR> cella11 cella12 cella11 cella12</TR><TR> cella21 cella22 cella21 cella22</TR></TABLE> cella11cella12 cella21cella22 Le celle della tabella possono contenere testo, immagini, link, ecc… Le tabelle si usano anche per disporre il contenuto sulla pagina in modo ordinato, cioè per creare colonne e riquadri di testo ed immagini. (per specificare le dimensioni, vedi la lista dei tag) definisce una riga definisce una cella

20 Fine prima parte..to be continued

21 COME IMPARARE L HTML? Vi sono moltissimi manuali a disposizione, molti dei quali disponibili in rete. Vedi ad esempio il sito: Per una guida semplice e sintetica consultare il sito Bare Bones Guide to HTML Ma è proprio necessario? Esistono molti programmi che permettono di scrivere ipertesti senza conoscere lHTML. Lutente scrive come su un word processor, e la formattazione viene tradotta automaticamente dal programma in formato HTML. I programmi più comuni di questo tipo sono: FrontPage, Dreamweaver (a pagamento) e Mozilla Composer (gratuito ma limitato)

22 Powerpoint è lo strumento più diffuso per creare presentazioni da proiettare o stampare (seminari, lauree,…). Powerpoint può scrivere un ipertesto composto da una serie di files HTML contenenti un indice e le singole diapositive. Queste presentazioni possono essere condivise in rete, trasformandole in file HTML IN PRATICA: menù File/salva con nome; tipo File: Pagina web. Powerpoint

23 Utilizziamo il Chime plug in per introdurre la struttura di una molecola di cui conosciamo le coordinate in formato PDB (Protein Data Bank) o XYZ (Xmol format) in un testo HTML. Queste coordinate sono il risultato di una ricerca su Internet e loro salvataggio sulla macchina locale. Si tenga conto che il PDB è liberamente accessibile a chiunque allindirizzo: Plug-in program

24 Chime creato dalla MDL Information Systems Inc. e disponibile sul sito e consente di visualizzare strutture molecolari su internet.

25 Chime: Come si usa. Chime: Come si usa senza aggiunte In questo caso l'informazione relativa alla struttura viene riportata prima della struttura Struttura della morfina La struttura presenta una forma a T <EMBED src="morfina.pdb" bgcolor=white align=abscenter width=300 height=300 startspin=true spinY=20 spinX=20 display3D=spacefill script="zoom 130" frank=false > Ulteriore testo segue la figura della struttura molecolare visualizzare la struttura della morfina: Esempio

26 Si ottiene:

27 Chime: Come si usa. Chime: Come si usa con la tabella In questo caso l'informazione relativa alla struttura viene riportata a lato in una cella della tabella Struttura della morfina La struttura presenta una forma a T Esempio: visualizzare la struttura della morfina in una tabella: <EMBED src="morfina.pdb" bgcolor=white align=abscenter width=300 height=300 startspin=true spinY=20 spinX=20 spinZ=20 display3D=spacefill script="zoom 130" frank=false > Ulteriore testo segue la definizione della tabella

28 Si ottiene:

29 DISPLAY3D: { backbone | ball&stick | cartoons | ribbons | spacefill | sticks | strands | wireframe } BGCOLOR: { black | white | #RRGGBB } COLOR3D: { ch ain | cpk | group | monochrome | shapely | structure | temperature | user } SPINX: { angolo }; SPINY: { angolo }; SPINZ: { angolo } STARTSPIN: { true | false } FRANK: { true | false } SCRIPT=zoom 130 Comandi

30 Form