Corso WEB. Scuola Media Statale Ferentino. Aprile relatore: ing. Gianluca VENTURI. Corso WEB - lezione

Transcript

1 Corso WEB Scuola Media Statale Ferentino Aprile 2011 relatore: ing. Gianluca VENTURI Corso WEB - lezione 3 1

2 UN PO' DI RIPASSO... Corso WEB - lezione 3 2

3 ESERCITAZIONE Verifichiamo se abbiamo acquisito alcuni importanti concetti esaminati nella lezione precedente: Cos'è il web? Cos'è Internet? Corso WEB - lezione 3 3

4 Internet 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 Corso WEB - lezione 3 4

5 Utenti 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 Corso WEB - lezione 3 5

6 ESERCITAZIONE Cos'è un browser? Cos'é un motore di ricerca? Corso WEB - lezione 3 6

7 I 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 Corso WEB - lezione 3 7

8 I 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 Corso WEB - lezione 3 8

9 ESERCITAZIONE Che tipo di file può aprire un browser? Cos'altro può fare? Corso WEB - lezione 3 9

10 Ricordiamo 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... Corso WEB - lezione 3 10

11 L'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. Corso WEB - lezione 3 11

12 ESERCITAZIONE Linkiamo l'rss feed del nostro sito con tre diversi browser Eseguiamo una ricerca di RSS di nostro interesse e linkiamolo al nostro browser Corso WEB - lezione 3 12

13 Il 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. Corso WEB - lezione 3 13

14 ESERCITAZIONE Ricerca di podcast sul tema web e informatica e scarichiamolo Corso WEB - lezione 3 14

15 I 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 Corso WEB - lezione 3 15

16 WEB chi c'è dietro? Corso WEB - lezione 3 16

17 I contenuti del WEB Chi può pubblicare contenuti? Cosa serve per farlo? Corso WEB - lezione 3 17

18 Cosa serve per essere online 1. host: un computer (server) che ospiti il nostro sito facendogli corrispondere un indirizzo 2. dei contenuti compatibili con il web 3. il modo per caricare i contenuti sul sito Corso WEB - lezione 3 18

19 Creare 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; Corso WEB - lezione 3 19

20 ESERCITAZIONE 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. Corso WEB - lezione 3 20

21 Creare 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. Corso WEB - lezione 3 21

22 Creare pagine web Il miglior compromesso è utilizzare strumenti facilitanti che ci consentano comunque di capire cosa stiamo facendo. Proviamo dunque a parlare il linguaggio HTML... Corso WEB - lezione 3 22

23 La 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à? Corso WEB - lezione 3 23

24 Una pagina WEB: I TAG PRINCIPALI <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html xmlns=" <head> <title> </title> </head> <body> </body> </html> Corso WEB - lezione 3 24

25 Una pagina WEB: I TAG PRINCIPALI <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html xmlns=" <head> <title>la mia prima pagina web</title> </head> <body> <h1>questo è il titolo della mia pagina</h1> <p>questo è il contenuto</p> </body> </html> Corso WEB - lezione 3 25

26 Questo è il risultato Corso WEB - lezione 3 26

27 Regole I tag sono parole chiave del linguaggio HTML e si aprono e si chiudono <miotag> </miotag> TAG APERTO TAG CHIUSO Corso WEB - lezione 3 27

28 Impariamo i primi TAG TAG DESCRIZIONE HTML HEAD TITLE 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 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 <TITLE> che, come abbiamo visto, definisce il titolo della pagina. Attribuisce il titolo alla pagina web BODY Corpo o body del documento, è in questa sezione che lavoreremo maggiormente ed è proprio qui che andranno messe immagini, suoni, filmati, testo, form, tabelle, links e quant'altro faccia parte di html. Corso WEB - lezione 3 28

29 Regole 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. Corso WEB - lezione 3 29

30 ESERCITAZIONE 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 Corso WEB - lezione 3 30

31 ESERCITAZIONE 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! Corso WEB - lezione 3 31

32 Un metodo semplice per imparare Da questo sito potrete provare a digitare del testo HTML e vedere in tempo reale cosa accade: Corso WEB - lezione 3 32

33 ESERCITAZIONE Creiamo un testo ricco (font, bold, color...) Scegliere i COLORI per un sito web Inseriamo un filmato Youtube in una pagina web Corso WEB - lezione 3 33