Guida alla realizzazione di questo sito web

Gli inizi

Ho iniziato nel 2002 scrivendo le pagine con Microsoft Word 2000 per poi passare a Microsoft FrontPage 2000. Le prime versioni erano molto semplici (sia di contentenuti che di struttura) quindi gli strumenti Microsoft andavano piu' che bene.

Quando la complessita' della struttura del sito crebbe dovetti passare ad un'applicazione tipo Macromedia Dreamweaver che mi facilitava le cose e scriveva anche codice HTML piu' pulito (il 90% del codice HTML scritto dai programmi Microsoft e' assolutamente inutile).

Fino a quel momento la struttura del sito era basata su due frame (uno per il menu' e uno per i contenuti) e l'aspetto grafico era creato colorando tabelle e cose simili. Questo sistema non permetteva di avere una linea grafica pulita: era necessario utilizzare i CSS.


Raffinare la grafica

I Cascade Style Sheets (CSS) sono dei file di testo in cui viene definito l'aspetto fisico di ogni elemento HTML presente nella pagina. Ad esempio i link appaiono rossi e sottolineati perche' sono stati definiti in questo modo:

a:link, a:visited {
	  color: #FF0000;
	  text-decoration: underline;
	}

Imparare ad usare i CSS e' molto facile e semplifica notevolmente le cose (se voglio cambiare il colore dei link mi basta cambiarlo una volta sola) e permette di fare tante belle cose senza utilizzare tabelle o immagini che appensatiscono il layout della pagina. Esistono una marea di guide sulla scrittura dei CSS. Io mi sono affidato a:

Realizzare un sito scrivendo prima di tutto il foglio di stile significa abbandonare la possibilita' di usare Word o FrontPage che non sono assolutamente amichevoli coi fogli di stile.


Velocizzare la gestione del sito

Uno dei primi problemi logistici che si incontrano riguarda la gestione dei menu' del sito. La soluzione piu' semplice ma meno bella da vedere prevede l'utilizzo di due frame: uno per il menu' e uno per i contenuti. I primi tentativi si fanno così.

Il secondo metodo consiste nell'utilizzare i template messi a disposizione dai programmi evoluti tipo il Dreamweaver: il template, unico per tutto il sito, contiene il menu' e viene applicato a tutte le pagine scritte con il Dreamweaver.

Il terzo metodo, molto piu' figo, prevede la costruzione dinamica delle pagine attraverso l'utilizzo del linguaggio PHP. Per costruire un sito in PHP e' necessario che il server sia in grado di interpretare il PHP.

Scrivere un sito in PHP significa non poter usare gli editor WYSIWYG (tipo Dreamweaver) poiche' non sono in grado di interpretarlo. D'ora in avanti è necessario scrivere direttamente il codice HTML e il codice PHP con un editor di testo piu o meno avanzato (io uso BlueFish su Linux) e testare le pagine direttamente sul server che può essere anche creato in locale sul proprio computer installando un server.

Esistono una marea di siti sul php, tra i quali segnalo:

Nel mio caso, ogni pagina del sito contiene due script PHP: il primo include la testata del sito e il secondo include il fondo della pagina. La struttura di una pagina tipo sara':

<?php
   include 
("testata.php");
?>

   CONTENUTO DELLA PAGINA SCRITTO IN CODICE HTML

<?php
   include 
("fondo.php");
?>

Il file testata.php contiene l'apertura del tag <html>, i metatag compresi tra i tag <header> e </header> e l'apertura del tag <body>. Nel mio caso, dopo al tag <body> sono presenti le parti comuni a piu' pagine quali il banner che porta il mio nome e il menu' per la navigazione nel sito.

Il file fondo.php contiene la chiusura dei tag <\body> e <\html>. Nel mio caso, prima della chiusura dei tag e' presente il menu' che chiude ogni pagina del sito.


Blog (ovvero la prima pagina che vedi quando entri in questo sito)

Il blog e' l'ultima cosa aggiunta a questo sito. Mi serve piu' che altro per aggiungere in modo rapido novita' e notizie varie. Il blog e' realizzato sulla piattaforma di Google chiamata Blogger e per questo l'indirizzo e' urbo83.blogspot.com.

Dal sito www.urbo.altervista.org si viene immediatamente reindirizzati sul blog perche' la pagine index.php del mio sito ha questo contenuto:

<?php
   header 
("Location: http://www.urbo83.blogspot.com");
   exit;
?>

Ho creato il template (l'aspetto fisico) del blog in modo da essere identico al resto del sito depositato su altervista.