Beh, wow
http://www.asual.com/swfaddress/
Eeeeee… troppa roba, troppa roba.
Flash indicizzato, con le url separate, e così ajax.
Ecchedè, natale?
Si ringrazia quel bell’uomo di Tommaso “Fugee” Bagassi per labbomba.
Posts categorized “open source”.
Una tecnica semplice ed efficace: transparent png skinning
Stavo guardando qualche giorno fa un sito che aveva come background i ben noti raggi “alla illustrator”, con un gradiente di fondo che variava contestualmente alla zona di sito visitata. Un’idea non originale, ma sicuramente di buon esito, se non fosse stato per il fatto che… ogni “parte” del sito pesava 150k di solo background.
In questo periodo, forte del mio smartphone, mi capita di navigare tramite il cellulare: un peso di 300k di background per due sole pagine è assolutamente fuori luogo, nel caso non ci sia un’opzione wap.
…la cosa bella è che, navigando il sito, avevo pensato che il programmatore del medesimo avesse avuto un’idea geniale, semplice ed elegante. Esaminando poi nel particolare, in realtà, non la aveva avuta: i jpggoni erano stati la soluzione, ma a questo punto, l’idea era “mia”.
L’idea è fondamentalmente molto semplice, e potete verificarla cliccando qui (vogliate perdonarmi se i css ed i contenuti sono per ora terribilmente grossolani; poi migliorerò le pagine, in futuro). Oltre ad un eventuale colore, o immagine di sfondo, sovrapponiamo a questa un unico png trasparente, in modo da creare variazioni contestuali di colore di sfondo in maniera leggera e facilmente controllabile via codice.
Pensate per un attimo alla grafica come se fossero dei layers di photoshop.
// inizializziamo la pagina. Qui può esserci un colore di sfondo o un gradiente per così dire “nativo”
<body>
// apriamo un div chiamato “wrapper” che “copre” tutta la pagina, sovrapponendosi di fatto al “body”. In tale modo, avremo creato una specie di “layer” soprastante, dove inseriremo un png trasparente.
<div id=”wrapper”>
// sopra questi due posizioneremo i contenuti
<div id=”inside”>
Contenuto
</div>
</div>
</body
Il primo livello, il <body>, è di fatto con un colore fisso, o con un gradiente da 1kb o giù di lì.
Il secondo livello è un div che occupa tutto lo schermo. Su questo div noi andiamo ad inserire come background un png trasparente (png 32 in questo caso). Esaminando i css vediamo che
su firefox/mozilla/gecko basta inserire:
background: url(esperimento.png) no-repeat center top;
mentre per renderlo compatibile con IE dobbiamo aggiungere:
* background: none;
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’esperimento.png’, sizingMethod=’fixed’);
(Nota bene: questo è solo uno dei possibili metodi per rendere compatibile i png con IE. E’ un pò fatto di “forza bruta”, ma di fatto funzionare funziona).
Il terzo livello, interno, limitato e paddato direttamente dal soprastante wrapper, sarà invece il luogo dove il cms, o la pagina, carica i contenuti. Sarà sufficiente dare a questo un bgcolor per avere come risultato un terzo layer adatto ad ospitare i contenuti del sito.
I vantaggi di questa tecnica sono molteplici:
- è possibile cambiare il colore del background in maniera contestuale e semplice; basta aggiungere un piccolo script css per modificare il body, all’interno dei contenuti (lo so, non è molto elegante, nda) o del template per avere come risultato una modifica dell’aspetto generale della pagina.
- diminuisce enormemente il peso della grafica del sito, e permette di fare effetti molto belli con un minimo di gusto.
- permette, tramite ajax o semplice javascript, di rendere visibili ed invisibili eventuali livelli. Anche qui, lascio le possibli implicazioni a programmatori più abili di me.
- extra tamarranza, come da idea di Pelòdia: basta un semplice scriptino come il seguente
<style type=”text/css”>
<!–
#wrapper {background-color: <?php
$color = array(‘#cc3300′, ‘#666666′, ‘#000000′, ‘#00CC00′, ‘#0000CC’);
$cur = rand(0, 4);
echo $color[$cur];
?>;}
//–>
</style>
per fare il fondale di ogni pagina differente, e casuale. Un pò forte tuttavia per la retina dei propri visitatori.
Mi riservo di perfezionare ancora questa tecnica: intanto il dado è tratto. Sicuramente con ajax potrebbe essere fatto eventualmente in tempo reale, ma questo sarebbe skinning non contestuale, meno interessante a mio avviso a fronte di una maggiore chiarezza ed usabilità del sito stesso.
(Ringrazio per il loro aiuto Oliver Georgi, Michele Buresti, Fabio Dreosso, Tommaso Bagassi, Andrea “Pelo” Lodi)
Che poi ho capito
perchè stamattina mi ero alzato arrabbiato, alle sette. Mi capita, occasionalmente, di svegliarmi arrabbiato, ma in genere ho una ragione: questo cliente irrequieto, quella scadenza da finire, o cose più venali e terrene. Invece la ragione per cui ero infuriato era ben altra: perchè la mia “vacanza” ad Arezzo era finita. Un viaggio di 500km andata ed altrettanti al ritorno, con amici (la cantautrice FR Luzzi, Ricardo Fernandes e al ritorno Robin), pressato all’interno della mia Saponetta™ tra code inimmaginabili a Mestre e Firenze, pioggia sull’appennino, incidenti, deviazioni stradali, ed un generale sbattimento di trasporti per chi come me è come una via di mezzo tra Nero Wolfe e Ironside (immobile, nda). La “scusa”, ammesso ne avessi bisogno, per andare ad Arezzo è stato il Copyleft Festival 2008 organizzato – tra gli altri – dal bel Marco Gallorini. Un festival molto bello e molto ben riuscito, funestato da un maltempo che in confronto Osoppo pareva Copacabana, e che nel vicino – e concomitante – festival Circù ha fatto annullare un concerto di Tonino Carotone con gli Arpioni, concerto che mi sarei visto molto volentieri nonostante la stanchezza. Un’altro motivo di indubitabile piacere è stato rivedere più o meno tutto lo staff di Italia Wave, tra cui il boss Mauro Valenti, gli ineffabili ragazzi dello staff web (Pelòdia “il molto bello”, Robin, Kris, Nicola), Silvia Poledrini, il mitico Akira Rondoni, Annalisa, ma anche Daniele Caluri e Emiliano “IR” Pagani dello staff del vernacoliere. Sono stato preso da un terribile attacco di “back in the days”, mitigato da una quantità di bellezze locali che addolcivano il mio sguardo e da una quantità spropositata di cibo che ora non mi fa passare per le porte: ho combattuto aspramente per finire una fiorentina da un chilo, buona come non mi succedeva dalla picanha brasiliana. Eroicamente, vinsi, ma se avessi potuto dare la mano alla bistecca in segno di imperitura stima verso l’avversario, l’avrei fatto. Michele Buresti, il mio omologo di Italia Wave, per giunta, mi ha ospitato nella sua splendida casa tra i colli dell’aretino: un paesaggio da far struggere il cuore, in mezzo alla campagna. Ci credo che stamattina ero incazzato.
Google chrome
Anche i sassi lo sanno: è uscito Google Chrome.
Le opinioni sono controverse. Il look è bello, molto futuristico. Il built-in code inspector è decisamente un più. Qualcuno si lagna che non ha un popup blocker integrato. Beh, è una beta.
Quello che mi chiedo è se ruberà fette di mercato a Firefox, essendo un browser per “gente che ne sa” (almeno allo stato attuale delle cose) piuttosto che a IE. E temo l’avvento di IE8 Beta un pò come il Ragnarok.