STRUMENTI DIGITALI PER LA COMUNICAZIONE- IPERTESTO, NAVIGAZIONE E CENNI HTML. Corso di Laurea in Scienze della Comunicazione Paola Vocca

Transcript

1 STRUMENTI DIGITALI PER LA COMUNICAZIONE- IPERTESTO, NAVIGAZIONE E CENNI HTML Corso di Laurea in Scienze della Comunicazione Paola Vocca

2 IPERTESTO Documenti con organizzazione non sequenziale documenti non lineari Link permette di collegare le parti di un ipertesto 2

3 3

4 IL CONCETTO DI IPERTESTO Definizione: Modello testuale in cui le diverse unità di contenuti non sono articolate secondo un ordine lineare prestabilito, ma secondo una struttura a reticolare. Un testo tradizionale (libro, film) prevede una modalità di consultazione predefinita: sequenziale. Un ipertesto non prevede un percorso fisso di consultazione o navigazione: avviene seguendo liberamente i possibili collegamenti impostati dall autore dell ipertesto Strumenti Digitali per la comunicazione - a.a. 2014/15 4

5 IPERTESTO Un ipertesto nasce dalla combinazione di: nodi: i singoli blocchi di contenuti (come le pagine di un sito Web); collegamenti: i nessi logici (o fisici) tra un blocco e l altro L autore di un ipertesto crea i nodi (contenuti) e stabilisce collegamenti. Web è sinonimo di ipertesto: Internet è oggi in un unico, immenso ipertesto di dati, documenti e risorse (testi, immagini, suoni e filmati), composto da milioni di nodi (pagine) e collegamenti. 5

6 IPERTESTO Il funzionamento del Web è basato su: protocollo HTTP (Hyper-Text Transfer Protocol, protocollo per il trasferimento di ipertesti) linguaggio HTML (Hyper-Text Markup Language, linguaggio per la definizione di ipertesti) 6

7 LA NAVIGAZIONE O BROWSING La modalità di consultazione di un ipertesto viene definita navigazione o browsing I programmi per la consultazione degli ipertesti su Internet (ossia per navigare sulla Rete) sono i web browser I browser web sono dei Client HTTP che consentono di: accedere alle pagine web (risorse) di un Server HTTP interpretare il codice HTML e visualizzare gli elementi delle pagine (testi, immagini, animazioni, suoni, filmati) navigare tra pagine web mediante i collegamenti ipertestuali (che fanno uso dell indirizzamento univoco mediante gli Universal Resource Locator, URL) 7

8 NAVIGAZIONE Attenzione: Un ipertesto consente una grandissima libertà di movimento. La libertà di spostamento (unita alla sovrabbondanza di informazioni) è controbilanciata dall effetto labirinto. 8

9 PROGETTAZIONE DI UN SITO WEB Chi costruisce un ipertesto (o in generale un sito Web) deve progettarne attentamente la navigazione, sia in termini di contenuti che di struttura Contenuti (linee guida) informazioni presentate in modo sintetico e di facile lettura i nodi dell ipertesto non devono essere troppo densi: meglio spezzare una pagina eccessivamente lunga in più pagine brevi (che non occupino più di un paio di schermate da scorrere verticalmente). Le pagine web brevi, oltre tutto, hanno il vantaggio di essere caricate molto più rapidamente; struttura: fare attenzione a come articolare fra loro le pagine del sito, se sono numerose è possibile predisporre i collegamenti in modo che da ogni punto del sito il visitatore abbia la facoltà di saltare a qualsiasi altro, oppure impostare una struttura meno libera per la navigazione maggiore è la libertà lasciata al visitatore, maggiore diventa la probabilità che costui si perda all interno del sito (o lo abbandoni prima di averne consultate tutte le parti) 9

10 STRUTTURE IPERTESTUALI (1) lineare: pagine collegate l una all altra, in sequenza; l ultima pagina della serie contiene un collegamento che consente di tornare all inizio; rappresenta il minimo livello di complessità ipertestuale gerarchica: pagine ramificate in modo gerarchico, ossia suddivise in sezioni e sottosezioni; questa struttura, la più tipica e diffusa sul Web, funziona molto bene quando i contenuti sono articolati in modo gerarchico reticolare o circolare: tutte le pagine collegate tra loro (da ciascuna di esse si può saltare a un altra qualunque); questa struttura è la più complessa in assoluto, poiché i collegamenti sono numerosi e fittamente intrecciati fra loro 10

11 STRUTTURE IPERTESTUALI (2) Per facilitare la consultazione di ipertesti complessi, occorre aiutare il lettore, ad esempio con mappe grafiche, che possano favorire la visione d insieme e l orientamento dei navigatori. NOTA: Attenzione ai vicoli ciechi 11

