La struttura più esterna è quella che delimita l'intero documento ed è compresa tra i tag <html> e

Transcript

1 1. Introduzione La multimedialità è la compresenza e interazione di più mezzi di comunicazione in uno stesso supporto o contesto informativo. Si parla di contenuti multimediali, specie in ambito informatico, quando per comunicare un'informazione riguardo a qualcosa ci si avvale di molti media, cioè mezzi di comunicazione di massa, diversi: immagini in movimento (video), immagini statiche (fotografie), musica e testo. Un ipertesto è un insieme di documenti messi in relazione tra loro tramite parole chiave che fungono da collegamento. Può essere visto come una rete; i documenti ne costituiscono i nodi. La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere "il successivo", in base alla scelta del lettore di quale parola chiave usare come collegamento. L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di marcatura per ipertesti) è un linguaggio usato per descrivere la struttura dei documenti ipertestuali disponibili nel World Wide Web. Tutti i siti web sono scritti in HTML, codice che viene letto ed elaborato dal browser (ad esempio Internet Explorer, Mozilla FireFox, ), il quale genera la pagina che viene visualizzata sullo schermo del computer. L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. Estensione.html oppure.htm Il componente principale della sintassi di questo linguaggio è l'elemento, inteso come struttura di base a cui è delegata la funzione di dare forma ai dati. Ogni elemento è racchiuso all'interno di marcature dette tag, costituite da una sequenza di caratteri racchiusa tra due parentesi angolari, cioè i segni minore e maggiore (Esempio: <br>; il tag di questo esempio serve per indicare un ritorno a capo). Quando il tag deve essere applicato a una sezione di testo, l'ambito di applicazione deve essere delimitato fra un tag di apertura ed uno di chiusura, che coincide col tag di apertura preceduto da una barra (/) dopo la parentesi angolare aperta (Esempio: <b>testo testo testo</b>. In questo caso, il testo compreso tra questi due tag verrà visualizzato in grassetto dal browser). I documenti HTML presenta una struttura ad albero annidato, composta da sezioni delimitate da tag opportuni che al loro interno contengono a loro volta sottosezioni più piccole, sempre delimitate da tag. La struttura più esterna è quella che delimita l'intero documento ed è compresa tra i tag <html> e </html>. All'interno dei tag <html> lo standard prevede sempre la definizione di due sezioni ben distinte e disposte in sequenza ordinata: la sezione di intestazione o header, delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l'eccezione di alcuni elementi la sezione del corpo o body, delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.

2 Una pagina html con la corrispondente struttura ad albero affiancata

3 2. Link assoluti e relativi Poiché l organizzazione di un sito in cartelle è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti (link) verso tutte le pagine. Per farlo esistono due tecniche: indicare un link assoluto indicare un link relativo Percorsi Assoluti Con i percorsi assoluti non abbiamo che da indicare il percorso per esteso. Ad esempio: o o Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti esterni al proprio. Percorsi Relativi Spesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro stesso sito, è utile allora capire come funzionano i percorsi relativi. I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento. Per linkare due pagine che si trovano all interno della stessa directory è sufficiente scrivere: <a href="paginadalinkare.html">collegamento alla pagina da linkare nella stessa directory della pagina presente</a>

4 3. Panoramica di Amaya Amaya è al tempo stesso Un software di progettazione di pagine web Un browser (come Internet Explorer, Mozilla Firefox, Google chrome.. ) L interfaccia grafica è suddivisa in viste; oltre alla vista standard (di anteprima) tipica di ciascun browser abbiamo le seguenti viste addizionali: Struttura Mostra la struttura ad albero del documento; ogni elemento è rappresentato dal nome del tag seguito dagli attributi sulla stessa linea. Il contenuto di ciascun elemento è mostrato appena sotto a sinistra e può essere direttamente editato. Questa vista mostra tutti gli elementi del documento, anche quelli non visibili direttamente sul browser. Alternativa Questa vista mostra ciò che appare in un editor esclusivamente testuale (utile x testare l accessibilità di un sito web). Collegamenti Questa vista mostra la lista completa di link presenti nella pagina. Codice Questa vista mostra il codice html del documento; può essere utilizzata per scivere il codice html senza l ausilio di interfaccia grafica. Sommario Questa vista mostra una lista delle intestazioni (titoli) usati nel documento. Se il docuemtno è strutturato in modo corretto mostrerà un sommario del documento stesso. Creare un nuovo documento Il nome del file Il titolo della pagina

