Upload
tammaro-cirillo
View
217
Download
0
Embed Size (px)
Citation preview
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
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