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

Il pannello di controlloE’ 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!

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

4 commenti su “Come è stato realizzato questo sito?”

  1. Che sito epperò! Complimenti davvero! Ehm…ora inizierò a copiare script a man bassa eh
    eh… ;-)

  2. Oh! Era tutta la mattina che cercavo qualche risorsa per i Bubble Tooltips. Domani proverò ad inserirli in qualche sezione del mio sito. Sono molto contenta di aver scoperto il tuo blog…a dir la verità lo conoscevo ma non in modo approfondito. Oggi mi hai conquistata del tutto :)
    Ciao

  3. @liliansi: grazie per la fiducia :) I Bubble Tooltips che vedi in questo momento non sono quelli descritti in questo post, che è un pò vecchio… sono comunque altrettanto validi. I tooltip attivi adesso sono basati su Mootools, questa è la demo.