5 Editare le nuove pagine con Amaya Punto di inserimento Quando creiamo nuovi elementi è importante selezionare innanzitutto un punto di inserimento valido. I principali elementi che possiamo editare sono suddivisibili nelle seguenti categorie: Lavorare con le dimensioni del testo Lavorare con elenchi Lavorare con lo stile dei caratteri Lavorare con i collegamenti e le ancore Lavorare con le tabelle Dimensioni del testo Da editor abbiamo 4 diverse tipologie di titoli che differiscono per dimensione. Il pulsante P permette di inserire un nuovo paragrafo con le relative spaziature. Elenchi Possibilità di inserire liste puntate e numerate (più altre tipologie che non vedremo) Carattere Permette di impostare lo stile di carattere tra i seguenti a disposizione: Grassetto Corsivo Codifica Evidenziato Barrato Apice Pedice I collegamenti e le ancore Collegamenti assoluti occorre indicare l URL (indirizzo web univoco della risorsa) Collegamenti relativi si indica il percorso della risorsa partendo dalla cartella principale del sito (ad esempio il percorso delle immagini) Per comodità è possibile utilizzare la funzionalità click che permette di cliccare direttamente sulla pagina destinazione del link (sia che si tratti di una pagina interna o esterna al sito). Collegamenti ad ancore collegamento all interno di una pagina web Per prima cosa occorre definire un ancora al testo o risorsa a cui si vuole effettuare il collegamento (pulsante obiettivo a forma di ancora). Il secondo passo consiste nel creare il collegamento alla risorsa appena creata sfruttando sempre il pulsante collegamento.

6 URL Un Uniform Resource Locator o URL è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine. Ad esempio Lavorare con le tabelle Inserimento di una nuova tabella tramite barra degli strumenti o tramite menu (inserisci tabella). Su una tabella esistente è possibile: Aggiungere una riga / colonna Unire righe / colonne Dividere righe / colonne Selezionare una riga ctrl-t + ctrl-r Selezionare una riga ctrl-t + ctrl-c Selezionare una o + celle shift + pulsanti freccia

7 4. L inserimento di un menu Javascript Sul web si possono trovare un elevato numero di menu dinamici realizzati in javascript. Javascript è un linguaggio di programmazione in grado di essere interpretato direttamente dal browser. Per funzionare occorre 1. inserire nella pagine il codice html relativo ai contenuti del menu (da prelevare e da inserire nella sezione body) 2. inserire il corretto collegamento al file javascrip che contiene la funzione che si incarica dell animazione (da prelevare e da inserire nella sezione head) 3. inserire il corretto collegamento agli elementi grafici richiesti dal menu Vediamo un esempio preso dal sito: Scarico il file di esempio Apro la pagina di esempio scaricata e copio il codice html relativo ai contenuti del menu

8 Apro la pagina di esempio scaricata e copio il codice html relativo alla funzione javascript Copio nella cartella del mio sito i file javascript e grafici Modifico il contenuto del menu in relazione alle mie pagine

9 Il menu finale funzionante

