View
217
Download
0
Category
Preview:
Citation preview
05/03/2009
1
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Lezione del 3 marzo 2009
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Creare un sito web
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 3
Orario lezioni
Il nuovo orario di lezione è:
• martedì 16-19
• venerdì 16-19
In questo modo il corso terminerà a fine marzo.
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Creazione di un sito
05/03/2009
2
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 5
Layout
Innanzitutto bisogna scegliere il layout della
pagina, in particolare posizione e voci del menù:
• larghezza della pagina: legata alla dimensione
della finestra o fissa (e sua posizione)
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 6
Posizione menù
• Posizione e voci del menù: solo in alto, a
fianco oppure su più lati
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 7
Griglia principale
Si scompone la pagina in una griglia e si realizza
la tabella che la deve contenere:
• solitamente una tabella più esterna determina
la posizione e dimensioni rispetto alla finestra
• una seconda tabella definisce gli spazi per i
menù che poi vengono creati tramite altre
tabelle
Utilizzare un’unica tabella è più complesso
perché bisogna unire molte celle
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 8
Realizzazione menù
• I menù sono solitamente tabelle con un’unica
riga o colonna
• Le voci possono essere dei link testuali, ma
solitamente sono realizzati con immagini
• Un vantaggio di questa tecnica è che
modificando l’immagine posso aggiornare il
menù in tutte le pagine del sito (ma non il
relativo collegamento…)
05/03/2009
3
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Larghezza tabelle
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 10
Dimensione tabella e colonne
• Può essere impostata come valore assoluto
(pixel) oppure relativo (alla dimensione della
finestra del browser, solitamente 100%)
• Comunque verrà estesa alla dimensione
minima del suo contenuto (perciò dimensione
di celle e colonne hanno priorità)
• Se occupa più della larghezza della finestra del
browser verrà attivata la barra di scorrimento
orizzontale del programma
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 11
Dimensioni colonne
• Lo stesso vale anche per la dimensione delle
colonne
• Prima viene riservato lo spazio per le colonne
con larghezza espressa in pixel, poi lo spazio
rimanente viene suddiviso tra quelle con
larghezza in percentuale
• Raramente si vincola l’altezza delle righe
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 12
Dimensioni celle
• Essendo una griglia, l’altezza e la larghezza
delle celle è la maggiore tra quelle della stessa
riga e colonna
• Può essere impostata come valore assoluto
(pixel) oppure relativo (alla dimensione della
tabella)
• Comunque verrà estesa alla dimensione
minima del suo contenuto
05/03/2009
4
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 13
Esempi layout
• Per ottenere un risultato come www.units.it
posso:
• centrare la tabella o…
• inserirla in una colonna centrata di una tabella
50% 50%
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 14
Tabelle per linee
• Per disegnare una linea orizzontale si può
usare il tag <HR>, ma non supporta
personalizzazioni
• Spesso invece si usa una cella vuota alta pochi
pixel con sfondo colorato
• Inserendoci un’immagine creata
appositamente è possibile anche visualizzare
delle righe sfumate o generare altri effetti
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Esempio 1: piccolo sito aziendale
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 16
Minisito aziendale
I siti per piccole ditte sono solitamente minimali,
composti da 5-10 pagine statiche i cui contenuti
ricalcano quelli del depliant aziendale.
Sono graficamente accattivanti ma hanno poco
testo, al più una gallery dei prodotti offerti
Le parti dinamiche (news, forum, area
riservata…) sono troppo spesso abbandonate, per non parlare del riferimento e-mail �
05/03/2009
5
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 17
Problema
Creare un piccolo e semplice sito aziendale con:
• presentazione dell’azienda
• pagine con i prodotti/servizi principali
• contatti
Requisiti:
• navigazione tramite menù orizzontale
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 18
Struttura sito
Homepage
Prodotti Contatti
Servizi
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 19
Struttura pagina
• Utilizzare uno schema di questo tipo
menù
fototesto
menù menù menù menù
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 20
Menù sito aziendale
Il menù principale contiene:
• rimando all’homepage (sempre presente!)
• presentazione, valori, storia, vision e/o mission
dell’azienda
• prodotti venduti e/o principali servizi offerti
• presentazione delle lavorazioni, metodi,
strumentazione, tecnologia utilizzata
• contatti e mappa stradale
05/03/2009
6
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 21
Icone per menù
Per recuperare velocemente dei pulsanti da
utilizzare nel menù si può:
• partire da www.google.it → immagini
• scrivere “icon” seguito dal nome in inglese del
pulsante che state cercando es. “homepage”
• selezionare nel menù a tendina “immagini
piccole” o medie
• salvare l’icona scelta con il tasto destro e il
comando “salva immagine con nome…”
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 22
Mappe
• Per recuperare velocemente una mappa da
utilizzare nella pagina contatti:
• partire da www.google.it → maps
• cercare l’indirizzo esatto della ditta
• premere il tasto “Prt scr” (o “Stampa”)
• effettuare l’incolla su Irfanview, tagliare
l’immagine e salvarla come .jpg
Verificare prima i termini d’uso dell’immagine!
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Esempio 2: photogallery
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 24
Problema
Si vuole visualizzare una galleria di immagini,
suddivise per categoria, che potrebbero essere:
• l’album delle foto personali
• il catalogo dei prodotti aziendali
aggiungendo un piccolo commento per ogni foto
Si suppone che le immagini originali siano tutte
di grande formato (oltre i 2 Mpixel)
05/03/2009
7
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 25
Requisiti
• Si vuole una pagina indice che consenta di
scegliere l’album da visitare
• Deve essere prevista una preview delle
immagini su una pagina leggera da caricare
• I pulsanti di navigazione devono consentire di
muoversi tra le pagine senza dover ricorrere ai
pulsanti del browser, e senza dover scorrere
tutta la lista per uscire da un album
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 26
Preparazione immagini
Creare con Irfanview una seconda serie di
immagini rimpicciolite (thumbnails)
Per la singola foto usare il comando menù →
immagine → ridimensiona e poi “salva con
nome” (aggiungere al nome un suffisso per
distinguerle dalle originali)
Es. da foto_nonna1.jpg (3000x2000) creare
foto_nonna1_small.jpg 150x100
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 27
Preparazione immagini in serie
Irfanview consente di eseguire operazioni su
gruppi di immagini
Copiare tutte le immagini in un’altra cartella,
quindi Irfanview menù → converti in serie:
• seleziona conversione in serie-rinomina…
• avanzate → ridimensiona → imposta dimens.
• percorso del nome: $N_small
• selezionata la cartella delle foto, aggiungi tutti
quindi avvia ridurrà e rinominerà tutte le foto!
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 28
Struttura
Elenco album
Album 1 Album 2 Album 3
Foto1 Foto2 Foto3 Foto4
05/03/2009
8
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 29
Pagina foto – 1
• Ha un titolo, la foto, eventualmente dei
commenti
• Come pulsanti di navigazione bisogna
prevedere almeno:
1. Indietro (eccetto per la prima foto)
2. Avanti (eccetto per l’ultima foto dell’album)
3. Torna all’indice dell’album
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 30
Pagina foto – 2
BUS
Classico autobus di Gozo, superaffollato ma molto economico
indietro torna all’indice avanti
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 31
Pagina foto – 3
<HTML>
<HEAD><TITLE>Malta: bus – pagina 2</TITLE></HEAD>
<BODY>
<H1 ALIGN=“center”>BUS</H1>
<P ALIGN=“center”><IMG SRC=“foto1.jpg”></P>
<P ALIGN=“center”>Classico autobus di Gozo</P>
<TABLE><TR>
<TD><A HREF=“pag1.html”>prec</A></TD>
<TD><A HREF=“index_album1.html”>prec</A></TD>
<TD><A HREF=“pag3.html”>prec</A></TD>
</TR></TABLE></BODY>
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 32
Indice album – 1
• Si può iniziare dalla creazione della pagina con
l’indice del primo album
• Deve avere un titolo e sotto un griglia con
l’elenco delle miniature delle foto dell’album
che collegano alle pagine con le singole foto
• Se ci sono più album ci sarà un pulsante per
tornare all’indice degli album, che è costruito
allo stesso modo
05/03/2009
9
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 33
Indice album – 2TITOLO ALBUM: MALTA
TEATRO ABITAZIONE TIPICA BUS
CHIESA VICOLO GROTTA
GOZO MARE FORTEZZA
Torna all’indice degli album
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 34
Indice album – 3
<H1>MALTA</H1>
<TABLE>
<TR>
<TD><A HREF=“pag1.html”><IMG SRC=“foto1_s.jpg”></A></TD>
<TD><A HREF=“pag2.html”><IMG SRC=“foto2_s.jpg”></A></TD>
<TD><A HREF=“pag3.html”><IMG SRC=“foto3_s.jpg”></A></TD>
</TR>
[…]
</TABLE>
<A HREF=“index_albums.html”>Torna all’indice</A>
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
Corso di
Informatica IIIng. Dario Sguassero
Risorse gratuite per il web
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 36
Moduli
In ogni sito ormai è previsto l’inserimento di
moduli per rendere il sito più interattivo:
• un form online per la raccolta dei contatti degli
utenti o dei CV (in alternativa alla email)
• un carrello della spesa o un form per la
raccolta degli ordini
e inoltre:
• un contatore di accessi o un modulo statistiche
per monitorare le visite al sito
05/03/2009
10
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 37
Risorse
Le risorse sono disponibili sottoforma di:
• programma asp o php da incorporare nel sito
(una fase di configurazione è sempre richiesta)
• modulo online (script, iframe, ecc.) da
incorporare nell’html del sito
I moduli online sono spesso gratuiti perché
richiedono l’iscrizione ad un sito e la
visualizzazione di un marchio, perciò sono una
fonte indiretta di pubblicità
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 38
Servizi di Google
A titolo esemplificativo vediamo alcuni servizi
offerti da Google:
• analytics per le statistiche di accesso al sito
• docs per i form online
• maps per la cartografia interattiva
I primi due richiedono l’iscrizione, il terzo solo
nella versione più avanzata (API di GoogleMaps)
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 39
Google Analytics – 1
Effettuata la registrazione su www.gmail.com si
accede dalla pagina www.google.com/analytics,
selezionando prima la lingua italiana
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 40
Google Analytics – 2
• Al primo utilizzo è richiesta la registrazione del
sito da monitorare
• Inserite i dati del sito e proseguite
05/03/2009
11
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 41
Google Analytics – 3
• Inserite tutti i dati richiesti e proseguite
con l’accettazione del contratto
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 42
Google Analytics – 4
• copiare il codice proposto
nell’header di ogni pagina
Dopo 24 ore saranno
disponibili i dati sugli accessi
al sito:
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 43
Google Analytics – 5
• Le statistiche presentano diversi dati utili:
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 44
Google Analytics – 1
Effettuata la registrazione su www.gmail.com si
accede dalla pagina www.google.com/analytics,
selezionando prima la lingua italiana
05/03/2009
12
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 45
Google Analytics – 6• Si può impostare la periodicità dell’invio
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 46
Google Docs – 1
Accedere dalla pagina http://docs.google.com
con le credenziali create per Gmail
Nei settings impostare la lingua italiana e il fuso
orario corretto, quindi SAVE
Per creare un modulo nel menù selezionare nuovo � modulo
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 47
Google Docs – 2
Compilato titolo e descrizione si possono
modificare le domande preimpostate cliccandoci
sopra e selezionando l’icona
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 48
Google Docs – 3
Per aggiungere una domanda
scegliere il tipo dal menù superiore
Per creare serie di domanda simili
utilizzare il pulsante “duplica”
Alla fine cliccare su “Salva” e poi Altre azioni � Incorpora
Il codice <iframe> è da copiare
all’interno del <body></body>, dove
andrà posizionato il questionario
05/03/2009
13
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 49
Google Docs – 4
Tipo di domanda
Testo Testo del paragrafo Scelta multipla
Caselle di controllo Scegli da elenco Scala (1-n)
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 50
Google Docs – 5• I risultati si potranno vedere ed esportare
come foglio di calcolo
• oppure come statistiche dal menù modulo �
riepilogo
Informatica II – D. Sguassero – a.a. 2008/09 – Facoltà di Economia – Sede di Gorizia
05/03/2009 9.45 51
Google Maps
• Per incorporare una mappa interattiva nel sito
effettuare la ricerca di un indirizzo su
http://maps.google.com quindi cliccare su
Link ed incorporare il codice <iframe>
all’interno del <body></body>
Recommended