12 MAPPA DI NAVIGAZIONE La mappa del sito ha due funzioni: logica: consente al visitatore di abbracciare con un solo sguardo l intera ramificazione del sito; pratica: permette al visitatore di raggiungere immediatamente la pagina di suo interesse, facendo clic sulla voce opportuna all interno della mappa (mappa cliccabile) 12

13 IL LINGUAGGIO HTML Tutti i documenti oggi presenti in Internet sono scritti in HTML (acronimo di HyperText Markup Language). HTML è un linguaggio di programmazione interpretato (vs compilato ) HTML comprende un insieme di regole di scrittura del testo (tag, o marcatori ), mediante le quali è possibile interpretare univocamente il testo e visualizzarlo con la corretta formattazione Le specifiche del linguaggio HTML 3.2 sono state pubblicate nel 1996 dal World Wide Web Consortium (W3C), organismo internazionale, fondato nell ottobre 1994, composto da università e aziende private (tra cui IBM, Microsoft, Netscape Communications Corporation, Novell Softquad, Spyglass e Sun Microsystems). Esso ha lo scopo di guidare lo sviluppo del Web e di definirne gli standard. La versione 3.2 è oggi superata dalla proposta di nuovi standard: HTML 5.0, HTML Dinamico (DHTML), XML (extensible Markup Language), XTHML. 13

14 LINGUAGGIO HTML Un file HTML è un documento di testo non formattato di tipo ASCII. All interno del documento si inserisce non solo il testo che si intende far apparire nella pagina Web ma anche alcune istruzioni specifiche (tag o marcatori) del linguaggio HTML Una volta che il file viene salvato con estensione.htm o.html tutti i programmi utilizzati per la navigazione su Internet (browser) sono in grado di interpretarne il codice e di visualizzare il documento con la corretta formattazione 14

15 15

