Costruire un Sito Web

Costruire un Sito Web
1a Lezione: Martedì 30 Gennaio Introduzione
In questa lezione




Che cos'è un sito internet?
Spazio web (gratuito e pagamento):
domini
Programmi necessari
Le prossime lezioni
Per iniziare


La realizzazione di un sito Internet è da considerarsi
una vera e propria opera di costruzione, dovremo
avere ben chiaro sin dall’inizio cosa vogliamo ottenere
con il nostro sito e come ottenerlo
Il processo può essere suddiviso in quattro fasi:





Progettazione
Costruzione
Test
Pubblicazione
Esiste una fase successiva: la manutenzione del sito
Cosa e a chi?


Dobbiamo chiarire a noi stessi quali
sono le motivazioni che ci spingono a
creare un sito;
dobbiamo porci queste due domande:


Cosa voglio comunicare?
A chi lo voglio comunicare?
A chi è rivolto il sito?



Concentriamoci sulla seconda domanda
Si nota che i principianti sono molto
attenti alla grafica mentre i tecnici
amano il testo puro
Dovremmo trovare un giusto
compromesso tra una grafica
accattivante, e la necessità di avere un
sito rapido e funzionale
Perché avere un sito web?



Se abbiamo motivazioni valide per
comunicare qualcosa a qualcuno, la “World
Wide Web”, “www”, ossia la rete di
connessione mondiale, è un valido strumento
per attuare questa idea
Fino a pochi anni fa, chiunque desiderasse
comunicare con un grande numero di persone
incontrava molti problemi e doveva prevedere
spese più o meno grandi
Oggi, con Internet, la stessa operazione è
diventata semplice, gratuita e anche
divertente
Cos’è Internet?





Internet rappresenta la connessione di milioni di
computer che si scambiano dati fra loro utilizzando
un linguaggio comune
All’inizio, solo scienziati ed enti di stato, potevano
utilizzare computer interconnessi a distanza
Le reti erano militari o, comunque private, e
necessitavano l’inserimento di complicati comandi e
codici per poter trasmettere anche una semplice
lettera da un punto all’altro del mondo
La differenza tra computer e sistemi operativi
complicava le cose
La creazione di un linguaggio comune chiamato
HTML, ha risolto il problema
Che cos'è un sito internet?