10 5. Mappe concettuali Esempio di mappa concettuale Le mappe concettuali sono uno strumento grafico per rappresentare informazione e conoscenza. Servono per rappresentare graficamente le proprie conoscenze relative ad un argomento. Come sono fatte Le caratteristiche essenziali di una mappa concettuale sono le seguenti: È costituita da nodi concettuali, ciascuno dei quali rappresenta un concetto elementare rettangolo rappresentante il nome del concetto. I nodi concettuali sono collegati mediante delle relazioni associative rappresentate in genere da un predicato verbale frecce indicanti il predicato verbale. La struttura complessiva è di tipo reticolare (che quindi potrebbe non presentare un "preciso punto di partenza"). Come si realizzano Utili accorgimenti per realizzare una mappa concettuale sono i seguenti: individuare chiaramente il tema che si sta descrivendo e che circoscrive l'ambito di analisi; svilupparla per quanto possibile dall'alto verso il basso, considerando le relazioni trasversali una eccezione; adottare una logica di realizzazione in cui prima avviene l'identificazione dei concetti, poi la creazione delle relazioni associative tra di essi. riuscire a collegare i diversi argomenti in modo chiaro e corretto Le mappe concettuali e gli ambienti digitali Ci sono molti programmi per fare mappe concettuali, fra i quali IHMC Cmap Tools, gratuito per usi educativi e privi di fini di lucro e disponibile per diversi sistemi operativi.

11 6. Cmap Tools Utilizzare CmapTools La finestra Viste è il centro organizzativo di CmapTools. Da qui si possono organizzare le Cmap e le Risorse in cartelle, nel disco rigido del computer personale e su server remoti che sono condivisi dalla Cmap community. Sul lato sinistro della finestra Viste ci sono quattro bottoni. Un clic su ciascuno di essi avrà l'effetto di mostrare diverse locazioni di Cmap e Risorse sul campo destro della stessa finestra. Quando si avvia CmapTools si presenta preselezionata la vista Cmap in Locale. Questa locazione contiene tutte le Cmap e le Risorse presenti localmente nella cartella My Cmaps dell'utente attuale del computer.

