Informatica II –D. Sguassero–a.a.2008/09 –Facoltà di Economia … · 2012-08-15 ·...

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


Corso di


Creare un sito web


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.


Corso di


Creazione di un sito

05/03/2009

2


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)


05/03/2009 9.45 6

Posizione menù

• Posizione e voci del menù: solo in alto, a

fianco oppure su più lati


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


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


Corso di


Larghezza tabelle


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


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


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


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%


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


Corso di


Esempio 1: piccolo sito aziendale


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


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


05/03/2009 9.45 18

Struttura sito

Homepage

Prodotti Contatti

Servizi


05/03/2009 9.45 19

Struttura pagina

• Utilizzare uno schema di questo tipo

menù

fototesto

menù menù menù menù


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


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…”


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!


Corso di


Esempio 2: photogallery


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


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


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


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!


05/03/2009 9.45 28

Struttura

Elenco album

Album 1 Album 2 Album 3

Foto1 Foto2 Foto3 Foto4

05/03/2009

8


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


05/03/2009 9.45 30

Pagina foto – 2

BUS

Classico autobus di Gozo, superaffollato ma molto economico

indietro torna all’indice avanti


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>


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


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


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>



</TR>

[…]

</TABLE>

<A HREF=“index_albums.html”>Torna all’indice</A>


Corso di


Risorse gratuite per il web


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


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à


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)


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


05/03/2009 9.45 40


• Al primo utilizzo è richiesta la registrazione del

sito da monitorare

• Inserite i dati del sito e proseguite

05/03/2009

11


05/03/2009 9.45 41


• Inserite tutti i dati richiesti e proseguite

con l’accettazione del contratto


05/03/2009 9.45 42


• copiare il codice proposto

nell’header di ogni pagina

Dopo 24 ore saranno

disponibili i dati sugli accessi

al sito:


05/03/2009 9.45 43


• Le statistiche presentano diversi dati utili:


05/03/2009 9.45 44


Effettuata la registrazione su www.gmail.com si

accede dalla pagina www.google.com/analytics,

selezionando prima la lingua italiana

05/03/2009

12


05/03/2009 9.45 45

Google Analytics – 6• Si può impostare la periodicità dell’invio


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


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


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


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)


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


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>

Informatica II –D. Sguassero–a.a.2008/09 –Facoltà di Economia … · 2012-08-15 ·...

Documents

Transcript of Informatica II –D. Sguassero–a.a.2008/09 –Facoltà di Economia … · 2012-08-15 ·...