Gli strumenti

Per realizzare il vostro sito avete bisogno prima di tutto di un web-server, cioè di un computer sempre acceso e sempre collegato a internet dove ci siano i file che compongono il sito e dove sia installato un web-server che sappia rispondere alle richieste dall'esterno (per esempio Apache). Questo server può essere a casa vostra oppure lo si può ottenere da appositi "servizi di hosting" che possono essere sia grautiti che a pagamento. Per approfondire vedere Hosting e web server. Il mio sito, come potete vedere dall'indirizzo, è ospitato sui server di Altervista.

Un sito web è composto da tanti file di testo, scritti in un opportuno linguaggio, tipicamente HTML e i suoi derivati. Per vedere un esempio cliccate con il tasto destro del mouse su questa pagina e scegliete "Visualizza sorgente" (o roba simile). Vedrete il codice di questa pagina che viene interpretato dal vostro browser e visualizzato in maniera opportuna.

Per scrivere queste pagine vi basta quindi un editor di testo e un modo per caricare questi file sullo spazio offerto dal servizio di hosting a cui siete registrati. Prima di uploadare il contenuto sarebbe bene provarlo sul vostro PC. Questo è possibile con il solo browser, ma solo se il sito è scritto in HMTL (e derivati) e contiene al massimo del codice JavaScript. Con il tempo vi troverete a usare quasi sicuramente anche del codice PHP o simili. In questo caso avete bisogno di installare un server web e il relativo modulo PHP (es. Apache + PHP).

I linguaggi

In queste pagine parlerò di HTML5, CSS, PHP, Javascript, MySQL. HTML5 rappresenta il futuro ed è oltretutto una realtà consolidata. Serve per scrivere i contenuti del sito. Il linguaggio CSS serve a impaginare i contenuti. PHP e Javascript sono invece dei veri e propri linguaggi di programmazione per creare degli script. Guide relative a questi linguaggi possono essere trovate su HTML.IT, sul sito del W3C o in mille altri posti sul web.

Ecco un po' di riferimenti su HTML5:

Ecco un po' di riferimenti sui CSS:

Quando si lavora con i css, spesso lo stesso foglio di stile genera risultati diversi su diversi browser. Questo non è dovuto al fatto che le specifiche vengono "capite male" da uno dei due browser, bensì il problema risiede nel 90% dei casi nel foglio di stile di default.
Ogni elemento infatti ha alcune caratteristiche di default che spesso non ridefiniamo quando scriviamo il nostro foglio di stile. La cosa triste è che purtroppo non sono le stesse per tutti i browser!

Yahoo ha pubblicato un foglio di stile (da incollare prima del nostro codice css) che resetta tutte le proprietà di tutti gli elementi. Ciò comporta una fatica leggermente maggiore nello scrivere il nostro foglio di stile, ma saremo sicuri che il sito web apparirà praticamente identico su tutti i browser!
Per rendere omogenei anche i tag pre e code inserire dopo il precedente codice anche:

/* se una proprietà è preceduta da *, viene capita solo da IE */
code,pre{font-size:101%;*font-size:85%;}

Esempio banale e DOCTYPE

Esempio di HTML5 da servire come tipo MIME text/html.

<!DOCTYPE html>
<html lang="it">
 <head>
  <meta charset="UTF-8">
  <title>Esempio di documento HTML5</title>
 </head>
 <body>
   ...
 </body>
</html>

Esempio di HTML5 da servire come tipo MIME application/xhtml+xml.

<?xml version="1.0" encoding="UTF-8"?>   (opzionale)
<!DOCTYPE html>   (opzionale)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
 <head>
  <meta charset="UTF-8">   (opzionale)
  <title>Esempio di documento XHTML5</title>
 </head>
 <body>
   ...
 </body>
</html>

Il problema di XHTML con Javascript: Link

I DOCTYPE non fanno parte dei vari standard html, xhtml ecc... indicano solamente al browser come leggere il documento. Vedi Doctype su A List Apart.

(Dalle ore 00:00 del 15 settembre 2011 il sito non è più in XHTML 1.1 servito come application/xhtml+xml ma in HTML5 servito come text/html.

Content Management System (CMS)

Realizzare un sito web, soprattutto di grandi dimensioni e con molte funzionalità, è estramamente complesso se si vuole programmare tutto da zero.

A questo proposito sono nati dei software che si occupano di "creare il sito per voi" e gestire i suoi contenuti. WordPress, Drupal, Joomla, Plone, Django, ecc...

Backup di un sito web

Normalmente, quando si realizza un sito web, si modifica prima la versione locale, sul proprio PC, e solo successivamente il contenuto viene caricato sul server FTP. Nel mio caso però agisco in maniera diversa. Questo sito non è di certo un sito professionale, inoltre non mi va di appesantire il mio PC installando server Apache e moduli PHP e soprattutto mi trovo spesso ad aggiornarlo da PC diversi, magari quando sono in viaggio. Mi limito perciò ad aggiornare il mio sito direttamente, usando editor di testo che supportino il protocollo FTP, cioè permettano di modificare i file remoti come se fossero file locali (Vim, Notepad++, ecc...)

Questo modo di fare è abbastanza comodo, c'è però il problema di non avere una copia di backup del proprio sito. Per ovviare a questo inconveniente è sufficiente copiare ogni tanto, usando un client FTP e sempre lo stesso PC, l'intero sito. È chiaro però che scaricare ogni volta l'intero sito è uno spreco di banda e di tempo. Per scaricare solo le differenze tra la copia locale e quella remota (più aggiornata o al massimo uguale) serve un client FTP con il supporto per il download incrementale.

Sotto Linux wget fa al caso nostro. Il seguente script permette di scaricare il sito in una certa directory e salvare il log di wget. Le volte successive che verrà lanciato scaricherà solamente le differenze.

Per motivi di sicurrezza si consiglia sempre di inserite l'username e la password del vostro sito nel file di configurazione .wgetrc e poi cambiargli i permessi:

ftp_password = pippo
ftp_user = pluto

chmod 0600 .wgetrc

Se avete tanti siti però non potete specificare username e password e poi è una palla aver l'username e la password da una parte e lo script da un'altra. Si possono ovviamente specificare con delle opzioni nella riga di comando o direttamente nell'URL. Il problema però è che qualche malintenzionato, lanciando il comando ps potrebbe scoprire le vostre credenziali. La soluzione è semplice. Wget accetta file di input con la lista dei siti/file da scaricare. Però come dicevamo noi non vogliamo scrivere la nostra username e password su un altro file, pertanto facciamo in modo che wgetrc accetti i comandi dallo standard input, input che però sarà una parte del nostro script. Se scegliamo di specificare username e password dentro l'URL, con questo escamotage dello standard input nessuno potrà vedere le nostre credenziali.

Ecco lo script (attenti ai permessi!!!), che potete eseguire manualmente oppure, come ho fatto io, automaticamente tramite il demone cron del proprio sistema:

#!/bin/sh

# Change directory into the backup location
cd /root/website_backup

# Backs up the website incrementally using wget
wget --output-file=logfile.log --tries=5 --mirror -i - << EOF
ftp://username:password@biccari.altervista.org
EOF

# Inserts the date in the name of the logfile
mv logfile.log logfile$(date +%Y%m%d).log