Come è stato realizzato questo sito?

La risposta alla domanda del titolo potrebbe essere veloce, di due-tre frasi, breve ed indolore.
Ma visto che mi piacciono le cose complicate, mi sembra giusto mettere da parte le risposte banali e descrivere nei dettagli come ho creato questo sito.

1. Il pannello di controllo

E’ sul pannello di controllo che ho concentrato le mie attenzioni fin dai primi momenti. Volevo integrare alcune funzioni nel sito senza che restassero sempre in vista, e volevo farlo utilizzando qualche script interessante.

Quando ho sperimentato moo.fx, ho capito subito che faceva per me.

Dopo aver incluso i file giusti, per caricare la pagina con il pannello (o qualsiasi altro elemento) chiuso basta inserire nell’head:

<script type="text/javascript">

window.onload = function() {
myHeight = new fx.Height('pannello', {duration: 700});
myHeight.hide();
enableTooltips("corpo");
}

script>

Dopo questo, si richiama lo script con un semplice

onmouseover="myHeight.toggle();"

In pratica con poche righe di codice riesco a cambiare l’altezza del pannello di controllo, facendolo così sparire con un semplice mouseover sull’etichetta apposita. Secondo voi era meglio far eseguire lo script con un click? Ci ho pensato, ritengo che così sia più facile da notare, ma forse è troppo invadente e può capitare di aprire il pannello involontariamente. Ditemi voi cosa ne pensate.

2. Lo style-switcher

Lo script per cambiare foglio di stile ero intenzionato a realizzarlo in php, per evitare problemi con chi avesse javascript disabilitato. I problemi purtroppo li ho avuti io, con script che non facevano il loro dovere o non funzionavano come mi ero aspettato.
Per adesso quindi c’è un javascript molto semplice, che però si comporta egregiamente e permette anche di combinare due fogli di stile insieme.

Quando selezionate il foglio di stile per cambiare dimensione dei caratteri, in realtà lo script importa poche righe da un altro CSS e le combina con il CSS di default.

3. La piattaforma

Infine dovevo per forza di cose scegliere una piattaforma di blogging su cui appoggiarmi, e la scelta è caduta su WordPress. Le alternative erano tante, ma penso che WP offra talmente tante possibilità in più che valeva la pena utilizzarlo: è gratis, ed i plugin sono infiniti.

Tra l’altro devo ancora decidere quali plugin utilizzare, ne ho già trovati alcuni molto interessanti per aggiungere un pò di funzioni nella barra laterale.

La cosa comodissima è l’utilizzo delle pagine per sviluppare tutto il sito. In principio pensavo di realizzare su wordpress solo la parte relativa agli articoli, ma installandolo ho capito le potenzialità dello strumento ed è stato facile integrare i miei template.

Adesso ho un vero e proprio CMS per tutto il sito, soprattutto per la parte relativa ad utility e sezione musicale che prevedo di aggiornare spesso.

4. I bubble tooltips

Due parole anche sui Bubble Tooltips, realizzati da Alessandro Fulciniti, che potete trovare ben illustrati in questo articolo.

Li ho abilitati solamente nel corpo centrale del sito dopo averli personalizzati, perchè ritenevo troppo pesante averli ovunque, e si comportano egregiamente. Ho scoperto poi che esiste anche un plugin per WordPress che li abilita, ma non l’ho ancora provato.

Se siete curiosi di testarlo prima di me, lo trovate qui. Fatemi sapere!

5. Conclusioni

Sul codice xhtml potrei dilungarmi, ma preferisco evitare di farlo. La cosa importante è che tutto il sito è scritto in xhtml 1.0 Strict, ed il codice passa senza problemi la validazione del W3C.
Anzi, se per qualche motivo venissero fuori degli errori vi prego di farmelo notare. In genere se c’è qualcosa che non funziona bene è dovuto a quello che esce da WordPress, alcune volte si mangia dei tag senza apparente motivo.

Stesso discorso per i CSS 2.0, che sono validi e non corrono il rischio di venire modificati.
Avrei molto altro da dire, ma la mia idea era di descrivere giusto i punti più importanti del sito. Se qualcosa vi incuriosisce particolarmente, anche dal punto di vista grafico, contattatemi pure e chiedete tutto quello che volete. Sarò felice di rispondere!