Nella realizzazione di un sito web, i webdesigners si trovano spesso a dover verificare che il proprio lavoro si veda bene nella maggior parte dei browser e non solo in quello in uso. Tra i più richiesti troviamo le vecchie versioni di Safari e Firefox e, soprattutto, di Internet Explorer, che può essere considerato il vero grande nemico di un designer. La sua versione 6 ancora mi fa venire i brividi al solo pensiero. Personalmente, non offro più la compatibilità con IE6, ma è comunque importante assicurarsi che il proprio sito offra un buon risultato cross-browser. Per questo motivo, oggi voglio segnalarvi una risorsa che non conoscevo e che mi è tornata utilissima negl’ultimi tempi! Sto parlando di Adobe BrowserLab.

Senza troppi giri di parole, BrowserLab è uno strumento realizzato dall’Adobe che ci permette di testare il nostro sito con un gran numero di browser in poco tempo! L’applicazione sfrutta la tecnologia Adobe Flex, è utilizzabile direttamente online, ma necessita del possesso di un Adobe ID (registrabile gratuitamente). Tra i browsers a  disposizione troviamo le versioni IE6-9, Safari 3-5, Firefox 2-4 e Chrome 8-10.

Unica pecca, se così possiamo definirla, è che, come anche altri servizi online di questo genere, BrowserLab generi un’immagine del risultato finale, quindi non è possibile verificare, ad esempio, il funzionamento di determinati script!

Di font non ce ne sono mai troppi! Come ben sapete, infatti, sono una risorsa fondamentale per qualsiasi designer o grafico. Ma la vera impresa sta nel trovare quelli giusti per il proprio progetto: un lavoraccio. Ci può venire in aiuto, però, Font Squirrel, un’ottima, e ormai affermata, risorsa che raccoglie i migliori font gratuiti utilizzabili a scopo commerciale.
Font Squirrel, inoltre, mette anche a disposizione validi generatori di codice CSS3 in grado di velocizzare il nostro lavoro.

Era da alcuni giorni che stavo cercando un’applicazione, per Mac, che mi permettesse di pubblicare articoli per il mio blog comodamente dalla scrivania. Dopo una breve fase di rodaggio, ho trovato ciò che facesse il caso mio: Blogo. Blogo, infatti, è un’ottima applicazione che permette di pubblicare articoli per le principali piattaforme di blogging come WordPress, Joomla o Drupal senza il bisogno di aprire il proprio browser e recarsi nel pannello di controllo.

L’installazione è semplice e immediata, e le funzionalità sono piuttosto basilari: quello che praticamente stavo cercando! Infatti, a differenza di altre applicazioni, Blogo consente “soltanto” di pubblicare, modificare e cancellare articoli. L‘esperienza di blogging, però, è notevolmente aumentata grazie all’intuitività e all’immediatezza di ogni singola funzione.
Peccato purtroppo per il costo che si aggira intorno a $25, forse un pò tantino, ma che sono sicuramente ben investiti per chi cerca massima comodità e semplicità nell’aggiornare il proprio blog.

Il primo è CSS Type Set, un’ottima utility per la scelta e la personalizzazione del testo che dispone anche della maggior parte delle funzioni utilizzate dai designers.

Il secondo è CSSDesk, che mette a disposizione una vera e propria scrivania di lavoro nella quale possiamo testare tutto il codice che vogliamo e averne un’istantanea preview.

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D243D), to(#4060FF))

Che, in questo caso, genera un gradiente con le tonalità del blu.

E’ comunque vastissima la documentazione sui gradienti in rete; in primis, vi consiglio quella del W3C e del centro sviluppo di Safari.
Inoltre ho anche scovato recentemente questo utile tool che permette di creare gradienti online in CSS3 con tanto di preview.

Dopo questa breve introduzione, iniziamo con la guida vera e propria. Nel nostro CSS, dichiarermo le prime righe di codice del bottone:

.bottone{
height:60px;
width:600px;
margin:10px;
cursor:pointer;
}

In questo modo specificheremo semplicemente l’altezza, la larghezza, un piccolo margine ed imposteremo come cursore la manina.
Ora iniziamo subito ad applicare il gradiente. Vi consiglio di utilizzare il generatore indicato in precedenza in modo tale da ottenere il risultato cercato nel minor tempo possibile.
E’ questo, comunque, il gradiente utilizzato da noi.

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));

Lo inseriremo nel nostro .bottone mediante il background-image:

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;

Aggiungiamo, infine, gli angoli arrotondati e una leggera ombra di sfondo.

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Ora passiamo, invece, alla formattazione del testo. Senza troppe spiegazioni (la formattazione del testo è più una questione di gusto ed occhio), aggiungeremo queste righe di codice:

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 
/* Formattazione testo */
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:20pt;
font-weight:bold;
letter-spacing:-1px;
line-height:55px;
text-align:center;
color:#fff;
text-shadow:0 -1px 0 #708e08;

Non ci resta che specificare cosa avviene al passaggio del mouse. Nel nostro caso, vi sarà un cambio di sfumatura, di colore del testo e di ombreggiatura del testo. Questa volta opteremo per una sfumatura lineare su delle tonalità chiare.

.bottone:hover{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#d7d7d7));
color:#343434;
text-shadow:0 1px 0 #fff;
}

Non ci resta che richiamare il bottone nel nostro html tramite:

<p class="bottone">Testo</p>

Ed il gioco è fatto Vi ricordo che potete vedere una demo qui, mentre scaricare il file utilizzato cliccando qui.

punypng è un servizio online gratuito che permette di comprimere il peso delle nostre immagini grazie a pochi click! La particolarità di questo servizio consiste nella quasi assoluta conservazione della qualità dell’immagine dopo il processo di compressione. Tramite l’apposito form (bisognerà avere Flash abilitato), sarà possibile inviare una o più immagini; al termine del processo di compressione, la pagina si presenterà con la lista delle immagini da noi inviate, con tanto di statistica in cui viene espressa la percentuale di KB recuperati.

punypng, come viene spiegato in questa pagina, utilizza un rigido sistema di ottimizzazione in grado di ridurre drasticamente la grandezza delle nostre immagini. Il primo passo, consiste nell’analisi del contenuto dell’immagine e nella scelta del miglior formato di compressione da usare. Automaticamente, infatti, in base ad i vari tipi di immagini inviate, punypng convertirà il formato del nostro file da GIF a PNG o da JPEGs a PNG utilizzando di volta in volta il sistema di compressione migliore.

Rimanendo ancora in tema Nokia, oggi vi parleremo dello “Scalable Vector Graphics” conosciuto come SVG.
Facciamo prima un pò di chiarezza su questo formato: SVG è una tecnologia che fa parte della grafica vettoriale e che quindi permette la gestione delle dimensioni scalabili. E’ un vero e proprio linguaggio derivato dall’XML che ha come obbiettivo quello della creazione di figure bidimensionali statiche e dinamiche. Broswers come Firefox e Opera supportano la visualizzazione di questo formato, ma spesso bisogna ricorrere a dei plug-in aggiuntivi come Adobe SVG Viewer, ma possono anche essere visualizzate grazie da editor grafici autonomi.
Lo SVG è un formato che sta riscuotendo anche un forte eco tra i themes maker dei prodotti Nokia per quanto riguarda la gestione degli sfondi. I principali editor in grado di gestire questo formato sono: Adobe Illustrator e Corel Draw anche se vi sono valide alternative open source come Sodipodi ed Inkscape.
Infine concludo segnalandovi questa piccola guida in lingua inglese sulla creazione di un’icona con Inkscape: http://www.starfishwebconsulting.co.uk/tasty_icons