G. Ricchiardi e S. Casassa SIS A.A Strumenti Informatici per l’insegnamento delle scienze

Argomenti - 1 Infrastruttura della rete (cenni) Infrastruttura della rete (cenni) Ipertesti Ipertesti Chimica e Fisica in rete. Chimica e Fisica in rete. Ricerca di dati, motori di ricerca Ricerca di dati, motori di ricerca Teledidattica, televalutazione (cenni) Teledidattica, televalutazione (cenni) Software “free” per le aule informatiche Software “free” per le aule informaticheMODALITA’: brevi spiegazioni seguite da lavoro on line brevi spiegazioni seguite da lavoro on line produzione di un ipertesto su un argomento didattico a scelta produzione di un ipertesto su un argomento didattico a sceltaVALUTAZIONE basata sull’elaborato prodotto e sulla partecipazione al laboratorio. basata sull’elaborato prodotto e sulla partecipazione al laboratorio.

Rappresentazione tridimensionale della struttura molecolare L’esempio della chimica L’informatica ha cambiato il modo con cui l’informazione chimica viene trasmessa in due ambiti principali: 2D3D

Indirizzo sito Indirizzo sito: (URL: Universal Resource Locator) Browser Browser: Internet explorer o Mozilla Sono scaricabili da e Plug-in: Plug-in: applicazioni che funzionano in team con il browser per visualizzare particolari oggetti su internet (filmati, multimedia) Java: Java: linguaggio di programmazione (Sun) per creare applicazioni (applet) sofisticate su internet ( Flash, Shockwave e QuickTime: Flash, Shockwave e QuickTime: VRML: VRML: Virtual Reality Markup Language ( Internet e gli strumenti per la navigazione

COME VENGONO DISTRIBUITI GLI IPERTESTI La logica CLIENT-SERVER

internet Utilizzati per ricercare selettivamente informazioni di ogni natura presenti su internet. Motori di ricerca

Motori di ricerca più comuni YAHOO: YAHOO: http// Contiene una sezione chimica : ALTAVISTA: ALTAVISTA: http// Contiene una sezione chimica : GOOGLE: GOOGLE: http// E’ il più veloce e preciso motore di ricerca VIRGILIO: VIRGILIO: http// E’ ottimo per reperire siti italiani SCIRUS: SCIRUS: http// Un motore di ricerca specializzato nelle scienze. L’ideale per reperire bibliografia tecnico-scientifica.

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… Utilità degli ipertesti - 1 Un classico: la tavola periodica (ad esempio Scarno ma ricco di informazioni: National Institute of Standards and Technology CHEMISTRY WEBBOOK

Costruire e distribuire materiale didattico Un ipertesto permette di costruire documenti didattici sia tradizionali, che interattivi (e-learning). Utilità degli ipertesti - 2 La costruzione di un ipertesto costituisce un momento di apprendimento. Poiché richiede allo studente una elaborazione personale della materia Esempi: (un iper-manuale di fisica…) (seguire ad es. il link “Analytical Spectroscopy”) (un’introduzione alla nomenclatura organica) Approfondimento: cerca su un motore di ricerca l’opinione di R.Bromme (Università di Muenster): “Hypertexts as an active learning environment”

La logica degli ipertesti pervade la tecnologia… Ipertesti oltre l’HTML 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).

HTML - 1 E’ il più semplice e diffuso linguaggio per scrivere ipertesti. Un file HTML è semplicemente UN FILE DI TESTO (ASCII) Puoi generarlo o aprirlo con tutti i programmi capaci di leggere/modificare file di testo. American Standard Code for Information Interchange Uno standard che associa in modo univoco ed indipendente dal tipo di computer carattere  numero (byte) L’”estensione” è di solito “.html”, “.htm”, “.HTML”, “.HTM” ATTENZIONE: l’estensione è solo una convenzione per riconoscere i files, e non ha effetto sul contenuto del file stesso!

HTML - 2 Un file HTML contiene, oltre al testo, caratteri di controllo, filtrati e interpretati dai “browser”. I caratteri di controllo hanno la sintassi: bla bla bla bla che significa: il testo “bla bla” è assoggettato all’azione 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)

HTML - 3 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. Esempio Il testo: Ambarabà cici coco tre civette sul comò Apparirà come Ambarabà cici coco tre civette sul comò La formattazione corretta si ottiene con: Ambarabà cici coco tre civette sul comò delimita un paragrafo manda a capo Consultare la lista dei “tag” per le altre opzioni di formattazione

HTML - 4 INSERIRE UN’IMMAGINE È sufficiente inserire il “tag” Dove “nomefile” può essere: 1)Un file grafico che si trovi nella stessa directory dell’ipertesto, possibilmente nei formati JPEG, PNG o GIF 2)Un URL che indirizza ad un’immagine che si trova altrove Questa tag possiede opzioni per l’allineamento, la scala, ecc (vedi lista). Inoltre può essere “annidata” in altre tag. Ad esempio: mostra l’immagine al centro della pagina

