Lezione 14

1. Lezione 14 INFORMATICA GENERALE Prof. Luciano Costa Ottimizzazione grafica di Orfeo Magnanimo

2. Html Oggi inizieremo quella serie di lezioni specifiche su come costruire un nostro sito web (oppure il sito web di qualcun altro:). Ciò che potremo offrirvi sarà soltanto un input rispetto al vasto mondo del ragno (leggi rete): nozioni per come iniziare a CREARE pagine web e “uploadarle” sul vostro server. Per il resto starà al vostro desiderio di apprendere ed alla vostra volontà di approfondire o meno il discorso. “Io posso solo insegnarti la soglia, dopo sta a te attraversarla.” disse un giorno Morpheus a Neo. Cercheremo di essere il più chiari possibile. Firmato il sottoscritto Gatto e la qui presente Volpe

3. Prima di tutto vediamo come concepire il nostro sito • Esistono diversi modi di concepire il nostro sito web. • Organizzazione sequenziale • Organizzazione centralizzata • Organizzazione gerarchica • Organizzazione a tentacoli (o ad albero)

4. Organizzazione sequenziale HP 2 3 4 5 Questa modalità di organizzazione del sito imita lo stile della stampa. E’ un metodo di progettazione semplice e veloce, ma risulta essere estremamente riduttivo per quel che riguarda la navigazione: obbliga l’utente a seguire una strada univoca, azzerando così la personalizzazione della navigazione. E’ consigliabile solo per siti estremamente ridotti, cioè con un ristretto numero di pagine.

5. Organizzazione centralizzata HP Si può accedere a tutte le pagine dalla Home Page. In questo caso si può visitare immediatamente la pag. a cui siamo interessati. L’inconveniente sta nel fatto che, per navigare tra le pag. interne, bisogna sempre passare per la Home Page. (logicamente si possono creare sempre dei link alle altre pagine :] )

6. Organizzazione gerarchica HP Questo tipo di struttura permette di organizzare il nostro sito in modo “scalare”: permette cioè di suddividerlo in sezioni e sotto- sezioni. Non che non sia possibile farlo anche con altri tipi di strutturazione, ma organizzando gerarchicamente il nostro sito ci guadagneremo soprattutto in precisione, ordine e facilità di gestione. Logicamente se il sito contiene un numero di pagine estremamente ridotto, il discorso della gerarchia a più livelli cade.

7. Organizzazione a tentacoli (o ad albero) HP Tale organizzazione permette di progettare il sito mediante una strutturazione logica delle pagine. Es: la HP si lega bene con pag. 2, 3 e 4, ma non con la 5 e la 6, che sono invece dipendenti o correlate alle altre pag. E’ un altro modo di strutturare siti… Certo si perde un po’ in ordine assoluto, anche se si guadagna in logicità.

8. …poi fate come credete meglio. (sistemi misti) Tali metodi di strutturazione non sono necessariamente “statici”: si possono mischiare un po’ le carte in tavola. Possiamo adottare un metodo gerarchico, ma utilizzare anche “sfumature” a tentacoli; oppure un’organizzazione centralizzata, ma con le pagine interne tutte linkate tra loro (organizzazione Circolare”)… etc. etc.

9. “Consigli per l’uso” Per avere un’idea di come costruire una pagina web è utile richiamarsi sempre ai criteri di impaginazione della carta stampata (GGGGGHHHH!!! Direbbe il Prof.) Quindi, anche se nella costruzione di pagine web non esistono regole grafiche a cui attenersi, è sempre meglio seguire i 5 Comandamenti che individuano gli aspetti fondamentali di una web-impaginazione.

10. I cinque comandamenti • Piacevolezza grafica • Impatto sulla memoria visiva dell’utente • Volontà di evidenziare certi aspetti • Necessità di catturare l’attenzione e non di annoiare l’utente • Correttezza nel fornire gli elementi atti al riconoscimento del tipo di sito da parte dell’utente. Nella costruzione del nostro sito sarà difficile riuscire a coprire tutti questi aspetti, è perciò consigliabile valutare se farà più al nostro caso un aspetto grafico accattivante, oppure una strutturazione mirata alla praticità ed alla facilità di utilizzo.

11. La Home Page ideale Logo o img Nome o identificativo Obiettivo del sito Argomento 1 Argomento 2 Collegamenti E-mail

12. Prima meglio farsi un’idea Prima di iniziare a lavorare con il computer, è meglio chiarirsi un po’ le idee su come vogliamo che il nostro sito risulti. Magari facciamo qualche prova su carta. …”qualche”…

13. Poi iniziamo a lavorare davanti al monitor

14. Un po’ di HTML • I doc. HTML necessitano, per funzionare, di almeno 4 <TAG> : • <HTML> fornisce al browser le informazioni sulla natura del documento • <HEAD> relativo alle informazioni sulle intestazioni • <TITLE> il titolo che identifica il documento • <BODY> fornisce le informazioni sul punto in cui comincia il corpo del documento, cioè il contenuto della pagina da visualizzare. !!! Questi non sono comandi di markup ma tag contenitori, quindi necessitano dei relativi tag di chiusura: </HTML> </HEAD> </TITLE> </BODY>