12 Le mappe condivise sono salvate nei Server remoti di Cmap, per essere facilmente visionabili ed editabili da altri utenti di CmapTools di tutto il mondo. Le Cmap salvate su server remoto sono anche automaticamente generate come pagina web, permettendo di vederle a chiunque abbia un browser web. Creare una Cmap Selezionare File e poi Nuova Cmap dalla finestra "Viste CmapTools": (Si può anche usare la combinazione Ctrl+n.) Si aprirà una nuova Cmap dal titolo "Senza titolo 1" Aggiungere un Concetto Da una mappa aperta: Fare un doppio clic col tasto sinistro in un punto qualsiasi della Cmap (è possibile anche cliccare ovunque col tasto destro e scegliere Nuovo Concetto dal menu che appare. Apparirà una forma con punti interrogativi al suo interno.

13 Digitare in esso un'etichetta che sostituisca i punti interrogativi (non occorre selezionare questi se la casella del nuovo concetto è stata appena creata). Cliccare col tasto sinistro in una porzione bianca della Cmap, esternamente al nodo, per confermare l'etichetta. La forma è divenuta ora un nuovo concetto. Creare una Proposizione da Concetti Esistenti Da una mappa aperta: Iniziando con due o più concetti, fare un clic col tasto sinistro su un concetto da cui si vuol generare una proposizione. Cliccare col sinistro quindi trascinare a partire dal rettangolino delle frecce. Continuando a tenere premuto il tasto sinistro, si noterà una freccia che segue il puntatore del mouse. (un modo alternativo per ottenere che il mouse trasporti la freccia consiste nel cliccare e rilasciare sulla stessa casella delle frecce del primo concetto, quindi muovere il mouse senza tasto premuto.)

14 Se si è scelto di trascinare il mouse dalla casella delle frecce con tasto premuto, scegliere un diverso concetto sul quale portare la freccia e rilasciare il mouse. (Se si è optato per il clic sulla casella frecce del primo concetto, portare la freccia sul concetto prescelto, quindi fare un nuovo clic su di esso.) Apparirà un rettangolo unito a entrambi i concetti con linee di connessione. Digitare un'etichetta per il rettangolo, quindi cliccare su una parte bianca della Cmap. Il rettangolo scomparirà, lasciando al suo posto una frase legame. La frase legame completa la proposizione. Una proposizione può avere più elementi che non due concetti e una frase legame. È possibile applicare i metodi descritti in questa sezione della guida, così come Creare una Nuova Proposizione da Un Concetto, o aggiungerla alle proposizioni esistenti.

15 7. Strumenti di presentazione: Power Point Concetti generali Introduzione Aprire Power Point Aprire un documento o Vuoto o Modello struttura ( Formato Struttura diapositiva ) o Creazione guidata contenuto Progetti Relazione Finale Progetto o Esistente Applico un modello struttura scelto Salvare o ppt presentazione Salvo ei due possibili formati o pps presentazione di Power Point Guida in linea Visualizza o Zoom o Barre strumenti Sviluppare una presentazione con grafici e oggetti Riapro i documenti esistenti salvati Modalità di visualizzazione o Normale Elenco: struttura opp. diapositive o Sequenza diapositive o Presentazione Modifica diapositiva titolo Apertura presentazione vuota o Testo Inserimento del titolo e del sottotitolo o Caratteristiche del testo (Formato carattere) Modifica tipo carattere o Spostamento e ridimensionamento caselle di testo Spostamento caselle di testo Trascinamento con il mouse Spostamento con le frecce della tastiera Inserimento nuove diapositive personalizzata o Layout diapositiva preesistente Layout Inserimento diapositiva di testo Testo Inserimento diapositiva con immagine Oggetti contenuto Inserimento diapositiva di testo e contenuto Testo & Oggetti contenuto Diagramma a barre e diagramma a torta o Modello struttura Inserimento di un modello struttura a scelta Visualizza Schema Diapositiva Inserimento Loghi Modifica la struttura delle diapositive Inserimento Schemi Titolo Modifica Layout Normale Modifica Sfondo Formato Sfondo Inserimento Data e N Pag Inserisci Intestazione e piè pagina Intestazione e Piè di pagina Esempi di inserimento oggetti o Tabella Formato Inserire tabella 8 righe 12 colonne o Grafico Tipo di grafico Colonne Provare vari tipi di grafici

16 Barre Righe Torta o Clip Art Inserire Clip Art o Immagine Inserire Immagine o Diagramma Organigramma Inserimento nuove forme e layout Inserisci organigramma o Clip Multimediale Filmato da raccolta multimediale Disegno di oggetti grafici o Inserimento di vari oggetti grafici Disegno di un diagramma Linee Rettangoli Oggetti a mano libera Frecce Frecce Connettori Forme Spostamento degli oggetti Connettori o Modifica del formato degli oggetti grafici Traslare o ruotare un oggetto Ridimensionare un oggetto Modificare colore di sfondo, e colore e spessore di linea Effetti speciali e preparazione della stampa Effetti speciali o Animazioni (Presentazione Animazione personalizzata) Applicazione al singolo oggetto o allo schema diapositiva Selezione oggetto Aggiungi effetto Animazione testo Entrata Prova effetti di entrata Enfasi Prova effetti di enfasi Uscita Prova effetti uscita Movimentazione manuale oggetti Prova di movimentazione manuale Spostare l oggetto al di fuori dell area di visualizzazione o Transizione diapositive (Presentazione Transizione diapositiva) Tipologie di transizione Prova di transizioni predefinite Applicazione a tutte o ad un sottoinsieme di diapositive Transizione al clic o a tempo Prova di transizioni a tempo Memorizzazione intervalli Presentazione Prova intervalli o Impostazione Azione Inserimento dei collegamenti dall indice o Realizzazione di una presentazione personalizzata (Presentazione Presentazioni personalizzate) Scelta di alcune diapositive e del nome della presentazione o Imposta presentazione Personalizzata Scelta della presentazione Colore Penna Scelta colore penna Avanzamento manuale o intervalli Registrazione intervalli Stampa o Note per chi presenta le diapositive (Visualizza Schema note) o Stampati