Un sito web o sito internet (spesso abbreviato in sito) è un
insieme di pagine web, ovvero una struttura ipertestuale di
documenti accessibili con un browser tramite World Wide Web
su rete Internet
Una pagina web è una pagina del World Wide Web, di solito nel
formato HTML (l'estensione del file è htm o html) con
collegamenti ipertestuali che abilitano la navigazione da una
pagina o una sezione all'altra
L'ipertesto è un insieme di testi o pagine leggibili con l'ausilio di
un'interfaccia elettronica, in maniera non sequenziale, per
tramite di particolari parole chiamate collegamenti ipertestuali
(hyperlink o rimandi)
Un web browser è un programma in grado di interpretare il
codice HTML e visualizzarlo in forma di ipertesto
L'HTML è il codice col quale la maggioranza delle pagine web
nel mondo sono composte: il web browser consente perciò la
navigazione nel web.
HTML e Browser



L'HTML è il linguaggio con cui potete indicare come i vari
elementi vanno disposti in una pagina Web.
Un documento html non è nient'altro infatti che un file di testo
con delle indicazioni sul colore delle scritte, sulla posizione delle
immagini all'interno della pagina, su come far scorrere il testo, e
altre cose di questo genere.
Il Browser è il programma che usate quando navigate nel Web
e svolge principalmente due compiti:


scarica i vari files che si trovano su un computer remoto (il server)
e che fanno riferimento a un certo indirizzo
legge i documenti scritti in html, e a seconda delle indicazioni ivi
contenute, visualizza la pagina in un modo, piuttosto che in un
altro; inoltre i vari files associati a quel documento (ad esempio le
immagini, o i filmati in flash) vengono disposti secondo le
indicazioni del codice html
HTML e Browser (continua)






Oltre ad Internet Explorer, il browser più diffuso, esistono altri
browser
Lo "storico" Netscape Navigator, con cui la Microsoft ha
ingaggiato una vera e propria guerra
Il browser Mozilla, che nasce da Netscape
Una parte di utenti (si tratta sempre di una minoranza) utilizza
poi Opera, un browser norvegese celebre per la sua velocità di
visualizzazione delle pagine.
Per ciascuno di essi esistono poi differenti versioni a seconda del
sistema operativo (Windows, Mac OS, Linux, o altri).
E’ importante sin dall'inizio acquisire una mentalità multibrowser, perché il mestiere del webmaster non consiste tanto
nel conoscere nei minimi dettagli il codice HTML, quanto
piuttosto nel sapere come il codice HTML verrà visualizzato sul
computer dell'utente: infatti uno dei lavori più difficili è quello di
riuscire a far vedere correttamente il proprio sito con i browser
e le piattaforme più svariate.
Dov’è l’HTML?

In qualsiasi momento è possibile
visualizzare il codice HTML delle
pagine che stiamo visitando. Con
Internet Explorer:


Visualizza > HTML
Con Mozilla :

Visualizza > Codice Sorgente
La struttura


Ora che abbiamo chiarito cosa vogliamo
ottenere da Internet, inizieremo a
strutturare il nostro sito
Con struttura possiamo intendere due
fondamentali architetture:


La struttura del sito
La struttura delle pagine
La struttura del sito


La struttura del sito comporta la disposizione
dei vari files che costituiranno il sito;
per rendere il nostro lavoro ordinato e
facilmente consultabile sia durante la
realizzazione che durante la manutenzione in
futuro, conviene dividere le pagine dalle
immagini, i filmati ecc.
La struttura delle pagine



La struttura della pagina, invece, è
caratterizzata dalla formattazione del testo e
dagli elementi grafici in essa inseriti
In particolare, la grafica, per molti utenti di
Internet è fondamentale
Nonostante sia penalizzante per la
navigazione, immagini e filmati sono più
pesanti da scaricare rispetto al testo, un sito
ben strutturato graficamente, aiuta la sua
comprensione e rende il sito più caratteristico
e gradevole
Grafica e web




Ci affideremo quindi al nostro buon gusto ed alla dimestichezza
che abbiamo con i vari programmi di grafica e fotoritocco che,
da diverso tempo hanno tutti integrato degli appositi comandi
per ottimizzare le immagini da utilizzare sul web, o addirittura,
creano addirittura delle pagine mantenendo il layout
dell’immagine originale
Fra i programmi di fotoritocco più utilizzati troviamo Photoshop
di Adobe che include Image Ready, applicazione apposita per
l’ottimizzazione delle immagini di Photoshop per il web
Oppure Fireworks di Macromedia, che oltre ad integrarsi
perfettamente con il web editor Dreamweaver, è diventato un
must per la progettazione e creazione di grafica per il web
Inoltre esistono programmi come Freehand o CorelDraw che
servono a disegnare componenti grafici quali strutture, pulsanti,
icone, sfondi, ecc.
Le regole di base per costruire
un sito





Abbiamo ora le idee più chiare di ciò che dovremo
fare per costruire un sito attraente e funzionale
Oltre a possedere un buon occhio, un webmaster
deve conoscere gli aspetti prettamente teorici che
rendono il sito facilmente navigabile
Anche nell’ambito della creazione dei siti, esiste il
detto “prevenire è meglio che curare”
Elenchiamo quindi una serie di consigli fondamentali
per evitare di creare pagine web non funzionali o non
funzionanti
Le parole d’ordine per chi lavora a contatto con la
Rete sono compatibilità e velocità di consultazione
Le regole di base per costruire
un sito - continua




Non tutti gli utenti del sito, avranno la nostra
risoluzione dello schermo, quindi per evitare di
utilizzare pagine che devono essere
visualizzate ad una risoluzione di 1280 x 1024
Durante la navigazione può risultare seccante
dover sempre utilizzare le barre di scorrimento
per visualizzare il contenuto delle pagine
E’ quindi consigliabile concentrare il contenuto
delle nostre pagine in brevi e chiare frasi
Dividere su più pagine argomenti troppo
lunghi
Le regole di base per costruire
un sito - continua

E’ consigliato vivamente, di utilizzare caratteri
standard (Times New Roman, Arial, ecc.), cioè quelli
predefiniti dai diversi sistemi operativi, in quanto font
più particolari, nonostante creino effetti suggestivi,
vengono visualizzati con il font disponibile sul sistema
dell’utente, visualizzando la pagina diversamente da
come è stata progettata
Le regole di base per costruire
un sito - continua


Nonostante l’avvento delle nuove tecnologie,
tipo ADSL, porti le velocità di connessione, ad
essere sempre più rapide, conviene sempre
limitare la grandezza dei files che
compongono il nostro sito
Di conseguenza, dividere concettualmente il
sito in tre categorie:



La parte informativa
La parte di servizio
La parte dinamica
Le regole di base per costruire
un sito - continua


Cerchiamo inoltre, di rendere il sito chiaro e
facilmente navigabile, perché gli utenti di Internet
hanno a disposizione l’intera rete e poco tempo e
voglia di rimanere davanti a una pagina che richiede
20 o più minuti per caricare un’immagine o un’icona
 consideriamo questi utenti persi
Quindi, è consigliato poter offrire all’utente la
possibilità di trovare con un solo clic ciò che sta
cercando attraverso l’utilizzo di menu o barre di
navigazione

Inoltre, cercare di utilizzare immagini ed una
formattazione del testo chiara e coerente con il
messaggio che il sito vuole comunicare
Le regole di base per costruire
un sito - continua


Buon gusto e rispetto nei confronti della
comunità di Internet, aiutano a ottenere
comprensione anche in caso di errori e
distrazioni od errori
Cercate di ottenere un feedback da parte
dell’utente, inserendo in ogni pagina il
collegamento all’indirizzo di posta elettronica
per ricevere commenti consigli e impressioni
varie
Quale software utilizzare?




Come avviene la creazione delle pagine web?
In teoria è sufficiente possedere un computer
e un editor di testi (Blocco Note)
Anche se può sembrare strano, il blocco note
di Windows è più che sufficiente per creare
siti Internet rispettabili
Questo comporta un’approfondita conoscenza
del linguaggio HTML, che non è una
competenza di acquisizione così immediata
Ma oltre al blocco note?



Fortunatamente, esistono software che
aiutano il webmaster a creare pagine senza
dover scrivere tutto il codice manualmente
Durante questo corso, utilizzeremo
Dreamweaver, di Macromedia, che può essere
considerato il miglior strumento che un
webmaster possa utilizzare per la creazione di
siti sia statici che dinamici
Dreamweaver non è l’unico software per
costruire e gestire siti: il diretto concorrente si
chiama FrontPage di Microsoft e fa parte della
suite Office
Allora perché serve imparare
l’HTML?

Nonostante esista una vasta scelta di
software che aiutano nella creazione di
pagine web in modo molto intuitivo, è
consigliabile vivamente l’uso e lo studio
del codice HTML, necessario per poter
ottenere una maggiore padronanza del
nostro sito
Spazio web (gratuito e
pagamento): domini



Un sito internet, per essere visibile da tutti, deve essere
presente su un computer (web server) continuamente reperibile
su Internet, in grado di distribuire i contenuti di un sito a chi ne
faccia richiesta nel web
Un web server è un programma (e, per estensione, il computer)
che si occupa di fornire, su richiesta del browser una pagina
web
Due possibilità di web server:


Se il nostro computer è continuamente collegato ad Internet
possiamo utilizzare il nostro computer per svolgere questo compito
(soluzione sconsigliata anche per via della configurazione ostica di
un programma web server)
Trasferire le pagine HTML del sito che vogliamo rendere disponibile
su Internet, dal nostro computer ad un computer ospite che offre il
servizio desiderato (cioè di web server)  SOLUZIONE
CONSIGLIATA
Web server a pagamento e
gratuiti




Esistono alcuni web server che ospitano le nostre
pagine ma a fronte di un pagamento (di solito esiguo,
intorno ai 30 euro annui)
Per fortuna esistono anche web server che ospitano
le nostre pagine gratuitamente (a volte in cambio di
un po’ di pubblicità che comparirà magicamente
all’interno del nostro sito)
Chi vuole fare un lavoro serio deve rivolgersi ad un
web server
Chi vuole divertirsi e niente di più, può
tranquillamente rivolgersi ad un web server gratuito
Cosa offre un web server?




Dello spazio su disco! Alcuni web server offrono uno
spazio limitato (10, 20, 100, 200 Mbyte) altri uno
spazio illimitato (di solito quelli a pagamento)
Bisogna considerare che lo spazio medio occupato da
una pagina HTML contenente solo testo è pari a 4-5
Kbyte
Quindi un sito Internet composto da 100 pagine
HTML di solo testo avrà una dimensione di circa 500
Kbyte!
Ovviamente la dimensione occupata dal nostro sito
Internet tende a salire se prevediamo di utilizzare
anche delle immagini, suoni, video ecc.
Web server a pagamento

Aruba.it




Dominio + SpazioWeb illimitato + 5 caselle email
= € 20.66 + IVA l'anno
Ottimo rapporto servizi/costo
Indirizzo: http://www.aruba.it
Consultingweb


Dominio + 50 MB Spazio + 10 email = € 39 + iva
annui
Indirizzo: http://www.consultingweb.it/
Web server gratuiti

Angelfire - 5 Mega di spazio gratis



Geocities - 11 Mega di spazio gratis




Vantaggi: Se il tuo sito misura meno di 200 kb, Angelfire non interferisce
sulla struttura della pagina. Altrimenti può richiedere l'inserimento di un
banner nella pagina. Dopotutto, il motivo per cui lo spazio è gratis, è che
viene pagato dagli sponsor che si fanno pubblicità sui siti più grandi ospitati.
Indirizzo: http://angelfire.lycos.com/
Svantaggi: Il servizio è conosciuto per essere abbastanza lento, ma siccome
spesso vengono apportati dei miglioramenti, fai meglio a farti un'idea
andando a visitare alcune pagine ospitate da Geocities.
Per avere l'autorizzazione ad essere ospitato, devi mettere sul tuo sito un
link per la pagina principale di Geocities; dopotutto, Geocities è sostentato
dagli sponsor che mettono le loro pubblicità sulle pagine principali.
Indirizzo: http://geocities.yahoo.com/home/
Altervista – Spazio web espandibile fino all'infinito (si parte da 100MB)



Vantaggi: Nessun elemento pubblicitario inserito forzosamente nelle pagine
che carichi
Opinione personale: IL MIGLIOR SERVER WEB GRATUITO
Indirizzo: http://home.altervista.org/site/
Programmi necessari
Programmi necessari 2
Usiamo l’FTP


Per pubblicare le pagine su uno spazio
web viene fornito l’indirizzo FTP:
vediamo come comportarci per
trasferire i files
Uno dei programmi più semplici da
utilizzare è WS_FTP, disponibile sia nella
versione gratuita che a pagamento
WS_FTP

Per copiare i files è sufficiente inserire l’indirizzo FTP
del nostro server, il nostro ID e la password
WS_FTP - continua
WS_FTP - continua

Per copiare un files, dal nostro computer al server lo si
seleziona, quindi si preme il pulsante di trasferimento
WS_FTP - continua

Dreamweaver mette a disposizione Site,
un validissimo strumento per pubblicare
le pagine in rete
WS_FTP - continua

Dreamweaver, esegue le operazioni di
connessione, e di autenticazione
WS_FTP - continua

Supponiamo di voler pubblicare il file
foto.gif sul server
WS_FTP - continua
WS_FTP - continua
WS_FTP - continua

Al termine del trasferimento, il file viene
visualizzato anche nella parte sinistra
della finestra
Prossime lezioni

2a Lezione: Martedì 6 Febbraio




che cos'è l'html?
comandi principali
Esempi
3a Lezione: Martedì 13 Febbraio


comandi html avanzati
esempi