Lezione 14

Ottimizzazione grafica di Orfeo Magnanimo

INFORMATICA GENERALEProf. Luciano Costa

HtmlOggi 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 CREAREpagine web e “uploadarle” sul vostro server.Per il resto starà al vostro desiderio di apprendere ed alla vostravolontà 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

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)

Organizzazione sequenziale

HP 2 3 4 5

Questa modalità di organizzazione del sito imita lo stile dellastampa. E’ un metodo di progettazione semplice e veloce, marisulta 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è conun ristretto numero di pagine.

Organizzazione centralizzata

HP

Si può accedere a tutte le pagine dalla Home Page. In questocaso 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 possonocreare sempre dei link alle altre pagine :] )

Organizzazione gerarchica

HP

Questo tipo di struttura permette di organizzare il nostro sito inmodo “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à digestione. Logicamente se il sito contiene un numero di pagineestremamente ridotto, il discorso della gerarchia a più livelli cade.

Organizzazione a tentacoli (o ad albero)

HP

Tale organizzazione permette di progettare il sito mediante unastrutturazione 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à.

…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 utilizzareanche “sfumature” a tentacoli; oppure un’organizzazionecentralizzata, ma con le pagine interne tutte linkate traloro (organizzazione Circolare”)… etc. etc.

“Consigli per l’uso”

Per avere un’idea di come costruire una pagina web è utilerichiamarsi 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 5Comandamenti che individuano gli aspetti fondamentali

di una web-impaginazione.

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 copriretutti 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.

La Home Page ideale

Logo o img Nome o identificativo

Obiettivo del sito

Argomento 1

Argomento 2

Collegamenti

E-mail

Prima meglio farsi un’idea

Prima di iniziare a lavorare con il computer, è meglio chiarirsiun po’ le idee su come vogliamo che il nostro sito risulti.

Magari facciamo qualche prova su carta.

…”qualche”…

Poi iniziamo a lavorare davanti al monitor

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, quindinecessitano dei relativi tag di chiusura: </HTML> </HEAD></TITLE> </BODY>

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>

Ora salviamo in formato HTML

Occhio all’estensione

Ecco il risultato

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 numeroche segue la lettera “h” è alto, più il livello è basso:

<h1> = testo grandissimo<h6> = testo piccolissimo

Delimitare i paragrafi: il tag <p>

Per delimitare i paragrafi all’interno di un testovengono utilizzati il tag di apertura <p> e quellodi chiusura </p> che inseriscono una interruzione

di riga (ritorno a capo) ed una riga vuota tra i paragrafi.

Il tag <br />

Per far si che il browser distribuisca il testo su più righesi fa uso del tag specifico <br /> (tra br e / c’è lo spazio).Questo tag inserisce una interruzione di riga, cioè unritorno 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.

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>

Il risultato

Gli attributi dei tag <p> e <h1>

Il testo visualizzato dal browser è allineato per defaulta 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”

Riprendiamo l’esempio di primae 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>

Ed ecco il nuovo risultato

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>

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 assolutoo

Indirizzo relativo

Ecco il link

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>

Ora va meglio

Ora inseriamo le immagini

Per inserire le immagini nella nostra pagine utilizzeremoil tag <img /> ed il suo attributo “src” (=sorgente).

Il tag <img /> stabilisce il punto di inserimento dellaimmagine 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 inuna directory (cartella).

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>

Ed ecco la nostra pagina

Fine