Corso di Formazione PON 1.1 per l’ISTITUTO A.DE PACE, Lecce
“ Nuovi Strumenti e Tecnologie Interattive per la Didattica”
Realizzazione siti web e strumenti a supporto
Dott.ssa Antonella Dell’Aquila, Area Sistemi Informativi e Knowledge Management, Consorzio Cetma
Obiettivi del Modulo
REALIZZAZIONE SITI WEB
E STRUMENTI A SUPPORTO
• Cenni sull’architettura ed il gergo di Internet
• Accessibilità ed usabilità dei siti internet
• Creare pagine HTML in modo visuale
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
2
Internet, la rete delle reti
La rete nel corso degli anni si è evoluta a tal punto da
assumere nuovi significati
Internet è:
- Una rete di calcolatori
- Una rete di reti
- Un insieme di protocolli
- Un insieme di servizi
- Un insieme di informazioni
- Una comunità virtuale
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
3
Cos’è un Protocollo
È un insieme di regole fisse e comuni su
come deve essere organizzato lo scambio
di informazioni tra due entità.
Se le due entità sono remote, si parla di
protocollo di rete
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
4
Principali Protocolli di Internet
HTTP (HyperText Transfer Protocol):
protocollo di trasferimento di un ipertesto
FTP (File Transfer Protocol):
protocollo di trasferimento file
POP3 (Post Office Protocol):
protocollo per l’accesso ad un account di posta elettronica
SMTP (Simple Mail Transfer Protocol):
protocollo per la trasmissione via internet di e-mail
Ethernet:
protocollo per reti locali
WiFi (Wireless Fidelity) o IEEE 802.11:
famiglia di protocolli per la trasmissione “senza fili” delle informazioni
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
5
Principali Protocolli di Internet
DIFFERENZE TRA FTP E HTTP
FTP è un sistema a due vie, che può essere usato per copiare o
spostare i file da un server ad un computer client nonché caricare il
trasferimento di file da un client a un server
HTTP, d'altro canto, è strettamente a senso unico: "trasferimento" di
testo, immagini e altri dati (pagina Web) da server a un computer
client che utilizza un browser web per visualizzare i dati.
Il trasferimento di file in FTP significa esattamente questo: i file
vengono automaticamente copiati o spostati da un server a un
computer client su disco rigido, e viceversa.
In un trasferimento HTTP sono in grado di visualizzare una pagina che
“sparisce” quando il browser è disattivato (a meno di comandi per
spostare i dati sul computer personale).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
6
Architettura Client-Server
Il Web è una architettura software di tipo clientserver
Le pagine web risiedono su un Server remoto, non sul proprio PC
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
7
Trovare una risorsa in Internet
Un Uniform Resource Locator (URL):
È una sequenza di caratteri che identifica
univocamente una risorsa sul Web
(pagina Web, immagine, file,ecc)
Es.
http://www.pubblica.istruzione.it/
URL del Ministero della Pubblica Istruzione
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
8
Gli indirizzi WEB
Un indirizzo IP è un numero che identifica
univocamente, nell'ambito di una singola rete, i
dispositivi
Es. :
193.206.15.201
IP del sito web del Ministero
Pubblica Istruzione
è l'equivalente di un indirizzo stradale o un numero
telefonico.
Ad ogni Indirizzo Web corrisponde un indirizzo IP
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
9
“Navigare” in rete
schema o protocollo
dominio
path
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
pagina
query string
10
Sito Web
Un sito web è un insieme di pagine web,
ovvero una struttura ipertestuale di
documenti accessibili con un browser
tramite World Wide Web su rete Internet.
I siti web si possono distinguere
sommariamente in due tipologie principali:
– siti statici
– siti che presentano invece contenuti redatti
dinamicamente (per esempio grazie al
collegamento con un database)
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
11
Portale Web
Prende il nome di portale un sito web che
ha assunto dimensioni tali da costituire un
punto di partenza, una porta di ingresso
ad un gruppo consistente di risorse per gli
utenti del web; l'argomento del portale può
essere più o meno generale oppure
specializzato (portale verticale).
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
12
L’HTML
• HTML (Hyper Text Mark-Up Language) è
un linguaggio usato per descrivere i
documenti ipertestuali disponibili nel Web.
• Tutti i siti web presenti su Internet sono
costituiti da codice HTML, il codice che è
letto ed elaborato dal browser, il quale
genera la pagina come noi la vediamo.
• Estensione dei documenti HTML: .html o
.htm
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
13
Come scrivere in HTML
• Direttamente in un editor di testo utilizzando i tag
(elementi di marcatura) del linguaggio HTML.
 completo controllo degli elementi
della pagina
CONTRO  - si deve conoscere il linguaggio
- maggiore possibilità di errore
- maggiore tempo di sviluppo
PRO
• Utilizzando editor HTML visuali.
 - anche utenti non esperti del linguaggio
possono scrivere pagine html
- minore tempo di sviluppo
CONTRO  utilizzare editor che generino codice
standard W3C
PRO
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
14
Cos’è l’accessibilità
• L’accessibilità indica se e come la tecnologia
può essere usata dall’utente disabile o con
minori abilità fisiche.
• Il W3C ha promosso la WAI (Web Accessibility
Initiative), iniziativa che mira ad individuare e
suggerire i criteri di realizzazione dei siti web
accessibili.
• In Italia la legge 4 del gennaio 2004, detta
“Legge Stanca” impone una revisione generale i
siti di tutte le amministrazioni pubbliche in modo
da rispettare i requisiti di accessibilità in base ad
un principio di non discriminazione.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
15
Accesso alla rete
Gli utenti possono operare in contesti molto diversi:
• Possono essere in grado di vedere, ascoltare o muoversi ma non
sono in grado di trattare alcuni tipi di informazioni
• Possono avere difficoltà nella lettura o nella comprensione del testo
• Possono non essere in grado di usare il mouse o la tastiera
• Possono avere solo uno schermo testuale o una connessione
Internet molto lenta
• Possono trovarsi in contesti in cui le loro mani, occhi o orecchie sono
occupati
• Possono avere dei browser molto diversi da quelli usati per la
validazione o browser basati su dispositivi di sintesi vocale
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
16
Cos’è l’usabilità
• L'usabilità è definita dall'ISO (International
Standard Organization), come l'efficacia,
l'efficienza e la soddisfazione con le quali
determinati utenti raggiungono determinati
obiettivi in determinati contesti.
• In pratica definisce il grado di facilità e
soddisfazione con cui l'interazione uomostrumento si compie.
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
17
Editor HTML visuali
WYSIWYG (What You See Is What You Get):
Quello che vedi è quello che ottieni.
Si utilizzano gli strumenti
visuali per introdurre testo,
immagini, link, video, ecc
E’ lo strumento che si
preoccupa a tradurre il tutto
in HTML
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
18
Editor HTML visuali
A pagamento
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
Gratuiti
19
Codice HTML: esempio 1
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
20
Codice HTML: esempio 2
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
21
Codice HTML: esempio 3
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
22
Codice HTML: esempio 4
Nuovi Strumenti e Tecnologie Interattive per la Didattica – Istituto A. De Pace, Lecce
23