Diapositiva 1
Download
Report
Transcript Diapositiva 1
Progettazione di un sito Web
Docente
Ing. Maria Mirto
Ing. Passante Marco
18/07/2015
Corso di Informatica
1/19
Cos’è un sito Web?
• Sito Web: un insieme coordinato di pagine, relative ad uno stesso
tema, che risiedono tipicamente su uno stesso server
• Esistono diversi tipi di siti Web:
completamente liberi: in cui ogni pagina è diversa dalle altre
con una struttura regolare nella presentazione delle informazioni, in cui
esistono cioè pagine con la stessa struttura e quindi riconoscibili come
una serie
dove l'informazione è piuttosto statica
dove l'informazione è altamente dinamica e quindi una preoccupazione
importante deve essere la frequenza di aggiornamento e la
manutenzione.
18/07/2015
Corso di Informatica
2/19
Siti statici vs siti dinamici
• Dal punto di vista della struttura e della tecnologia utilizzata:
siti statici
siti dinamici
• I siti web statici presentano contenuti di sola ed esclusiva lettura.
Solitamente vengono aggiornati con una bassa frequenza e sono
mantenuti da una o più persone che agiscono direttamente sul
codice della pagina (tramite appositi editor web). Si tratta
storicamente della prima generazione di siti web.
• I siti web dinamici presentano invece contenuti redatti
dinamicamente (in genere grazie al collegamento con un database)
e forniscono contenuti che possono variare in base a più fattori. I siti
web dinamici sono caratterizzati da un'alta interazione fra sito e
utente;
18/07/2015
Corso di Informatica
3/19
Tipologie di siti
• I siti web vengono poi comunemente divisi in categorie per
inquadrarne il settore di operatività o i servizi offerti:
Siti a carattere educativo, didattici
incoraggiare l'esplorazione del sito secondo un filo logico piuttosto che
lasciare la più assoluta libertà nella navigazione.
Siti a carattere informativo
È importante la natura delle informazioni che si vogliono fornire, se sono
relativamente stabili o se cambiano spesso;
E’ importante che siano aggiornate tempestivamente;
Le informazioni possono essere riconducibili a delle strutture ricorrenti. Se
l'informazione è abbastanza strutturata bisognerà allora prendere in
considerazione la possibilità di mantenere le informazioni in una base di dati
e prevedere meccanismi per la generazione automatica delle pagine.
Esempi di siti informativi:
– cataloghi
– un sito di un dipartimento universitario che pubblica la lista dei corsi offerti.
18/07/2015
Corso di Informatica
4/19
Tipologie di siti
Siti di immagine (brochurware) e personali
fornire un'immagine ad una organizzazione o ad una persona, e allora la
domanda da porsi è qual è l'immagine che si vuole comunicare.
Siti commerciali
lo scopo principale del sito è attrarre clienti e quindi bisogna progettarlo
nell'ottica di attrarre visitatori nella fascia di mercato in cui il prodotto si
colloca.
Siti che offrono servizi
ad esempio un motore di ricerca o un servizio gratuito di posta elettronica, la
struttura del sito può essere relativamente semplice ma la complessità
risiede nell'applicazione sottostante che realizza il servizio.
Portali
Siti di intrattenimento
Siti di comunità
Siti artistici ...
18/07/2015
Corso di Informatica
5/19
Analisi
• È importante capire di quale tipo di sito si tratta facendo un'analisi
prima di intraprendere il progetto.
• Avere in mente l'obiettivo per cui il sito viene costruito, e le
caratteristiche del contenuto informativo può aiutare a capire le
caratteristiche che il sito stesso deve avere e fare le scelte giuste
nella fase di realizzazione.
18/07/2015
Corso di Informatica
6/19
Caratteristiche non funzionali di un
sito Web
• Fattori di qualità
Navigabilità
Accessibilità
Usabilità
Leggibilità
Affidabilità
Manutenibilità
Sicurezza
18/07/2015
Corso di Informatica
7/19
I linguaggi
•
Il linguaggio più diffuso con cui i siti web sono costruiti è l‘HTML (Hyper Text Markup
Language) e suoi derivati.
L'HTML viene interpretato da particolari software chiamati web browser
Es: Firefox e Internet Explorer.
•
Alcuni plugin per i browser permettono la visualizzazione di contenuti animati, come
Flash, Shockwave o applet Java.
•
Alcuni contenuti possono essere generati dinamicamente sul browser dell'utente, ad
esempio tramite JavaScript o Dynamic HTML, tecnologie supportate per
impostazione predefinita da tutti i browser recenti.
•
Per la costruzione di siti web dinamici in grado di estrapolare dati da database,
inviare email, gestire informazioni, ecc., i linguaggi di scripting più diffusi sono PHP e
ASP.NET
•
Per la creazione di siti internet molti webmaster utilizzano comunemente strumenti
automatizzati, chiamati web editor, grazie ai quali redigere il codice anche senza
averne un'approfondita conoscenza.
18/07/2015
Corso di Informatica
8/19
HTML
• L’ HTML (HyperText Markup Language) è il linguaggio utilizzato dai
documenti Web.
• Grazie al loro specifico formato, i documenti presenti su Web sono
veri e propri ipertesti.
• Un ipertesto è un documento nel quale alcuni elementi (parole attive
sottolineate) rappresentano dei “legami” con altri documenti.
• La struttura viene definita interattiva in quanto è possibile
selezionare gli elementi attivi per avviare immediatamente il
collegamento al documento di interesse ad esso riferito.
18/07/2015
Corso di Informatica
9/19
HTML
• L’HTML è un linguaggio molto semplice ma nello stesso tempo
molto potente, creato per realizzare pagine ipertestuali da
pubblicare sulla rete Internet, grazie al servizio WWW (World Wide
Web).
• Un documento HTML è composto da un testo intervallato da alcuni
elementi (o tag) che ne indicano la funzione logica oppure
inseriscono dei comandi di formattazione.
• Il linguaggio HTML è caratterizzato da una serie di elementi ed
attributi che sono di riferimento quando viene esaminato il codice
delle pagine realizzate.
18/07/2015
Corso di Informatica
10/19
HTML
•
Tali elementi definiscono le due sezioni di un documento HTML:
l’intestazione <HEAD>
il corpo <BODY>
•
Definiscono anche gli elementi specifici del documento (es. titolo,
commenti,...)
ELEMENTI PRINCIPALI: definiscono i paragrafi e le intestazioni del documento,
creando la struttura principale della pagina
CARATTERISTICHE DEL TESTO: modificano il ruolo e l’aspetto estetico del
testo contenuto tra l’inizio e la fine
LISTE (Elenchi)
COLLEGAMENTI: creano i collegamenti ipertestuali e la specificazione dei
puntamenti
IMMAGINI
TABELLE: consentono di formattare i dati e di organizzare in modo complesso la
struttura della pagina
MODULI (Forms): per la creazione di questionari interattivi
18/07/2015
Corso di Informatica
11/19
HTML: Comandi principali
• Definiscono i paragrafi e le intestazioni del documento, creando la
struttura principale della pagina:
< HTML > Segnala al browser il linguaggio in cui è redatto il documento
< HEAD > Raccoglie le informazioni relative al documento
< TITLE > Assegna un titolo al documento
< BODY > Delimita il contenuto di una pagina HTML
18/07/2015
Corso di Informatica
12/19
HTML: Formattazione del testo
• Modificano il ruolo e l’aspetto estetico del testo contenuto tra l’inizio
e la fine:
< P > Inizia un nuovo paragrafo
< BR > Inserisce un ritorno a capo
< STRONG > Trasforma il testo delimitato in carattere neretto (logico)
< CITE > Inserisce una citazione rientrate nel testo
18/07/2015
Corso di Informatica
13/19
HTML: Liste di elenchi
< UL > Inizio di una lista non numerata
< OL > Inizio di una lista numerata
< LI > Indica l’inizio di una voce di lista
< MENU > Inizio di una lista di tipo a menu
18/07/2015
Corso di Informatica
14/19
HTML: Collegamenti
• Creano i collegamenti ipertestuali e la specificazione dei puntamenti
< A HREF=“URL” > indica un collegamento ad un’altra pagina. Alcuni
URL possibili sono:
http://www.esempio.it/homepage.htm
– Puntamento ad una pagina esterna (la pagina risiede su un web server esterno)
file://c:\sito\pagina.htm
– Puntamento ad una pagina interna (la pagina risiede sul web server interno)
mailto:nome.utente@provider
– Per spedire una mail al destinatario
< A HREF=“#ancora” > indica un riferimento all’interno di una stessa
pagina
18/07/2015
Corso di Informatica
15/19
HTML: Immagini
< IMG SRC=“nomefile.gif” > Inserisce l’immagine nella pagina
< IMG ALT=“testo alternativo” > Permette di visualizzare del testo
alternativo all’immagine per utenti che utilizzano un browser solo testo
< IMG ALIGN=“top/middle/bottom” > Indica l’allineamento dell’immagine
rispetto alla riga di testo (alto/centro/basso)
18/07/2015
Corso di Informatica
16/19
HTML: Tabelle
• Consentono di formattare i dati e di organizzare in modo complesso
la struttura della pagina:
< TABLE > Inserisce una tabella
< TR > Indica una nuova riga di tabella
< TD > Indica una singola cella all’interno di una riga di tabella
< CAPTION > Inserisce un titolo per la tabella
< TH > Inserisce una riga per i titoli dei campi della tabella
18/07/2015
Corso di Informatica
17/19
Figure professionali
• Attività complessa che coinvolge più persone e professionalità
il webmaster, che progetta il sito e ne è il responsabile
l'esperto di architettura dell’informazione (information architect), che è
responsabile dell'organizzazione dell'intero sito e della struttura di
navigazione
il content manager, che è responsabile della redazione del contenuto e
della struttura logica
il webdesigner, che è responsabile dell'aspetto grafico (layout)
il programmatore o sviluppatore, che è responsabile del comportamento
delle pagine
l‘esperto di webmarketing, che si occupa della promozione del sito nel
web
il responsabile SEO (search engine optimization), che si occupa del
posizionamento del sito all'interno degli indici dei motori di ricerca
il sistemista, che gestisce la rete, l‘hardware e il software di base del
web server in cui è ospitato il sito.
18/07/2015
Corso di Informatica
18/19
Struttura di un sito Web
• Home Page
Punto di ingresso nel sito
Posto migliore per inserire un menù di
collegamenti o un sommario del sito
Non soggetta a grosse variazioni
• Pagine
Differenti per lunghezza e contenuti
18/07/2015
Corso di Informatica
19/19
Accesso alle pagine web
• Le pagine di un sito web sono accessibili tramite una radice comune
(detta “nome di dominio", per esempio "www.google.it"), seguita da
una serie opzionale di "sotto cartelle" e dal nome della pagina. Il
nome completo di ogni pagina è detto "indirizzo web" o, più
tecnicamente, URI (o URL).
• Per esempio, nell'indirizzo
www.w3c.org/Consortium/Offices/role.html
www.w3c.org/ è la radice, o nome di dominio
Consortium/Offices/ sono le sottocartelle, separate dal simbolo "/"
role.html è il nome della pagina
• L‘home page di un sito è la prima pagina che si ottiene digitando il
solo nome di dominio.
18/07/2015
Corso di Informatica
20/19
Come creare un sito web
• Usufruire dei moltissimi servizi gratuiti su internet
GOOGLE SITES
WEEBLY
BLOGGER
ALTERVISTA.ORG
NETSONS
• Vantaggio
Creare pagine web con pochi clic, senza installare nulla nel proprio
computer e senza conoscere nessun linguaggio di programmazione.
• Svantaggio
Forniscono un nome di dominio di terzo livello
Ovvero, del tipo "miosito.sitospite.it"
18/07/2015
Corso di Informatica
21/19
Come creare un sito web
• Svantaggio
Forniscono un nome di dominio di terzo livello
Ovvero, del tipo "miosito.sitospite.it“
– Ad esempio, se scegli come nome del sito “informatica", su uno spazio gratuito,
l'indirizzo del sito sarà:
informatica.altervista.org, oppure
web.tiscali.it/informatica, oppure
sites.google.com/site/informatica, oppure
informatica.weebly.com oppure
informatica.blogspot.com, e così via.
leggere bene le clausole per capire i limiti della pubblicazione
Ad esempio molti servizi gratuiti chiedono che venga usato lo spazio messo
a disposizione, per fini personali e non aziendali o commerciali
18/07/2015
Corso di Informatica
22/19
Come creare un sito web
• Per ottenere un dominio di secondo livello, del tipo pcdazero.it o
cocacola.com, occorre acquistarlo.
Quanto costa un dominio? Pochissimo! Circa 10 euro all'anno.
• Acquistare solo il nome del dominio non basta per creare un sito.
Occorre uno spazio dove ospitarlo (servizio di Hosting).
Es: Netsons
• Cosa me ne faccio di un dominio senza spazio ?
E’ possibile registrare solo il nome del dominio affinchè non venga
registrato da qualcun altro. Successivamente dopo 1 mese, 1 anno o
più, potrai acquistare lo spazio.
Si potrebbe anche non acquistare lo spazio ed ospitare il sito
direttamente sul proprio computer di casa o ufficio. Ma la cosa
diventerebbe troppo complicata da gestire.
18/07/2015
Corso di Informatica
23/19
Come creare un sito web
• Si può scegliere di:
Creare direttamente online le tue pagine web.
puoi creare direttamente online le tue pagine web usando un semplice Editor
HTML
potrai usufruire di un potente strumento, che ti permette con pochi clic di
installare un CMS
Creare e salvare le tue pagine web sul tuo PC ed in seguito caricarle sul
sito online.
Puoi creare un intero sito web dal tuo PC usufruendo di programmi che non
richiedono conoscenze di programmazione
– FrontPage, Dreamweaver
Impari a conoscere i linguaggi di programmazione (HTML, CSS, PHP, etc.)
per creare "mattone su mattone", il tuo sito web
18/07/2015
Corso di Informatica
24/19
CMS
•
CMS è un acronimo, e sta per "Content management system", ovvero
"Sistema di gestione dei contenuti".
è una categoria di software che serve a organizzare e facilitare la creazione
collaborativa di siti Internet.
•
Installando un CMS sul tuo spazio web, potrai creare pagine web,
direttamente online.
È formato da un’applicazione e da un database
•
Un CMS non richiede la conoscenza di linguaggi di programmazione, ed
inoltre offre la possibilità di creare un sito web altamente professionale e
graficamente eccellente.
•
Esempi: Joomla, Magento, WordPress (per i blog), ecc…
18/07/2015
Corso di Informatica
25/19