15. Un esempio <HTML> <HEAD> <TITLE>La mia prima Home Page</TITLE> </HEAD> <BODY> Questa è la mia prima Home Page. Per ora è ancora scarna, ma presto la renderò più attraente. </BODY> </HTML>

16. Ora salviamo in formato HTML

17. Occhio all’estensione

18. Ecco il risultato

19. La formattazione del testo: intestazioni I tag <h1>, <h2>, <h3>, … <h6>, sono utilizzati per creare intestazioni (h=heading=intestazione) nel doc. Il linguaggio HTML prevede 6 livelli di importanza progressivamente minore, da <h1> a <h6>. Più il numero che segue la lettera “h” è alto, più il livello è basso: <h1> = testo grandissimo <h6> = testo piccolissimo

20. Delimitare i paragrafi: il tag <p> Per delimitare i paragrafi all’interno di un testo vengono utilizzati il tag di apertura <p> e quello di chiusura </p> che inseriscono una interruzione di riga (ritorno a capo) ed una riga vuota tra i paragrafi.

21. Il tag <br /> Per far si che il browser distribuisca il testo su più righe si fa uso del tag specifico <br /> (tra br e / c’è lo spazio). Questo tag inserisce una interruzione di riga, cioè un ritorno a capo e comanda al browser di visualizzare il testo secondo la disposizione da noi desiderata. Non avendo il tag di chiusura </br>, per uniformità ai nuovi standard xhtml e xml, prevede l’inserimento di uno slash (/) finale.

22. Un esempio <html> <head> <title>La mia prima pagina web</title> </head> <body> <h1>Informatica Generale</h1> <p>Questa è una delle lezioni<br /> in cui parleremo di<br /> <b>costruzione di siti web</b></p> <p>Speriamo siano di<br /> vostro interesse e gradimento</p> </body> </html>

23. Il risultato

24. Gli attributi dei tag <p> e <h1> Il testo visualizzato dal browser è allineato per default a sinistra, ma è possibile allinearlo anche al centro e a destra grazie ad un attributo del tag <p> e del tag <h1>. <p align=“valore”>TESTO</p> oppure <h1 align=“valore”>TESTO</h1> Valore = “left” , “center” , “right”

25. Riprendiamo l’esempio di prima e aggiungiamo i tag che ci interessano <html> <head> <title>Prova uno</title> </head> <body> <h1 align="center">Informatica Generale</h1> <p>Questa è una delle lezioni<br /> in cui parleremo di<br /> <b>costruzione di siti web</b></p> <p align="right">Speriamo sia di<br /> vostro interesse e gradimento</p> </body> </html>

26. Ed ecco il nuovo risultato

27. Collegamenti ipertestuali Il tag utilizzato per i collegamenti ipertestuali è <a> … </a> (a=ancoraggio). Tale tag delimita il testo che costituirà il link. Poi bisogna immettere l’attributo del tag, per creare il vero e proprio riferimento ad un altro documento html. Tale attributo è href (hypertext reference). La sintassi da digitare quindi è: <a href=“documentoX.html”>Clicca qui</a>

28. Quindi… <html> <head> <title>Prova uno</title> </head> <body> <h1 align="center">Informatica Generale</h1> <p>Questa è una delle lezioni<br /> in cui parleremo di<br /> <b>costruzione di siti web</b></p> <p align="right">Speriamo sia di<br /> vostro interesse e gradimento</p> <h6 align=“center”><a href=“documentoX.html”>Clicca qui</a></h6> </body> </html> Indirizzo assoluto o Indirizzo relativo

29. Ecco il link

30. Un po’ di colore <html> <head> <title>La mia prima pagina web</title> </head> <body bgcolor="yellow"> <h1 align="center"><font color="red">Informatica Generale</font></h1> <p>Questa è una delle lezioni<br /> in cui parleremo di<br /> <b>costruzione di siti web</b></p> <p align="right">Speriamo sia di<br /> vostro interesse e gradimento</p> <h6 align="center"><a href="DocumentoX.html">CLICCA QUI</a></h6> </body> </html>

31. Ora va meglio

32. Ora inseriamo le immagini Per inserire le immagini nella nostra pagine utilizzeremo il tag <img /> ed il suo attributo “src” (=sorgente). Il tag <img /> stabilisce il punto di inserimento della immagine da visualizzare, mentre l’attributo “src” ne indica il percorso ed il nome. La sintassi è quindi: <img src=“percorso/nomefile” /> Es: <img src=“immagini/lorenzo.gif” /> (siccome sono uno ordinato, ho raccolto tutte le img in una directory (cartella).

33. Inseriamo il tag nel documento <html> <head> <title>La mia prima pagina web</title> </head> <body bgcolor="yellow"> <h1 align="center"><font color="red">Informatica Generale</font></h1> <p>Questa è una delle lezioni<br /> in cui parleremo di<br /> <b>costruzione di siti web</b></p> <p align="right">Speriamo sia di<br /> vostro interesse e gradimento</p> <img src=“immagini/lorenzo.gif" /><br /> <h6 align="center"><a href="DocumentoX.html">CLICCA QUI</a></h6> </body> </html>

34. Ed ecco la nostra pagina Fine