Finalmente sono riuscito a trovare un po’ di tempo e idee per migliorare l’estetica dell’intro del mio sito, eliminando un po’ di cianfrusaglie inutili e mettendo in gioco le mie conoscenze informatiche. Come noterete ho cercato di unificare lo stile dell’intro, del Portfolio e di BlogFun in modo che sia tutto più omogeneo rispetto al passato, e soprattutto più pulito e conciso. Insomma mi sono buttato sul minimalismo: LESS IS BETTER!

L’INTRO

Mi ci sono voluti 3 giorni di coding abbastanza intenso per ideare, concretizzare e debuggare (la parte peggiore) l’animazione, ma devo dire che sono soddisfatto del risultato: semplice, sobrio ma anche creativo. Ho utilizzato le proprietà CSS3 per realizzare le palline e gli angoli smussati in quanto ritengo che sia ora di tagliare i ponti col passato e iniziare a sfruttare le tecnologie che i browser moderni ci possono offrire; per poterlo fare ho utilizzato il progetto CSS3 PIE che utilizza JavaScript per rendere compatibili i CSS3 con IE6-8. Ho però deciso di eliminare completamente il supporto a IE6 seguendo la rotta dei potenti del web (Facebook, Google, la stessa Microsoft…) in quanto rimanevano davvero troppi problemi da risolvere e, allo stato attuale (sotto il 5% a livello mondiale), non vale proprio la pena di perderci tempo.

DESIGN & FISICA

Come nel tema di BlogFun c’è una funzione speciale per chi possiede un MacBook e utilizza Chrome 9+ (prossimamente anche Firefox 4+); che permette di utilizzare l’accelerometro del dispositivo per godersi ancor di più l’interattività con il design Ho in progetto di migliorarla, quindi ammetto che non sia proprio realistica, però mi sembrava un’idea carina per stupire l’utente.

PORTFOLIO

Devo ammettere che non c’ho perso molto tempo, ho ripreso la vecchia struttura XHTML/CSS (che ha retto abbastanza bene il passare degli anni), e rifatto il tema (orribile anche per l’epoca) in modo da risultare “accettabile”; ovviamente ho in programma qualcosa di più accattivante che sfrutti JQuery e nuove tecnologie, ma si vedrà in futuro.

Era un po’ di tempo che avevo voglia di cambiare l’estetica del blog, quantomeno per evitare la sensazione “tema già visto”. Tuttavia il tempo scarseggia, così ho optato per continuare a mantere il tema base (iNove), aggiornandolo finalmente all’ultima versione, e ridisegnato totalmente l’header:

nuova versione

Il risultato mi sembra decisamente più pulito di prima, anche se mi rendo conto che il resto del tema è praticamente identico e le mie doti di grafico hanno notevoli margini di miglioramento:

vecchia versione

EASTER EGG:

Se qualcuno di voi è in possesso di un MacBook / MacBook Pro e ha installato Firefox 3.6 o superiore, potrà vedere questa piccola (spero simpatica) aggiunta:

inclinate il vostro Mac a sinistra/destra e guardare cosa succede al logo di 360Fun°!

logo rotation

Questa è la funzioncina JavaScript che ho utilizzato, tuttavia credo sia da migliorare visto che sui nuovi MacBook il sensore è montato al contrario…

function logoRotation() {
    /* -1 for MacBookPro > 5.1 */
    var mac = 1;
    window.addEventListener("MozOrientation", function(e) {
    	xVar = mac * -e.x * 30;
 
	var rotate = 'rotate(' + (xVar) + 'deg)';
	document.getElementById('caption').style.MozTransform = rotate;
    }, true);
}
logoRotation();

Per informazioni sul nuovo evento “MozOrientation” leggete qui:

http://developer.mozilla.org/en/Detecting_device_orientation.

AGGIORNAMENTO

Ecco la versione migliorata; basta cliccare sul logo e si invertirà l’input del sensore nel caso sia errato: purtroppo al momento non esiste un modo per rendere il sistema automatico…

/* LOGO ROTATION BY CICCIOKUN *\
\*     only FireFox 3.6+      */
 
//MacBook type: -1 for MacBookPro after "5.1" model
 var macType = 1;
 
 //orientation listener
 window.addEventListener("MozOrientation", function(e) {
 degrees = 60; //max inclination angle
 xVar = macType * -e.x * degrees;
 
 var rotate = 'rotate(' + (xVar) + 'deg)';
 document.getElementById('caption').style.MozTransform = rotate;
 }, true);
 
 //change macType with mouse click
 document.getElementById("caption").onclick = function() { macType = -macType; }