HTML - 5 INSERIRE UN “LINK” L’espressione bla bla bla bla trasforma le parole “bla bla” in un collegamento all’URL specificata. Questa può essere ad esempio: 1)Un altro file html (è utile suddividere gli ipertesti in piccoli files) 2)un’immagine 3)Una risorsa (file o immagine) su un altro computer Per trasformare UN’IMMAGINE in LINK è sufficiente annidare l’immagine nel collegamento:

HTML - 6 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

HTML - 7 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 l’HTML. L’utente 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)

Presentazioni Powerpoint e HTML 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”.

Informatica e chimica L’informatica ha cambiato il modo con cui l’informazione chimica viene trasmessa L’Informatica non ha solo un valore tecnologico-strumentale, ma anche un valore scientifico e culturale autonomo. Fornisce una prospettiva sul mondo e una chiave di lettura della realtà originale e irriducibile a quelle fornite dalla fisica, dalla matematica e dalle altre scienze...e ha anche cambiato il modo di fare Chimica!

Il gioco delle perle di vetro

Informatica e chimica Organizzazione delle Conoscenze Chimiche attraverso IPERTESTI CHEMICAL EDUCATION: CHEMICAL EDUCATION: http//chemed.chem.purdue.edu/ GENERAL CHEMISTRY ONLINE: GENERAL CHEMISTRY ONLINE: http//antoine.fsu.umd.edu/chem/senese/101/index.shtml Italia: Italia: http// Informatica e chimica

Rappresentazione di proprietà chimiche Informatica e chimica

Rappresentazione tridimensionale della struttura molecolare 2D3D Informatica e chimica

La visualizzazione Vedere 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.

Conoscere La visualizzazione

Prevedere….ovvero fare SCIENZA La visualizzazione

Come funziona File di coordinate

Come funziona –2- 2.Programma di Visualizzazione

RASMOL/RASTOP: RASMOL/RASTOP: Visualizza il formato.pdb tipico delle proteine. Visualizzatori molecolari -1-

WiewerLite: WiewerLite: ( La versione light è gratuita ed è un sofisticato visualizzatore molecolare Visualizzatori molecolari -2-

MOLDRAW: MOLDRAW: http// Sviluppato preso il Dip. Chimica IFM è gratuito. Consente non solo la visualizzazione ma anche di effettuare misurazioni Visualizzatori molecolari -3-

MOLECOLE: MOLECOLE: Sviluppato da P. Ugliengo è associato al libro di testo: Atomi, molecole e materiali - Loescher. E’ presente un tutorial molecolare abbastanza elementare in italiano Visualizzatori molecolari - 4 -

Come funziona –3- 3.Programma di Plug-in 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 all’indirizzo:

Chime:Chime: creato dalla MDL Information Systems Inc. e disponibile consente di visualizzare strutture molecolari su internet. Plug-in chimici

Chime plugin 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 Esempio: visualizzare la struttura della morfina:

Chime plugin

Concetti avanzati: Chime plugin 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

Concetti avanzati: Chime plugin

Principali comandi Chime script 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”

SITI WEB SCIENTIFICI

Web pages -1- ESPECIALLY FOR TEACHERS!!!!

Web pages -2- STORIA della CHIMICA: STORIA della CHIMICA: http//

Web pages -3- SCIENZA, DIDATTICA e …..GIOCO: http//

Web page chimiche -1- ROLF CLAESSEN’S CHEMISTRY INDEX: ROLF CLAESSEN’S CHEMISTRY INDEX: http// Contiene una delle più complete risorse di chimica

Web page chimiche -2- CHEMDEX: CHEMDEX: http//

Web page chimiche -3- ABOUT.COM: ABOUT.COM: http//chemistry.about.com/education/chemistry/index.htm/

Web page chimiche -4- INSTRUCTIONAL RESOURCES FOR CHEMISTRY: INSTRUCTIONAL RESOURCES FOR CHEMISTRY: http//

Siti per chiedere aiuto VIALATTEA.NET: VIALATTEA.NET: http//