Corso WEB Scuola Media Statale Ferentino - Aprile 2011 relatore: ing. Gianluca VENTURI - lezione 3
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Corso WEB
Scuola Media Statale Ferentino
Aprile 2011
relatore: ing. Gianluca VENTURI
www.ergonotec.it
Corso WEB - lezione 3 1UN PO' DI RIPASSO....
www.ergonotec.it
Corso WEB - lezione 3 2ESERCITAZIONE
Verifichiamo se abbiamo acquisito alcuni
importanti concetti esaminati nella lezione
precedente:
Cos'è il web?
Cos'è Internet?
www.ergonotec.it
Corso WEB - lezione 3 3Internet e Web
Per eliminare la possibile confusione che si
potrebbe creare nei termini possiamo dire che
“Internet è la rete mentre il web
è uno dei modi di utilizzarla”
www.ergonotec.it
Corso WEB - lezione 3 4Utenti della rete
dati di Audiweb :
nel primo mese del 2011 risultano 25,8 milioni gli
Italiani che si sono collegati a internet almeno una volta
nella giornata si collegano
12,6 milioni di utenti attivi
che hanno navigato per 1 ora e 40 minuti
consultando 201 pagine
www.ergonotec.it
Corso WEB - lezione 3 5ESERCITAZIONE
Cos'è un browser?
Cos'é un motore di
ricerca?
www.ergonotec.it
Corso WEB - lezione 3 6I principali browser
Diffusione in Europa
Firefox 37,4 %
IE 36,4 %
Chrome 16,5 %
Apple Safari 4,8 %
Opera 4,2 %
Flock ...
Dati statcounter aggiornati a Marzo 2011
www.ergonotec.it
Corso WEB - lezione 3 7I principali motori di ricerca
Google
Yahoo
Bing (oggi partner di Yahoo)
....poco altro...
In USA: Aol, Ask.com, …
In Italia: Libero, Virgilio,...
In Russia, Cina e Giappone dei motori “locali”
www.ergonotec.it
Corso WEB - lezione 3 8ESERCITAZIONE
Che tipo di file può aprire
un browser?
Cos'altro può fare?
www.ergonotec.it
Corso WEB - lezione 3 9Ricordiamo le principali funzioni di un browser
Visualizzare pagine web (funzione nota)
Ma vediamo anche qualcos'altro:
Integrarsi con strumenti di ricerca e client di posta
Archiviare link e password
Aggregare feed RSS
Gestire podcast
...
www.ergonotec.it
Corso WEB - lezione 3 10L'RSS Feed
Wikipedia: RSS ([…] Really Simple Syndication) è uno dei
più popolari formati per la distribuzione di contenuti
Web; è basato su XML, da cui ha ereditato la semplicità,
l'estensibilità e la flessibilità.
L'applicazione principale per cui è noto sono i feed RSS,
che permettono di essere aggiornati su nuovi articoli o
commenti pubblicati nei siti di interesse senza doverli
visitare manualmente uno a uno.
www.ergonotec.it
Corso WEB - lezione 3 11ESERCITAZIONE
Linkiamo l'RSS feed del nostro sito con
tre diversi browser
Eseguiamo una ricerca di RSS di
nostro interesse e linkiamolo al
nostro browser
www.ergonotec.it
Corso WEB - lezione 3 12Il Podcast
da Wikipedia: Il podcasting è un sistema che permette di
scaricare in modo automatico documenti (generalmente
audio o video) chiamati podcast, utilizzando un
programma ("client") generalmente gratuito chiamato
aggregatore o feed reader. [...]
Podcasting è un termine basato sulla fusione di due parole:
iPod (il popolare riproduttore di file audio MP3 di Apple), e
broadcasting*
*broadcasting: trasmissione di informazioni da un sistema trasmittente
ad un insieme di sistemi riceventi non definito a priori.
www.ergonotec.it
Corso WEB - lezione 3 13ESERCITAZIONE
Ricerca di podcast sul tema
web e informatica e
scarichiamolo
www.ergonotec.it
Corso WEB - lezione 3 14I contenuti del WEB
Contenuti e applicazioni gratuite
(freeware, shareware, GNU),
le insidie del “gratuito”
Contenuti ed applicazioni a pagamento e
Copyright
Libertà, “controllo” dei contenuti
www.ergonotec.it
Corso WEB - lezione 3 15WEB chi c'è dietro?
www.ergonotec.it
Corso WEB - lezione 3 16I contenuti del WEB
Chi può pubblicare contenuti?
Cosa serve per farlo?
www.ergonotec.it
Corso WEB - lezione 3 17Cosa serve per essere online
1. host: un computer (server) che ospiti il nostro
sito facendogli corrispondere un indirizzo
www.miosito.it
2. dei contenuti compatibili con il web
3. il modo per caricare i contenuti sul sito
www.ergonotec.it
Corso WEB - lezione 3 18Creare pagine web
Ci sono 2 strade che potete percorrere per creare
pagine web:
1. usare programmi visuali che consentono di
realizzare un sito senza conoscere nulla del
linguaggio HTML (come Frontpage o Word);
2. imparare i fondamenti del linguaggio HTML
aiutandosi con programmi (editor) che facilitano
il nostro compito;
www.ergonotec.it
Corso WEB - lezione 3 19ESERCITAZIONE
Proviamo a percorre la prima strada,
usiamo un documento word e
convertiamolo in formato HTML
Proviamo poi ad esaminare il codice
che è stato generato aprendo lo stesso
file con un editor di testo.
www.ergonotec.it
Corso WEB - lezione 3 20Creare pagine web
Vi accorgerete presto
che la prima strada
che fornisce da subito
risultati “facili”
diventerà molto meno
conveniente quando
nascerà il primo
immancabile
problema.
www.ergonotec.it
Corso WEB - lezione 3 21Creare pagine web
Il miglior compromesso è
utilizzare strumenti
facilitanti che ci consentano
comunque di capire cosa
stiamo facendo.
Proviamo dunque a “parlare”
il linguaggio HTML ....
www.ergonotec.it
Corso WEB - lezione 3 22La “grammatica” dell'HTML
Il W3C (World Wide Web Consortium)
Da Wikipedia:“Il web ormai non è più uno strumento per «appassionati», ma è
diventato parte integrante della vita comune dell'essere umano. Attualmente
esistono diversi tipi di apparecchi (come cellulari e PDA) che accedono ad internet.
Ciò è possibile solo grazie ad un «comune linguaggio di comunicazione» [...].
Il W3C si occupa di aggiornare e creare queste specifiche. ”
Cos'è l'accessibilità?
www.ergonotec.it
Corso WEB - lezione 3 23Una pagina WEB: I TAG PRINCIPALI
www.ergonotec.it
Corso WEB - lezione 3 24Una pagina WEB: I TAG PRINCIPALI
La mia prima pagina web
Questo è il titolo della mia pagina
Questo è il contenuto
www.ergonotec.it
Corso WEB - lezione 3 25Questo è il risultato
www.ergonotec.it
Corso WEB - lezione 3 26Regole
I tag sono “parole chiave” del linguaggio HTML
e si aprono e si chiudono
TAG TAG
APERTO CHIUSO
www.ergonotec.it
Corso WEB - lezione 3 27Impariamo i primi TAG
TAG DESCRIZIONE
HTML Inizio codice html vero e proprio, tutto ciò che sarà
posto all'interno di questo documento e fino al relativo
tag di chiusura sarà inteso come struttura del codice
html
Testata o head del documento, in questa sezione trovano
HEAD posto tutti quei tags che impartiscono direttive al browser
quali: titolo, comandi Meta, richiami ai fogli di stile, scripts.
Per ora accontentiamoci di conoscere il tag che,
come abbiamo visto, definisce il titolo della pagina.
Attribuisce il titolo alla pagina web
TITLE
Corpo o body del documento, è in questa sezione che
BODY lavoreremo maggiormente ed è proprio qui che andranno
messe immagini, suoni , filmati, testo, form, tabelle, links e
quant'altro faccia parte di html.
www.ergonotec.it
Corso WEB - lezione 3 28Regole
1.I TAG possono essere scritti indifferentemente
in maiuscolo o in minuscolo
2.Lo spazio tra i tag viene ignorato dal browser
3.Se si commette qualche errore nei tag di solito il
browser provvede ad “aggiustarlo” e a
visualizzare comunque correttamente la pagina
ma non è bene riportare correttamente tutti i
tag.
www.ergonotec.it
Corso WEB - lezione 3 29ESERCITAZIONE
Proviamo a farlo noi ora:
1. Apriamo un nuovo file di testo utilizzando notepad.
2. inseriamo il testo indicato sopra (omettiamo l'intestazione).
3. Salviamo il file con il nome prova1.htlm
4. apriamo il file appena salvato con un “doppio click”
www.ergonotec.it
Corso WEB - lezione 3 30ESERCITAZIONE
Proviamo a fare la stessa cosa con
un figlio word:
1. Apriamo un nuovo file word.
2. inseriamo il testo indicato sopra.
3. Salviamo il file come pagina web prova2.htlm
4. apriamo il file appena salvato con un “doppio click”
5. riapriamo poi il file prova2 con notepad e vediamo cosa è
stato creato.... CHE DISASTRO!
www.ergonotec.it
Corso WEB - lezione 3 31Un metodo semplice per
imparare
Da questo sito potrete provare a digitare del testo
HTML e vedere in tempo reale cosa accade:
http://www.w3schools.com/html/default.asp
www.ergonotec.it
Corso WEB - lezione 3 32ESERCITAZIONE
Creiamo un testo “ricco” (font, bold,
color...)
Scegliere i COLORI per un sito web
http://visibone.com/colorlab/big.html
Inseriamo un filmato Youtube in una
pagina web
www.ergonotec.it
Corso WEB - lezione 3 33Puoi anche leggere