16 HTML STRUTTURA DI UN DOCUMENTO Tre tag fondamentali: <HTML>, <HEAD> e <BODY> Struttura di base di ogni documento HTML: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <HTML> identifica il punto di inizio e di chiusura di un documento HTML <HEAD> identifica l intestazione di un doc. HTML (include ciò che viene scritto nella barra del titolo con il tag <TITLE> <BODY> identifica il corpo del documento, ossia il contenuto vero e proprio della pagina (quello che verrà visualizzato nella finestra del browser). Tra i due tag <BODY>, si ritrovano: Testo del documento e tutti i tag di formattazione dei caratteri, Tag per la formattazione della pagina (esempio sfondo), Tag dei collegamenti ipertestuali 16

17 FORMATTARE CON I TAG Parole o sigle racchiuse tra parentesi angolari < > Si usano a coppie (apertura e chiusura) p.e.: <title> </title> Nessuna distinzione tra maiuscole e minuscole 17

18 TAG PER GRASSETTO E CORSIVO Grassetto (bold): <b> </b> <b>corpo grassetto</b> corpo grassetto Corsivo (italic): <i> </i> <i>corpo italico</i> corpo italico 18

19 FORMATTAZIONI MULTIPLE Si possono applicare più formattazioni contemporaneamente <p><b><i>veni, Vidi, Vici!</i></b></p> Veni, Vidi, Vici! 19

20 L ORDINE DEI TAG I tag devono essere nidificati correttamente p.e.: <i><b>testo</b></i> Ci sono tag singoli che non hanno chiusura <hr/> riga orizzontale di separazione <br/> interruzione di riga 20

21 21

22 STRUTTURA PAGINA HTML <!DOCTYPE HTML> <html> <head> < meta > dati iniziali e il titolo della pagina </head> <body> contenuto principale della pagina </body> </html> 22

23 TAG NOTEVOLI <!DOCTYPE HTML> indica al browser la versione del linguaggio <meta http-equiv="content-type" content="text/html;charset=utf-8" /> specifica la codifica dei caratteri 23

24 INTESTAZIONI HTML descrive la relazione tra le diverse parti di un documento Intestazioni dal livello 1 fino al livello 8 grandeza decrescente 24

25 ESEMPIO DI INTESTAZIONI <h1>presidente della Repubblica</h1> <h2> Presidente del Consiglio </h2> <h3> Ministro</h3> Presidente della Repubblica Presidente del Consiglio Ministro 25

26 FORMATTAZIONE HTML Le righe del codice sorgente non corrispondono a quelle visualizzate Codice HTML dice al browser come produrre la pagina formattata in base al significato dei tag non all aspetto del codice sorgente 26

27 FORMA BEN STRUTTURATA Rende facile la comprensione la manutenzione Tag per un paragrafo di testo <p> </p> 27

28 SPAZI NEL CODICE SORGENTE Per facilitare la leggibilità spazi tabulazioni a capo 28

29 IL BROWSER E GLI SPAZI Trasforma sequenze di più spazi in uno solo prima di elaborare il codice HTML Unica eccezione il testo incluso nei tag <pre> e </pre> viene sempre visualizzato così come appare nel codice sorgente 29

30 Apertura Chiusura Significato Richiesto <html> <head> <body> </html> </head> </body> <p> </p> paragrafo <hr/> <h1>...<h8> </h1>...</h8> documento HTML; il primo e l ultimo tag in una pagina informazioni introduttive (ad esempio il titolo); all inizio della pagina la parte principale della pagina riga orizzontale <b> </b> grassetto <i> </i> corsivo <a href="fn"> </a> <img src="fn"> </img> <br/> intestazioni: otto livelli, da usare in ordine decrescente àncora; fn dev essere il percorso di un file HTML immagine; fn dev essere il percorso di un file.jpg o.gif break; forza un a capo si si si 30

31 CARATTERI SPECIALI Se la nostra pagina dovesse contenere una relazione matematica come 0 < p > r Il browser interpreterebbe < p > come tag visualizzando scorrettamente il testo 31

32 CODICE DI ESCAPE Indica i simboli speciali & (e commerciale, o ampersand) seguita da un codice specifico e da un punto e virgola p.e.: < < 32

33 LETTERE ACCENTATE & lettera tipo di accento (grave, acute, tilde, ) ; Codice è ñ ü produce è ñ ü 33

34 COLLEGAMENTI IPERTESTUALI (HYPERLINK) Rendono possibili passaggi repentini da un documento a un altro e permettono di raggiungere velocemente informazioni diverse, con ampia libertà di movimento e autonomia nella gestione delle esplorazioni sul Web. Collegamenti esterni: rimandano ad altre pagine HTML (o a indirizzi di posta elettronica); Collegamenti interni: rimandano a parti specifiche del documento corrente. Vengono realizzati tramite la speciale marcatura assegnata, con appositi tag, a un elemento di testo oppure a un immagine (intera o mappata, cioè suddivisa in aree sensibili ). Sintassi <a href= URL > </a> Il riferimento di destinazione può essere: Un URL <A HREF= >Vai al sito Microsoft</A> <A HREF= ><IMG SRC= logo_ms.gif ></A> Un indirizzo di posta elettronica <A HREF= mailto:supptec@microsoft.it >Scrivi a Ass.Tecnica</A> Un segnalibro <A HREF= #inizio >Vai all inizio della Divina Commedia</A> 34

35 CONTENUTI DI UNA PAGINA HTML Testo, immagini, tabelle, suoni, liste, moduli, altre pagine, effetti particolari e collegamenti ipertestuali (link): il testo è inserito direttamente all interno del documento HTML, insieme ai tag necessari i materiali multimediali (immagini, suoni, filmati, animazioni) sono invece file esterni, richiamati nella pagina in fase di visualizzazione mediante i rispettivi tag presenti nel file HTML i collegamenti ipertestuali sono associati (mediante appositi tag, sempre inseriti nel file HTML di base) a singole parole, intere frasi o immagini, facendo clic sulle quali il lettore può passare ad altri punti dello stesso documento (link interni), o ad altri documenti o indirizzi di posta elettronica (link esterni). 35

36 COLLEGAMENTI E ÀNCORE Collegamento ipertestuale àncora: il testo da cui parte il link nel documento attuale riferimento ipertestuale: l indirizzo della pagina web arrivo del link <a href="path del file"> testo </a> Path del file è una Url esterna al sito Path del file si riferisce ad una pagina interna del sito 36

37 PAGINE INTERNE Riferimento a pagine locali se nella stessa directory: il nome del file in un altra directory: il path per trovarli Possono riferirsi a cartelle più in basso o in alto nella gerarchia delle directory 38

38 SINTASSI DEL LINGUAGGIO HTML: I TAG (1/2) Parole chiave contenute all interno dei simboli < (maggiore) e > (minore), chiamati anche parentesi angolari. Alcuni comandi sono espressi mediante un solo tag (che imposta un istruzione univoca) La maggior parte dei comandi si imposta tramite due tag accoppiati: uno per l istruzione iniziale di apertura, seguito dal testo sul quale l istruzione deve operare, e uno uguale al primo ma preceduto da / (slash) per l istruzione di chiusura. Esempio: Per mandare a capo un testo è sufficiente il singolo tag <BR>: Nel mezzo del cammin<br>di nostra vita Nella pagina Web il testo verrà visualizzato su due righe spezzate: Nel mezzo del cammin di nostra vita Per far apparire la parola cammin in grassetto servono invece due tag, uno di apertura (inizio della formattazione) e uno di chiusura (fine della formattazione): Nel mezzo del <B>cammin</B> di nostra vita Ecco come il testo apparirà all interno del browser: Nel mezzo del cammin di nostra vita 39

39 SINTASSI DEL LINGUAGGIO HTML: I TAG (2/2) ATTRIBUTI E VALORI Le istruzioni inserite all interno dei tag possono contenere oltre ai nomi, anche gli attributi e i valori del comando dato. <TAG ATTRIBUTO=VALORE> </TAG> ESEMPIO: Per visualizzare la parola mezzo in colore rosso, il codice HTML è: Nel <FONT COLOR= #FF0000 >mezzo</font>del cammin di Il tag complessivo è composto dai seguenti elementi: FONT è il nome del comando (formattazione dei caratteri) COLOR ne è uno dei possibili attributi #FF0000 è il valore dell attributo (tipo di colore espresso in HEX) STRUTTURA A MATRIOSKA In un documento HTML, si possono trovare tag diversi che agiscono contemporaneamente su una stessa porzione di testo. Le varie istruzioni devono essere racchiuse l una dentro l altra, rispettando un ordine di apertura e chiusura dei tag definito a matrioska (o a scatole cinesi o a cipolla ): il primo tag ad aprirsi deve essere l ultimo a chiudersi. <I> <U> <B> </B> </U> </I> Ogni tag va a influenzare solo la porzione di testo racchiusa tra il rispettivo tag di apertura e quello di chiusura. 40

40 IMMAGINI <img src="path del file"/> usa gli stessi path dei link Formato immagini GIF e JPEG GIF: Graphic Interchange Format JPEG: Joint Photographic Experts Group 41

41 DOVE VANNO LE IMMAGINI? Default le immagini sono inserite nella pagina nel punto dove c è il tag il testo si allinea al margine inferiore 42

42 ATTRIBUTI DEI TAG Aggiungono ulteriore indicazioni al tag Sono all interno delle parentesi angolari p.e.: per allineare un testo, URL nei link, nome immagini 43

43 ATTRIBUTO STYLE Molte proprietà colore dimensione posizione attributo proprietà valore style = "nome_proprietà : specifica" 44

44 ESEMPI DI STYLE <body style="background-color : black"> <body style="background-color : black; color : green"> <h1 style="text-align : center; color : yellow; fontfamily : arial"> 45

45 NOMI DEI COLORI Un numero esadecimale p.e.:"#ff0000" rosso "#00FF00" verde "#0000FF" blu Nomi predefiniti 46

46 LISTE Puntata (non ordinata) <ul> </ul> <li> e </li> per gli elementi della lista Numerata (ordinata) <ol> </ol> utilizza lo stesso tag <li> </li> Sottolista: una lista dentro un altra 47

47 LISTA PUNTATA pane acqua uova latte biscotti <ul> </ul> <li> pane</li> <li> acqua</li> <li> uova</li> <li> latte</li> <li> biscotti</li> 48

48 LISTA NUMERATA 1. uscire di casa 2. prendere il treno 3. fare lezione 4. pranzare 5. fare lezione 6. prendere il treno 7. tornare a casa <ol> </ol> <li> uscire di casa</li> <li> prendere il treno</li> <li> fare lezione</li> <li> pranzare</li> <li> fare lezione</li> <li> prendere il treno</li> <li> tornare a casa</li> 49

49 SOTTOLISTA pane acqua - liscia - gasata - diuretica uova latte biscotti <ul> </ul> <li> pane</li> <li> acqua <ul> <li>liscia</li> <li>gasata</li> <li>diuretica</li> </ul> </li> <li> uova</li> <li> latte</li> <li> biscotti</li> 50

50 TABELLE Il tag <table> </table> Ogni riga è racchiusa dalla coppia <tr> e </tr> Ogni cella è racchiusa dalla coppia <td> e </td> 51

51 TABELLA X X O O X X O O <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td>x</td> <td>x</td> <td>o</td> <td>o</td> <td> </td> <td>x</td> <td>x</td> <td>o</td> <td>o</td> 52

52 ANCORA TABELLE Si può creare un intestazione centrata sopra la tabella con i tag <caption> e </caption> Le intestazioni di colonna sono la prima riga della tabella inserendo al posto dei tag delle celle i tag <th> e </th> 53

53 COSA ABBIAMO VISTO Insieme di tag HTML Collegamenti ipertestuali sul Web COLLEGAMENTI INTERNI ED ESTERNI Inclusione di immagini JPEG e GIF Colori Liste e Tabelle 54

54 DESCRIVERE UNA PAGINA WEB Server memorizza il file sorgente descrive la pagina da visualizzare Il browser crea e visualizza l immagine partendo dal file che contiene la descrizione (file sorgente) può adattare l immagine alle caratteristiche del video 55