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

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

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 HP2345 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 lutente 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.

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. Linconveniente 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 :] )

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.

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

…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 unorganizzazione centralizzata, ma con le pagine interne tutte linkate tra loro (organizzazione Circolare)… etc. etc.

Consigli per l uso Per avere unidea 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.

I cinque comandamenti Piacevolezza grafica Impatto sulla memoria visiva dellutente Volontà di evidenziare certi aspetti Necessità di catturare lattenzione e non di annoiare lutente Correttezza nel fornire gli elementi atti al riconoscimento del tipo di sito da parte dellutente. 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.

La Home Page ideale Logo o imgNome o identificativo Obiettivo del sito Argomento 1 Argomento 2 Collegamenti

Prima meglio farsi unidea 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…

Poi iniziamo a lavorare davanti al monitor

Un po di HTML I doc. HTML necessitano, per funzionare, di almeno 4 : fornisce al browser le informazioni sulla natura del documento relativo alle informazioni sulle intestazioni il titolo che identifica il documento 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:

Un esempio La mia prima Home Page Questa è la mia prima Home Page. Per ora è ancora scarna, ma presto la renderò più attraente.

Ora salviamo in formato HTML

Occhio all estensione

Ecco il risultato

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

Delimitare i paragrafi: il tag <p> Per delimitare i paragrafi allinterno di un testo vengono utilizzati il tag di apertura e quello di chiusura 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ù righe si fa uso del tag specifico (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, per uniformità ai nuovi standard xhtml e xml, prevede linserimento di uno slash (/) finale.

Un esempio La mia prima pagina web Informatica Generale Questa è una delle lezioni in cui parleremo di costruzione di siti web Speriamo siano di vostro interesse e gradimento

Il risultato

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 e del tag. TESTO oppure TESTO Valore = left, center, right

Riprendiamo lesempio di prima e aggiungiamo i tag che ci interessano Prova uno Informatica Generale Questa è una delle lezioni in cui parleremo di costruzione di siti web Speriamo sia di vostro interesse e gradimento

Ed ecco il nuovo risultato

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

Quindi… Prova uno Informatica Generale Questa è una delle lezioni in cui parleremo di costruzione di siti web Speriamo sia di vostro interesse e gradimento Clicca qui Indirizzo assoluto o Indirizzo relativo

Ecco il link

Un po di colore La mia prima pagina web Informatica Generale Questa è una delle lezioni in cui parleremo di costruzione di siti web Speriamo sia di vostro interesse e gradimento CLICCA QUI

Ora va meglio

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

Inseriamo il tag nel documento La mia prima pagina web Informatica Generale Questa è una delle lezioni in cui parleremo di costruzione di siti web Speriamo sia di vostro interesse e gradimento CLICCA QUI

Ed ecco la nostra pagina Fine