Posts categorized “Design”.

Considerazioni molto interessanti

Dategli un’occhiata..

http://www.ideawebitalia.it/usabilita-web/857/

Perchè tutti sanno fare siti, no?

Più vero del vero. Grazie a Railster per la segnalazione.

Cor Veleno

Che capiamoci, per intenderci con la mia scala di valori,  è come se un giorno ti chiama Superman o Batman e ti dice “oh mi fai un sito?”.

Che io sia un fan dei Corve è cosa provata. Che in altri frangenti abbia indicato Radio Bomboclat come uno dei miei dischi hip hop di sempre è dichiarato.
Che poi la vita me li abbia fatti conoscere ed incrociare più volte è curioso: ad un concerto dei Cor Veleno a monfalcone ho conosciuto i Carnicats, nel 2005. Nel 2008 li ho chiamati a suonare al Far East, con in apertura concerto, guarda un pò,  proprio i Carnicats.
Le nostre strade si sono quindi riincrociate recentemente, per ragioni musicali, e una di quelle cose “te la butto lì” è diventato un sito fatto talmente in velocità che in confronto Taz il diavolo della Tasmania pareva un ghiacciaio. Sia chiaro, “velocemente” in questo caso non è sinonimo di “male”. E’ sinonimo solo di “presto”.
Il sito, www.corveleno.com,  nasce dalla dichiarata necessità di disincagliarsi, nell’imminente uscita del nuovo disco, dalla presenza di un sito “formale”,  slegato dalla realtà dei Social Network. Fatto con una versione piuttosto elaborata di Wordpress,  il sito utilizza una serie di tecnologie  per passare avanti e indietro informazioni tra il social (facebook, flickr, friendfeed, twitter)ed il sito stesso, popolandosi e popolando a seconda dell’immissione dei contenuti. Non più il “sito vetrina” (peraltro manca ancora molto materiale) ma un piccolo buchino nel muro attraverso il quale sbirciare la vita vera, reale e non mediata di uno dei più famosi gruppi rap italiani.

Pulizie di primavera

Ho approfittato della pioggia torrenziale di questo splendido weekend per dare una botta al mio portfolio; ora è (a mio avviso) più attraente, pulito e comprensibile.
Mancano ancora un pò di cose, ma dai, va meglio.
Bene che ho tolto il link al sito fatto nel 1511 per la battaglia di Marignano.

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.

Pare che sia vero…

…ovvero “SCONFIGGI CON JAVASCRIPT LE FALLE DEI CSS DI INTERNET EXPLORER”.
Cosa??
COOOOME?
Far funzionare i css come si deve su IE senza fare sessantanove fogli di stile?
Migliaja di euro di tavor risparmiati?

Ebbene sì.
http://dean.edwards.name/IE7/
Enjoy, babes… :)

Due nuovi lavori

Due siti nuovi pubblicati, uno fatto molto rapidamente, l’altro ancora in beta.

Feruglio Engineering è il sito di una ditta tecnologicamente all’avanguardia nel mio stesso comune di Tavagnacco. Il sito è carino, benchè non ancora completo 100% e finito 100%, ma siccome era tanto che era in standby abbiamo preferito vararlo, in attesa di ulteriori miglioramenti.

Madrac.com è il sito del mio proprio gruppo, i Madrac. Il sito è un wordpress modificato “overnight”. Sono particolarmente orgoglioso del footer a fondo pagina. 

E si va avanti.. :)

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)

Arbe Garbe

Gli Arbe Garbe sono uno dei più famosi gruppi friulani di sempre.
Un mix esplosivo di folk, punk, energia e vino rosso.
Gli Arbe Garbe avevano un primo sito, fatto dal sottoscritto, che aveva usato una foto panoramica della loro sala prove come interfaccia.
Ora è stato rifatto, e della grafica si è occupata Cecilia Ibanez.
Non è a css, e cenere sul capo per me, ma vista la sua complessità e visto che - per problemi contingenti alla mia ed altrui salute - i tempi si erano allungati smodatamente, bene così.
www.arbegarbe.com, that is.

In un lontano, difficile futuro

Internet Explorer potrebbe funzionare, e renderizzare correttamente testi, css, grandezze, min-heights, paddings, margins e Dio sa cos’altro.
L’ottimo Fopulu nel frattempo mi indica questo strumento di sopravvivenza.

Potrebbe, eh. Forse. Un giorno.
Potrebbe.