Vi proponiamo una lista di 8 piccoli trucchi da usare se state muovendo i primi passi con i CSS, alcuni saranno sicuramente già noti, altri potranno risultarvi nuovi. In ogni caso, si tratta di suggerimenti che possono sempre rivelarsi utili in caso di dubbi.

1. Centrare verticalmente con la proprietà line-height

Croce e delizia di tutti i web designer, l’allineamento verticale con i CSS può essere risolto in maniera indolore nel caso in cui abbiamo a che fare con un DIV ad altezza fissa:

#nomediv p {height: 200px; line-height: 200px; }

Ricordate che il valore di line-height dev’essere pari al valore dell’altezza del DIV.

Leggi tutto »

Segnaliamo questo utilissimo tutorial apparso su Woork che ci mostra come realizzare un effetto di scorrimento orizzontale  al movimento del mouse. In passato effetti del genere erano realizzabili solamente in Flash, oggi la potenza del CSS e del framework Mootools ci consentono di ottenere risultati analoghi con poche righe di codice Javascript e CSS.

Per capire esattamente di cosa stiamo parlando, date un’occhiata all’esempio prodotto nel tutorial.

Gli utilizzi di una simile tecnica sono molteplici, dalla semplice presentazione orizzontale delle diverse sezioni del proprio sito alla fotogallery con scorrimento delle miniature al passaggio del mouse: l’unico limite, come sempre, è la vostra creatività.

Volete promuovere il vostro blog?
State semplicemente cercando un’informazione e volete avere la possibilità di effettuare una ricerca sui più importanti blog italiani?

Bene, allora apprezzerete sicuramente Blogger Italiani, un recente progetto che si propone di indicizzare i contenuti dei più importanti blog italiani. Il meccanismo è semplice: segnalate il vostro blog, se la redazione lo ritiene meritevole verrà inserito e il vostro feed RSS verrà scansionato ad intervalli regolari. Il risultato è che i vostri post saranno visibili sulla home page e sul feed RSS di BloggerItaliani.
I blogger, grazie al plugin sviluppato per Wordpress, potranno anche inserire la funzione di ricerca su Blogger Italiani nel proprio sito.

Oggi vogliamo segnalarvi degli stupendi set di vettoriali gratuiti in formato EPS, da utilizzare con Photoshop; vi saranno sicuramente utili se state lavorando ad un design che necessita di un tocco di originalità.
Sono scaricabili gratuitamente a questo indirizzo, mentre qui trovate un’ulteriore raccolta, con molti pacchetti non inclusi nella pagina precedente.

Visto che oggi siamo in vena di parlare di standard, segnaliamo un’interessante iniziativa che si chiama “Save the developers”, per chi non mastica l’inglese: “Salviamo gli sviluppatori”.

Quante volte avete dovuto rinunciare a degli effetti grafici particolari (non serve spingersi tanto oltre, bastano anche dei semplici menù a tendina in CSS) perchè non funzionavano con IE6? Quante giornate avete perso a cercare di sistemare il layout del vostro sito che si vede perfettamente in Explorer 7 e in Firefox?

Internet Explorer 6 è una piaga per gli sviluppatori, ed è inconcepibile che la gente si ostini ad usare un browser così vecchio, carente e insicuro.

L’iniziativa si propone di ovviare “con la forza” a questo problema: gli sviluppatori che vorranno aderire dovranno inserire nelle proprie pagine un javascript che verificherà la versione del browser in uso. Qualora venga rilevato IE6 il visitatore verrà reindirizzato verso una pagina che gli propone l’aggiornamento a IE7, Firefox, Opera o Safari.

Per chi avesse fatto della guerra a IE6 una ragione di vita, è possibile anche acquistare una T-Shirt con il logo dell’iniziativa :)

Link: Save the developers
Fonte: Geekissimo

Come ben sappiamo,  uno dei punti cardine su cui ci si deve concentrare nello sviluppo di un sito è quello della compatibilità fra browser. Tuttavia, anche per lo sviluppatore esperto può essere difficile tenere a mente i differenti comportamenti dei browser.

Web Devout ci viene in aiuto, proponendo un documento che riepiloga il supporto dei vari browser agli standard HTML, CSS, DOM, ECMA Script. I dati (supporto completo, parziale o del tutto assente) vengono visualizzati sotto forma di tabelle, per avere subito sott’occhio le differenze tra browser; è anche possibile specificare quali sono i browser dei quali si desidera verificare il supporto agli standard.
Al momento non sono ancora disponibili le informazioni per le recenti versioni di Safari e Konqueror: l’autore del documento afferma che i test per questi browser sono ancora in corso, e non sa dare un’indicazione precisa riguardo al termine dei lavori. C’è comunque la possibilità di contribuire al progetto, di suggerire correzioni o di segnalare altri browser con i quali eseguire i test.
Il documento è reperibile a questo indirizzo.

Fonte: CSSBlog

Che l’Italia sia uno dei paesi più indietro per competenza informatica e per diffusione delle nuove tecnologie è ormai cosa nota, e purtroppo il web design non fa eccezione: chiunque abbia intrapreso questa difficile strada avrà sicuramente avuto modo di confrontarsi con una diffusa ignoranza in tale ambito e col malcostume tutto italiano di prediligere il risparmio assoluto a scapito della qualità.

A tale proposito segnaliamo questo interessante articolo pubblicato su ideanextdoor.com, che offre uno spaccato un po’ triste ma assai realistico di quella che è la professione del web designer nel nostro amato stivale.

Se avete un sito/blog abbastanza trafficato e avete deciso di inserire dei banner pubblicitari, non potrete che apprezzare OpenX. Si tratta di una piattaforma open source che permette di gestire le campagne pubblicitarie, offre funzioni molto avanzate tra cui la targettizzazione delle campagne (geografica, per keyword, per lingua, ecc.), il settaggio di diverse priorità, funzioni di reporting avanzate e integrazione con sistemi di advertising di terze parti (ad es. Google Adsense).

Il download è disponibile a questo indirizzo, mentre qui è disponibile una demo del prodotto.

Tra le tendenze di design in voga negli ultimi mesi, ne è emersa una abbastanza inconsueta: quella di creare dei bordi colorati (meglio se in colore non troppo acceso rispetto allo sfondo) intorno alla pagina, come una sorta di cornice.
Il sito che ha fatto scuola in proposito è stato Hicksdesign, che ha utilizzato questo stile nel suo recente restyling e che viene infatti citato in quasi tutti i tutorial relativi a questa tecnica.

A prima vista potrebbe sembrare di facile realizzazione: la prima idea che viene in mente è quella di assegnare all’elemento body la proprietà “border”.
All’atto pratico questa soluzione si rivela inefficiente perchè, in siti con un lungo scroll verticale il bordo inferiore non viene visualizzato lungo la parte bassa dello schermo del browser, ma alla fine della pagina. Nel blog di Hicksdesign invece la cornice rimane fissa nonostante si tratti di un blog, quindi di un sito ad evidente impostazione verticale.

Vediamo quindi come implementare questa tecnica in maniera corretta.

Leggi tutto »

Avete in programma di dare una rinfrescata al vostro blog?
Bene, abbiamo deciso di offrirvi una selezione speciale di 50 tra i migliori temi gratuiti per wordpress.
Per ogni tema abbiamo inserito un’anteprima, un link alla demo (dove disponibile) e al download.
Buona lettura!

Leggi tutto »