Pagine web…a portata
di mouse
Progetto PON – FSE
Obiettivo C – Azione 1
Annualità 2008 - 2009
1
Pagine web…a portata
di mouse
“Pagine web…a portata di mouse” è il nome
del sito web che noi alunni delle classi
quarta e quinta del plesso della scuola
Primaria di Caprecano abbiamo realizzato
nell'ambito del progetto PON.
Siamo stati seguiti dall'esperta Emilia
Desiderio, affiancata dalla nostra maestra
d'inglese Maria Annunziata Moschella.
2
Dall’idea al progetto
Prima di cominciare il lavoro di
sviluppo del sito, abbiamo cercato di
capire cosa è WWW e quali sono i
diversi passaggi che dalla
progettazione portano fino alla
pubblicazione di un sito Web.
3
Dall’idea al progetto
Il modello di riferimento principale per la
realizzazione delle nostre pagine è stato il sito
della scuola www.autonomia82.it, in particolare
le pagine realizzate nei precedenti anni scolastici
dagli alunni delle classi quinte, nell’ambito dei
progetti POF curati dalla nostra maestra di
inglese Maria Annunziata Moschella.
Abbiamo, poi, ricercato in rete altri siti sviluppati
da bambini delle scuole Primarie.
Ne abbiamo visualizzato le pagine e, con una
discussione di gruppo, ne abbiamo messo in
evidenza pregi e difetti.
4
Le fasi
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Scelta del template
Storyboard
Installazione di Dreamweaver
Utilizzo delle funzionalità principali di un editor html
Digitazione del contenuto delle pagine
Installazione di Gimp
Elaborazione immagini digitali con Gimp
Installazione di Camtasia
Foto - Video
Elaborazione audio e video con Camtasia
Gestione media
Inserimento di elementi multimediali
Inserimento dei collegamenti
Verifica finale
5
Scelta del template
• Abbiamo ricercato in rete, utilizzando il
browser Explorer ed il motore di ricerca
Google, template free, ossia modelli gratuiti
di pagine web, con una impostazione grafica
predefinita
• Abbiamo fatto il download dei template più
interessanti sul Pc in locale.
• Abbiamo partecipato ad una discussione di
gruppo per scegliere il template “più carino” da
utilizzare per la realizzazione del nostro sito.
6
Storyboard
• Sulla base del template scelto, abbiamo
stabilito le sezioni e le pagine da realizzare
Sezioni
Le nostre pagine
Foto
Giochiamo
Appunti
Musica
Link
Amici
Novità
Pagine
Home
Chi siamo
Pagine
personalizzate
I giochi di ieri e di
oggi
7
Installazione di
Dreamweaver
Dreamweaver è un potente software per la creazione
di pagine web. E’ il più usato, dal momento che non
richiede nessuna conoscenza di linguaggi di
programmazione html.
• Abbiamo ricercato in rete la versione free/prova
del programma Dreamweaver per la creazione
delle pagine web.
• Abbiamo fatto il download della versione più
adatta allo scopo.
• Abbiamo installato Dreamweaver sui computer
dell’aula multimediale.
8
Utilizzo delle funzionalità
principali di un editor html
•
•
•
•
•
•
•
•
•
•
Abbiamo imparato ad utilizzare le funzionalità
principali di un editor html:
Definizione del sito
Impostazioni generali e creazione di pagine
Creazione e salvataggio di una pagina modello
Modifica di una pagina modello
Creazione di pagine web sulla base della pagina modello
Definizione delle proprietà di una pagina
Inserimento e formattazione di testo
Inserimento di immagini
Inserimento e definizione delle proprietà di una tabella
Inserimento di link (collegamenti)
9
Digitazione del
contenuto delle pagine
• Abbiamo scritto su carta i contenuti
delle pagine personali o fatto una
ricerca in rete per i contenuti delle
pagine su tematiche specifiche.
• Abbiamo, poi, digitato e formattato
il testo nelle relative pagine create
con Dreamweaver.
10
Installazione
di Gimp
Gimp è un avanzato programma di grafica.
• Abbiamo ricercato in rete la versione
free/prova del programma Gimp per
l’elaborazione delle immagini.
• Abbiamo fatto il download della versione
più adatta allo scopo.
• Abbiamo installato Gimp sui computer
dell’aula multimediale.
11
Elaborazione immagini
digitali con Gimp
• Abbiamo imparato ad utilizzare alcune
delle funzionalità principali di Gimp per
l’elaborazione delle immagini:
- ridimensionamento, rotazione e ritaglio di
immagini
- uso degli strumenti principali
- inserimento testo e sua formattazione
- utilizzo riempimenti, sfumatura e filtri.
Abbiamo poi elaborato immagini e
foto da inserire nel nostro sito.
12
Installazione di
Camtasia
Camtasia è un programma professionale per
l’elaborazione di audio e video.
• Abbiamo ricercato in rete la versione di
prova (Trial) del programma
• Ne abbiamo fatto il download
• Abbiamo poi installato Camtasia sui Pc
dell’aula multimediale.
13
Foto – Video
Nelle belle giornate di sole, siamo usciti
nel cortile della scuola di Caprecano e
abbiamo scattato bellissime foto e
realizzato piccoli video.
Abbiamo scelto anche altre fotografie
scattate dalla maestra Maria Annunziata
Moschella a Matera, durante l’escursione
del 22 Aprile 2009.
14
Elaborazione
audio – video con Camtasia
• Abbiamo imparato ad utilizzare alcune
delle funzionalità principali di Camtasia
per l’elaborazione audio-video:
- importazione dei video e delle foto in Camtasia
- definizione della sequenza dei clip del video,
con il “drag and drop” (trascinamento) delle
immagini sulla “timeline”
- aggiunta di transizioni, audio, titoli iniziali e di
coda
- salvataggio dei file in un formato adatto al
Web
15
Gestione media
Prima di inserire immagini e video nelle
singole pagine, abbiamo creato nel sito
cartelle specifiche per organizzare al
meglio i vari tipi di media.
Avere una struttura ben organizzata dei
vari file che compongono il sito
permette, infatti, una più facile
realizzazione e gestione delle pagine.
16
Inserimento di
elementi multimediali
• Una volta realizzati o adattati i
video e le immagini, siamo passati ad
inserirli nelle pagine specifiche.
• Abbiamo dovuto utilizzare tabelle
per aiutarci a posizionare al meglio
testo ed elementi grafici nelle
pagine.
17
Inserimento dei
collegamenti
La navigazione nel sito avviene mediante
link (collegamenti) tra le pagine. Con gli
specifici comandi di Dreamweaver:
• abbiamo inserito i link alle varie sezioni
nella pagina modello in modo da averli
disponibili in ogni pagina.
• abbiamo realizzato pagine menù ed
inserito i link alle varie pagine elencate.
18
Verifica finale
• Abbiamo messo insieme le pagine
realizzate da ognuno di noi sui vari Pc.
• Abbiamo controllato il corretto
funzionamento dei link e la
visualizzazione dei vari media.
Le “Pagine Web…a portata di mouse”
ora sono pronte per essere
messe online.
19
Ringraziamo:
• il “nostro” Dirigente scolastico, che ci ha permesso
di frequentare questo corso
• la “nostra” esperta Emilia, che ci ha insegnato
tantissime cose
• la “nostra” maestra Nunzia, sempre pronta ad
aiutarci quando eravamo in difficoltà
• i “nostri” collaboratori scolastici, Gerardo e
Vincenzo, che, con tanta pazienza, hanno sistemato
la “nostra” aula multimediale
• tutti voi qui presenti, perché ci avete ascoltato con
grande attenzione, dandoci la possibilità di
illustrarvi il lavoro da noi svolto
20
…e adesso
..vi chiediamo ancora un poco di pazienza:
ecco le pagine da noi realizzate e poi
pubblicate sul sito della nostra scuola:
www.autonomia82.it
21